われわれの目はとても奇妙な器官であり、ときどきわれわれ自身に嘘をつきます。ヒトの視知覚の特性を知っていれば、より親しみやすく、よりすっきりとしたデザインの作成が可能となるでしょう。視覚トリックを活用し、読みやすくてバランスのとれたフォントを制作するタイプフェイスデザイナーだけでなく、ユーザーマシンを作るインターフェースデザイナーにとっても役に立つ知識です。

１．整然としたビジュアルサイズ

どちらが大きいでしょうか？：400ピクセル四方の正方形でしょうか？それとも400ピクセル四方の円でしょうか？幾何学的に言えば、どちらも幅と高さはまったく同じです。では、下図をご覧ください。われわれの目は、正方形の方が円より重い（大きい）と瞬時に捉えてしまうのです。余談ですが、ビジュアル効果を言い表す際には、重さに関係した単語の方が適切です。

この図形が正しく描かれていると信じられない方たちのために、ガイドラインと数字を付与したバージョンを用意しました。

それでは別の正方形と円を見てみましょう。ビジュアルの重さは同じでしょうか？

私にはまったく同じに見えます。少なくとも、どちらの方が大きい（重たい）かを瞬時に見分けるのは困難です。円の直径を50ピクセル大きくしただけなので、驚くようなことではありません。

なぜこのようなことが起きるのかを説明するために、最初の図形（400ピクセル四方の正方形と円）と、二番目に示した図形（400ピクセル四方の正方形と450ピクセル四方の円）を重ねてみましょう。下の図からわかるように、「a」の面積においては正方形の方が円よりも大きく、また「b」の面積においては円の方が正方形よりも大きくなっています。左側の図形は、正方形が円を四方から完全に包含しているように見えます。また、右側の図形では、円と正方形がバランスよく描かれており、包含し合っていません。さらに、右側の図では、正方形と円は、幅と高さが違うにもかかわらず、面積は同程度となっています。

ひし形や三角形でも同じ現象が起こります。正方形とバランスをとるために、より幅を広くし、高さを伸ばすことにより、面積が同程度になります。面積をベースとしたアプローチは、単純な形において完璧に作用します。

どのような場合にこのアプローチが活かせるでしょうか？たとえばアイコン作成時です。すべてのアイコンをバランス良くすることは非常に重要です。どのアイコンも突出してはいけないし、また小さくなってもいけません。正方形のエリアにアイコンを直に描きこんでしまうと、正方形に近い形状のアイコンは大きく見えてしまいます。

視覚的に小さなアイコンはアイコンエリアを覆うように、また、視覚的に重いアイコンは、アイコンエリアとの間に空間を設け、違う形のアイコン同士の重さを補い合うようにすることをお勧めします。

実際に使用されているアイコンがビジュアル的にバランス良くなりました。

アイコンエリアがアイコンボディより常に大きい理由がおわかりになりましたでしょうか。正方形ではないアイコンがフィットして、正方形のアイコンより小さく見えないようにするためです。

ビジュアルバランスの最も簡単なチェック方法は、対象物をぼやけさせることです。アイコンが同じような感じに見えれば、同じビジュアルの重さであるということです。

シェアやリンクに使用される SNS ロゴがありますが、フェイスブックとインスタグラムのアイコンは正方形、ツイッターは鳥のシルエット、ピンタレストは円で囲まれた「P」です。そのため、ツイッターとピンタレストのアイコンはやや大きめにできており、それにより、フェイスブックやインスタグラムのアイコンとバランスが取れています。

その他のビジュアルバランスの例として、丸いボタン付きのテキストボックスがあります。ボタンの直径がテキストボックスの高さと同じであれば、私たちの目にはボタンは小さく見えてしまいますが、ボタンの直径を少し大きくすると、全体のバランスが良くなります。

ボタンのスタイルを変えれば、サイズを大きくすることは不要です。下図では、ボタンとテキストボックスの高さは80ピクセルですが、右側のボタンは黒の塗りつぶしにより、「負けて（小さく）」見えたりはしません。

覚えておくべきこと

• ビジュアルの重さとは、ヒトの目がどのようにモノの大きさと特徴を知覚するかということであり、必ずしもピクセルサイズと同じである必要はない。

• 円、ひし形、三角形、その他四角形でない図形は、四角型のものとバランスがとれるように大きくしなければならない。

• ビジュアルバランスを取るために、アイコンエリアを幾分か確保すべきである。アイコンをセッティングする際、自然に見えるようにすることはきわめて重要である。

2．異なる形状の配置

視覚的に揃えるということは、ビジュアルバランストピックと、ビジュアルの重さの論理的な延長ということです。下図のストライプをご覧ください。二本のストライプは同じ長さに見えますでしょうか？

ピクセルについて言えば「はい」ですが、一見、下のストライプの方が上のストライプより短く見えます。

もう一つ二本のストライプの図をお見せしましょう。何か変わりましたか？

下のストライプに視覚的穴埋めを施しました。尖った部分を上のストライプよりも20ピクセル長くすることにより、二本のストライプは視覚的に同じ長さに見えるようになりました。

今度は、より複雑で異なる形状のストライプを例に挙げます。

折り曲がったストライプとテキストが描かれたポスターの作成中、もしくは、オンラインストアの商品カードに鮮やかな「ディスカウント」ストライプを添えている最中であれば、ビジュアルバランスを良くしなければなりません。特に長方形の場合には、尖った端部が他の部分よりも幾分はみ出すようにすべきです。

背景があるプレーンテキストやパラグラフを揃える場合はどうでしょうか？ 答えは背景のヴィジュアル濃度によります。背景色が淡い場合には、強調されたパラグラフを他のテキスト部と一直線に揃えることができます。

背景が淡いので、通常のテキストの流れを邪魔しません。

濃い背景の時には異なるアプローチが適用されます。図では、内側の白いテキストがインデントで配置されているにもかかわらず、黒い背景は他のテキストと平行に配置されています。

淡い背景の時とは違い、黒い背景の時にはしっかりとした重さがあり、パラグラフをシームレスに挿入したいのであれば、下図のように並べるべきです。

ボタンと入力欄にも同様の法則が当てはまります。もちろん独断的な意見などではなく、インターフェースの視覚に基づく見解です。

左側の入力欄の淡い背景は、入力ラベルとユーザー入力よりもはみ出しています。視知覚によってボタンが暗く重く見えるため、「Send」ボタンの右端は、ユーザー入力の背景の右端と完全に揃ってはいません。

右側の方は、ユーザー入力にしっかりとした縁取りがあり、ユーザー入力ボックス内にインデントがあるにもかかわらず、入力ラベルと平行にしました。「Send」ボタンは右端が三角形になっており、上の長方形の入力欄とバランスが取れるように、ボタンの位置を少し右にずらしました。

調整に関するもう一つの面について考察してみましょう。テキストとアイコンボタンの調整です。下のボタンをご覧ください。テキストは中央にありますよね？

右側のボタンでは、右端が三角形なので、単語を少し左に移動させました。さらに言うと、長方形のボタンと視覚的に同じ大きさに見えるように、矢印型のボタンは幅が40ピクセル長くなっています。

テキストボタンは水平揃えなだけでなく、単語や背景と垂直揃えにもなっています。まず最初にお伝えしたいアプローチ方法は、様々な OS やサイト、アプリケーションのインターフェースに使用されているものです。（いわゆるキャップハイトと呼ばれる）フォントの大文字の高さを基本にした揃え方です。「H」や「I」と同じ高さです。

大文字の上下にあるスペースとボタンの縁は同じになっています。これには意味があります。コマンド名は通常タイトルケースで記述され、英文字にはアセンダー（上部の飛び出した部分〈l、t、d、b、k、h〉）の方が、ディセンダ―（下にぶら下がっている部分〈y、j、g、p〉）より多くあるからです。

（エックスハイトとよばれる）フォントの小文字の高さを使用し、名前と背景を揃えるアプローチ方法もあります。サンセリフ体のインターフェースフォントでは、当然のことながら「x」と同じ高さです。

メインのビジュアルの重さが小文字が位置するエリアに集中するので、このアプローチ方法にも意味があります。

上記のアプローチ方法に違いはありますでしょうか？もちろんあります。と言っても、さほど大きな違いではありません。

比較のためにさらに例を挙げることにしましょう。左側に見られるキャップハイトアプローチは、一般的に広く使用されている「Cancel」と「OK」ボタンでは、間違いなく適切でしょう。なぜなら、「Cancel」にはディセンダ―が無く、「OK」はすべて大文字だからです。右側のエックスハイトアプローチは、上下に飛び出している部分のある「Sync」ボタンにだけ適切だと言えるでしょう。「Cancel」と「OK」の文字の位置は高すぎてしまいます。

アイコンボタンの位置に関しては少し違ってきます。広く普及している「Send」アイコンを丸いボタンの上に描いてみましょう。バランスが良いのはどちらでしょうか？

左側が何かおかしいと気付いたのであれば幸いです。配置方法が異なるためにこのような現象が起きるのです。左側の図は、アイコンを四角形として捉えています。ある意味それは正しいです。なぜなら、SVG ファイルや PNG ファイルをデベロッパーに送信する時は、ペーパープレーンのアートが描かれた四角形のシートだからです。右側の図では、アイコンは、そのすべての尖端から背景の円の縁までの距離が等しくなっています。

デベロッパーにファイルを用意する際には、余分な面積を設けましょう。そうすることで、彼らはアイコンを視覚的に正しく中央に配置することができるのです。

同じことが「Play」ボタンにも言えます。角丸と三角形をダイレクトに配置すると奇妙に見えてしまいます。

三角形がバランス良く見えるようにするには、三角形を円で囲み、それを背景のボタンと調整します。

覚えておくべきこと

• 尖った形状の場合、隣接する四角形とバランスをとるために大きくすべし。
• キャップハイト揃えは、ボタン名を効果的にボタン背景に配置するために広く使用されている方法である。
• ボタン上に三角形のアイコンを正しく配置する方法には、三角形を円で囲み、その円を背景と調整する方法がある。

3. 視覚的な角の丸め方

円よりも、より円らしくするにはどのようにすべきでしょうか？ この記事の冒頭で述べたとおり、私たちの目は奇妙なもので、ときどき予期せぬ知覚を引き起こします。下に描かれた円の中で、最も滑らかな円はどれでしょうか？

以前私が質問した方たちは、3番目もしくは4番目を選んでいました。1番目と2番目は確実に細すぎますし、5番目は丸々としすぎています。3番目と4番目（幾何学的な円と、修正を加えた円ですが）を重ね合わせると、修正された円の方がやや重く、その結果、私たちの目にはより円らしく見えるのです。

解説のために、有名な幾何学フォントである Futura、Circe、Geometria の「o」を取り上げます。上質なフォントが、ヒトの視知覚をベースに作られ、ビジュアル構造という洗練されたシステムを使用しているとするならば、円形の図形は、幾何学的な円よりも、より円らしく見えるはずであると推測できます。これらの文字は快適に見えないでしょうか？

上図の円を、幾何学的な円と重ねてみましょう。最も幾何学的な Futura の「o」は、4つの部分がはみ出しています。Circe と Geometria の文字は円よりも幅が広くなっており、仮に幅と高さが同じであったとしても、空腹で食べ過ぎてしまった「お腹」のように見えるでしょう。

というわけで、視覚的に言うと、（右側の）修正を加えた円の方が、（左側の）幾何学的な円よりも、より円らしく見えるのです。

この現象をどのようなときに活かすことができるでしょうか？ もちろん、角を丸める時にです！ Photoshop や Illustrator、Sketch のようなポピュラーなグラフィックエディタで丸みのある特徴を使用する際、見栄えが悪くなります。

ヒトの目は、直線が突如カーブに変化する箇所を瞬時に見つけます。そしてこの丸め方は自然には見えません。

視知覚に配慮してこの問題を解決しました。

この種の丸め方は、幾何学的な円よりも余分な面積を有しているため、直線とカーブがぶつかる箇所に気付かせません。

二つの違いを感じてみてください。

丸められたボタンについても、このアプローチが応用できます。

お気付きかもしれませんが、右側のボタンの方がよりスムーズに丸みを帯びた角になっているため、より心地よく見えます。

アプリのアイコンにも同じことが言えます。完璧にするため、標準的な丸め方は使用しておりません。ですが、これについてお話しする前に、二つの異なる丸めた図形を見ることにしましょう。

左は Sketch で描いた丸めた四角形です。二番目は、Lamé カーブで知られるスーパー楕円です。フランスの数学者である Gabriel Lamé によって発見され、4つの点からなる星型から、丸みを帯びた正方形に見えるように変形させる公式を用いて描かれています。

Marc Edwards は Lamé カーブを、滑らか且つ視覚的にも完璧な形にするものであると言いました。iOS 7以降のアイコンはこれに基づいて作成されています。

後に、黄金比と、アイコンデザイナー用ガイドのためのグリッド線が加えられて形が修正されましたが、それはまた別の話です。

スーパー楕円のような形を使用する主なメリットは、より円らしく滑らかな見た目にすることができる点です。しかし一方で、こういった標準でない形は、実際のインターフェース上で挿入するのには困難です。多様な SVG を結合させるべきであり、特殊文字やスクリプトをコードに含めたり、Apple 社がアプリのアイコンに使用しているように、PNG マスクを使用するべきです。

デザインのプロセス自体は少々やっかいです。元の丸め効果をアウトラインに変換、シェイプ編集モードをオンにし、手動で曲線ハンドルを動かして互いを近づける必要があります。

道路や地下鉄の正しいスキームを描く際に重要な鋭角の丸みにおいて、かなり鮮明な違いとなります。

覚えておくべきこと

• 直線から突如カーブになる点が容易に識別できてしまうため、幾何学的に丸められた角は不自然に見えてしまう。
• 視覚的に正しく丸めるには、特別な公式もしくは手動による調整が必要。

おまけ

時として、完璧な幾何学的ではない正方形の方がより正方形らしく見えたりします。「なんて馬鹿げたたわごとなんだ！」と思うかもしれません。では、下図の正方形はどうでしょうか？どちらがより正方形らしく見えますでしょうか？

もし左側を選んだのであれば、素直に先入観のない視知覚に従ったということです。

私たちの目が、モノの幅よりも高さの方に敏感であるということを知ったときはとても驚きました。これは、幾何学的なフォントや文字の「o」が、常に幾何学的な円よりも幅が広く、「H」の縦棒が横棒よりも常に太いという理由を説明してくれます。

遠慮なくご連絡ください。キュートな画像は Dribbble から、フルサイズのプロジェクトは Behance から、デザインのプレゼンテーションは SlideShare からとりました。