デザインの原則。 Compositional, 非対称のバランス

Steven Bradley

著者について

Steven Bradley氏はDesign Fundamentalsの著者です。 Elements, Attributes, & Principles」や「CSS Animations and Transitions for the Modern Web」などの著書があります。

  • 18分で読める
  • インスピレーション、デザイン、クリエイティビティ、デザインの原則
  • オフラインで読めるように保存されている
  • Twitterでシェアする。 LinkedIn
バランスの取れた構図は正しいと感じます。 安定感があり、美的感覚に優れています。 バランスのとれた構成とは、ポジティブな要素とネガティブな空間の両方を、デザインのある部分が他の部分を圧倒することがないように配置することです。 すべての要素が連携し、シームレスに調和しています。

バランスのとれた構成は、正しいと感じられます。 安定感があり、美的感覚に優れています。

バランスのとれた構図とは、ポジティブな要素とネガティブなスペースの両方を、デザインのある部分が他の部分を圧倒しないように配置することです。

バランスのとれた構成とは、ポジティブな要素とネガティブなスペースの両方を配置することです。

バランスのとれていない構成は、緊張感をもたらします。 アンバランスなデザインでは、個々の要素が全体を支配してしまい、構成が部分の総和よりも小さくなってしまいます。

注:この記事は、デザインの原則に関するシリーズの第7回(最終回)です。

  • デザインの原則。 視覚的知覚とゲシュタルトの原理
  • デザインの原理。 空間と図と地の関係
  • デザインの原則。
  • デザインの原則:接続と分離
  • デザインの原則。 視覚的な重みと視覚的な方向性
  • デザインの原則。 優位性、フォーカルポイント、ヒエラルキー
  • デザインの原則。

幸福とは強さの問題ではなく、バランス、秩序、リズム、調和の問題である – Thomas Merton

物理的なバランスと視覚的なバランス

バランスは物理的な世界では理解しやすいものです。 バランスを崩したものは倒れる傾向にあります。

あなたは、シーソーや回転木馬に乗ったことがあると思います。

デザインの原則。
対称的にバランスのとれたシーソー

左の人はシーソーを反時計回りに回転させ、右の人は時計回りに同じ量だけ回転させます。

左の人はシーソーを反時計回りに回転させ、右の人は同じだけ時計回りに回転させます。それぞれの人の力は異なる方向に働き、その合計はゼロになります。

アンバランスなシーソー
アンバランスなシーソー。

この画像がしっくりこないのは、左の人が右の人とバランスを取れるほど大きくないことがわかっているからです。

しかし、大きい方の人が中央に向かってスライドすれば、シーソーは再びバランスをとることができます。

非対称にバランスのとれたシーソー
非対称にバランスのとれたシーソー

ここでは、シーソーがバランスをとっている支点に近いところにいることで、大きい人の力が軽減されています。

視覚的なバランスも同様です。 物理的な重さが視覚的な重さに置き換えられます。

念のため、視覚的な重みと視覚的な方向の定義を以下に示しますが、詳細はこのシリーズの 4 番目の記事を参照してください。

  • 視覚的な重み。 これは、視覚的な要素の知覚される重さです。 これは、ページ上の何かがどれだけ見る人の目を引きつけるかを示す尺度です。 これは、視覚的な力の知覚される方向です。

力を測定するために器具を使うことはありません。 道具を使って力を測るのではなく、数式を使ってバランスが取れているかどうかを計算するのでもありません。

Why Visual Balance Is Important

物理的な世界と同じように、視覚的なバランスは良いことです。 それ自体が好ましいものです。 バランスの取れていない構図は、見る人に違和感を与えます。

視覚的な重さとは、デザインの中の要素やエリアの視覚的な面白さを示す尺度です。 視覚的にバランスのとれた構成は、すべての部分に興味を持たせることができます。

視覚的なバランスが取れていないと、見る人はデザインのすべての部分を見ないかもしれません。 視覚的な重みや関心が低い部分には、おそらく時間をかけないでしょう。

デザインの視覚的なバランスをとるのは、構図の中の興味あるポイントのバランスをとり、伝えたい情報のすべてに時間を割いてもらいたいからです。

Four Types Of Balance

構図のバランスをとる方法は1つではありません。 前のセクションの画像は、そのうちの2つを示しています。 1つ目の画像は対称的なバランスの例で、2つ目の画像は非対称的なバランスの例です。

左右対称のバランス
左右対称のバランスです。

対称的なバランスとは、同じ重さのものが構図の同じ側にあり、中心にある支点や軸を中心にバランスをとっているときに起こります。 対称的なバランスは、形式的(フォーマルバランスと呼ばれることもあります)で優雅な印象を与えます。

対称的なバランスの欠点は、静的でつまらないと思われることです。

Asymmetrical balance
左右対称のバランスです。

左右非対称のバランスは、構図の各面における視覚的な重みが不均等であることから生じます。 構図の一方の側には支配的な要素があり、それがもう一方の側にある2つ以上のより小さな焦点によってバランスをとることができるかもしれません。

左右非対称のバランスは、よりダイナミックで面白いものです。

左右非対称のバランスは、よりダイナミックで面白く、モダニズム、動き、エネルギー、バイタリティを感じさせてくれます。

非対称のバランスは、よりダイナミックで面白いものです。

ラジアル・バランス
ラジアル・バランス

ラジアル・バランスは、要素が共通の中心から放射状に広がっているときに起こります。 太陽の光や、石を投げ入れた後の池の波紋などが放射状のバランスの例です。

すべてのものが共通の中心から放射状に広がっているので、すべてのものがその中心につながり、強い引き寄せのポイントとなります。

モザイクバランス
モザイクバランス.

モザイクバランス(または結晶学的バランス)は、バランスのとれたカオスから生まれます。 ジャクソン・ポラックの絵を思い浮かべてみてください。 構図には明確な焦点がなく、各要素は均一な強調点を共有しています。 ヒエラルキーがないので、一見するとノイズのように見えます。

対称性と非対称性

対称性と非対称性は、最終的なバランスとは関係なく、構図全体に使用することができます。

シンメトリーは通常、美しく調和のとれたものと考えられていますが、一方で、静的で退屈なものとも言えます。

対称性

対称性には主に3つのタイプがあります。

反射対称(または両側対称)は、中心軸の周りにすべてのものが鏡に映し出されるときに起こります。 おそらく、「対称性」という言葉を聞いて最初に思い浮かべるのはこの方法でしょう。

軸の一方の側にあるものは、他方の側にも映し出されます。 地表で成長したり移動したりする自然の形は、反射対称性を持っています。

その反射が完全な鏡像である場合、その対称性は純粋であると言われます。 しかし、多くの場合は完全ではなく、それぞれの面にわずかな違いがあります。

対称性は、同時に複数の軸で発生することもあります。

対称性は、同時に複数の軸で発生することもあります。例えば、構図の左半分と右半分が鏡に映り、上と下も鏡に映るような場合です。

回転対称性(または放射対称性)は、すべてのものが共通の中心の周りを回転するときに起こります。

回転対称(放射対称)とは、共通の中心を中心にすべてのものが回転することです。共通の中心がある限り、どのような角度や頻度でも発生します。 地表に対して垂直に成長したり移動したりする自然の形は、回転対称性を持っています。 ヒマワリの花びらがその例です。 反射を伴わない回転は、動きやスピード、ダイナミックなアクションを表現するのに使われます。

変換対称性(または結晶学的対称性)は、要素が空間内の異なる場所で繰り返されるときに起こります。 例えば、フェンスの支柱が繰り返されます。 この繰り返しにより、並進対称性が生まれます。 並進対称性は、基本的な方向が同じであれば、どの方向、どの距離でも発生します。 自然の形は、再現することで変換対称性を生み出します。 並進対称性によって、リズム、動き、スピード、ダイナミックなアクションを生み出すことができます。

蝶は反射対称、柵の柱は並進対称、ヒマワリは放射対称の例
蝶は反射対称、柵の柱は並進対称、ヒマワリは放射対称の例です。

対称的な形は、一般的には地面とは対照的に、図として見られます。

対称的な形は、同じような大きさや形の非対称的な形よりも重みがあります。

対称的な形は、それ自体がバランスを伝えるものですが、安定しすぎてバランスが取れすぎているように見え、面白みに欠けることになりかねません。

Asymmetry

Asymmetrical formはsymmetrical formのバランスを欠いていますが、構図全体のバランスを非対称にすることはできます。

対称性は、要素間のより複雑な関係を作り出すので、対称性よりも面白い傾向があります。

非対称の形の周りの空間は、より活動的になります。

非対称の形の周りの空間はより活発で、予測できないパターンが生まれ、全体的に対称よりも非対称の方が表現の自由度が高くなります。

類似性とコントラストの組み合わせと同じように、シンメトリーとアシンメトリーをうまく組み合わせることができます。 シンメトリーな形をアシンメトリーにバランスさせたり、アシンメトリーな形をシンメトリーにバランスさせたり。 対称的な形をランダムなマークで崩して面白さを出す。

ゲシュタルトの原理

この連載では、ゲシュタルトの原理からいかに多くのデザインの原理が生まれているかを指摘してきました。

ゲシュタルトの原理の 1 つは、特に対称性と秩序を扱っており、構成のバランスに確かに当てはまります。

対称的な形のシンプルさは、「プレグナンツの法則」によって予測されます。

対称形のシンプルさは、「プレグナンツの法則」によって予測されます。 継続性、共通の運命、平行性などの原理は、視覚的な方向性を与えます。

ゲシュタルトの原理が、私たちを導いてくれるデザインの原則の多くにつながっているという考えが、このシリーズを読むことで明らかになったと思います。

スクリーンショットの時間です。

これまでの連載で繰り返し述べてきたように、ここから先は私の意見です。

これまでの連載でも繰り返し述べてきましたが、ここから先は私の意見です。 あなたは違う見方をするかもしれませんが、それはそれで構いません。

Examples of Symmetrical Balance

Helen & Hardのウェブサイト全体のデザインは、対称的にバランスが取れています。

Helen Hardのスクリーンショット
Helen & Hardの「About」ページのスクリーンショット。 (大きく表示されます)

すべてのものが、ページの中心にある垂直軸を中心に反映されています。 ロゴは中央に、ナビゲーションバーは中央に、円形の画像は中央に、見出しは中央に、テキストの3つの列は中央に配置されています。

バランスは完全に対称ではありません。

しかし、ページの上部に注目してください。 ロゴもナビゲーションバーも中央に配置されていますが、視覚的には中央に配置されているようには見えません。 私の目には、ロゴがアンパサンドの中央にあるか、少なくともそれに近い位置にあると映ります。 ナビゲーションバーの右側にある3つのメニュー項目は、左側のものよりも文字数が多い。

これらの2つの要素を中央から移動させて、視覚的に中央にあるように見せることで、構図のバランスが少し良くなると思います。

Tildeのホームページも対称的にバランスが取れているデザインです。 Helen & Hardのように、ここでは、ナビゲーション、テキスト、画像の中の人など、すべてがページの中央を走る垂直軸を中心に展開しています。

0Tildeのホームページのスクリーンショット
Tildeのホームページのスクリーンショットです。

Helen & Hardのように、シンメトリーは純粋ではありません。 中央に配置されたテキストの行は、鏡像ではありません。 また、いくつかの要素がずれています。「チーム紹介」の右向きの矢印と、右向きの別の矢印で終わるページ下部のテキストです。

どちらも行動を促すもので、対称性を崩し、自分自身に特別な注意を向けています。

Examples of Asymmetrical Balance

Carrie Voldengen氏のポートフォリオのホームページは、支配的な対称形の周りに全体的な非対称のバランスを示しています。

Carrie Voldengen氏のホームページのスクリーンショット
Carrie Voldengen氏のホームページのスクリーンショットです。

ページの塊は、大きな長方形で、小さな長方形の画像のグリッドで構成されています。 このグリッドは、縦軸と横軸の両方で対称になっています。 とても強い安定感があります。

右側には、文字のブロックが形を引き下げています。

右には、テキストのブロックが形状を引き下げ、左上のテキストと円形のロゴがカウンターバランスをとっています。

想像上の支点までの距離は、重さとほぼ同じです。

右のテキストは全体的に大きくて暗いですが、青い円形のロゴはその全体に重みを与えています。

グリッドの下にあるテキストは、グリッドからぶら下がっているように見えますが、それだけではバランスを崩さない程度の軽さです。

空間もバランスが取れていることに注目してください。 左下、右上、右下、右下も含めてバランスが取れています。

Hirondelle USAのホームページでは、上部の画像が回転します。

Hirondelle USAのスクリーンショット
Hirondelle USAのスクリーンショット。 (大きく表示されます)

画像の柱は中央から少しずれていて、強い垂直線で構図を固定していますが、これは重さがわかっている物体です。 左側の手すりは、画面の左端と強いつながりを持っています。 これもまた、固定されている感じがします。

手すりの上のテキストは、手すりに支えられているように感じますが、右の少年の画像と視覚的にバランスがとれています。

手すりがポールの左側にぶら下がっているように見え、バランスを崩しているように見えるかもしれませんが、少年の本質的な面白さと、彼の背後にある背景の暗い色調が、手すりと左側のテキストの両方を相殺し、バランスを保っていると思います。

画像の左上と右下、さらにページ下のボタンにも金色のテキストの線が繰り返されており、翻訳の対称性が感じられます。

Examples of Radial Balance

Vlog.itのホームページは、スクリーンショットを見ていただければわかると思いますが、放射状のバランスをとっています。

Vlog.itのスクリーンショット
Vlog.itのスクリーンショットです。 (View large version)

スクリーンショットで見えないのは、ページの読み込み方です。 左下隅からページの中心まで線が引かれています。

右上の小さな円は、少し翻訳的な対称性といくつかの非対称性を加え、構成の視覚的な関心を高めています。

Opera の Shiny Demos ホームページは円形ではありませんが、テキスト リンクはすべて共通の、または共通に近い中心から発せられているように見えます。

Screenshot of Opera's Shiny Demos
Opera’s Shiny Demosのスクリーンショット。 (View large version)

左上の「Shiny Demos」の見出しと右下のOperaのロゴは、お互いにバランスをとっており、また、テキストリンクと同じ中心から放射状に広がっているように見えます。

これは、放射状のバランスが必ずしも円の使用を必要としないことを示す良い例です。

モザイク バランスの例

モザイク バランスの例としてジャクソン ポラックの絵画を提示した後では、モザイク バランスがオンラインで最も使用されていないと予想されるかもしれません。

「Rabbit’s Tale」のホームページがその良い例です。

Rabbit's Taleのスクリーンショット
Rabbit’s Taleのスクリーンショットです。 (大きく表示されます)

左右の色と空間の面積がほぼ同じで、お互いにバランスが取れています。 真ん中のウサギは支点の役割まで果たしています。

どの要素がお互いにバランスをとっているのか、要素ごとに考えようとは思いませんが、全体のバランスがとれていることに同意していただければ幸いです。

ニュースや雑誌のようなコンテンツの多いサイトでも、モザイクのバランスが取れています。 The Onionのホームページをご覧になったことがある方は多いと思います。

The Onionのスクリーンショット
The Onionのスクリーンショットです。 (大きく表示されます)

見るべきところがたくさんあります。 レイアウトは左右対称ではありません。 柱の大きさが揃っていない。 何が何を相殺しているのかを見極めるのは難しいですよね。 コンテンツのブロックは、中に入っているコンテンツの量が異なり、その結果、サイズも異なります。

異なるサイズのブロックには、ちょっとしたカオスとランダム性があり、あるものは他のものより密度が高いです。 ウェブサイトのストーリーは毎日変わるので、毎日違うカオスが現れます。

モザイクのようなバランスというと大げさかもしれませんが、やはりそうで、多くのウェブサイトがこのような混沌としたバランスを示していると言えるでしょう。

お察しの通り、私は基本的なことが重要だと考えています。 このシリーズは、これらすべての原則が、人間の知覚とゲシュタルト理論からどのようにして生まれるかを示すために始めました。 私が作ったものではありません。

例えば、私たちがフォーカルポイントに気づく理由の1つは、フォーカルポイントが周囲の要素と対照的だからです。 フォーカルポイントは、周りの要素とのコントラストが強く、異質なものとして際立ちます。 これは、敵と味方を素早く見分けるのに重要なことです。

しかし、デザインの原則は堅苦しいルールではありません。 あくまでもガイドラインです。 例えば、2つの要素が似ているか違うかを伝えるのに、正しい方法はありません。

また、このシリーズを楽しんでいただき、何かをきっかけにデザインのビジュアル コミュニケーションをよりコントロールできるようになれば幸いです。

Additional Resources

  • 「Is Your Web Design Balanced? James George
  • 「Visual Balance」Cheryl Qian
  • 「Balance – Symmetry」James T. Saw
  • 「Understanding the Importance of Balance in Graphic Design」Mark Masters
  • 「Photography Rules of Composition: 視覚的な重み」ジュリー・ウォーターハウス
  • 「デザインの原則。 Charlotte Jirousek
  • “A Fine Balance,” Erik Spiekermann
  • “Art and Visual Perception by Rudolph Arnheim: Notes by Frederic F. Leymarie” (PDF) LeymarieによるArnheimの本のノート。
  • “Map Design” (PDF) Cartography:
Smashing Editorial(il, ml, al)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です