同じデザインばかり作ってない？サイトの印象を変えるファーストビュー

デザインをしていると、ついつい同じようなデザインばかりになってしまう…って経験ないですか？
初心者の頃にはあるあるだと思います。

「おしゃれにしたい！」「今風にしたい！」と考えれば考えるほど、既に引き出しを持っているデザインに偏ってしまいがちです。無意識に自分ができる分野に寄ってしまうのはしょうがないことです。

もっと色んなデザインを作るには、引き出しを増やすしかありません。
そこで今回は、ファーストビューをオシャレに見せるテクニックをいくつかご紹介していきます。

この記事の目次

ファーストビューとは

サイトに訪れた時に、一番最初に見える範囲のことを指します。
ユーザーはファーストビューをみて、自分にとって有益な情報があるかどうかを判断します。

ここでユーザーの興味を惹くことができないとすぐに離脱してしまうので、どんなに良いデザインや内容を載せていても意味がなくなってしまいます。
だからファーストビューって大事なんです。

まずはよくあるベーシックなデザインです。
このデザインに少しアレンジを加えて、色んな見せ方のパターンを作ってみます。

画像をブラウザ幅いっぱいに伸ばしてみました。
これだけで、ファーストビューの印象は変わりますね。
ここから、フォントやキャッチコピーの配置を変えるだけでも、様々なバリエーションが作れると思います。

次は、画像を重ねてみました。
重ねることで立体感が出て、見せたい写真をより目立たせることもできています。
こういうデザインにする際は、あくまでも背景には見切れても良い画像をチョイスするようにしましょう。

ヘッダーとグローバルナビゲーションをサイドに配置してみました。
よく見かけるレイアウトですね。

このレイアウトは、常にサイドにナビゲーションが固定されるので、ユーザビリティ的にも良いとされています。
上部に固定する場合が割合的に多いですが、高さの専有面積をとらない分、こういったレイアウトもよく使われています。

「例1」にグラデーションを取り入れただけですが、また印象が変わりますね。
明るい印象になるので、取り入れることができる業種は限られるかもしれません。

流行りのスプリットスクリーンレイアウトで、ファーストビューを真っ二つにするデザインです。
複数の写真を見せることができるので、「何のサイトなのか」ということを訴求しやすくなるメリットもあります。

ファーストビューが変わるとサイト全体の印象もガラっと変わります。
逆に言えば、ファーストビューが似たり寄ったりだと、同じようなデザインばかりになってしまいます。
でも、ちょっとアレンジを加えるだけで、まったく違ったデザインにすることができます。

今回ご紹介したパターンをベースに、細部にこだわることで、もっと色んなデザインを作り出すことができます。ベースのパターンとして、参考にしてみてください。