サイトのメインビジュアルに悩んだときに参考にしたい!11個のレイアウト手法

Pocket

最近のwebサイトは、トップのスライドショーや、1画面にドーンとメインビジュアルがあるものが当たり前になってきています。
メインビジュアルを作るのが苦手な私ですが、ある程度レイアウトのセオリーを知っておくことで、少しは苦手意識が払拭できるのかなと思っています。
ということで今回は、11のレイアウト手法を元に、参考サイトを33個ピックアップしてみました。

1.反復

同じモチーフを繰り返し置くことで、強調させる手法です。
サイズや色を変えてたり、コマ撮りっぽくすることで、リズム感が出ます。
商品やロゴ、人物など、なにか強調したいものを見せたいときに使えます。

1-1Life is electric

1-2SAKUZAN|美濃焼のうつわ 作山窯

1-3good design company

2.対比

2つ以上の要素を、同じ構図や分量で配置する手法。
情報に優劣をつけず等しく見せたいときに使えます。
webではメニュー導線として使われることが多いです。

2-1Sagakeen(サガケーン) 佐賀県

2-2うどん・おでん 久丸 旬家 莉久

2-3New From Bose

3.対称

2つの要素が互いに向き合う配置。
インタビューものや、対になる商品を比較して見せたいときなどに用いられる手法です。

3-1チャレンジャー・グレイ・クリスマス株式会社

3-2xDriveで美しい景色を愉しもう。

3-3FR LAME MONGER BARON UEDA 上田バロン

4.余白

周りに要素を置かない手法。
主役の要素を引き出したり、キャッチコピーを強調させることができます。
シンプルさや高級感を演出したいときに使える手法です。

4-1Chotto ミドリ

4-2御用蕎麦司 本家尾張屋 – HONKE OWARIYA –

4-3こだわりたまご通販 いとう養鶏場|佐賀県武雄市の伊東養鶏場

5.動き

複数の要素を傾けたり、散りばめてみたりして動きを出す手法。
メインの写真やイラスト以外にも、キラキラや効果線などの要素も一緒に置いたり、アニメーションをつけたりして、にぎやかさを演出する手法です。

5-1キリン 氷結®|チューハイ・カクテル|商品情報|キリン

5-2リプトン スイーツティー|紅茶の専門家リプトン(Lipton)

5-3冬を楽しむインタラクティブアート 雪とくらげ 京都水族館

6.色差・明度

色相や明暗の差を利用して、印象を強める手法。
普通の写真でも、背景に色を置いたり、色味を加工することで、インパクトのあるビジュアルになります。

6-1ストリアクリニック|男性・女性脱毛|博多駅前の医療レーザー脱毛専門医院

6-2RECRUIT DNA|リクルートホールディングス 2017年度新卒Web採用サイト

6-3Anniversary of the Warsaw Rising

7.タイリング

タイルを貼るように要素を配置する手法。
四角だけでなく、丸くしたり、多角形にしてるのも見かけます。
見せたい要素が多いときに使える手法です。

7-1有限会社マルヒロ 波佐見焼の陶磁器ブランド

7-2任天堂ホームページ|Nintendo

7-3熊本大学工学部 物質生命化学科

8.フレーミング

フレームに写真やイラストを入れる手法。
webだとフレームの中がスライドになっていることも多く、普通に四角でするよりも、強い印象を与えることができます。

8-1滋賀県近江八幡市に根差す歯医者 クラウド歯科 CLOUD DENTAL CLINIC

8-2ヒノヨコ.com 名古屋の子育てはじめてのひよこママへ

8-3Home 「櫟」普及委員会

9.トリミング

写真の一部をクローズアップする手法。
あえてトリミング+拡大することで、印象が強くなります。

9-1福岡市南区|ふくだ内科循環器・糖尿病内科

9-2淡路交通株式会社

9-3清酒「熊野古道」 鈴木宗右衛門酒造

10.切り抜き

物や人物を輪郭にそって切り抜く手法。
あちこちに配置することで、賑やかな印象になります。

10-2ランドセルなら【天使のはね】 軽く背負えてずっと丈夫! セイバン

10-1カゴメ つくろう!My野菜生活 スムージーレシピサイト

10-3世界のおいしいカフェ特集|女子旅COLLECTION マイトリ|JTB

11.スケール

現実ではあり得ないサイズ比率で配置する手法。
人物もミニチュアっぽくすることで、世界観が演出できます。

11-1おいしい豚肉通販、直販。ほそやの「まる豚」 有限会社ほそや

11-2大分で注文住宅を建てるならサラダホームにお任せください!

11-3大手前大学 健康栄養学部管理栄養学科


普段何気なく、いいなと感じたサイトも、改めてレイアウト別に見ていくと勉強になりますね。
今回、レイアウト手法の種類についてはこの本を参考にしました。

レイアウト手法別 広告デザイン
パイインターナショナル (2015-12-10)

紹介されているのは広告ポスターですが、webデザインでも参考になる書籍です。
作例のデザインごとに、制作意図も少し載っています。
それぞれの手法の効果を知ることで、自分がデザインするときにも役立てるのでよかったです。

中の人について

matsui
大阪でwebのお仕事をしています。
ブログでは最近学んだことや、勉強会に参加したことを書いてます。