今日、あなたは数分でウェブサ しかし、ウェブサイトがライブであることと最適化されていることには違いがあります。
なぜデザインが重要なのですか？ 人々があなたのウェブサイトについての意見を形成するのに0.05秒しかかかりません。 はい、あなたはそれを正しく読んでいます—誰かがあなたのウェブサイトによって吹き飛ばされたり撃退されたりするための50ミリ秒。 その意見のほとんどはデザインから形成されています。
ウェブサイトの設計はまたあなたの転換、信頼性に影響を与え、最終的に、作るか、またはあなたの場所の成功を壊す。 完璧なウェブサイトはありませんが、可能な限り最適化する必要があります。
ここにも考慮すべきことがあります：悪い経験の後、消費者の88％がウェブサイトに戻ることはまずありません。 その上で、最近の調査は代理店の77%が悪いウェブサイトの設計が彼らの顧客の最も重要な弱さであると言うことが分った。
: あなたのwebデザインがユーザーエクスペリエンス（UX）用に最適化されていない場合、それはあなたの成功に有害になるだろう。 それが私がこのガイドを書いた理由です。
あなたはウェブサイトのデザインの助けが必要ですか？
今日あなたのウェブサイトやブログを設計するのに役立ちます。
はじめに
多くの要因は、ウェブサイトの設計に入ります。 これらは、2021年に優先順位を付けるための十三の最も重要な要素です。 これらのベストプラクティスに従うと、サイトのパフォーマンスが大幅に向上します。
このチェックリストを使用して、勝利のデザインを持っていることを確認します
- テキストを最小化
- ショー、教えてはいけません
- 短い文を使用
- 短い段落を試してみてください
- 適合するカラースキームを選択します
- あなたのCTAをクリア
- 親しみやすいアクションを強化
- ナビゲーションを簡素化
- モバイル用にデザインを最適化
- seoの優先順位を設定
- ページの読み込み速度を監視
- a/bテスト7819>の大規模なブロックであなたのページを埋めるしないでください テキスト。
私はブログの投稿について話しているのではなく、時には深く行く必要があります（このような！). 私はあなたのwebページ（例えばホームページ、着陸のページ）述べている。 ここではテキストを最小限に抑えます。
あなたのウェブサイトの訪問者にあなた、あなたの会社、あなたのブランド、そしてあなたの製品についてすべて伝えたいと思います。 しかし、あなただけのいくつかの文章や—さらに良い—いくつかの単語でその物語を伝える方法を学ぶ必要があります。
Show,don’t tell
ビジュアルは、書かれたコンテンツを分割するのに役立つだけでなく、より深い説明を提供することもできます。 あなたが何をしているかあなたの訪問者を表示します。 彼らはより短い時間でより多くを理解するでしょう。
ハリーの製品ページは、これらの最初の二つの設計原則の両方を体現しています:
例えば、あなたのウェブサイトが人のためのかみそり、刃、剃るクリーム、および他の剃るプロダクトを販売することを言おう。
あなたはサブスクリプションビジネスモデルで動作し、毎月あなたの顧客にこれらの製品を提供しています。 あなたのカミソリのデザインは非常にハンサムです—彼らは彫刻された広葉樹で作られており、贈り物として与えるのに十分です。
あなたのホームページ上でこの詳細のすべてに入るのではなく、あなたは単に”あなたのドアに配信”のような何かを言ってテキストでこれらの製品の写真”あなたはちょうど四つの言葉で全体のあなたのメッセージを取得します。
確かに、訪問者があなたのページに深く入るほど詳細に入ることができますが、長いテキストの説明は必要ありません。
短い文章を使う
短い文章は読みやすいです。
テキストの大きな塊で訪問者を砲撃しないでください。 彼らはどこで読み始めるべきか分からず、あなたのコンテンツを消化することができません。
長い文が必要な場合は、短い文でそれに従ってください。 多様性が役立ちます。
短い段落を試してみてください
あなたの利点に段落区切りを使用してください。 それは長い段落を書いても大丈夫ですが、私はいくつかの文章に私のホームページの段落を維持するのが好きです。
無理をしないことも重要です。 あまりにも多くの良いことは、実際には悪いことです。
各段落を新しい情報で開始するので、誰かがスクロールしている場合、その段落を読む必要があるかどうかをすぐに知ることができます。
あなたのページの不必要なテキストを除去することは散乱を減らし、あなたの呼出しに行動をより重点を置く。
CTAを独自の段落で単独で目立つようにすることは、テキストの束に埋め込むよりもインパクトがあります。
この状況で非常に便利なツールは弾丸です。 段落や長文を追加する代わりに、リストを使用することを検討してください。 これらのリストでは、箇条書きを使用します。
研究は、より多くの人々が他の形式よりも箇条書きのリストを見ることを示しています。 これは、ページのスキャン性を向上させ、あなたが作りたい最も重要なポイントを強調することができるからです。
あなたの決め付ける作戦に合う色彩の配合を選びなさい
あなたがあなたのウェブサイトで作る色の選択は考えるより重要である。
訪問者は90秒未満であなたのウェブサイトを判断します。 そのほとんどは、あなたが選択した色の結果です。
あなたのウェブサイトの色彩の配合を選ぶ最もよい方法は決め付けることとある。 あなたのロゴを参照して下さい。 あなたのウェブサイトの色はあなたのブランド-イメージと合うか。
ここに例があります。 スターバックスのことを考えてみてください。
このブランド名を聞くと、あなたの頭の中にイメージがあると確信しています。 多分それはロゴ、印、または店の位置である。
その名前に色を関連付けますか？ 今、彼らのウェブサイトを見てみましょう。
それは彼らが緑色の配色で行ったことは驚くことではありません。
このデザインの選択は、彼らのロゴとブランドイメージと一致し、消費者がすでにブランドに関連付けるものを強化します。 物事の一貫性を保つことによって、混乱はありません。 あなたがこのウェブサイトを訪問し、色が黄色と赤であった場合、それは奇妙になります。 それは彼らのブランドとは何の関係もありません。
今後も補強についてより深く話します。
CTAを明確にし、明白に
Ctaを埋めてはいけません。 彼らは大きく、大胆で強力である必要があり、あなたの訪問者が次に取るべき行動としてはっきりと際立っていなければなりません。
まだ、ほとんどのウェブサイトには3秒未満で見つけることができるCTAボタンがありません。 あなたが時間がかかるグループに落ちる良いチャンスがあります。 それはあなたがなりたいカテゴリではありません。
効果的なCTAボタンなしで変換を実行することはできません。
私はビジネスのインテリアページ（あなたのブランドが何をしているのか、あなたが提供するものを説明するページ）にCTAを見ることはほとんどありません。 これは大きな設計上の欠陥です。 あなたは、訪問者が変換するためにあなたのホームページに戻って移動することを期待することはできません。
リトマスからこのCTAを見てみましょう。
このデザインがいかにシンプルかを見てください。 画面には最小限のテキストがあるので、メッセージは明確です。
その結果、CTAの「サインアップ無料」が際立っています。 実際には、リトマスも、画面上の複数の場所にそれを置きます。
あなたのCTAを置くべき場所はページごとに異なります。 たとえば、ブログの投稿にはCTAが一番上に表示されている必要があるため、読者は投稿を読んだ後にすぐに表示され、下部にも表示されます。
より深く行く：あなたのCtaを最適化したいですか？ ここでは、アクションにあなたの呼び出しを改善するための11の方法があります。
親しみのある行動を強化
あなたのメッセージが同じであれば、あなたのCTAはすべての単一のページで同じでなければなりません。
人々があなたのウェブサイトをいかに運行するか考えなさい。 特定のフローを設定しても、誰もがページに着陸して数秒で変換するわけではありません。 彼らは最初に少しのために周りを閲覧することができます。
たとえば、eコマースwebサイトがあるとします。 CTAボタンをページごとに変更しないでください。:
- ホームページ：今すぐチェックアウト
- カテゴリページ：今すぐ購入
- 商品ページ: クリックして購入する
訪問者があなたのホームページにこれらのボタンのいずれかを見て、カテゴリページに他のボタンを見て、製品ページに三つ目を見た場合、補強はありません。
代わりに、メッセージとスタイルの一貫性を保ちます。 ここに宝石類および付属品のブランドMVMTからのよい例はある。
あなたが彼らの眼鏡、時計、または宝石のページにいるかどうかは問題ではありません。 あなたは彼らの製品のために同じ”今すぐショップ”CTAを見るつもりです。
各ページはまた、彼らのウェブサイトの全体的なミニマリスト、黒と白のデザインと一致したままです。
このデザインの原則をあなたのウェブサイトにも適用してください。
CTAボタンを超えています。 アイデアは、できるだけ多くの要素を備えたこのタイプの補強を行うことです。
言語、メッセージング、およびデザインの一貫性は、あなたのブランドアイデンティティを強化し、あなたの訪問者の心に永続的な印象を残します。
ナビゲーションを簡素化
ウェブサイト訪問者があなたのサイトで探しているものを見つけることは難しいことではありません。
自分の靴に身を置く。 なぜあなたはウェブサイトを訪問していますか？ どのようにそのタスクを達成するのですか？ たぶん、あなたは何かを購入したり、より多くの情報を入手したり、提供するものを見たりしたいと思っています。 その理由が何であれ、訪問者がすぐにそれを理解できなければ、彼らは去るつもりです。
そこにはあまりにも多くの競争があります。 ユーザーに扱いにくいウェブサイトの運行を我慢する理由がない。 彼らがする必要があるのは、あなたのサイトを離れて、彼らがどこか別の場所に必要なものを見つけることだけです。
複雑なデザインでホイールを再発明しようとしないでください。 標準形式に固執する。
たとえば、ほとんどのウェブサイトでは、ナビゲーションメニューを各ページの上部に水平に配置しています。 あなたのメニューがどこか他の場所にあれば、あなたの訪問者を混同するかもしれません。
メニューのオプションが少ないほど、より良い。 そうでなければ、人々が必要なものを見つけるのはあまりにも難しいでしょう。 この概念はヒックの法則として知られています。
あなたが誰かを与えるより多くのオプションは、もはやそれが決定を下すためにそれらを取るでしょう。 そういうわけで複雑な設計および運行はあなたの換算値を押しつぶす。
これについて有名な実験があり、これはjam studyと呼ばれ、選択のパラドックスを議論しています。
実験は地元の食料品店で行われた。 消費者には、一日に24個のジャムが提示され、翌日には六つのジャムが提示されました:
- 初日の大きなディスプレイは買い物客の60％を集めましたが、それらの人々のわずか3％が購入しました。
- 二日目の六つのジャムの小さい表示は、買い物客の40％を集めましたが、それらの30％が購入しました。
選択肢を制限することにより、変換は十倍高かった。 この同じ概念はあなたのウェブサイトの運行に適用することができる。
不要なメニューオプションを排除します。 たとえば、「ホーム」ボタンを使用する代わりに、webサイトのロゴを使用してホーム画面にリンクします。
Squareのホームページをご覧ください。
デザインは超きれいです。 メニューオプションは非常に限られています。 これは訪問者が彼らの必要性に合う選択を選ぶことを容易にする。
画面には最小限のテキストがあり、CTAは明確で明白であることに気付くでしょう。
このタイプのデザインは、ウェブサイトの訪問者がナビゲートしているときに迷子になったり混乱したりすることをほぼ不可能にします。
eコマースショップなど、ウェブサイトに多くのオプションがある場合は、複雑なメニューを使用せずに検索バーを追加してナビゲーションプロセスを簡 多くのソフトウェア会社は、各機能の個々のタブを持つのではなく、機能タブに機能を配置しています。
モバイルデバイス用に設計を最適化
モバイルは、世界の大部分がインターネットにアクセスする方法です。 つまり、モバイル用に最適化されていない場合、ウェブサイトはうまく機能しません。
Hootsuiteからこのデータを見てみましょう:
検索エンジンはこれを認識し、モバイルに優しいサイトに報酬を与えます。 ここでは、ポイントホームをヒットするいくつかのより多くの統計:
- Googleは、スマートフォンの所有者の87％が少なくとも一日一回、インターネット検索を実行するために自分のデバイスを使用していることを知っています。
- すべてのGoogle検索の58％がモバイルデバイスから行われています
- 結果：Googleの最初のページの結果の70％がモバイルデバイス用に最適化されています。
モバイルSEOは、Googleでうまくランク付けするために行うことができる最も重要なことです。 マジで
あなたのウェブサイトがスマートフォンで良く見えない場合、人々は周りに固執したくないでしょう。 そう、あなたのウェブサイトの設計が移動式友好的であることを確かめなさい。
より深く行く：モバイル用にあなたのウェブサイトを最適化する方法を学びたいですか？ モバイルフレンドリーなウェブサイトへの私たちの完全なガイ
SEOに優先順位を付ける
あなたのサイトで行うすべては、SEOに戻って円を描く必要があります。
そして、あちこちにキーワードを追加するだけでは不十分です。 これは、コンテンツを改善し、その分野であなたのサイトの権限を構築するために、特定の主題を執拗にターゲットにするウェブサイト全体のシステ
たとえば、eコマースサイトのランディングページは、次のような特定のページ上の要素に焦点を当てたいと考えます:
- 使いやすさ。 あなたの訪問者が使用し、運行することはいかに容易であるか。
- ウェブサイトがモバイルデバイス上でどのように表示され、実行されるか。
- キーワード最適化。 あなたがのためにランク付けしたい単語やフレーズ。
- 内部リンク。 どの位の割りであなたのウェブサイトの他のページにつながるか。
- これは、多くの場合、webページ上の最大のテキストです。 このように、それはあなたのランディングページに重い持ち上げのほとんどを行います。
XMLサイトマップを作成します。 これはサーチエンジンのクローラーがあなたのウェブサイトの内容を分析することができるようにそれをもっと簡単にする。 サイトマップには、サイト上のページの場所、ページが最後に更新された日時、更新頻度、サイト上の他のページとの関係がボットに表示されます。
適切なサイトマップはあなたのSEOのランキングを損なうことができる重複した内容を持っていないことGoogleを示す。
あなたのサイトを設計しているとき、あまりにも、Googleでのランキングに要因あまり明白な要素のトンがあります。
すでに、ページ自体で改善できるいくつかの側面について説明しました。 しかし、他の要素は次のとおりです:
- ドメイン。 あなたのURLはあなたのgoogleのランクにかなり必然である。 主な要因には、ドメイン内のキーワード、ドメインの年齢、ドメイン拡張子（.com、.net、.govなどの高品質など）が含まれます。org対非伝統的な拡張）。
- あなたのウェブサイトは訪問者に有用でなければならない。 重要な要素には、「About Us」ページ、「Contact Us」ページ、webサイトの更新頻度、webサイトのナビゲートの簡単さ、稼働時間（webサイトがクラッシュする頻度）、SSL証明書などがあり
- これは、あなたのウェブサイトが他のウェブサイトによってリンクされている頻度を指します。 それはGoogleでよくランク付けするための重大な要因である。 重要な要素には、リンクページの数、リンクするウェブサイトの品質と権限、リンクに使用しているアンカーテキスト、およびそれらのリンクが.eduまたは.gov
あなたのページの読み込み速度を監視
私はあなたの何人かが考えていることを知っています。 ページの読み込み速度はwebデザインと何が関係していますか？ すべて。
確かに、読み込み時間はあなたのウェブサイトのホスティングプラン、サーバー、トラフィック、およびその性質のものに関連しています。 ただし、設計の選択は、読み込み時間にも影響を与える可能性があります。
サイトに要素、特に画像、動画、その他の複雑なメディアファイルを追加するたびに、読み込み時間が影響を受ける可能性があります。 そのため、HTTP要求が遅くなる可能性があります。
読み込み時間が遅いと、放棄率が高くなります。 これを無視することはできません。 あなたのページを読み込むには時間がかかりすぎる場合、それは大きな問題になるだろう。
さらに、人々の25％がロードするために四秒以上かかるウェブサイトを放棄します。 はい、四秒。 それはあなたが持っているすべてです、またはあなたはすべての100人の訪問者のうち25を失うことになります。 ほとんどの訪問者は、ページが二秒以下でロードすることを期待しています。
では、これをwebデザインにどのように適用できますか？
- 画像のファイルサイズを小さくする
- ブラウザキャッシュツールを利用する
- HTTP要求を減らす
- TTFB（最初のバイトまでの時間）を改善する
- ファイルを縮小して結合する
オンラインで利用可能なツールがたくさんあります。これらの事を達成しなさい。 たとえば、ファイルを縮小して結合するためのリソースとしてWordPress Rocketプラグインをチェックしてください。 また、GoogleのPage Speed Insightsツールを使用して、ウェブサイトでデザインを変更するたびに読み込み時間を監視するのに役立ちます。
継続的にA/Bテストを実行
それはあなたのウェブサイトのデザインに来るとき、あなたはそれを設定し、それを忘れることはできません。
先ほど言ったように、完璧なウェブサイトはありません。 あなたの設計を改善するあなたのための方法が常にある。
そのため、A/Bテストを実行する必要があります。 これらはあなたのウェブサイトに規則的な改善をし、最もよく働くものが見るために要素をテストすることを可能にし、もっと重大に、全く働いてい
あなたの場所の設計のほぼあらゆる要素はテストすることができる。 たとえば、異なるCtaを持つが、それ以外の場合は同じである二つの異なるランディングページを作成することができます。 あるランディングページが他のランディングページよりも優れている場合は、そのCTAが仕事を終わらせている可能性が高いことがわかります。
ここでは、正しい方向に始めるためのいくつかの簡単な提案があります:
- CTAボタンの位置をテストする
- CTAボタンの色をテストする
- CTAコピーをテストする
- ランディングページで使用している画像をテストする
- 画面上のテキストの文言のバリエーションをテストする
- ナビゲーションバーのサイズをテストする
非常に多くのオプションがあります、私はこれについて話して一日中過ごすことができます。 A/Bテストに精通していないか、いくつかの助けが必要な人のために、あなたはA/Bテストを開始する前に知っておく必要があるすべての私のガイ
結論
ウェブサイトのデザインが重要であると言うことは控えめな表現になります。 あなたのwebデザインの選択は、最終的にあなたのサイトが成功しているかどうかに影響します。
- みんなのホームページを改善できます。 これらの改善を支援するためのリソースとして、このリストをガイドとして使用してくださ
- 圧倒されないでください。 私はあなたがこれらの設計提案のすべてを一晩で実装する必要があると言っているわけではありませんが、どこかから始める必要があります。
- 私は薄い空気からこれらのアイデアを引き出していませんでした。 このリストのすべては、設計原則に関連する研究と統計によって裏付けられています。
覚えておいてください：すべてのウェブサイトは進行中の作業です。 あなたが仕事を入れて、常にあなたのウェブサイトを微調整するならば、あなたはあなたの競争相手とあなたの優位性を改善しようとしています。
あなたのウェブサイトが真新しいかどうか、または十年の間あったかどうかは問題ではありません。 これらは、2021年に従う必要があるwebデザインのベストプラクティスです。
あなたはウェブサイトのデザインの助けが必要ですか？
今日あなたのウェブサイトやブログを設計するのに役立ちます。
