Webデザインの参考にしたい、ファーストビューのアイデアその2
今年はスプリットスクリーンや一部をレイヤーさせる見せ方を見るようになりました。（参考：2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集）今回は、周辺に余白をつかったものなど、少し違うアプローチのファーストビューのアイデアをまとめました。提案前に見ておきましょう。
PR
Sponsored Link
2018年微増しているレイアウトの傾向
最近少しづつ増えてきたレイアウトは
- ファーストビュー周辺に余白を取り入れる
- 余白の中にメニュー等を配置
- 縦、横に分割
- 画像と文字を不規則にレイヤーさせる
- 整列を一部崩している
- フェードやスライド以外の複雑なエフェクト
といったところでしょうか。それでは少し例を見てみましょう。
横にセパレート
縦に分割するスプリットスクリーンが増えてきましたが、横は珍しいので意外性がありますね。
ファーストビュー周辺に余白を入れるレイアウトも少しづつ増えてきました。左に余白をとって、さらに横に分割してあります。
縦書きのテキストでも相性よし。
周辺にライン
余白を残す形でラインを入れてあります。窮屈感がないスッキリしたレイアウト。
グリッチ
ファーストビュー全体にグリッチを採用してある大胆なみせかた。画像が変化していくときの動きも、ありきたりではありません。
蛍光色と透過
被写体とかぶせるように配置しても写真を邪魔してない。透過のスラッシュを差し込んであります。
ESTYLE,Inc. | 株式会社エスタイルのコーポレートサイト
整列を崩す
あえて整列させてないような、画像と文字の一部をレイヤーする見せ方が増えてきましたが、さらに透過をのせてあります。周辺に余白も開けて、流行りをふんだんに取り入れてあります。
対比
左右分割するのではなく、中心に余白を入れて対比として見せるレイアウト。配色の使い方も上手です。
周辺に余白
最近微増しているレイアウト。周辺に余白を入れて、余白の中にメニュー等を差し込んであります。スクロールは不可。動画や写真に主張がある時に。
文字を反転
背景写真の上に文字を載せる時に、テキストを反転させるようにボックスで囲むことで、背景との対比を強めることができます。写真とずらしてレイヤーさせる今っぽいレイアウトと相性よし。
他ギャラリーはこちら
クライアントの要望に合わせてアイデアを出したいとき。
ありきたりになりがちなフッターを面白くできるのか。フッターのアイデア集。
2018年のWebデザイントレンド
2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集
404エラーページを作るときに参考にしたい。
404エラーページをデザインする時に取り入れたい洗練されたエフェクトとギャラリー集
幻想的なイメージを出したいときに。
Webデザインの参考になった、魅せる幻想的なWebサイトまとめ
以上、2018年におさえておきたいWebデザインのアイデア集でした。
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
URL：西田 鉄平
この後によく読まれている記事
Leave a Comment