Webサイトのメインビジュアルの構図を集めて分析してみた。｜ameko

初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で７０個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。（BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。） 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。（もしこの構図の正式名称とかあった

[otakumesi]

デザインパターンって感じだ

[mayumayu_nimolove]

こういうの紹介する時って何でPCサイトなの？

[kewpiedesign]

メインビジュアル、写真とかに気を取られがちでレイアウトを意識しづらいので、こういうまとめがあると便利だな

[aoiasaba]

ヒーローヘッダ

[josch_so36]

トップ画面の構図がうまいこと分類されていた

[amanomurakumo]

まとめると見えてくるものもあるのかなー

[aftercider]

とてもよい

[kurimax]

ヘぇ〜

[develtaro]

面白かった。個人的にはフルはあまり好きじゃない

[macmacmac]

、

[keepoutfromhell]

とりあえず

[nowandzen]

あるあるだらけ。PCタブレットスマホのディスプレイはカンバスとしては小さいよな。まあクリエイティブ第一で競ってるわけじゃないだろうけど

[hatahata_chan]

今のトレンド分析にもなる。あとでじっくり見たい。

[emj1025]

ちゃんと理由をもってデザインしたい

[Fujitubo]

これはよいまとめ。「○○っぽい感じですかね？」と言う共通認識を持てればデザイン作るときの意志疎通もしやすい。

[kurobuchi]

メインビジュアルのレイアウトパターン。ちゃんと機能面での説明もあってありがたい。

[y_maeyama]

BtoBサイトのメインコピーとメインビジュアルがどういう構図になっているか分析した力作。結構パターンあるのね。