Webサイトを訪れたときに最初に目にするものが ”ファーストビュー” です。
メインビジュアル、キービジュアル等の言い方もありますね。
サイトを訪れたユーザーにインパクトを感じさせるためには、魅力的なファーストビューが必須になります。
画像の加工方法も重要になります。こちらの記事も参考にしてみてください。
ファーストビューと言っても、形式が全て同じなわけではありません。
サイトの目的に合わせて見せ方が変わってきます。
今回はそのパターンについて説明して行きます。
全面に画像やイラストを配置する、インパクトを感じさせる手法です。
LPやサービスサイトなど、ブランディングがメインのサイトに有効的です。
商材から連想される様々なピンクを用いた、サイトカラーが強調されたデザインです。
コンセプトに沿って統一された画面構成が魅力的です。
ターゲット層の心をバッチリと掴むキャッチコピーにもこだわりを感じます。
画像を全面に表示し、ロゴを中央に配置しているデザイン。
旅館のサイトということもあり、最大のアピールである外観や内装を印象づける画像を用いています。
見ているだけで行ってみたくなるような、魅力のあるメインビジュアルです。
上下左右に余白を作り、画像を配置するデザインです。
テキストや他のデザインを重ねたり、他とは違う印象を与えることができます。
色んなデザインに親和性が高い手法です。
引用元:https://kayukayukoujitsu.jp/
中央に画像を配置した、爽やかなサイトカラーが印象的なビジュアル。
枠にもモチーフを施したり、画像にテキストを重ねていることで、余白まで充実しています。
商品のイメージに合わせたデザインで、飽きの来ないサービスサイトです。
縦長の画像を中央に配置したファーストビュー。
商材をメインに据えた、シンプルなテキストの配置で余白の取り方が美しいサイトです。
画像にテキストの要素を、ファーストビューとしてどちらも見えやすいように配置する手法です。
情報をすっきりと見せる事ができるので、キャッチコピーも配置しやすいです。
シーシャを取り扱っているコーポレートサイト。
一瞬「なんだ？」と思わせるような印象深い画像を用いている例です。
こういった先に進みたくなるようなデザインは、サイトとしてかなり完成度が高いですね。
引用元:https://www.yamamotocoffee.co.jp/
キャッチコピーと画像を、縦に並べて配置したデザイン。
シンプルではありますが、画像の端やサイドバーのデザインなどで暖かな印象を与えています。
メインコピーとビジュアルを横長に配置し、縦はコンパクトなサイトデザインです。
ファーストビューとして見た時に、画像以外にも情報を入れることができるのが特徴です。
引用元:https://store.healthcare.omron.co.jp/ext/nebulizer-net/
ファーストビューでユーザーが求めていることを全て記載しています。
ナビの内容もわかりやすく配置されているので、どこを見たらいいのかがすぐにわかるデザインですね。
メインのビジュアルはスライダーを使用し、右に固定でトピックスを配置しています。
ロゴと一緒に表示される画像が非常に印象深い、可愛らしいファーストビューです。
画像を組み合わせて配置する手法です。
商材を一度に色んな角度から見せたり、複数の情報を一度に表示する事ができます。
デザイン次第で賑やかにもスタイリッシュにも使えるデザインです。
一つの商品を複数の角度から見せているサービスサイト。
使用しているスタイルを、手元・モデルを含んでいくつか見せることで、別の印象に見えますね。
ユーザーもどんな商品か判断しやすいようにできているサイトデザインです。
ショールームやモデルハウスを掲載している、不動産のコーポレートサイト。
ファーストビューで複数の商材を全面に配置することで、かなり充実した事業展開であることを印象づけています。
モノクロメインのトーンでまとめられており、ごちゃつかず見えやすいデザインです。
タイトル通り、メインビジュアルやキービジュアルをまとめているサイトです。
一目でサイトデザインの参考になり得るものがわかるので、イメージに近いものを探してみるのも手です。
http://mainvisual.net-king.com/
ほぼ毎日のように更新されている、webデザインの参考サイトです。
様々な種類かつ、洗練されたデザインのwebサイトがまとめられています。
サムネイルがファーストビューなので、気になったものからクリックしてみると参考にしやすいでしょう。
以上が、ファーストビューで主に用いられるデザイン手法です。
引用したサイトを見てみると、こちらが受ける印象の違いがよくわかると思います。
参考サイトを探すときに気に留めて見てみると、系統が分かれるかもしれません。
自身でwebサイト制作をしてみる際には、どんな事を目的にするかを明確にし、目的に合わせて魅力的なファーストビューを作成しましょう。
関連記事
久保田 里佳子 
櫻井 邦則 
