Zero-Two BLOG
FVの魅せ方について
2023.03.27 Webデザイン
こんにちは。デザイナーのNです。
Webサイトのデザインを起こす際、1番力を入れて考える場所があります。
それは「ファーストビュー」です。
「ファーストビュー」とは、ユーザーがWebサイトを訪れた際最初に表示される部分の事を指し、スクロールせずに画面表示される箇所です。Webサイトの顔ともいえる「ファーストビュー」の魅せ方について、最近増えてきたなと思うデザインを3つご紹介いたします。
紹介するデザインはどれも画像に文字が被ってないため、文字が目に飛び込みやすいと思います。
そのWebサイトが1番伝えたいメッセージ「キャッチコピー」が目立ち、とてもわかりやすいデザインです。
大きな文字と画像で興味を喚起
![](https://zerotwo.co.jp/wp-content/uploads/2023/03/Screenshot-2023-03-24-at-18-48-29-INTLOOP株式会社-INTLOOPは、本質的視点での伴走を通じて、さまざまな経営課題の-解決や企...-1024x499.png)
デスクトップパソコン(画面サイズ1920px)で見たとき、画面の上半分がキャッチコピー・文字・追従する固定ナビゲーション、下半分がかなり動きのある映像で常に動き・スピード感があり、面白さを感じるファーストビューとなっています。
赤いラインでスクロール誘導
![](https://zerotwo.co.jp/wp-content/uploads/2023/03/Screenshot-2023-03-24-at-18-49-09-光束工業|薄板金属のプレス・溶接加工・自動車部品受託製造-1024x499.png)
画面2/3は写真を掲載されているファーストビューです。「SCROLL DOWN」の文字と合わせて、赤いラインで下へスクロールすることを促し、ユーザーにわかりやすい構成になっています。
スライドでインパクト付け
![](https://zerotwo.co.jp/wp-content/uploads/2023/03/Screenshot-2023-03-24-at-18-49-38-株式会社welzo-1024x499.png)
同じく画面2/3が写真ですが、スライドで動きます。「SCROLL DOWN」の文字で、動きが特徴的な画像スライダーにも目線を促しています。こちらも下にスクロールしたくなるファーストビューです。
どのファーストビューも工夫されており、かつ伝えたい文字をスッキリ見せれて、とてもいい表現に仕上がっていると思います。