写真から考えるWebデザイン – 構図レイアウト –

 

Webデザインやその他デザイン作業に携わったことがある方ならわかる悩み。

その一つが「全体のバランスが取れない」では無いでしょうか。

 

Webページで言えば、ヘッダー・フッダー、サイドバーやボタンなどのパーツ、

それら細部のデザインに注力したのに、いざ一つにまとめた時に調和が取れない。

また注目して欲しいコンテンツを全体の中で目立たせることができないという悩みもあるかもしれません。

 

それらの悩みを解決する手段として様々な方法が考えられますが、

今回は、「構図」という観点から考えていきたいと思います。

 

 

---

構図とは

デジタル大辞泉によると、

１ 絵画・写真などで仕上がりの効果を配慮した画面の構成。コンポジション。「構図がいい写真」「斬新な構図」
２ 構成された図形。
３ 物事を全体的にとらえたときのすがた・かたち。「未来都市の―を語る」「汚職事件の―」

とあります。

 

上記のように、構図という言葉に聞き馴染みのある方には

絵を描かれる方や写真の撮影技法を学んだことがある方などが多いのでは無いでしょうか。

かく言う私も写真撮影が趣味なので、日頃から構図を意識することがあります。

 

と言っても絵画や写真においてのみ効果的な構図などと言うものは存在しません。

全てのデザインに当てはまる考え方ですし、

デザインに秀でているWebサイトでは効果的に使用されていることが分かります。

 

なので今回は私自身が写真撮影において意識することが多い構図に絞って見ていきますが、

写真に限らず様々な場面で活用ができるはずです。

(あくまで基本的な部分ではありますが)

 

 

---

構図の種類

三分割法

三分割法とはその名の通り画面を縦線3本、横線3本によって画面を9等分に分割する構図です。

 

 

 

この構図は全体のバランスをとるのにとても優れていて、

また目立たせたいものを簡単に目立たせることができます。

 

縦線と横線が交差する部分に重要なコンテンツを置くことで

全体としてのバランスが取れ、また注目させることができます。

 

以下のLPでも重要なメッセージや登録ボタンは三分割した交点部分に設置されていることが分かります。

(人間のイラストを使用した視点誘導のテクニックも併せて使用されています)

 

 

基本的な構図として様々な場面で活躍するので迷ったらまず意識してみると良いかもしれません。

 

 

日の丸構図

写真の世界では嫌われることが多いのが日の丸構図です。

というのも何も考えず被写体を捉えた場合、自然となることが多く素人っぽいとされているからです。

ですが、逆にいうと意図がある日の丸構図はとても効果的に被写体を目立たせることができます。

 

名前の通り日の丸のように画面の真ん中に目立たせたいものを設置します。

特に被写体とそうで無い部分のコントラストが大きいほど効果を発揮します。

 

以下のWebサイトでもコンテンツを中央に置き、

インパクトを持たせ革新性や新しさを連想させることに成功しています。

 

 

インパクトを与えたい時やコンテンツをとにかく目立たせたいという際に効果的です。

 

三角構図

こちらも名前の通りに画面内に三角形を設置する構図です。

画面の下部の面積が広く安定した印象を与えることができます。

 

このLPでは製品を画面の真ん中に三角形になるように設置されていることが分かります。

製品の重厚感や安定性を上手く表現しているように受け取れます。

 

 

 

額縁構図

この構図は画面内にもう一つ枠を作って額縁のように見せるテクニックです。

この枠内にあるものには目線が行きやすく、見せたいものに集中させることができます。

 

このWebサイトでは画面内にさらに画面を作って読ませたい説明を設置しています。

自然に枠内の文字に目が行ってしまうことが分かると思います。

 

 

 

黄金比

縦と横の比率が1：1.618で構成されたものを人間は美しいと感じることが分かっています。

特に下記の図で有名な黄金比ですが写真に限らず、様々な場所で用いられています。

多くのWebサイトがこの黄金律に沿ってデザインされていることが分かっています。

サイドバーを使用した2カラムレイアウトなどはとてもポピュラーなWebサイトの構成ですが、

このカラムの比率を1：1.618にすることで違和感の無いものにすることができると言われています。

 

リーディング・ライン

リーディングラインは構図という表現とは少し異なるかもしれませんが、

画面内の直線や空白を適切に配置して、ある点に注目させるテクニックです。

このページでは画面内を斜めの直線を横断させることによって、

目線が下へ下へとストレスなく誘導されることがわかると思います。

 

 

 

奇数の法則

こちらも構図という枠組みからはずれますが、意識すると表現の幅が広がるはずなので紹介します。

一つの考え方として、背景や被写体が偶数の場合人間はどれに注目したら良いか迷ってしまうというものがあります。

 

 

以下のページでもカードを3つ、奇数で設置することによって

それぞれの優劣を付けずに注目させるような配置になっています。

 

ただこの考えに関しては絶対的にそうであるとは個人的に言えないので、

使い所は限られるかもしれません。

(偶数カラムのWebサイトもそれが原因で見辛いと感じたことは特に無いので)

迷った時にそんな考え方もあったな程度で覚えておくと良いかもしれません。

 

 

---

構図が全てか

ここまで構図について説明をしましたが、

ひとつ意識しておかなくてはならないのは、

全てを構図通りに設置すれば良いものになる訳では無い

ということです。

 

絵画や写真、もちろんデザインにおいてもこれが正解という決まりが無いのは明らかです。

あえて構図を崩したブロークングリッドレイアウトという手法が流行している通り

色々な表現の手法があり、型通りのデザインが最善では無いはずです。

 

構図という概念は、それだけに縛られず基本的な考え方というような気持ちでいるのが良いかと思います。

 

駆け足にはなってしまいましたが、今回は以上にしたいと思います。

構図を意識してWebサイトや色々なコンテンツをみてみると新たな発見があるかもしれません。

 

参考:

http://japan.digitaldj-network.net/archives/51697026.html