2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集
「提案されたものの、このレイアウトよく見るんだよなぁ」とクライアントさんに思われないように個性を出したい。今回は2018年も使える「遊び心を加えた」Webデザイントレンド、ファーストビューデザインのアイデアをまとめました。
PR
Sponsored Link
近年増えてきたファーストビューのレイアウトは
- スプリットスクリーン（分割）
- シネマグラフ
- 縦書きのGナビゲーション
- 画像とテキストを一部だけレイヤー
- 不規則な配置
- アニメーション
- 鮮やかな配色のグラデーション
- デュオトーン
- イラスト
- ラインアート
といった感じなので、今回はこのあたりから少しだけ遊び心があるものをまとめます。
スプリットスクリーン
なぜかファーストビューがパッとしない時があります。要因の一つとして写真が抽象的（主張がない）で、フルスクリーンにしたときに面白くないというか、インパクトに欠けているというか。そんな時は画面を分割してみるものあり。
こちらは写真と文字要素を割り付ける、左右に分割したファーストビュー。対比を生かした紙面のようなレイアウトです。写真と文字のパターン、写真と写真のパターン、左右の幅の比率を変えたタイプなどがあり、今までになく新鮮にみえます。
タイトルの一部を写真にレイヤーさせる
凝ったタイポグラフィーを使わなくても「タイトルの位置をずらすだけ」で面白いデザインにすることもできます。ワクワク感を出したいときに。最近では写真と文字をずらしてレイヤーさせるレイアウトも増えてきましたね。
マスク
グラデーション背景と文字で切り抜いたようなマスク系レイアウトは洗練された見え方になります。都会っぽく見せたいときに。
デュオトーンではないのですが、人物の所だけマスクをかけて動画を見せており都会的な見え方がします。
スキューと透過
作為的な変化をつけたいのなら、斜めのレイヤーを使い動きを出しましょう。堅い写真に刺激を与えたいときに。透過された斜めのレイヤーをのせている例。こちらは写真の雰囲気も邪魔してないですし、文字の視認性も高いですね。
縦書きグローバルナビゲーション
横書きのグローバルナビゲーションで日本語フォントをかっこよくみせるのって難しいですよね。フォントがしっくりこなかったり、どうしても日本語を使わざるをえないデザインの場合、思い切って縦組みにしてみてはどうでしょう。意外とよくなるかもしれませんよ。和文が多いコンテンツには縦組みがしっくりきます。
デュオトーンと人物
ファーストビューに情報を詰め込み過ぎたくないけど、オシャレに見せたいのなら、人物とデュオトーンの組み合わせはいかがでしょう。背景色によって白抜きやネオンカラーの文字と組み合わせてもいいですね。アーティスティックなイメージにしたいときに。
デュオトーンの作り方はPhotoshopやCSSを使い、背景だけを薄くしてデュオトーン加工する方法を参考に。
以上、2018年に使いたいWebデザイントレンド、ファーストビューのアイデアでした。
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
URL：西田 鉄平
この後によく読まれている記事
Leave a Comment