WEBデザインをグッと良くするコツと考え方（デザインの重心編：その1）

デザインをしている時にこのように感じたことはありません？

私はよ〜〜くありました！今もあります！
そういう場合解決方法の１つとして「デザインの重心」を意識して考えて見るといいかもしれません。

というのも、人は知らず知らずのうちに重力を意識し物事を見てしまいます。
例えばすごく傾いた物や無作為に積み上がった物などを見ると、
「崩れそう・倒れそう」と感じたり、左右均等な物を見ると「安定感がある」など。
これはwebデザインにもあてはまることで違和感の原因になっている場合があります。

今回は「デザインの重心編」の最初としてwebデザイン初心者の方でも理解しやすいスタンダードな2カラムレイアウトを使い「重心がずれたことによる違和感」と「その原因と改善案」を説明していきたいと思います。

重心のずれた2カラムレイアウトの例

こちらのレイアウトの重心が崩れている理由は大きく2つです。

もう少し詳しく説明すると、

中央寄せのテキストエリアはシンメトリー（左右対象）な印象を与えるのに対して、右側だけに写真があると「右に傾いている」という印象になり違和感がでてしまいます。

中央寄せは左寄せに比べると注目を集める効果は高いですが、その分「中心はここだ！」という主張が強くなるので写真とのバランスも際立ってしまいます。
（中央寄せでも重心がとれる方法はありますがそれはまた今後ご紹介します）

こちらはテキストの部分のみ見たとしてもタイトルに対してボタンが大きすぎることで重心が下がって見え、ぼってりした印象になってしまいます。

重心とは別ですがそもそもボタンは一番見せたい要素ではないですよね。タイトルと本文が主役なので優先順位にはっきりさせた上でバランスが取れるようにしないといけません。

先ほどの【1】【2】を修正した案になります。
左寄せにすることでテキストと写真が左右にしっかり分かれ重心のとれた印象になりました。

またタイトルを少し大きくしその分ボタンを小さくすることでトータル的にバランスが良くなり自然に読みやすくなりました。（テキストエリア内での優先順位を明確にする意味も含みます）

ごく普通の左寄せレイアウトで「結局普通のこれ？」と感じる方もいると思いますが、この「自然に読める」ことが大事で、しっかりと理由がありこの定番の形が出来上がっているということの理解が大事だと思います。

今回は始めなので重心についての概要に近い内容でしたが、次回「デザインの重心編：その2」はより実践的なお話ができればと思います。