Wantedlyは、月間150万人が利用する国内最大のビジネスSNSです

This page is intended for users in Japan. Go to the page for users in United States.

ロジックや関係性を設計する。覚えておきたい基本のレイアウト

制作物の目的を達成するために、レイアウトを意識したデザインをすることは、伝えたいイメージを強調するための重要な要素の1つです。今回は、Webデザインにおける覚えておきたい基本レイアウトについて紹介します。

シンメトリー

対象物の中心に軸となるラインや点を配置し、その軸をもとに各要素を対称的に配置する技法をシンメトリーといいます。人間は、シンメトリーのように対称性のあるものを見ると無条件に美しいと感じる性質があり、左右の余白を均一にすることで、安定感のある静的な印象を与えることができます。また、配置する要素が多すぎたり、大きすぎたりすると圧迫感を与えてしまうため、この構図を活かすためには適度な余白を作ることが重要です。

応用テクニック:比較

シンメトリーの応用テクニックの比較とは、画面を2分割にして関連性の高い要素を対比させるレイアウト方法で、それらの関連性を視覚的に強調できるのが特徴です。また、読み手にインパクトを与えることができ、ストレートにメッセージを使えることができるので、広告などでも頻繁に使用されています。

世界でもっとも有名な比率

黄金比

黄金比とは、近似値「1:1.618」(約5:8)の比で構成する比率で、古代ギリシャ時代から美しい比率として扱われており、パルテノン神殿や、ミロのヴィーナス像など、さまざまな建築物や美術作品に取り入れられているため、デザインにおいて美学に要約されている比率とされています。

白銀比

白銀比とは、近似値「1:1.414」(1:√2)の比で構成される比率です。法隆寺などにこの白銀比が見られ、別名「大和比」とも呼ばれています。A判、B判と呼ばれる用紙サイズもこの比率で作られており、A1もB1も、A2もB2もすべて、1:√2の比率でてきているのです。黄金比に比べて、簡素で静的な印象を受け、日本人に馴染みのある比率とされています。

これらの黄金比や白銀比はあくまでも比率であり、その比率をどのように利用するのかはデザイナー次第です。

1/3の法則

画面を3等分してから、各エリアに要素を分けたり、目立たせたいポイントをレイアウトしたりすることで、全体のバランスをとる方法を1/3の法則といいます。1/3のうち2つのエリアを1つとして捉えた1:2の構図にすることで安定感のあるデザインに仕上がりますし、デザインのポイントとなる位置を決定する際にも役立ちます。この法則は、レイアウトに限った技法ではなく、写真を撮影する際の構図としても広く知られています。

まとめ

闇雲に感覚で文字や画像を配置するのではなく、ロジックや関係性に即してレイアウトすることで、読み手に伝えたい情報を的確に与えることができます。レイアウト次第で見え方や理解のしやすさが変わるので、基本のレイアウトルールを理解し、目的を達成するための配置設計をすることが大切です。

ブラニュー株式会社では一緒に働く仲間を募集しています
Anonymous
Fb409f36 9a3c 496f a997 35874b489ec8?1501395443
A7790dc0 5a16 4ebc 926f eab8be44a1e9
Picture?height=20&width=20
Picture?height=20&width=20
Picture?height=20&width=20
15 いいね!
Anonymous
Fb409f36 9a3c 496f a997 35874b489ec8?1501395443
A7790dc0 5a16 4ebc 926f eab8be44a1e9
Picture?height=20&width=20
Picture?height=20&width=20
Picture?height=20&width=20
15 いいね!

今週のランキング

ランキングをみる

Page top icon