calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

2018年に使いたいWebデザイントレンド !ファーストビューのアイデア集

「提案されたものの、このレイアウトよく見るんだよなぁ」とクライアントさんに思われないように個性を出したい。今回は2018年も使える「遊び心を加えた」Webデザイントレンド、ファーストビューデザインのアイデアをまとめました。

PR
IT/WEB業界への転職なら
Sponsored Link

近年増えてきたファーストビューのレイアウトは

  • スプリットスクリーン(分割)
  • シネマグラフ
  • 縦書きのGナビゲーション
  • 画像とテキストを一部だけレイヤー
  • 不規則な配置
  • アニメーション
  • 鮮やかな配色のグラデーション
  • デュオトーン
  • イラスト
  • ラインアート

といった感じなので、今回はこのあたりから少しだけ遊び心があるものをまとめます。

スプリットスクリーン

なぜかファーストビューがパッとしない時があります。要因の一つとして写真が抽象的(主張がない)で、フルスクリーンにしたときに面白くないというか、インパクトに欠けているというか。そんな時は画面を分割してみるものあり。

こちらは写真と文字要素を割り付ける、左右に分割したファーストビュー。対比を生かした紙面のようなレイアウトです。写真と文字のパターン、写真と写真のパターン、左右の幅の比率を変えたタイプなどがあり、今までになく新鮮にみえます。

Plantation

御船山楽園

Kirichik

東京農業大学

人工知能AIアナリスト

Odai

音羽山 清水寺

タイトルの一部を写真にレイヤーさせる

凝ったタイポグラフィーを使わなくても「タイトルの位置をずらすだけ」で面白いデザインにすることもできます。ワクワク感を出したいときに。最近では写真と文字をずらしてレイヤーさせるレイアウトも増えてきましたね。

TAICHIRO

ドラマチック四街道プロジェクト

アソビュー株式会社

マスク

グラデーション背景と文字で切り抜いたようなマスク系レイアウトは洗練された見え方になります。都会っぽく見せたいときに。

ファンプレックス株式会社

芝浦工業大学を解く3つの事実

株式会社インキュビット

デュオトーンではないのですが、人物の所だけマスクをかけて動画を見せており都会的な見え方がします。

株式会社TWO

スキューと透過

作為的な変化をつけたいのなら、斜めのレイヤーを使い動きを出しましょう。堅い写真に刺激を与えたいときに。透過された斜めのレイヤーをのせている例。こちらは写真の雰囲気も邪魔してないですし、文字の視認性も高いですね。

Bee dancing

BAKE CHEESE TART

縦書きグローバルナビゲーション

横書きのグローバルナビゲーションで日本語フォントをかっこよくみせるのって難しいですよね。フォントがしっくりこなかったり、どうしても日本語を使わざるをえないデザインの場合、思い切って縦組みにしてみてはどうでしょう。意外とよくなるかもしれませんよ。和文が多いコンテンツには縦組みがしっくりきます。

きもの鈴乃屋

薬膳鍋 二十四節氣

絵本仕立てのEHONICA

デュオトーンと人物

ファーストビューに情報を詰め込み過ぎたくないけど、オシャレに見せたいのなら、人物とデュオトーンの組み合わせはいかがでしょう。背景色によって白抜きやネオンカラーの文字と組み合わせてもいいですね。アーティスティックなイメージにしたいときに。

Chris Redshaw

Finesse

Adison Partners

Chunk Creative Agency

デュオトーンの作り方はPhotoshopやCSSを使い、背景だけを薄くしてデュオトーン加工する方法

を参考に。

以上、2018年に使いたいWebデザイントレンド、ファーストビューのアイデアでした。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする