ウェブサイトのデザイン方法

素晴らしい Web サイトを設計するのは大変な挑戦のように思えるかもしれませんが、デザインの基本要素に従えば、プロセスは楽しく、楽しめるものになるでしょう。これは単にいい響きだけではありません!魅力的な Web サイトを設計するのに役立つデザインの基礎と一般的なガイドラインについて説明します。

方法1方法1/2:

3つの基本ルール

PDFをダウンロード

1ルール1: 顧客の声に耳を傾ける。濃い黒の上質なタイポグラフィ、大胆で芸術的な色彩、そして「今すぐ訪問してください」と誘うような Web サイトを使用して、「世界最高の Web サイト」をデザインできます。残念ながら、クライアントは大きなピンクとオレンジのアクセントが付いたメニューバーを希望しています。あなたは解雇され、これまでで最も優れた Web サイトは二度とユーザーに公開されることはなく、顧客はそれをバックアップハードドライブに保存することになります。
- クライアントの企業イメージを調査します。顧客の中には、本当に気に入っているウェブサイトについて話す人もいます。これにより、クライアントのアイデアに応えるきっかけになるだけでなく、自分では思いつかなかったデザインのアイデアも得られるでしょう。
- オレンジとピンクのウェブサイトが冗談だと思ったら、史上最もクールなウェブサイトがどのように商品を宣伝しているかを考えてみましょう。
2ルール 2: ユーザーが何を求めているかを理解し、それに応じて設計します。人々が独自の Web サイトを構築する理由は、他の人にそれを見てもらいたいからです。このウェブサイトは、特定の対象者に対する情報提供目的、商業目的、または娯楽目的で使用される場合があります。デザイナーとして、誰のために Web サイトをデザインしているのかを理解し、Web サイトを開いたユーザーが Web サイトに留まるようにする必要があります。
- 「サイトが美しく見えれば、ユーザーは留まるだろう」と思うかもしれません。しかし、必ずしもそうとは限りません。不動産の例を見てみましょう。すっきりして面白いデザインのサイトです。たくさんの空白スペース、大胆な色彩、ハイパーリンクが強調表示された非常にモダンなワイドスクリーン形式が特徴です。
- では、同じ場所で不動産を販売するためにこのアプローチを使用した場合の影響を想像してみてください。雑然としたページ、派手な色、そして大量の広告です。
- どのウェブサイトが人々が家を探すのに最も役立つか考えてみましょう。そうです、人々が閲覧できるように「ホーム」をリストするものです。人々が「サンタモニカの売り物件」を検索するとき、ウェブサイトの美しさは気にしません。彼らは不動産業者について学んだり、街の景色の美しい写真を見たりしたいわけではありません。彼らが見たいのは不動産だけです。
3ルール3: 自分の声に耳を傾ける。顧客が何を好むかを理解し、市場が何を必要としているかを知っています。今度は、ウェブサイトのデザイナーであるあなたに注目しましょう。
- 描画ソフトウェアで好みのテンプレートを作成します。異なるレイヤーにページ要素を作成します (これにより、テンプレート全体を破壊することなく後で変更できます)。これらの要因には次のようなものが含まれます。
  - ページヘッダー。ウェブサイトのすべてのページで共有されます。ヘッダーは、Web サイトの名前とロゴ、および他の下位ページ (概要、連絡先など) へのリンクで構成されます。ヘッダーは、視覚的にも実用的にも、サイトのさまざまな部分を結び付けます。メニューバーの最初のボタンをホームページに戻るボタンに設定することもお勧めします。
  - Appleのウェブサイトを見てみましょう^{[1] X調査ソース}、次のように：
  - ほとんどの Apple 製品と同様に、同社のホームページは非常にすっきりと整理されたデザインになっています。ページ上部のメニューバーに注目してください。各ボタンにはコンテンツに一致するタイトルがあり、検索ボックスもあります。Web サイトがサポートしている場合は、必要なページに簡単にアクセスできます。さて、iPad ボタンに対応するページを見てみましょう。ページ要素はいくつかあります。
  - メニューバーの唯一の変更点は、iPad ボタンが暗くなっていることです。
  - ページの件名は左上隅に大きな黒いフォントで表示されます。
  - 新しいサブメニューバーが表示され、ユーザーは製品の詳細を知ることができます。これらのサブメニューをクリックすると、各ページでトピックに関連した新しいコンテンツが提供され、レイアウトとデザインが統一されていることがわかります。
  - おそらく、あなたのウェブサイトには、メインの見出しの下に複数のサブ見出しがあるメニューバーがあるでしょう。セカンダリメニューバーではなく、次のミュージシャンズフレンズのウェブサイトのようなポップアップメニューの使用を検討することもできます^{[2] X研究ソース}:
  - サイドバー。この種のデザインはウェブサイトでは非常に一般的ですが、必ずしもすべてのウェブサイトに必要なわけではありません。覚えておいてください - コンテンツこそが王様です。しかし、これは直感性を維持し、不必要な混乱を避けるために慎重に設計する必要がある非常に重要な要素でもあります。メニューバーとは異なり、サイドバーのコンテンツは動的に変更することができます。不動産マーケティングウェブサイトTruliaの次の2つのサイドバーを検討してください。 ^{[3] X調査ソース}まず、購入者にとって：
  - 2つ目は入居者用です。これらには、非常に類似した情報が含まれていますが、焦点がまったく異なり、両方ともサイドバーの同じ場所に表示されていることに注意してください。
  - ページ本文。これは Web サイトの主要部分であり、デザインの中で最も変更される部分です。電子商取引サイトを設計している場合、おそらく 1 ページに 20 個の商品を販売する商品ショーケースを配置するでしょう。あなたの仕事は、これら 2 つの部分を雑然とした見た目にならないようにまとめることです。類似した色、フォント、インターフェース要素を使用して、それらを組み合わせることができます。
  - フッター。このセクションは、すべての Web サイトで利用できるわけではなく、必要なわけでもありません。さまざまな項目を整理したり、Web サイトの焦点が当てられていない部分に焦点を合わせて簡単にアクセスできるようにするためによく使用されます。以下はGrouponからの例です。
広告する

方法2方法2/2:

ポリシー

PDFをダウンロード

1.優れたユーザーインターフェイスデザインを実践します。ヘッダー、サイドバー、ロゴ、グラフィック、テキストなど、Web サイトのさまざまな要素をすべてのページで同じ場所に配置すると、Web サイトが直感的になり、ナビゲートしやすくなります。
- 各ページの上部に同じヘッダーを配置します。ウェブサイトのコンテンツに多くの繰り返し要素があるかどうかに関係なく、各ページのヘッダーが一貫していることを確認する必要があります。
- デザインは論理的に保ってください。ページ上の要素が重要度やテーマに応じて論理的に配置されていることを確認する必要があります。Web サイトの各ページについても同様です。
2.一貫したスタイルを確立します。統一されたレイアウトは Web サイトに構造的な一貫性をもたらし、統一されたスタイルは Web サイトのテーマに調和と一貫性をもたらします。
- メインカラーは 2 色か 3 色に絞り、それらが互いに調和していることを確認します。
- フォントスタイルやサイズを使いすぎないようにし、複数の異なる設定を切り替える予定の場合は、すべてのページで同じように使用するようにしてください。
- カスケードスタイルシート (CSS) を使用して一貫したスタイルを管理すると、各ページに移動して変更を加えなくても、サイト全体の要素を簡単に変更できるようになります。
3.読みやすさを最大化します。単語を読みやすくするには、単語を小さな部分に分割する必要があります。
- セクションを区切るには、サブ見出しと適切な間隔を使用します。
- 太字または異なるサイズのフォントを使用して、トピックの階層と重要性を示します。
- テキスト処理に重点を置きます。フォントを小さくしすぎず、行間隔を広げて大きなテキストブロックを読みやすくします。大きなテキストブロックは読みにくいので、小さな段落に分割するのが最適です。
4.ウェブサイトを誰でも読めるものにします。標準の HTML を使用し、特定のブランドまたはブラウザのバージョンでのみ動作するタグ、機能、プラグインの使用は避けてください。
- 最新のブラウザやコンピュータのほとんどは複雑なグラフィックを処理できますが、画像を小さくして Web 用に最適化しておくと、これらのページへのアクセスが高速化されます。品質とスピードの間でバランスを取る必要があります。
5ウェブサイトをテストします。すべてが正常に機能し、画像が正しく表示されていることを確認します。
- また、ユーザビリティテストを実施することもできます。つまり、対象ユーザーの一部にサイトのわかりやすさや使いやすさをテストしてもらい、サイトに関するフィードバックを提供してもらいます。
6ウェブサイトを公開します。まだドメイン名を購入していない場合は、まずドメイン名を購入する必要があります。リンクがまだ利用可能であるかどうかを定期的に確認し、Web サイトの訪問者から電子メールで送信された提案を確認します。広告する

ヒント

派手でけばけばしいグラフィックで視聴者を圧倒しないでください。フラッシュアニメーション、明るい色、パターン化された背景、ページが読み込まれるたびに自動的に再生される音楽は、1990 年代には楽しい体験でしたが、今日の Web ユーザーには受け入れられません。読みやすさを最大限に高めるために、テキストと対照的なシンプルな背景にします。
聴覚や視覚に障害のある訪問者に対応するために、動画にキャプションを付けたり、音声を書き起こしたり、アクセシビリティに関する指示を提供したりできます。表は情報を整理するのに効果的な方法ですが、視覚障害のある訪問者がスクリーンリーダーを使用する場合、表の内容を順番に聞き取ることができない可能性があります。
独自のデザインセンスがあったり、他の Web サイトで使用されているお気に入りのデザインをレイアウトのベースとして使用できる場合もありますが、既製のテンプレートを購入する方が簡単な方法かもしれません。
訪問者が印刷インクを無駄に消費しないようにするには、別のスタイルシートを使用してサイトを印刷用にフォーマットする必要があります。
- 印刷パラメータを設定するときに背景画像をオフにします。
- 白い背景に黒いテキストを使用します。
- メニューバーと不要なグラフィックを削除します。
適切な段落間隔を維持するために、常に CSS を使用できます。

広告する