一貫性の美

なぜか結構前の記事に出会い、思うことがあったのでメモする。来月から新宿私塾に行く手前、この辺の考えをちゃんとまとめておきたいというのもある。長くなるけど以下「カーゴカルトって怖いよね、コアメッセージを中心に設計すると一貫性を美しく保てるのでは」という話。


デザインは8pxで出来ているという話

「余白やレイアウトなどにおける適切な値は存在するのか?」が深く考察されている記事。まずここまでちゃんと検証してて、すごいなと思った。アプリのデザインをつくっていると、どうしてもAppleのデザイン美のカラクリを解き明かしたくなって、終わりのない考察を重ねることはある。でも、発見したはずのその基本原則を簡単に破ってくるところに、一貫性を保つことの難しさを学ぶ。iPhone6は375 × 667だし、その8pxの法則ひとつで片付く問題ではなさそう。法則性に完璧さを求めすぎて手が止まっては元も子もないので、「あまり8pxだの黄金比だの、数字に自らを縛り付けるのは良くない」というのがちょっと前までの答えだった。

しかし、それで諦められないのがデザイナーの性。美しさにはきっと法則があるし、気持ちの良さにもきっと理由がある。「タップ領域は44ptが最適です」というAppleの提示を鵜呑みにするのはカーゴカルトでしかないし、なんでもかんでも黄金比と言えばいいなら、実家で飼っていたセキセイインコにも言えたはず。その本質を理解して初めて、それが正しいのか間違っているのかを知ることができると思う。


ウェブサイトやアプリ、ポスター、パッケージなどの「文字でコミュニケーションする系のプロダクト」は、タイポグラフィの中に答えがある気がする。それが現時点での一番自分が納得する形の「一貫性の美」に対する答え1。一貫性は、言語化できるし、何を隠そう経済的。ガイドラインにして示してあげれば、デザイナーでなくとも機能を担保できる。一貫して同じメッセージを発している企業は、コロコロと発言の変わる政治家よりも安心感がある。

最近自分がデザインするときは、基本的にメインコンテンツの文字サイズとそれに対する行の高さの比率を、すべてのデザイン要素に忍ばせている。「秩序のある連続性」これはTypekitのTim Brownがいっていることで、印刷業界だと結構当たり前の考え方だったりするらしい。ひとつの決められた値から、一定の比率でその値を大きくしたり小さくしたりして、それらの値に秩序を持たせる。Tim BrownはModular Scaleでそれを体現していて、僕はそのアイディアをBaseline Gridにお借りした。

ウェブページや、紙などの与えられたキャンバスに対して、どれほど情報を詰め込みたいか。UX/UI以前に、技術というか歴史的背景2を見ても明らかなように、写植の方がウェブよりも長いので、そちらで培われた知恵をウェブと上手く連動させて「使いやすい・心地良い」が体現できればおもしろいなと思う。最近のデザインフローは以下の様な流れ。

  1. 対象の決定。静的な紙であればA4などの用紙サイズで、ブラウザやアプリであれば対応する端末のサイズによる。端末サイズは多岐にわたるため、「誰に一番伝えたいか」で体験を最大化させないといけないデバイスサイズを取捨選択する。

  2. コアコンテンツとなる文字のサイズと、それらが長文で心地よく読める行の高さを決定。大抵はそこにフィボナッチ数だったり白銀比やらなんやらという比率を当て、コンテンツと接したときの「気持ちよさの最大値」を探る。選ぶ書体によっても大きく変わるし、日本語なのか英語なのか、それとも欧和混合なのかでガラリと変わる。さらに、駅ナカにあるポスターや比較的コンテンツとの距離が近いスマホ、逆にコンテンツとの距離が遠い映画のキャプションなど。さらにさらに、時間帯やターゲットの年代など。状況によって適切な文字の大きさ、行の高さがあるので、それも考慮に入れる。

  3. ベースとなる文字サイズと比率が決まれば、あとはそれに応じてはじき出されるbaseline-height (base-font-size * ratio) を基準にしてデザインを進めていく。typographic scaleだったり、メインカラムの幅であったり、ナビゲーションエリアの高さ、さらにロゴをつくる際の要素間の比率だったり。ユーザーアイコンや、もちろん余白も。いろいろなところに、自ら定めたルールを当てはめていく。そうすることで、「あともう5px右かな?」という謎な決断をせずに済むし、全体に一定の保たれた秩序を与えることができる。ひとつのブランドに対して、比率を一定に保てればベストだが、名刺とアプリなど、媒体によってはそう上手くハマってくれない。デザインするインターフェイスに応じて、比率は微調整する。


音楽に五線譜があるように、ヴィジュアルデザインにも理屈があってもいい。その一貫性を崩すことでインパクトが生まれればいいし、保つことで安心感や安堵感が表現できればいい。よくわからんけど建築なんかも、もしかしたら生活空間の一番大切な部分をベースに設計するものなのかもしれない。絵画であれば、伝えたいことのコアとなる部分(花とか目、家?)を中心に念入りに描くのかも。今度画家の友だちに会うので聞いておく。

ちょっと長くなった。まとめると、冒頭の「デザインは8pxでできている」ということに対する違和感は、なんでもかんでも「8pxで絵をかけばいい」のではなくて、「デザインする対象が、8pxの比率上にあるとユーザがハッピーになる」という自分の捉え方から来ている。そういうのを踏まえた上で、Gridだったり、Vertical Rhythmとかを設計していくのが、現在の自分に一番しっくりきている。

といっても、一貫性のあるものが必ずしも使いやすくて、売れるか、と言われると物事はそう単純ではないので、手法のうちのひとつとして捉えておくのがいいのかもしれない。最後に掌を返すような終わり方になったけど、そういう時はVignelliさんの名言を貼っておしまいにするといろいろ丸く収まる。

The purpose of the grid is to help to prevent arbitrary, meaningles placements of the information on the printed page. It is just like music, where five lines and seven notes allow one to make infinite compositions. That is the magic of the grid.

by Massimo Vignelli

  1. もちろん、文字を使わない建築や絵画もある。

  2. ちなみに、活字を並べた組版印刷は1445年頃のグーテンベルクがはじめだとばっかり思っていたけど、wikiってみるとそのはるか昔、中国にて畢昇という発明家によって1041年頃に発明されていたらしい。2015年の今から逆算して、974年前。1991年8月6日がWWWがインターネット上で利用可能なサービスとしてデビューした日らしいから、ウェブの歴史は24年。974年間、活字をピシっと並べて組版していた時代の知恵、パクらんでどうするという話だ。