名作から学ぶ！構図が与える印象と活用例8選

今回のコラムでは、空間を意識したレイアウト力の向上や、効果的な要素の配置・表現力を目的とし、
さまざまな名作から構図が与える印象と活用例を見ていきます。

美的感覚とは個人の主観によるところが大きいと言われています。
しかし「構図」は絵画や建築などによく用いられる客観的なひとつの基準です。
構図のメソッドをWEBデザインに取り入れることで、普遍的な感覚を身につけると共に、レイアウトに悩む時間の短縮を図り、効率を追求しましょう！

今回取り上げる3つの構図を名画から分析

三分割構図

『神奈川沖浪裏』

（参照） http://ja.wikipedia.org/wiki/%E5%AF%8C%E5%B6%BD%E4%B8%89%E5%8D%81%E5%85%AD%E6%99%AF#/media/File:The_Great_Wave_off_Kanagawa.jpg

黄金比率

『真珠の耳飾りの少女』

（参照） https://ja.wikipedia.org/wiki/%E7%9C%9F%E7%8F%A0%E3%81%AE%E8%80%B3%E9%A3%BE%E3%82%8A%E3%81%AE%E5%B0%91%E5%A5%B3#/media/File:Johannes_Vermeer_(1632-1675)_-_The_Girl_With_The_Pearl_Earring_(1665).jpg

黄金分割

『風神雷神図』

（参照） http://ja.wikipedia.org/wiki/%E9%A2%A8%E7%A5%9E%E9%9B%B7%E7%A5%9E%E5%9B%B3#/media/File:Fujinraijin-tawaraya.jpg

WEBサイトで上記3構図を活用しているデザインをピックアップ

三分割構図

ジー | ロート製薬: 商品情報サイト http://jp.rohto.com/zi/

三分割の交点にモデルの目、大キャッチ、小キャッチを配置しています。
レイアウトは整理されているので、各要素を複雑にしてもアンバランスさはありません。
商品の画像を交点に配置したくなるが、あえて「ハズす」ことで、このレイアウトの中ではかえって注目を集めることができています。

★三分割構図のポイント

各要素を派手にしても安定したレイアウトになります。
汎用的に活用できるので、どのようなサイトにも向いているが、あえてハズすポイントを与えることでより強調させることも可能です。

黄金比率

男の最前線へ。はじめてのプレミアムスキンケア。 | P.G.C.D.HOMME http://www.pgcd.jp/homme/campaign/20140707/

モデルを大胆に配置したこのページ。
まるでミケランジェロ制作の石造を彷彿とさせるポーズは見事に黄金比を構成しており、これ以上ない空間のバランスを演出しています。
明暗のコントラストをつけ、人物の存在感を際立たせることで、一目見ただけで強烈な印象を残すことができています。

★黄金比率のポイント

安定と躍動感のバランスを両立させることが可能。
モデルを使って強い印象を残すことができるので、ブランディング訴求のサイトなどに向いています。

黄金分割

ポカリスエットイオンウォーター | 大塚製薬 http://pocarisweat-ionwater.jp/

大枠の対角線で分けられた三角形で、「キャッチのエリア」と「イメージのエリア」を構成しています。
構図を活用することにより、要素に角度がついた不安定なものも、目線の流れを損なうことなくレイアウトされています。