【MBTI診断】16タイプ別・フリーランスに向いてる仕事/働き方
- コラム
- フリーランス/個人事業主
- 働き方
ヘッダーは、いわばWebサイトの顔。訪問者が、あなたのWebサイトをじっくり見るか判断するための場所です。
ヘッダー作りのポイントは3つ。
この記事ではWebサイトやブログのヘッダーをデザインするときに参考にしたいさまざまなアイデアを、海外の優れた事例とともに紹介します。
まずは、サービスや製品の特徴表現したグラフィックや写真をレイアウトし、画像を中心にアイコンや説明文などの要素を追加します。
次にヘッダーのデザインが、そのWebサイトのアイデンティティーをしっかりと表現しているかを確認してください。サービスや会社のロゴも忘れずに挿入しましょう。
ヘッダーは、Webサイトの中で非常に大切な構成要素の一部です。訴求力のあるWebサイトに仕上がるよう、しっかりと時間をかけてデザインや色を決定してください。
有名人やモデルの写真を利用する場合は、Webサイトの訪問者がその人物に親近感を抱きやすいよう工夫しましょう。笑顔の写真を使用すると、より効果的です。
人物を中心にしたヘッダーを作るときも、ロゴやサービスの名前、伝えたいメッセージをインターフェイスに組み込みましょう。
製品、イベント、サービスなどの画像をヘッダーとする場合は、ロゴやキャッチコピーをセンターに配置するのがポイントです。その下には、商材の信頼性を裏付けるような文章を加えましょう。特記事項だけに絞って記述すれば、訪問者はあなたのWebサイトで目的を達成できるかどうか判断できます。
また、イベントやプログラムを宣伝するためのヘッダーを設計するなら、ヘッダーに使う画像がその内容をしっかりと伝えていることを確認してください。屋内で開催するイベントなのに、屋外の写真を使ってはなりません。
情報やコンテンツ量の多いサイトなら、インパクトのあるヘッダーは必要ありません。すぐにコンテンツの探索をはじめられるように、縦の長さが短いヘッダーを使用しましょう。
特定の商品だけを宣伝するWebサイトの場合は、大きくてインパクトのあるビジュアルを使って訪問者を惹きつけると効果的です。このとき、サービスや製品を紹介するためのキャッチコピーや説明文もヘッダーに含めましょう。
ヘッダーは、訪問者にWebサイトの内容をすばやく認識してもらうための役割を担っています。
サービスを提供している場合は、過去の実績や作業内容をヘッダーで示すのも効果的です。
またイメージヘッダーとしてたくさんの画像を見せたい場合は、イメージカルーセルを利用しましょう。ポートフォリオなどを表示したいときにもこの方法はおすすめです。
Webサイトの訪問者が、探し物をすぐに見つけられるよう、できるだけシンプルなヘッダーをデザインするべきです。
インパクトのあるビジュアルと効果的なコピーライティングを組み合わせれば、訪問者の心をグッと惹きつけられます。たったひとつのヘッダーで、ファンを増やせるのです。
ヘッダーで伝えることをひとつに絞りましょう。上記のスクリーンショットにはカメラを持った男性が写っていて、その隣には「INSPIRATION」の文字が並んでいます。最低限の情報のみで構成することによって、商品の特徴が伝わってきます。
ミニマムなヘッダーデザインが推奨されがちですが、上記の画像のようにプラスαの情報を提供した方が良い場合もあります。
デザインが優れているWebサイトには常に人が訪れます。まずは訪問者の視覚に訴えかけて、「あなたのWebサイトをもっと見たい!」と思ってもらうことが重要です。
美しいデザインは、閲覧するだけでも楽しめます。
ヘッダーに、訪問者が簡単に参加できるようなアクティビティを用意しましょう。小さくても繰り返し行動してもらえば、Webサイトと訪問者の関係が深まり、次第にアクティブユーザーとなります。
Webサイトのヘッダーを制作する方法はたくさんありますが、多くの人に好まれているのはシンプルで明確なヘッダーです。まずはスタンダードなデザインを学ぶべきでしょう。優れた事例を研究して、製品やサービスの良さが伝わるヘッダーデザインに取り組んでみてください。
(翻訳:Hisae Sasaki)