Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

見えざる力:整列、方向、焦点

by
Length:ShortLanguages:
This post is part of a series called Invisible Forces in Design.
Invisible Forces: Size, Contrast, and Balance

Japanese (日本語) translation by obamik (you can also view the original English article)

デザインは様々な「見えざる力」に支配されており、その力によって円滑でわかりやすいコミュニケーションが容易になります。 ピッタリと合ったフォントや色の組み合わせを探すのにいくら労力を費やしても、この見えざる力に気を配らないとデザインは残念な結果に終わることになるでしょう。

この記事は、その見えざる力に関する全3回の連載のうちの第1回目です。では、整列(alignment)、方向(direction)、焦点(focus)から始めましょう。

「要素」とは何か

デザインの見えざる力を突き詰めて考えるには、デザインをフォント、色、画像、テキストなどとして考えるのではなく、それらを「要素」(element)として考えることが必要です。

見出しの一つひとつも「要素」、本文の各段落も一つの大きな「要素」、画像もそれぞれが「要素」なのです。

その要素の一つひとつの中にも別の要素があります。そういう要素を「副要素」と呼んでもいいかもしれません。 ロゴには、「シンボル」要素と「テキスト」要素があることもあります。 テキストの中の文字それぞれが要素と考えられることもあります。

このように要素の話をすると化学の授業を連想してしまいますが(私は受けたことはないですが)、実際これは適切なのです。 要素を正しく配置すると、ページから飛び出すような爆発的なものが得られる。 でも、いい加減に配置すると、不発に終わるわけです。

整列

デザインは簡単ではありません。退屈な二次元の空間を取り出して、それを面白くすると同時に、わかりやすく情報を伝える必要があるからです。 特に携帯やウェアラブルコンピューターの小さな画面が氾濫する今となっては、できる限り効率的に行うことが重要で、 ピクセル一つひとつが役割を果たす必要があります。

なので、整列がとても重要なのです。 要素の整列によって、いろいろなことを伝えることができます。

例えば、次の正方形は整列しています。

その整列の仕方を変えると、構図が完全に変わります。

整列を崩すと、秩序が乱れているように見えます。

正方形の代わりに、ソーシャルメディアのアイコンを使うと、整列の効果がよくわかるでしょう。 次のソーシャルメディアのアイコンが・・・

次のように見えたらどう思いますか?

方向

要素を整列すると、透明な線が方向を示しているような印象が生まれます。 洗練されたデザイナーはこの透明な線を「軸(axis)」と呼んだりします。 車輪の軸と同じように考えましょう。車輪の重量は軸を中心に回転するため、 バランスが取れていないといけません。 同様に、軸を考えると構図のバランスを取るのに効果的です。

次の図では要素がきれいに並んでいますよね。 これらの要素を構図の軸と考えることができます。

他の要素をこの軸の近くに配置すると、軸の影響力は変わらず、軸により構図が決まることに変わりはありません。

でも、悪の枢軸ではないですが、軸には注意する必要があります。 例えば、中央揃えのテキストと「非対称」の構図を混ぜないこと。

中心揃え、左揃え、右揃えなどテキストをどのように配置するにしても(ウェブでは均等揃え(justified)は避ける)、その整列によって軸ができます。

テキストを中央揃えにすると、それによって軸ができ、テキストの重量はその軸を中心として回ります。 残りの構図もその軸を中心として回るのが自然に見えます。

なので、もし中央揃えのテキストの隣に左揃えのテキストを入れると、構図がわかりにくくなる。 二つの軸がお互いに競い合っているのです。

例外は、中央揃えの要素が構図の幅全体に及び、左揃えあるいは右揃えの要素がその構図の中に存在する場合です。 その場合は軸は競い合っている訳ではありません。

各列のコンテンツは左揃えであることに注目してください。

これはモバイルデザインでよく見られるパターンです。 次のYelpアプリのスクリーンショットでは、一番上と一番下のメニューバーは中央揃えですが、残りの部分は左揃えになっています。

別の方法として、一つの列を右揃えにし、もう一つの列を左揃えにすることで生じる溝(gutter)を使って軸を作ることもできます。

焦点

ここまでは垂直方向の軸に注目してきましたが、 水平方向の軸を使うこともできます。斜め方向の軸も可能ですが、ウェブやモバイルデザインではまれです。

二つの強い軸が交差すると、一般的に焦点が生まれます。 視線は自然と強い軸に惹かれるので、軸が交わると、その交差点で視線が止まるわけです。

ウェブやモバイルデザインでは、どの時点においても何かしらユーザーに注目してもらいたいものがあると思いますが、軸を交差させることでユーザーの注目を集めることができるのです。例えば、次のランディングページの例を見てください。

左揃えのテキストがまず軸を作り、「BUY NOW」(今すぐ購入)ボタンと画像の整列が別の軸を作っています その二つの軸が交差する部分で焦点が生まれるのです。

まとめ

整列により軸を作り、方向を決め、焦点を生み出すことにより、読みやすさを向上させたり、コンバージョンを増やしたりといったデザインの目的をより効果的に達成することが可能となります。

次の記事では、要素のサイズを変えることで、デザインを調和的で美しく、わかりやすいものにする方法についてお話します。お楽しみに。

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.