バランス

定義

バランスとは、画面の中にある要素の視覚的な重さが一方に偏らず、均等に分散している状態のことです。 ここでいう重さとは、実際のサイズだけでなく、色の濃さ、コントラスト、密度のように、 視線を引きつける力すべてを指します。左右が鏡のように同じならシンメトリー（対称）バランス、 見た目が違っていても大きな要素を小さな要素や広い余白で打ち消し合って重さがつり合えば、 アシンメトリー（非対称）バランスです。どちらの場合でも、画面がどこか一方の隅に傾かず、 安定して見えることが肝心です。バランスは要素をちょうど真ん中に置くことではなく、 性質の違う力を一つの天秤の上でつり合わせていく感覚に近く、だからこそ目で感じながら 調整していく原理なのです。

なぜ重要か

バランスの取れた画面は、ユーザーに安心感と信頼感を与えます。重さが一方に偏ると、 言葉にしづらい不安定さが目に伝わり、その印象はコンテンツの完成度やブランドへの信頼へと それとなくつながっていきます。対称バランスは安定して格式高く見えますが、ともすると 静的で平板になりがちです。一方、非対称バランスは躍動感や面白さを生みますが、 重さの配分にはより繊細な注意が求められます。目的に合わせてこの二つを選び分ける感覚が、 画面全体の雰囲気を決めます。銀行や役所の画面が対称を好んで使い、ブランドキャンペーンの ページが大胆な非対称を選ぶのもこのためです。バランスは結局、何をどれだけ強調し、 何を後ろに引かせるかという選択の結果であり、その選択の積み重ねが画面の性格を作り出します。

よくある間違い

• 要素のサイズさえ揃えればバランスが取れると考えてしまうケースです。サイズが同じでも、 色が濃かったりコントラストが強かったりする側のほうがずっと重く感じられるため、 定規で測ったように配置しても視覚的には一方に傾いて見えることがよくあります。
• 余白を重さとして計算に入れないケースです。余白も視線のバランスに立派に参加する要素であり、 片側に置いたゆったりとした空きスペースは、反対側の大きく濃い要素を静かに打ち消して、 全体を安定させてくれます。
• 安定を求めてすべてを対称でだけ揃えてしまうケースです。過度な対称は画面を静的で退屈にし、 本来見てほしい場所へ視線を導く力と、コンテンツの躍動感をどちらも失わせてしまいます。

実務のヒント

• 大きな画像の隣には短いテキストや広い余白を置いて、重さをつり合わせてみましょう。 性質の違う要素でバランスを取ると、平板に静的にならず、それでいて安定した非対称の構成が得られます。
• バランスが怪しいと感じたら、画面をぼかして見たり白黒に変えたりしてみましょう。 ディテールが消えて塊の重さだけが残ると、普段は見逃していた微妙な偏りがどちら側にあるのか、 ずっとはっきりと見えてきます。
• 格式と信頼が大切なら対称を、躍動感と個性が必要なら非対称を選びましょう。 どのバランスを使うか方向を先に決めておくと、その後で要素を配置するときに判断がぶれず、 画面ごとにバランスの性格がばらばらに散らかることも防げます。結果として製品全体の印象が一貫し、 チームで一緒に作業するときも基準がはっきりしているので、違う人の手を経ても仕上がりが大きくずれません。

関連概念