コンテンツ

• ステップに
• 方法1/2：3つの基本的なルール
• 方法2/2：ガイドライン
• チップ
• 警告

優れたWebサイトを設計することは困難な作業のように思えるかもしれませんが、基本を念頭に置いている限り、プロセスは面白くて楽しいことがわかります。見た目だけではありません！人々が何度も訪れるウェブサイトをデザインするのに役立つ基本といくつかの一般的なガイドラインを紹介します。

ステップに

方法1/2：3つの基本的なルール

1. ルール1：クライアントの話を聞く。 「今すぐ探検してください」と叫ぶサイトのために、豊かな黒、洗練されたフォント、明るく芸術的な色で、「宇宙の歴史とそれ以降の歴史の中で史上最高のウェブサイト」をデザインしているかもしれません。残念ながら、クライアントは明るいピンクとオレンジの文字が入ったオレンジ色のメニューバーを望んでいました。あなたは解雇されました、そしてあなたの最高のウェブサイト-クライアントが権利を持っている-は彼らのバックアップディスクのどこかにあり、誰もそれを二度と見ることはありません。
   • クライアントのコーポレートアイデンティティを研究します。クライアントに彼らが愛するいくつかのウェブサイトを見せてもらいます。これはあなたに彼らが好きなもののアイデアを与えるだけでなく、あなたが考えていなかったかもしれないいくつかのデザインのアイデアもあなたに与えるでしょう。
   • オレンジとピンクのウェブサイトについて冗談を言っていると思ったら、このクールで洗練されたサイトを検討してください。
2. ルール＃2：あなたの聴衆と彼らが探しているものを知り、それに応じてあなたのデザインを適応させてください。人々がウェブサイトを持っている理由は、彼らが他の人々にそれらを見て欲しいからです。それは有益であるか、商業的であるか、または特定のターゲットオーディエンスを楽しませることができます。デザイナーとしてのあなたの仕事は、あなたが誰のためにデザインしているのかを知り、彼らがそこに着いたときに彼らをページに留めておくことです。
   • 「見た目が良ければ、彼らはとどまる」と思うかもしれません。しかし、これは必ずしもそうである必要はありません。不動産を例にとってみましょう。これは、すっきりとした楽しいデザインのサイトです。オープンな外観、明るい色、目立つ場所にリンクがあるモダンなワイドスクリーン形式を提供する多くの空白があります。
   • 次に、同じエリアで不動産を販売するためのこのアプローチを見てみましょう。雑然としていて非常に忙しく、色がくすんでいて、広告で覆われています。
   • 家を探している人にはどちらがうまくいくと思いますか？そうです、 家！人々が「サンタモニカの売り家」を検索するとき、彼らはサイトがどのように見えるかを気にしません。彼らは不動産業者について読んだり、街のきれいな写真を見たりしたくありません。彼らは家を見たいと思っています。
3. ルール＃3：自分の声に耳を傾ける。あなたはクライアントが何を望んでいるかを理解し、あなたの市場が何を求めているかを知っています。さあ、いよいよデザイナーの皆さんに注目しましょう！
   • 選択したグラフィックソフトウェアでテンプレートを作成します。ページの要素をさまざまなレイヤーに作成します（テンプレート全体を破壊することなく、後で微調整できるようにします）。これらの要素は次のとおりです。
     • ヘッダ。これは、サイトのすべてのページで同じ要素です。ヘッダーは、サイトのタイトルとロゴ、およびWebサイトの他の部分（About、Contactなど）へのリンクで構成されます。視覚的および実際的に、これはすべてを結び付けます。メニューバーの最初のボタンをホームページにリンクすることをお勧めします。
     • たとえば、Appleを見てみましょう。
     • ほとんどのAppleのものと同様に、彼らのホームページは非常にすっきりとした、わかりやすいデザインになっています。上部のメニューバーに注意してください。各ボタンの論理トピックと検索フィールドがあります。サイトでサポートされている場合は、常に良い考えです。次に、ボタンの1つであるiPadのランディングページを見て、いくつかの要素を確認しましょう。
     • メニューバーは、iPadボタンを暗くするだけで変わります。
     • ランディングページの件名は大きな黒い文字で表示されます。
     • 新しいサブメニューが表示されるので、製品について詳しく知ることができます。これらのボタンのいずれかをクリックすると、トピックに応じて各ページに新しいコンテンツが表示されますが、レイアウトとデザインは同じになります。
     • 多くの場合、メニューバーの各メイントピックには、入力するための異なる小見出しがあります。 2番目のメニューバーを作成する代わりに、MusiciansFriendの次の例のようなポップアップメニューを使用できます。
     • サイドバー。これはサイトの多くのページに表示されますが、必ずしもすべてではありません。コンテキストによって決まります。ただし、これは非常に重要な要素であり、直感的で雑然としすぎないように注意深く設計する必要があります。メニューバーとは異なり、サイドバーのコンテンツは非常に動的にすることができます。不動産マーケターTruliaからのこれらの2つのサイドバーをチェックしてください最初はバイヤーのためです：
       
       

方法2/2：ガイドライン

1. 優れたユーザーインターフェイスを設計します。 タイトル、サイドバー、ロゴ、画像、テキストなど、Webサイトのさまざまな要素をすべてのページの同じ場所に配置して、サイトをナビゲート可能で直感的にします。
   • すべてのページの上部に同じヘッダーを保持します。サイトのコンテンツで多くの繰り返し要素が許可されているかどうかに関係なく、すべてのページの上部が同じであることを確認してください。
   • デザインでロジックを使用する。単一ページの要素は、重要度またはトピックごとに論理的に順序付けする必要があります。サイトの別のページもそうあるべきです。
2. 一貫したスタイルを作成します。 レイアウトがサイトの構造の一貫性を与える必要がある場合、スタイルは主題の調和を提供する必要があります。
   • 2つまたは3つの主要な色に固執し、それらがうまく調和することを確認します。
   • あまりにも多くのフォントスタイルやサイズを使用しないでください。いくつかを交互にしたい場合は、各ページで同じように使用してください。
   • カスケードスタイルシート（CSS）を使用して、統一されたスタイルを維持し、各ページに個別に移動することなく、Webサイト全体で要素を簡単に変更できるようにします。
3. 読みやすさを最大化します。 テキストを読みやすくするために、テキストを小さな部分に分割することができます。
   • 字幕と適切な間隔を使用して、各部分を分離します。
   • 太字またはさまざまなサイズを使用して、トピックの階層と重要性を示します。
   • テキストの扱い方に注意してください。フォントを小さくしすぎないでください。行間隔を大きくして、テキストの大きなチャンクを読みやすくします。テキストの大きなパッチは読みにくいです。それを小さな段落に分割します。
4. あなたのウェブサイトを普遍的に読めるようにしてください。 標準のHTMLを使用し、ブラウザの1つのブランドまたはバージョンでのみ使用できるタグ、機能、およびプラグインを避けます。
   • 最新のブラウザやコンピュータのほとんどは複雑な画像を処理できますが、画像を縮小してWeb用に最適化すると、すべてが滑らかに見えます。品質の重要性と速度の重要性を比較検討してください。
5. あなたのウェブサイトをテストしてください。 それを確認してください すべてのリンクが機能します ご想像のとおり、画像は正しく表示されます。
   • ターゲットオーディエンスのメンバーにデザインの明確さと使いやすさをテストさせ、Webサイトに関するフィードバックを提供してもらうことで、ユーザーテストを整理することができます。
6. あなたのウェブサイトを公開します。 まだ購入していない場合は、ドメイン名を購入してください。リンクがまだ機能しているかどうかを定期的に確認し、訪問者からのメールによる提案を聞いてください。

チップ

• 自分のビジョンや他のサイトで見たものに基づいてレイアウトを自由にデザインできますが、既製のデザインを購入する方が簡単な場合があります。
• かわいい特別な写真で訪問者を攻撃しないでください。フラッシュアニメーション、明るい色、パターン化された背景、ページの読み込み時に自動的に再生される音楽は、90年代の楽しい実験でしたが、今ではユーザーを怖がらせます。読みやすくするために、テキストの色と対照的なシンプルな背景に固執します。
• いつでもCSSを使用して段落間隔を最適化できます。
• 聴覚障害または視覚障害のある訪問者の場合、ビデオに字幕を付けたり、音声を書き写したり、アクセシビリティメッセージを追加したりできます。テーブルは情報を整理するための効率的な方法ですが、スクリーンリーダーソフトウェアを使用している視覚障害のある訪問者は、正しい順序で資料を聞くことができない場合があります。
• 訪問者にインクを節約させましょう。印刷ページには別のスタイルシートを使用してください。
  • 印刷パラメータを設定するときは、背景画像をオフにしてください。
  • 白い背景に黒いテキストを使用します。
  • メニューバーと不要な画像を削除します。

警告

• 盗用を避け、すべての著作権法に従います。オンラインで見つけたランダムな画像や、承認なしに構造要素を含めないでください。サイトで使用するものはすべて、合法かつ倫理的である必要があります。