人は初めて会う人の印象を３～５秒で決め、その決定材料となる情報のほとんどを「視覚情報」から得ています。
Webサイトにおいても同様で、インターネットユーザーはほんの数秒でそのサイトの判断をするということ。
私たちの脳はものすごいスピードで視覚情報を処理し、判断基準を決定していますよね。
せっかくサイトにランディングしたユーザーを逃さないためにも、今回は「参考にしたい！サイトのファーストビューデザイン」を集めてみました。
人物を大きく表示する
サムネイルが並んだページで、人物のサムネイルが自然と目に入って来ませんか？
人は人物を優先に視界に捉えるので、大きくレイアウトした人物のファーストビューは注目を集めます。
株式会社UZUZ
ルッソ ビアッジョブルー
ルッソ ビアッジョブルー（現在はリンク切れ）
ROSE
ウォーターサーバー「キララ」オフィシャルサイト
N.P.シンガポール社
N.P.シンガポール社（現在はリンク切れ）
FIL
梅田の美容室artefice
梅田の美容室artefice（現在はリンク切れ）
Your Life | LiSA×Life CARD
Your Life | LiSA×Life CARD（現在はリンク切れ）
水曜日のカンパネラ OFFICIAL SITE
画像に文字を重ねる
主に雑誌でよく使われるレイアウト手法ですが、最近ではWEBサイトでもよく用いられています。
画像の隣にテキストを配置するだけではいたって普通のレイアウトですが、境界線を取っ払い、少しだけ文字を画像に重ねるだけで全然印象の違う面白いレイアウトになります。
オランジーナ
アソビュー株式会社
名古屋の写真館ViaVita
名古屋の写真館ViaVita（現在はリンク切れ）
SAPIX YOZEMI GROUP
SAPIX YOZEMI GROUP（現在はリンク切れ）
ハウスM21
Wantedly, Inc.
「境界線をあえて外す「ブロークングリッドレイアウト」の参考サイト」という記事を書きましたの、こちらもぜひチェックしてみてください。
画像・動画をマスクする
ファーストビューで全画面に表示される動画や画像。これらの手法は珍しいものではなくなってきました。
そんな中、文字や画像で背景をマスクした見せ方というのはまだそれほどない表現です。
マスクする側、される側のアイデア次第でまだまだ面白いデザインができそうです。
他のサイトのファーストビューと差をつけたい時に取り入れてみるのもいいでしょう。
横瀬クリエイティビティー・クラス
芝浦工業大学を解く3つの事実
株式会社TWO
グレイステクノロジー
株式会社インキュビット
ファンプレックス株式会社
ファンプレックス株式会社（現在はリンク切れ）
以前「デザインにマスクを活かしたサイト9選」という記事を書きましたのでこちらもぜひチェックしてみてください。
大きな文字で見せる
文字を主役にしたデザインです。人物にも負けないインパクトを出すことができます。
企業名やサービスのキャッチコピーをダイレクトに伝えたい場合はとても有効的なデザインになります。
ポイントはなるべくコピーはシンプルに。
キャッチコピーとサブキャッチのフォントサイズのギャップを出すといいでしょう。
FICC
新卒採用 :: 株式会社 ソーダコミュニケーションズ
新卒採用 :: 株式会社 ソーダコミュニケーションズ（現在はリンク切れ）
マザー株式会社
PARTY
HAKUHODO & HAKUHODO DY MEDIA PARTNERS RECRUIT 2018
HAKUHODO & HAKUHODO DY MEDIA PARTNERS RECRUIT 2018（現在はリンク切れ）
エース株式会社 新卒採用サイト
新卒採用 | パーソルキャリア – PERSOL CAREER
新卒採用 | パーソルキャリア – PERSOL CAREER
株式会社メフィラス
株式会社LIF
株式会社ヒカリナ
株式会社 月刊カフェラテ
株式会社 月刊カフェラテ（現在はリンク切れ）
VR Insight™
VR Insight™（現在はリンク切れ）
かすが最後まで読んでいただきありがとうございました！以下のおすすめ記事もチェックして見てくださいね！
まだブログを始めていない方は以下の記事をぜひチェック！
ブログを始めたばかりの人は以下の記事をぜひチェック！
