デザインの基本原則:シンメトリーとアシンメトリー

Mads Soegaard

MadsはInteraction Design Foundationの共同創設者および編集長。

この記事はInteraction Design Foundationからの翻訳転載です。配信元または著者の許可を得て配信しています。

Symmetry vs. Asymmetry - Recalling basic design principles (2016-06-05)

デザインにおける2つの重要な原則を見ていきます。これらは一見あまりに単純で当たり前のようで、考えるほどのことでもないように思えるでしょう。しかし私たちはその性質や効果を過小評価してはいけません。つねにシンメトリー(対称)とアシンメトリー(非対称)を心にとどめておくことで、デザインを計画して実行するときに、より良い判断を下せるようになるでしょう。

デザインを組成する個々の要素を、中心点や中心軸を基に均等に配置すると、シンメトリーのデザインになります。自然界におけるシンメトリーのわかりやすい例が蝶々です。左右の羽が(完全に同じでなくても)きわめて似た模様をしています。

反射して映っている両側が完全に同じなとき、完璧なシンメトリーが成立します。バスルームの鏡に向かって、右手の指を突き出してみましょう。そしてその指と鏡の中の指とを、そのアングルのまま見てください(体を思い切りよじらせて、遠くから眺めようとする必要はありません)。鏡がピカピカな状態だと、このとき本物の右手と反転して左手のように見える鏡像は、完璧なシンメトリーになっています。

幸い、シンメトリーのデザインには、鏡のように完全に同じ像が必要なわけではありません。シンメトリーによって効果が得られることが重要であり、必ずしも厳密である必要はありません。デザインを考えるうえで、幾何的に完璧であることを心配しなくても、ユーザーの目線を巧みに操作することができるのです。

対して、アシンメトリーは対称性があらゆる意味で欠如した状態です。中心点や中心軸のまわりに不均衡に要素を配置してデザインすれば、結果的にどれもアシンメトリーのデザインとなります。デザインのある箇所に注目を集めたいときや、ユーザーに流動性や躍動感を伝えたいときなどに、アシンメトリーを活用することができます。

生物学と同じように、要素とは細胞や生態系の一部のようなものです。シンメトリーを用いてバランスのとれた状態を構築することで、究極的には「健康的な」、すなわちより効果的なデザインの作成ができることを覚えておきましょう。

シンメトリーの種類

回転対称、線対称、映進対称、並進対称

どのように対称となっているかによって、シンメトリー(対称)は以下のように分類できます:

回転対称―シンメトリーにおいて、それぞれのデザイン要素が垂直に(正しいアングルで)配置されている必要はありません。中心点(回転の中心)が設定されており、対称性が保たれている状態でそのデザインを回転させる場合は、回転対称となります。ですから、スクリーンやページを思い描く際には、4分割(たとえば、左上、右上、右下、左下)だけに制限することのないようにしましょう。角度や座標をもっと柔軟にとらえて、デザインの対称性を円のようにみなしましょう。

並進対称―並進対称は、要素を対称性が損なわれないように動かす(平行移動する)場合に生じます。デザイナーがページ全体で並進対称を用いることはあまりないでしょう。むしろ、ページ中の個々の要素に対して用いることがあるかもしれません。

線対称―画像の半分がもう半分の鏡像であるような事例は、線対称となります。鏡の中の指の像を思い出してください。これがもっとも厳密な意味でのシンメトリーです。

映進対称―砂や雪の上の足跡を見たことがあれば、実際に映進対称を見たことになります。映進対称の考え方はシンプルです。イメージを反転させて動かします。ただ反転するかわりに、ある特定の方法で変化させたようにコピーを作成するのです。画像を反転させたり、漂流しているかのように見せたりすることで、その方向に対して動きのある印象を伝えます。

シンメトリーとバランス

シンメトリーは、秩序だったデザインを作るアプローチです。すっきりと整ったデザインを生み出すことで、ユーザーは各要素をより迅速にとらえることができます。人間の目は、シンメトリーがもたらすバランス状態を好意的に認識します。2つの要素が完璧に対称でなく、シンメトリーだと認識するのに「十分近い」疑似対称であってもそれは同じです。

シンメトリーによるバランスは、ときに「形式的バランス」と呼ばれます。Webデザインやアプリデザインでこれを達成するのは困難です。シンメトリーはその性質から、Googleのホームページのような、とてもシンプルで特殊なレイアウトに限定されてしまいます。実は疑似対称であるGoogleのメインページは、なんの理由なく、自ずと対称に見えることを覚えておきましょう。

私たちはGoogleを、「キーワードやテーマを検索する」という1つの主要な目的を達成するために使います。ですから途中で気を散らすようなものがなく、目的の場所へと導いてくれるようなツールをより使い勝手が良いと感じます。重要なトピックに気付いたり、思い出したりして、今まで何回検索ワードを入力してきましたか? そのとき、もしGoogleのメインページが雑然としていたら、何かほかの機能を見るのに寄り道することが増えて、何を検索したかったのか忘れてしまうかもしれません。

より洗練されたデザインにおいて複雑性が要求されると、対称性のバランスを保つのはますます難しくなります。より複雑なデザインでシンメトリーを作ろうと思うと、シンメトリーを保つために強引にならざるを得ないことに気付くでしょう。当然、この効果は全体の見た目にも影響し、ユーザーの目に不自然な印象を与えます。

しかし、実は代わりの方法があるのです。多くのWebやアプリのデザインは「非形式的なバランス」に依存しています。これは、デザイン自体にある程度のアシンメトリーを認めつつも、垂直軸や水平軸の両側にあるコンテンツのバランスを保とうとすることを意味します。制約の多い厳密なシンメトリーを追及するかわりに、状況に合わせて最善を尽くし、要素を均等に配置するように努めるのです。

この「非形式的なバランス」は、まるで人生そのもののようではないでしょうか。たとえば正三角形がどのような形で、どれほど図形として完璧であるかを知っていても、実際にはそのように完璧なものは存在しません。また私たち人間の体は左右対称なように見えても、鏡のように完全には一致しないことも忘れてはなりません。ほくろやそばかす、切り傷などがあったり、片側の目が微妙に違う色だったり、また片方の腕が太かったり長かったりするなどの例を挙げれば、即座に理解できるでしょう。

まとめ

デザイナーはコンテンツを組み立てたり、ユーザーが使いやすいインターフェイスにするするために、Webやアプリのデザインにしばしばシンメトリーアシンメトリーを採用します。バランスや調和のとれたレイアウトを作るツールとして用いることで、この2つに留意していないデザインよりも(視覚的に、そして結果的に脳に対して)好意的な印象をもたらします。

しかしシンメトリーを用いるときには、注意が必要です。対称的なレイアウトが効果的であるためには、シンプルであることが要求されます。シンメトリーには以下のタイプがあります。

  • 回転対称
  • 並進対称
  • 線対称
  • 映進対称

ページがより複雑になると、対称性に固執することで視覚的に魅力のない、無益なレイアウトになってしまうかもしれません。解決策の1つとして、非対称なデザインを使って躍動感を出すことが挙げられます。言いかえると、アシンメトリーのデザインにすることで、シンメトリーのデザインにおける冷たく「平坦な」イメージとはまったく異なる、活動的で生き生きとした見た目にすることができます。

しかし高度な対称性のあるシンプルなページは、すっきりとした印象を与え、多くの場合大変使い勝手が良いです。ページの中央に1つのインタラクションポイントがある場合、特に顕著です。ログイン用ページや検索エンジンのホームページなどにおいてよく見受けられるでしょう。

また対称性は、レイアウトにより親和性を持たせるためにも使用されます。たとえばデザインにシンメトリーを用いることは、学習障害をもつ人にとって特に有益になります。

しかしデザインの複雑性が増すと、アシンメトリーを用いるほうがより簡単なことが多くなります。注意深く適用すれば、コール・トゥ・アクション(CTA)のような、ページ内で特に重要な部分に関心を集めることができます。つまり、ほかの大部分のコンテンツに埋もれてしまいがちな要素へ、注意を惹きつけることができるのです。

ではあなたのデザインではどちらがより有益なのか、少し考えてみてください。作業に取りかかって細かい部分を整えようとする前に、大きい目線に戻ってみましょう。ユーザーは誰ですか? 製品やサービス、伝えたいメッセージはどのようなものですか? もっとも重要な部分は何ですか? どの部分をユーザーが前もって「知っているだろう」部分として、表示を控えますか? どのページでどんな情報を伝えたいと考えていますか?

これらの質問に回答することができて初めて、そのページにとって、シンメトリーとアシンメトリーのデザインのどちらが向いているか、適切に決定を下すことが可能になるでしょう。またユーザーの目線はあなたが選択して組み合わせた中で動くので、デザインにおけるあらゆる要素や側面に配慮しなければならないことを覚えておきましょう。


イベント

2017/12/05(火)
Design Thinking Square