「フラットデザインとは印刷物デザインのことである」というのが真理であってそれ以上の説明はいらない…筈なんだけど、それだとよく見かける芸術的議論と同じく、何も言ってないのと同じだ。だから少し長い話をする。
フラットデザイン = 印刷デザインフラットデザインと聞くと何か答えのはっきりしない怪しげな宣伝文句っぽい。そういうときは、私たちの最も身近にあり、小さい頃から慣れ親しんでいて、長い歴史を持つフラットデザイン体系を思い出すことにしよう。
それは、印刷デザインである。本は私たちの身近にあるし、小さい頃から触れてもいるし、活版印刷は400年を超える歴史がある。
この世界は印刷物で満ちている。印刷物こそ最も身近なフラットデザインであり、私たちはフラットデザインだらけの世界に生きている。新聞に本に雑誌はもちろん、街にある様々な案内板、高速道路の道路案内…フラットデザインでないものの方が珍しいのではないか。
ジョブズが今の時代の人間なら、スタッフを外に引っ張りだして「見ろ、フラットデザインだらけじゃないか!」と詰め寄ったかもしれない。
印刷物はなぜフラットデザインを好むのか。まずコストの問題。全てをフルカラーで作るよりも、素材の地を生かして最低限の色数で印刷した方が安いし速いし品質も安定する。
色数を少なく抑え、重要な要素だけに着色したり色をグループ分けや意味の付加に使用すれば、視認性と情報伝達性を同時に且つ低コストで達成できる。
そして組版やタイポグラフィは、誌面に構造をもたらすための最も低コストかつミニマルな方法である。
印刷物におけるフラットデザインとは、「量産性と情報伝達性を重視した "現代の要請に沿った" モダンなデザイン手法」といえるだろう。
印刷デザイン - 組版印刷物は組版によって構造が作られる。
本文を紙の端から少し離して置くことで、本文はひとつの塊として認識される。文字の大きさや強弱や位置関係に差をつけて、見出しやキャプションを創り出す。余白を適切に配置して、コンテンツごとの境界を設ける。
組版とは、タイポグラフィ、余白、空間配置などのミニマルなテクニックを組み合わせて、誌面に秩序や構造を生み出す作業のこと。
逆に言えば、そうやって秩序や構造をもたらさないと、誌面の可読性が維持できない。これがピンと来ないのであれば、「可読性の悪い誌面」つまりそこらへんのWebサイトを見てみるといい。それらが本や雑誌よりも読みにくい理由はいろいろあれど、「Webページは、出版物ほど精緻にレイアウトされていない」というのが原因のひとつである。
# 組版がどのぐらいの精緻さを要求するかについては、
日本語組版処理の要件(日本語版) を見てもらうと少しイメージが掴めるかもしれない。
印刷デザイン - 抽象的なシンボル少し複雑な誌面では、ひとつのページに写真や図画を幾つも含んでいる場合がある。そして例えばタウン情報誌などで「徒歩」を表す靴アイコンや「駅」を表す電車アイコン、「見出し」を表す丸印などを使いたいとしてみよう。
このような「情報ナビゲーションに使用する記号やアイコン」を写実的に表現してしまうと、肝心の写真などと区別がつきにくくなる。
ナビゲーションシンボルをピクトグラム化つまり抽象化する理由は、「本文や写真などの"コンテンツ"と区別するため」である。
ナビゲーションは機能に徹するべきであり、コンテンツ(本題)と混同されてはいけないし、コンテンツを差し置いて自己主張してもいけない。
印刷デザイン - 明瞭さ出版の歴史というのは聖書の写本から始まったらしい。最初の写本はすべて手書きで、文字や挿絵も装飾感あふれていた。
そのうち、写本職人たちはゴシック体という書体を好んで使うようになった。その理由としては、文字が細く同じスペースにより多くの文字を書けたこと、当時ゴシック様式が流行っていたことなどによる。
活版印刷の時代でも同じようなことが起きた。初期にはイタリックなどの流麗な書体が生み出され、時代が進むとより明瞭なディド体などが現れる。
明瞭さというのは「何の文字が書いてあるのかが分かりやすい」ということである。筆記体よりもサンセリフ(明朝体)の方が読みやすいといったら分かってもらえるだろうか。趣味的な楽しみよりも情報性を重視するという時代の要請がそうさせる。
明瞭さはまた、組版での余白の取り方や、ナビゲーションシンボルの抽象性とも関係がある。余白やシンボルが機能性に徹して自己主張を最小限にすることで、紙面上のコンテンツ(本題)がより明瞭に浮き上がる。コンテンツ(本題)の視認性の良さも情報伝達性のひとつといえる。
実世界メタファー - これまでのGUI1987年に発行された Macintosh Human Interface Guidelinesでは、インターフェイスデザインの軸に「実世界のメタファー(見立て)」を使いなさいとした。
コンピュータを作業机に見立てたうえで、
ユーザー ←→ 実世界メタファー ←→ コンピュータ命令
のように、人と機械とを実世界メタファーで仲介する
というパラダイム。
例えばデスクトップ上で、ユーザーが「書類をフォルダに投げ込む」という疑似動作を行うと、コンピュータでは「ディスク上のとある区画にファイルデータを移動する」という操作が実行されるというわけ。
補足すると、コンピュータへ命令を下すグラフィック要素は押しボタンを模している。コントロールパネルという言葉が示すように、実世界メタファーには機械を動かすための操作卓という概念も強く現れている。
実世界メタファーに対する誤解 - スケアモーフィズムスケアモーフィズムというのは偽物のデザインである。例えば事務所などにある安い机を思い出すといいだろう。「実際は木目なんて付いていないものに、高級感を出すべく木目調のシートを貼る」のがスケアモーフィズムである。
この言葉が使われだしたのは、iOSのメモ帳に紙のようなテクスチャーを貼ったり、GameCenterの背景にポーカー台のようなグリーンマットテクスチャーを貼ったりしだしてからである。ジョブスや退社したスコットはこのデザインを推していたらしいが、そのせいでiOSの装飾様式はアプリごとにバラバラだった。
初期Macの実世界メタファーはユーザーにとっての分かりやすさを最優先していて、過度に飾られたインターフェイスを推奨していなかった。「写実的に表現すれば使いやすい」と考えるのはGUIを正しく理解していない。「ユーザーがすでに持っている知識を利用する」というのがGUIの肝だからだ。
「iOS 7」における、デザイン哲学のせめぎ合い « WIRED.jp にあるように、「スケアモーフィズムは解像度の高さをアピールするために採用された」というのが本当のところだろう。
ジョブズは以前から思いつきでUIをいじることがあったのを思い出す。Mac OS Xのベータ版は、メニューバーのど真ん中にブルーのアップルマーク(押せない。本当にただの飾りだった)があったり、ユーティリティアプリのアイコンがグレートーンだったりした。QuickTime4はクラシックなTVをモチーフにした派手で場所をとるスキンを持って登場した。こういった、装飾性が使い勝手を妨げる類いのデザインは、ユーザーからの不満により早々に修正されてきた。
高解像度が実現したデザイン本当のことを言えば、インターフェイスの装飾性というのは何か特別な理由がある限り変える必要が無い。しかし人はずっと同じ装飾を目にすると飽きてしまうものだし、見た目が変わらないと新しくなった気がしなかったりする。
というわけで商業的な理由によりMac OS XにはAquaそしてAluminumという新しい装飾が採用され、Windowsシリーズもその流れに追随した。そしてモバイル分野で遅れを取ったMicrosoftはWindows Mobileを刷新する際にOSの名前をWindows Phoneに変え、さらにMetro UIと呼ばれるフラットデザインを全面採用した。
スケアモーフィズムは「レティナディスプレイで映える装飾」だったけど、次に続くフラットデザインも事情は同じ。印刷デザインと同じレベルの美しくシンプルな外観を実現するには、印刷デザインと同じレベルの解像度が必要になる。
例えば、レティナでない従来のディスプレイで、PDFやWebページは印刷物と同じぐらい美しく表示されて…いない。フォント、写真、図版、いずれも解像度が低いせいでボヤけて見える。
フラットデザインもまた、レティナディスプレイによって実用できることになったデザインといえる。
実世界メタファーとフラットデザイン、両者の違い従来のGUIとは、仮想の作業机を定義したうえでの実世界メタファーだと書いた。アプリケーションも同じく実世界メタファーを仲介して操作する。メニューを選び、ボタンを押し、スライダーを動かし、スイッチを切り替える。手作業のまねごとをユーザーが行う。
つまり従来のGUIは、作業机の上で機械や文房具などを操作しているというパラダイムなのだ。Macは今も昔も机の上で使うものだし、ノートパソコンについては置き場所が机の上から膝の上に変わっただけのことだ。そして後発のiOSもこのパラダイムを受け継いでいた。
対して、フラットデザインとはここまで書いてきた通り印刷デザインを源流に持つ。そしてiOSはモバイル機器であり手に持って使う。さらにいえば、iOSはマルチウインドウシステムを実質持っておらず、すべてのアプリがフルスクリーンの画面乗っ取り型になっている。
手に持って使い、その平面すべてが単一の領域であるもの。それは印刷物、さらに手帖、本、ノートといったものが近い。
だからフラットデザインのパラダイムは、「紙面」と定義できるのではないか?
操作できる紙面 - Webページ実世界には、ユーザーの操作を受け付ける紙面というものは存在しない。私たちは印刷物を見ることしかできなかった。ところが最近では、「操作を受け付ける紙面」が急速に普及してきた。それはWebページのことである。
ハイパーテキストは情報を繋いで参照する。リンクが内蔵された単語をクリックするとページがジャンプする。最初はそれだけだったのが、ブラウザの開発競争に伴って画像を表示するようになり、画像にもリンクが内蔵されるようになり、GUI的な押しボタンに留まらず入力欄やプルダウンメニューなども表現できるようになっていった。Webページはいまや「ユーザーが操作できる文書」となっている。
紙面上の異物 - Webページただ上述のように、Webページの操作エレメントは従来型のUIデザインを踏襲していた。なんだかんだいってもそれはOS上での出来事であり、OSの持つ標準コントロールを模倣するのが理にかなっている。
今までならそれで問題なかったが、印刷物と同じレベルの解像度を持ち得る平面上ではどうだろうか?
現実の印刷デザインと同じ表現体系(組版、タイポグラフィ、情報ナビ要素)を備えた美しい平面に、なぜ実世界メタファーのようなメカニカルな異物を持ち込まないといけないのか? …と考えるデザイナーがいてもおかしくはない。
フラットデザイン現在の混乱したWebページと違い、フラットデザインはパラダイムを統一して異物を排除する。
フラットデザインは実世界メタファーを介して操作するのではなく、紙面に使われている情報ナビ要素 = 見出し、ピクトグラム、「<」などの文字記号etc…といったものに触れて操作する。Webページが採用している「リンク機能をもつ語句は色が異なる」も援用する。実世界メタファーを介する代わりに、「紙面を直接操作する」わけだ。
従来のGUI:作業机。
ユーザー ←→ 実世界メタファー ←→ コンピュータ命令
フラットデザイン:紙面。
ユーザー ←→ 紙面上の情報ナビ要素 ←→ コンピュータ命令
のように、フラットデザインになることでパラダイムも仲介者も変化する。
混乱もちろん混乱は起きる。パラダイムも仲介者も変わってしまうことで混乱が起きないわけがない。
「ユーザーが操作できる紙面」としては前述の「実世界メタファーを混在させたWebページ」ぐらいしか前例がなく、その肝心の実世界メタファーを失ってしまうとあれば、ユーザーはどれが操作対象なのか分からなくなる。知らないものは使いにくいという真理。
フラットデザインの入力系には新たなデザイン規範が必要になる。ジャンプとして動作する文字列は色を変え、接頭部に「<」などのナビ記号を付ける。タッチすることでアクションが起きるものはデザインを絞り(四角で囲んだ文字列、アイコン、ハイパーリンク)、それらのデザインを別の用途に使わない…など。
開発者は今までと異なるデザインルールを学ぶ必要があるし、実世界メタファーよりも制限は増えている(ただしカオスは減る)。ユーザー側も再学習が必要になる。
モバイル時代のUIコンピュータはずっと長い間、机に置いて使うものだった。実世界メタファーはモバイルという概念が現実的ではなかった頃に生まれ、今日まで大きな変更もなく使われてきた。それに対し、コンピュータの事情はずいぶん変化した。
フラットデザインとは、コンピュータが「手元で使う機械」になり、モニタ解像度が印刷物と肩を並べるほどに上がり、常時携帯機器としてさらなる情報伝達性が求められるようになった、現代のコンピュータ事情に対するひとつの回答、なのだろう。
これまで慣れ親しんできた実世界メタファーを捨てるときが今なのかどうかは分からない。四半世紀以上の長きにわたり実用に堪えた概念について時代遅れの烙印を押すのは勇み足というものだ。
ただ、デザインの世界でいえば、実世界メタファーはあくまでマンマシン・インターフェイスだった。現代社会は印刷物に載せられたフラットデザインですでに覆いつくされている。コンピュータのGUIがフラットデザインになるのであれば、それはコンピュータが機械的で無骨で冷たいモノから、紙のようなもっと「当たり前の存在」として認識されるきっかけになるのかもしれない。