デザイナーとして日々WEBデザインに取り組んでいる私ですが、毎回悩んでいるのがFV（ファーストビュー）のデザイン。
WEBを閲覧する際に一番最初に見える最も大事な部分です。

当たり前のことですが、FVのデザイン次第で閲覧数も変わってくるので、本当に重要なデザインです!

毎回「今までにない斬新なデザインにするぞ！」と思いながらデザインに取り掛かっていても、なぜか以前作ったデザインに寄ってしまったり、どこかで見たようなデザインになってしまったり、デザイナーなら誰もが一度は通る悩みではないでしょか？

そこで今回は、明日から参考にできる!ちょっとした工夫で斬新に見えるFVデザイン12選と題し、
個人的に参考にしたいホームページを選ばせていただきました。

こんな人にオススメの記事です

• 自分のデザインがマンネリ化してきた
• FVのデザインが苦手
• デザインのアイデアが思いつかない
• 一風変わったFVを作りたい

ファーストビューとは

ファーストビューとは、閲覧者がWebページにアクセスした時に最初に表示される部分、スクロールせずに画面に表示される部分のことです。

ファーストビューの重要性

ファーストビューは、閲覧者がそのサイトに滞在するかどうかが大きく影響するため、Webサイトを制作する際に特に重要な要素となります。

閲覧者はWebサイトにアクセスして、自分に必要な情報があるかどうかを3秒で判断すると言われています。

そのため、ファーストビューで閲覧者に
「ターゲットが誰か」、「必要（有益）な情報があるか」
を伝えなければなりません。

また、ファーストビューでそのページを離れてしまう閲覧者の割合（直帰率）は、

• コーポレートサイト：40～60%程度
• ランディングページ：70%以上

が目安だとされています。
訴求点、導線など考えなければいけないことは沢山ありますが、今回はデザイナー目線でデザインをどうしたら良いかという視点で記事を書かせていただきます。

01.ロゴマークで写真をくり抜いたFV

FOR YOU

タレント事業を行っている企業のコーポレートサイト。
ロゴマーク型にくり抜かれた動画が移り変わるFV。カーソルを動かすと、中央に配置された赤色の花の線も少し動くようになっています。
インパクトのある斬新なデザインです。

TAIAN

結婚式関連商品の開発・販売、SNSマーケティング支援を行う企業のコーポレートサイト。
こちらはロゴマーク型でくり抜かれた写真が移り変わっていくFV。
文章の読みやすさや、余白の空け方が◎

02.人物を切り抜いて配置したFV

Linie （求人サイト）

書店や介護福祉事業を展開する企業の求人サイト。
切り抜かれた人物に合わせて黄色い線のイラストが施されており、一工夫されています。

東光電気工事株式会社（求人サイト）

建造物の電気設備工事をメインで行っている企業の求人サイト。
切り抜きと人のコメントが漫画風で親しみやすく、それぞれに施された動きにもこだわりが垣間見えます。

うおみこども園

保育園のサイト。おばけのイラストと子どもたちの切り抜き写真が散りばめられたFVが特徴的です。
保育園のホームページというと、お花や可愛らしいイラストを散りばめ、明るい色を使用したものが多いですが
こちらのホームページは可愛いのですが、黒色がベースであったり、写真も少し面白いものを使用していたりと
一風変わった印象を受けます。
また写真に大小をつけることで、遠近感が出てより動きのあるホームページになっているように感じます。

03.1枚の写真を分割して配置したFV

トレイダーズホールディングス株式会社

金融事業とITテクノロジーサービスをグループの中核事業として展開する企業のコーポレートサイト。
丸や長丸などシンプルなオブジェクトを斜めに配置したり、スライドする動きをつけることで斬新なFVに。
1枚の写真を分割することで工夫されている印象を与えています。
写真が入れ替わる際のシュッとした動きも特徴的です。

Hair salon Acot

ヘアサロンのショップサイト。
こちらもシンプルな四角を上手く組み合わせ、写真を分割させることで、新鮮な印象を与えてくれます。
写真に少しノイズの入ったような加工を施しているひと手間も◎。

04.フレームの付いた写真のFV

 ねぎラボ

ねぎ好きのためのレシピサイト。ネギの装飾が可愛らしいFV。
フレーム付きの写真がカードのように後ろへ差し込まれ、次の写真が出てくる動きは、レシピ感を演出しているように感じています。

学校法人経専学園

専門学校を運営する学校法人のホームページ。
こちらはフレーム付きの写真が縦にスライドするFVです。横スライドに比べ、縦スライドは続きのデザインを上手く繋ぎ合わせることが難しい印象ですが、こちらはFV下のオープンキャンパス情報を上手く駆使してデザインを繋ぎ合わせています。

05.丸を駆使したFV

二拠点生活・移住ライフ大学

二拠点生活を斡旋するホームページ。
住みたい街を探すということで大きな虫眼鏡をデザインに盛り込んだFV。
虫眼鏡の写真がスライドで移り変わるのと、背景の街並みのイラストもスライドするので複雑性が増しています。

株式会社シビック・アンド・カンパニー

交野産クラフトビール「シビック・ブルワーズ」のオフィシャルサイト。
顔のイラストとサークルの写真がスライドするシンプルなデザイン。
上記の画像ではわからないのですが、下にスクロールするとヘッダーの波打ったデザインが出てきて、ビール注いだイメージを表現していることがわかります。
細やかなあしらいは参考にしたいですね！

KANEIRI

コンピュータソフトウェア・ハードウェア販売、ソフトウェア開発など様々な事業を展開する企業のコーポレートサイト。
こちらもシンプルに丸を並べたデザインですが、すべての丸の写真がそれぞれに動いたり、入れ替わったりと単調ではない動きの演出があります。

最後に

いかがでしたでしょうか？
大胆なことをしなくても、ちょっとした工夫やあしらいで、いつもと違うインパクトのあるFVはデザインできると思います。
デザインに悩まれている方のご参考になれば嬉しいです！