このWikiHowでは、プロフェッショナルに見え、優れたパフォーマンスを発揮するウェブサイトをデザインする方法をご紹介します。ウェブサイトのデザインの大部分は最終的にあなた次第ですが、ウェブサイトを作成する際に行うべきこと、そして避けるべき重要なことがいくつかあります。
パート1
ウェブサイトのデザイン
-
ウェブサイト作成ツールを使用するかどうかを決定します。ゼロから作成するウェブサイトは、HTMLコーディングのかなり詳細な理解が必要ですが、Weebly、Wix、WordPress、Google Sitesのような無料のホスティングサービスを使用することで、簡単にウェブサイトを作成することができます。初めてウェブサイトを作成する人にとっては、HTMLよりもウェブサイト作成ソフトの方が使いやすい傾向にある。
- もし自分でコーディングしてウェブサイトを作ろうと思ったら、HTMLとコーディングの両方を学ぶ必要がある。
- ウェブサイトを作成するために時間とエネルギーを投資することが魅力的に聞こえない場合は、あなたのためにあなたのサイトを作成するためにウェブサイトのデザイナーを雇うこともできます。フリーランスのデザイナーであれば、1時間30ドルから100ドル以上かかることもあります。
-
サイトマップを作成しましょう。ホームページ作成ソフトを立ち上げる前に、ホームページのページ数、各ページの内容、トップページや「会社概要」ページなどの重要なページのレイアウトをおおよそ決めておきましょう。
- どのようなコンテンツが表示されるかを決めるだけでなく、それぞれのページの大まかな絵を描くと、ウェブサイトのページがイメージしやすくなるかもしれません。
-
直感的なデザインにする斬新なアイデアも必要ですが、ウェブサイトの基本的なデザインは、以下のような確立されたガイドラインに従うべきです：
- ナビゲーション・オプション（ページごとのタブなど）は、ページの上部に配置する。
- メニューアイコン（⛩）を使う場合は、ページの左上に配置する。
- 検索バーを使う場合は、ページの右上付近に置く。
- 役に立つリンク（「会社概要」ページや「お問い合わせ」ページへのリンクなど）は、各ページの一番下に配置する。
-
一貫性を保ちましょう。どのようなテキストフォント、カラーパレット、画像テーマ、デザインオプションを選択するにしても、ウェブサイト全体で同じ決定を使用するようにしてください。あるフォントや配色が「会社概要」のページで使われているのに、トップページではまったく違うものが使われていると、驚くほど違和感があります。
- 例えば、トップページにクールなトーンの色を使っている場合、次のページでは明るく派手な色を使わないようにしましょう。
- 派手な色やぶつかり合う色を使うこと、特に色が動的に（例えば動いて）表示される場合、少数のウェブユーザーにてんかんを誘発する可能性があることに留意してください。そのような色を使う場合は、関連するページの前にてんかんの警告を表示するようにしましょう。
-
ナビゲーション・オプションを追加する。ウェブサイトの重要なページへの直接リンクをトップページの上部に配置することで、初めて訪れたユーザーを重要なコンテンツに誘導することができます。ほとんどのサイト制作者は、このようなリンクをデフォルトで追加しています。
- ページのアドレスからしかアクセスできないのではなく、ウェブサイト上のオプションをクリックすることで、ウェブサイト上のすべてのページにアクセスできるようにすることが重要です。
-
お互いを引き立てる色を使う。他のデザイン同様、ウェブサイトデザインも視覚的に美しい色の組み合わせに依存します。
- 黒、白、グレーの組み合わせは、何から始めたらいいかわからない場合におすすめです。
-
ミニマルなデザインにすることも検討しよう。ミニマリズムは、クールなトーンカラー、シンプルなグラフィック、黒と白のテキストページ、できるだけ装飾をしないことを推奨しています。ミニマリズムは派手な要素をほとんど必要としないため、労力をかけずにウェブサイトをプロフェッショナルで魅力的なものにする簡単な方法です。
- 多くのウェブサイト制作者は、あなたのウェブサイトを設定する際に選択できる「ミニマリズム」テーマを用意しています。
- ミニマリズムに代わるものとして「ブルータリズム」があり、これはより厳しいライン、明るい色、太いテキスト、最小限のイメージを使用します。ブルータリズムはミニマリズムに比べて支持者が少ないですが、ウェブサイトの内容によっては、デザインのニーズに合うかもしれません。
-
ユニークな選択を。直線やグリッドで囲まれたウェブ要素は安全策ですが、いくつかのユニークなスタイルを決定することは、あなたのサイトに個性を与え、あなたのサイトを目立たせることにつながります。
- トレンドに逆らうことを恐れず、ウェブサイトの要素を左右非対称に配置したり、重なり合う要素を使ってレイヤーのような外観を作り出したりしましょう。
- エレガントではありますが、角が尖っていたり、四角い要素（「カードベース」とも呼ばれます）は、丸みを帯びた柔らかい要素よりも好まれません。
パート2
パフォーマンスの最大化
-
モバイル最適化オプションを活用しましょう。モバイルブラウザのウェブトラフィックはデスクトップブラウザよりも多いため、ウェブサイトのモバイル版に払う注意の量は、少なくともデスクトップウェブサイトの開発と同等であるべきです。ほとんどのホームページ作成サービスでは、自動的にモバイル版サイトを作成してくれますが、モバイル版サイトでは以下の点に注意しましょう：
- ボタン（サイトリンクなど）は大きく、タップしやすいようにする。
- モバイルで閲覧できない機能（Flash、Javaなど）の実装は避ける。
- ウェブサイト用にモバイルアプリを作成することも検討しましょう。
-
1ページに多くの写真を使用するのは避けましょう。デスクトップ、モバイルのブラウザともに、大量の写真や動画を表示するページの読み込みに苦労することがあります。ウェブデザインにおいて画像は重要ですが、1ページあたり数枚以上の画像を使用すると、不必要に長いロード時間が発生し、そのページへの訪問を妨げてしまいます。
- 一般的に、ウェブサイトのページのロード時間は4秒以内にしたいものです。
-
お問い合わせ」ページを追加する。事実上すべての確立されたウェブサイトには「お問い合わせ」ページがあり、連絡先情報（電話番号やメールアドレスなど）が掲載されていることにお気づきでしょう。Contact "ページを追加することで、ウェブサイト閲覧者にあなたとの直接的なコミュニケーションラインを提供し、潜在的な不満を解消することができます。
-
カスタム404ページを作成する。設定されていない、または存在しないウェブサイト上の特定のページに誰かがアクセスすると、「404 Error」ウェブページが表示されます。ほとんどのブラウザにはデフォルトの404ページがありますが、ウェブサイト作成者の設定からカスタマイズできる場合もあります：
- 軽快なエラーメッセージ（例：「おめでとうございます - エラーページを見つけました！」）。
- サイトのトップページへのリンク
- よく閲覧されるリンクのリスト
- ウェブサイトの画像やロゴ
-
可能であれば、検索バーを使いましょう。ウェブサイトの作成方法が検索バーの追加に対応している場合は、そうすることを強くお勧めします。これにより、ユーザーはナビゲーションのオプションをクリックすることなく、特定のページやアイテムに素早く移動することができます。
- 検索バーは、試行錯誤することなく一般的な用語を検索したい場合にも便利です。
-
トップページに最も多くの時間を投資しましょう。さらに、ナビゲーション・オプションや画像など、トップページのすべての要素が素早く読み込まれる必要があります。トップページには、次のような要素を盛り込みましょう：
- 行動喚起（クリックするボタンや入力フォームなど）
- ナビゲーション・ツールバーまたはメニュー
- 魅力的なグラフィック（例：1枚の写真、ビデオ、またはテキストを添えた小さな写真のグループ）
- ウェブサイトのサービス、トピック、焦点に関連するもの
-
複数のプラットフォームの複数のブラウザでウェブサイトをテストしてください。これは非常に重要なことです。ブラウザが異なれば、ウェブサイトの処理も異なる可能性があるからです。ウェブサイトのプロモーションを始める前に、Windows、Mac、iPhone、Androidの各プラットフォームの以下のブラウザでウェブサイトを表示し、使用してみてください：
- Google Chrome
- Firefox
- Safari（iPhoneとMacのみ）
- Microsoft EdgeおよびInternet Explorer（Windowsのみ）
- 数種類のAndroid携帯の内蔵ブラウザ（サムスン・ギャラクシー、グーグル・ネクサスなど）
-
ウェブサイトの老朽化に合わせて更新を続けましょう。デザインのトレンド、リンク、写真、コンセプト、キーワードなどは、時間の経過とともに変化していきます。そのためには、少なくとも3ヶ月に1回（できればもっと頻繁に）、他の類似サイトと一緒にウェブサイトのパフォーマンスをチェックする必要があります。
コメント
最新を表示する
NG表示方式
NGID一覧