Updated on July9,2019
あなたのウェブサイトのデザインはどれだけ重要ですか？ ユーザーがウェブサイトを信頼していない理由を説明するように求められたとき、コメントの94％はサイトのデザインに直接関連していました。 よく構築されたウェブサイトは、より良い顧客のトラフィックを生成し、改善されたユーザーインターフェイスは、増加した変換につながります。
創造性は重要ですが、あなたのウェブサイトを成長させるのに役立つデザインとユーザーエクスペリエンスに関するいくつかの基本的なルールがあ サイトを作成または再設計するときは、次の提案に注意してください。
クリーンで魅力的なWebサイトデザインで信頼を得る
デジタルデザインの世界は、シンプルさを受け入れ、添えものから離れ、基本に焦点を当てています。 ユーザーの観点からは、これはより楽しい経験のためにナビゲートするウェブサイトを容易にしました。 よりよいあなたの聴衆を従事させるためにあなたのウェブサイトにこれらの8つの設計規則を組み込みなさい。
1レイアウトをシンプルにします。
ウェブサイトのレイアウトが単純であればあるほど、より良いものになります。 それはそれが退屈でなければならないという意味ではありませんが、それは本質に焦点を当てるべきであるという意味です。 クリーンで機能的なレイアウトにより、サイトをさまざまなプラットフォームやデバイスで簡単にロード、ナビゲート、使用できます。
ハリーのウェブサイトは、最も重要な情報—彼らの製品—フロントとセンターを配置します。 それらは内容と従事することを容易にするために最低のテキストが付いている視覚資料を含んでいる。
2ナビゲーションをフォローしやすくします。
訪問者にあなたのサイトに時間を費やしてもらいたい場合は、訪問者が簡単に移動できるようにする必要があります。 ナビゲーションメニューのデザインで創造的なことをするのは魅力的かもしれませんが、シンプルさと直感的な情報アーキテクチャがより重要 彼らはあなたのサイト全体を移動するようにあなたの読者が快適に感じるのに役立ちます外観であなたのメニューの標準を作ります。
Vogueには、あなたが探しているコンテンツの種類を見つけて従事するのに役立つ説明的で著名なナビゲーションメニューがあります。
3行動への明確な呼び出しを使用します。
サイト訪問者に何をしてもらいたいのですか？ 製品を購入する？ 電子メールの時事通信のために署名しなさいか。 原因に寄付しますか？ 行動へのあなたの呼び出しについて考えてみてください。 それらをあなたのウェブサイトをスキャンする訪問者に際立たせる方法でそれらを設計しなさい。 デザインでボタンを使用している場合は、テキストが短くて直接的であることを確認してください。
世界自然保護基金は、ナビゲーションバーの横に明るいボタンを使用して、訪問者に”寄付”と”採用”を促すとともに、コンテンツ全体にわたって強力な行動
4コンテンツでは、少ない方が多くなります。
あなたの訪問者について知っているものを彼らの選択を最小にし、あなたのプロダクトに彼らの注意を集中するのに使用しなさい。 アクションを実行するテキスト要素とビジュアル要素のみを表示します。
ポケットのようなモバイルアプリのためのウェブサイトは、これで素晴らしい仕事をします。 彼らは、アプリを説明することに焦点を当て、それをインストールするための行動への強力な呼び出しが含まれています。 彼らの約セクションと彼らのブログのようなあまり重要でないコンテンツは、あまり顕著ではなく、フッターにリンクされています。
5空白を恐れないでください。
空白は、ページ上の単に空のスペースです。 それは実際に白である必要はありません—それは単にテキストや画像を含まない必要があります。 うまくいけば、それは可読性を向上させ、あなたのウェブサイトのデザインから混乱を削除することができます。 空白はまた、直接焦点と注意を助けることができます。 これは、訪問者があなたが彼らが一目で見たい正確に何を識別するのではなく、視覚的に騒々しいと混雑したレイアウトをソートすることができるよ
Googleは空白を利用する究極の例です。 それはよりきれいであることができなかった-ロゴおよび調査箱が付いているちょうど空白のページ。
6
あなたの全体のウェブサイトの設計の基礎を提供する色を選び、次に重要なボタンおよび他のインターフェイス要素のための対照的なアクセント あなたのブランドのための右のカラーパレットの選択についての詳細を学ぶことができます。
ホールフーズマーケットは、主要なブランドカラーに緑を使用しており、セカンダリオレンジの小さなポップは、注目の行動への呼びかけに目を向けています。
7魅力的で読みやすいフォントを組み込んでいます。
視覚的にバランスのとれたユニークな魅力的なタイプを使用して、あなたのウェブサイトのテキストを明確で魅力的にします。 四つのトップトレンドフォントは、ブランドンGrotesque、Museo Sans、鉄道、およびPlayfairディスプレイです。
ベルギーの子供服のウェブサイトStudio Aimeeは、清潔で読みやすいショッピング体験のためにBrandon Grotesqueを使用しています。
8
動画や画像はテキストだけよりも魅力的です—実際、動画を含むランディングページはコンバージョンを80％以上向上させることができます。 スケーラブル画像（SVG）を使用して、デスクトップとモバイルデバイスの両方で高品質のユーザーエクスペリエンスを確保します。
非営利慈善団体：水は彼らのホームページにビデオを表示し、最大の影響を得るために彼らのウェブサイトを訪問したときに最初に見るものの一つにな
使いやすいウェブサイトで訪問者をエンゲージさせる
世界で最も魅力的なウェブサイトを持つことができますが、使いにくい場合、訪問者は顧客に変 これらの7つのルールは、あなたの聴衆がスムーズなユーザーエクスペリエンスを持っていることを保証します。
1あなたのウェブサイトをモバイルに優しいものにします。
ウェブトラフィックの最大70%がモバイルデバイスから来ていることを知っていましたか？ つまり、初めてサイトを訪問した人がスマートフォンを使用している可能性が高いことを意味します。 モバイル体験が否定的であれば、あなただけの顧客を失ってしまいました。 あなたのウェブサイトをよりモバイルに優しいものにする理由と方法を学びます。
Everlaneのモバイルショッピング体験は清潔で使いやすいです。 デザインにはモジュラーコンテンツが含まれているため、応答性が高く、モバイルデバイスでもよく変換されます。 ウェブサイトはまた、あなたがウェブサイト上でより少ない経験を得ているようにあなたが感じることなく、ショッピン
2
誰かが探しているものを見つけるためにあなたのウェブサイト上でナビゲートしなければならないページが多いほど、顧客は欲求不満からあなたのサイ 実際には、平均的なウェブサイトのために、訪問者の40％が唯一のページを見た後に残します！
彼らが来たもののためにあなたの訪問者を狩りにしないでください。 ナビゲーションは、ユーザーの観点から適切に整理され、論理的である必要があります。 また、使い慣れていると感じるはずなので、ユーザーは急な学習曲線を持っていません。
株式会社チルド “私たちは何をすべきか”セクションで簡単な説明で以下にリンクされている重要なポイントで、そのウェブサイトの上部に簡単なナビゲーションバー これにより、探しているものを簡単に見つけることができます。
3行動への呼び出しを使用して、物事を見つけやすくします。
訪問者が重要なものを見つけやすくするために、サイト全体にボタンを配置できる場所を考えてみてください。 あなたがeコマースサイトであれば、”今すぐショップ”と言うボタンを持つことは、単純なナビゲーションリンクよりもはるかに多くの影響を持っています。
Squareは、ビジネスオーナーが販売を開始することを奨励する簡単な行動を呼びかけています。 彼らのCTAボタンは「Squareアカウントを開始します。”それはそれよりもはるかに簡単に取得していません。
4ユーザーに堅牢な検索機能を提供します。
訪問者があなたのサイトをどのように検索し、結果がどのように表示されるかを考えることも同様に重要です。 検索操作は、結果の整理方法とナビゲーション操作を反映する必要があります。 オートコンプリートのような機能を組み込むことは、同様にユーザーの視点から簡単に検索することができます。
Zapposにはスマート検索ツールがあり、非常に正確で、検索用語に基づいて左側のフィルタも更新されます。
5セクションヘッダーでコンテンツを分割します。
サイト上のコンテンツの多い領域を扱う場合は、ヘッダーで分割します。 それは記事や製品の説明だかどうか、ヘッダーはあなたのコンテンツ構造を与え、スキャンすることが容易になります。
WebMDは、あなたが探している情報を見つけることができるように、セクションヘッダーをたっぷり使ってコンテンツを消化可能な塊に分割する効果的な
6実在の人物のように話す。
専門用語やマーケティングを話すユーザーがあなたのウェブサイトを訪問したときに解読しなければならないほど、あなたのブランドと係合する可能性は低くなります。 友好的な、会話型調子は訪問者があなたの内容を読み、理解し、またあなたの場所を運行することができるようにもっと簡単にする。
Zipcarは、彼らののんきなブランドの声で、彼らのサービスを理解しやすく、サイトをナビゲートしやすくします。
7あなたの訪問者の行動を確認します。
あなたの訪問者があなたからのプロダクトを購入するか、時事通信を予約購読するか、またはあなたの内容を共有すれば、よい練習はそれらの行為が首尾よく行ったことを示す確認スクリーンを表示することである。 それはどちらか、それらに感謝するために、その画面を使用することを傷つけることはありません。
ウェブサイトを起動する前にテストする
ウェブサイトを起動するとき、または再起動するときに解決する必要があるねじれが常にあります。 それはあなたのサイトをテストし、それがライブになる前にフィードバックを収集するために時間がかかることが重要です。
1品質保証(QA)テストを実施する。
リソースがある場合は、品質保証チームを雇って、サイトのすべての側面をテストできます。 QAの役割のために特別に人を雇うことができない場合は、会社の内部と外部の両方の人に、立ち上げる前にウェブサイトをテストさせてください。 すべてのリンクをクリックし、すべてのフォームに必要事項を記入し、すべてのサービスを試すことができます。 基本的には、ウェブサイト上で何かすることがあれば、彼らはそれを行う必要があります。 そうすれば、起動する前にバグを修正することができます。
2サイトをライブでプッシュする前に、ユーザーからのフィードバックを収集します。
ナビゲーション、デザイン、主要なユーザーフローなどの要素に関するフィードバックを提供するために、選択したベータテスターのグループを招待します。 起動前に受け取ったすべてのフィードバックに基づいて変更を加えることはできませんが、変更の提案を念頭に置いておくことをお勧めします。
一からウェブサイトを作成する—あなたが助けるために代理店を入隊した場合でも—小さな偉業ではありません。 私たちは、魅力的なウェブサイトのデザイン（PDF）のチェックリストを作成するための便利な3つのステップを作成しましたので、あなたが行くように