Webデザインの参考にしたい、ファーストビューのアイデアその2

• 作成：2018/05/14
• 更新：2018/05/15
• Webデザイン >

今年はスプリットスクリーンや一部をレイヤーさせる見せ方を見るようになりました。（参考：2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集）今回は、周辺に余白をつかったものなど、少し違うアプローチのファーストビューのアイデアをまとめました。提案前に見ておきましょう。

エンジニア速報は Twitter の@commteで配信しています。

2018年微増しているレイアウトの傾向

最近少しづつ増えてきたレイアウトは

• ファーストビュー周辺に余白を取り入れる
• 余白の中にメニュー等を配置
• 縦、横に分割
• 画像と文字を不規則にレイヤーさせる
• 整列を一部崩している
• フェードやスライド以外の複雑なエフェクト

といったところでしょうか。それでは少し例を見てみましょう。

横にセパレート

縦に分割するスプリットスクリーンが増えてきましたが、横は珍しいので意外性がありますね。

intelligent

ファーストビュー周辺に余白を入れるレイアウトも少しづつ増えてきました。左に余白をとって、さらに横に分割してあります。

笹塚ボウル

縦書きのテキストでも相性よし。

日本料理 かが万グループ

周辺にライン

余白を残す形でラインを入れてあります。窮屈感がないスッキリしたレイアウト。

Orus

グリッチ

ファーストビュー全体にグリッチを採用してある大胆なみせかた。画像が変化していくときの動きも、ありきたりではありません。

PLASTICTOKYO

蛍光色と透過

被写体とかぶせるように配置しても写真を邪魔してない。透過のスラッシュを差し込んであります。

ESTYLE,Inc. | 株式会社エスタイルのコーポレートサイト

整列を崩す

あえて整列させてないような、画像と文字の一部をレイヤーする見せ方が増えてきましたが、さらに透過をのせてあります。周辺に余白も開けて、流行りをふんだんに取り入れてあります。

PYP - Home

対比

左右分割するのではなく、中心に余白を入れて対比として見せるレイアウト。配色の使い方も上手です。

FESSIダンススクール

周辺に余白

最近微増しているレイアウト。周辺に余白を入れて、余白の中にメニュー等を差し込んであります。スクロールは不可。動画や写真に主張がある時に。

THE GATEHOUSE │ OFFICIAL WEB

FOREST STAND フォレストスタンド

文字を反転

背景写真の上に文字を載せる時に、テキストを反転させるようにボックスで囲むことで、背景との対比を強めることができます。写真とずらしてレイヤーさせる今っぽいレイアウトと相性よし。

RELOCA

熱川バナナワニ園

他ギャラリーはこちら

クライアントの要望に合わせてアイデアを出したいとき。

実務で役立つ逆引きレイアウト集

ありきたりになりがちなフッターを面白くできるのか。フッターのアイデア集。

さりげなく目立つフッターデザイン

2018年のWebデザイントレンド

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

404エラーページを作るときに参考にしたい。

404エラーページをデザインする時に取り入れたい洗練されたエフェクトとギャラリー集

幻想的なイメージを出したいときに。

Webデザインの参考になった、魅せる幻想的なWebサイトまとめ

以上、2018年におさえておきたいWebデザインのアイデア集でした。