こんにちは、はきりです。
3日連載のフラットデザイン入門、
初日は『フラットデザインは混合している』、
2日目は『フラットデザインの流行性と必然性』でした。
本日最終日です。ではどうぞ！
そうなると色とタイポグラフィしか
デザインする余地がないのが本音。
昨日の記事から見るにフラットデザインは流行的な側面もあるが、多くは次の技術的環境への対応と変化によるものだと思う。技術的な対応からとなると、デザインできる要素が「色」と「文字」に必然的に限られてくることもわかり、「色」と「文字」がフラットデザインの根幹となっていることが改めて明確になってきた。
fladdictさんによるナイスなツッコミ
ここで著名なiPhoneアプリ作家であるfladdictさんが記事にしていたフラットデザインへの鋭いツッコミがとても面白いので紹介します。
- どこ押せばいいか謎
- 言われてるほど新しくない（スイス系のリバイバル）
- 立体より工数低いが、誤摩化しがきかず難易度高い
- でもデザイン料を安くされそう
- 日本語だと高確率でダサくなる
制作者側の感覚的なツッコミなので掴みにくいところがありますが、とても重要なことなので取り上げてみたいと思います。
・どこ押せばいいか謎
これは脱スキューモフィックで「ボタンらしさ」が削がれ、「なにをするためのものか」というアフォーダンスも削がれた事を指していると思います。こちらに関してはのちほど考えてみます。
・言われてるほど新しくない（スイス系のリバイバル）
「スイス系」とは1950年代からスイス・バーゼルから派生したデザインを指しています。ドイツ・バウハウスと共に現代デザインの基礎として使われるグリッドシステムによるタイポグラフィ（文字組み・文字を扱ったデザイン手法）の先駆けで、当時の社会的なデザイン思想に基づいた厳格なデザイン姿勢からは時代と共に解放されど、洗練されたグリッドシステムとタイポグラフィの感性はそのままに印刷技術の向上により色の世界観が加わり、独自の進化と世界への波及をしていきました。（長くなりそうなのでかなり割愛して紹介してます）
スイスデザインは平面的なグリッドが基礎となっているので、デザインはどちらかというと静的なレイアウトで要素も文字と色のみでの構成が多く、フラットデザインと近似している理由はここにあると思います。（流行的な側面からスイスデザインをリバイバルした部分もあるかもしれないですが、技術的な側面（制限）からデザインの落とし込み方がスイス的な手法が一番ベターであった、という考え方が強いように思うので、リバイバルと言い切るのも少し難しい気がしています。）
・立体より工数低いが、誤摩化しがきかず難易度高い
・でもデザイン料を安くされそう
・日本語だと高確率でダサくなる
この3点もデザインに限って話すと、フラットデザインと近似するスイスデザインから学ぶにグリッドシステムとタイポグラフィの修練によって解決していくことが正しい道筋のように思います。（逆に言えばそれしか方法はない気も）
文字だけでは情報構造を表現しにくい
日本語タイポグラフィの表現手法に注目していきたい
インフォバーン木継氏もフラットデザインについてのインタビュー時このように話していました。
「フラットデザインの現在／未来」インフォバーン クリエイティブフェロー 木継則幸インタビュー
今回はPC・スマホ両方のフラットデザインに共通する、日本語タイポグラフィとの親和性と向上について言及していきます。色に関しては各OS、アプリなどのデザインチームの戦略が垣間見えて面白い分野ですので、これは別の機会で掘り下げたいです。
フラットデザインで日本語のタイポグラフィを高めるには
欧文タイポグラフィ（英語での文字組み）と日本語タイポグラフィの決定的な違いはフォントのバリエーションにあります。
字数の多さから1セットの制作にかかる工数も時間も桁が違う
日本語は漢字だけでも6,000強から10,000字以上を必要にするのに対し、欧文フォントはアルファベットから記号を加えても100字程度。
欧文にはほど遠いが日本語フォントも選択肢はある、だが…
日本語フォントも各タイプファウンダリから毎年新しくリリースがあるように、デジタルでの日本語フォントもMac初期に比べれば画然にバリエーションは増えている。しかし、さきほどの字数の多さの件もありwebフォントでの表示速度は不安定であり、アプリや速度が求められるサイトでの使用は難しい。（日本のメーカーはwebフォントよりデバイスやOS側へ書体の売り込みをした方が普及・発展するはず…）と思っていたらwindows8.1に游ゴシックが標準搭載されるようになりました。デバイス用に設計されていないグラフィック畑のフォントなのでレンダリングなどの問題はありますが、今後はこういった事例が増えてくると思います。
書体の選択肢が少ない分、より繊細な実装処理が求められる
書体が選べないのであれば、使えるものを精度高く活用していく必要があります。最近の事例として文字組に意識が置かれているアプリがありましたので、紹介します。
Smart News
・見出し文章のカーニング（文字間隔の調整）自動処理
・ラギッドライト（行頭ゾロエ行末ママ）の場合であれば文章を解析して好ましい位置で改行する
http://www.find-job.net/startup/smartnews-great-ui-ux
R25
・ジャスティファイ（行頭行末ゾロエ）の導入
・UD（ユニバーサルデザイン）書体の導入
http://www.aqworks.com/ja/work/r25/
大辞泉
・画面表示のレンダリングエンジンをゼロから開発（目が覚めるような綺麗さです…）
・ジャスティファイの導入
・約物など細かいカーニング自動処理
http://www.daijisen.jp/
そもそも日本語が読めない海外デザイナー主導の
デザイン・設計にそのまま日本語をはめ込むだけだからおかしくなる？
海外のサイトを自動翻訳して日本語表示したら雑さが目立つように、日本語フォントに置き換えるだけでは欧米式フラットデザインの踏襲は無理がある。
スイス直系のタイポグラファーや欧文組版に造詣の深いデザイナーによるバイリンガルデザインの場合、欧文・日本語の文字の大きさや
間隔を同等に見えるよう組み方を変えている。（書体の性格を見極め適宜文字組みを変えられる感性が重要になってくる）
まとめ
事例として挙げたSmartNews・R25・大辞泉のような基礎的な日本語組版の意識を実装レベルで取り入れられたらweb・アプリなどでの日本語タイポグラフィのレベルも底上げされるし、欧文と日本語書体の性格を見極めて適宜文字組をする完成を身につければ日本語向けにきちんとカスタマイズされたフラットデザインが誕生するのではないか。
どこを押せばいいのかわからないボタンについて
対応する必要ないのでは？
マウスやキーボードといったGUIから解放されて、タッチパネル以降のNUIの登場により直感的に操作が可能になる転換期の中に今はある。そういった潮流の中、フラットデザインでの「ボタンどこ押せば良いのか謎」問題を視覚的デザインだけで解決しようとするのではなく、「動き」や「手触り」といった身体的文脈・心理を応用して解決していくのが最善策になるだろうと思います。（GUIの切り捨ても必要になってくるのではないか）
clearのようにボタンの類をなくし、スワイプやピンチのみで主な操作ができるよう設計されたインタラクティブなインターフェースのアプリが登場したことは新鮮で、上記の考えの基に設計されているのではないかと思いました。
clearの操作感がわかるビデオ→http://vimeo.com/35693267
（clearのアプリが優れているか、というよりUIとしての先進性について触れています）
これからより直感的で身体的でインタラクティブな操作が増えていくと予想される中で、ボタンに影をつけるような「絵を描くデザイン」が時代遅れになるのも時間の問題であると思うし、そういった意味でもフラットデザインの登場は必然的に感じます。
なんだかんだ慣れると思う。
感覚的でしかないですが、PC的フラットデザインにUIを変更したGoogleのサービスを使い始めている今、GUIでのフラットなボタンも時間の経過と共に慣れると思います。（旧時代的な感覚に合わせるため手間やコストをかけるのは最早リスクであると思う）
小ネタ
Helveticaに代わる日本語書体はある？
欧文組版・スイスデザイン・フラットデザインなど多くの分野で存在感を放つHelvetica。長年（それこそ原弘さんの時代から）日本語でスイスタイポグラフィを組む適切な書体は何かと言った議論が出てきますが、これといった結論はいつも出てないように思います。
90年代にMacに対応したMB101が登場した時に、広告のデザイナーである井上嗣也さんがHelvetica感覚でMB101を組んでいたのが印象的ですが、フラットデザインに応用できるかは未知数…（写真は最近の作品ですが）
iOS7はフラットデザインではないと思う。
- メモ帳では紙のテクスチャ＋刻印的な文字のへこみの表現
- カメラでは機能選択をロール式の選択方法にしている
- 影がないとわかりづらいスイッチにはドロップシャドウをつける
以上のようにiOS7はフラット化したのではなく、
コンテンツ表示に最善を尽くすデザインに徹底しているのではないでしょうか。
結論
- 日本語組版の基礎知識を実装レベルで採用できればフラットデザインと
日本語の親和性は高まる
（フラットに限らずPC・スマホのデザインレベルを底上げできる） - レスポンシブ／マルチデバイス対応を考えると、ベクターデータ・テキストデータ・
CSS3やJSといった可変性に富んだ手法が好まれ、
必然的にデザイン要素が最小化され結果フラットデザインが登場した側面もある。 - フラットデザインはNUIといった直感的でインタラクティブな次世代UIを見据えた
多少強引なUIの再定義であり、現状の機能や表層的なデザイン要素、ブームからの批判は早々ではないか。 - レガシーへの執着を切り捨てる勇気を持とう
- iOS7のデザインは正しく言うなら「フラットデザイン」じゃなくて
「ミニマムデザイン＝最小化デザイン」だと思う。
となると言葉遣いも再定義されるべき。
現状の「フラットデザイン」は混合されているし、
少なくともスマホUIに関しては下記のように変化しても良いのでないかと思う。
フラットデザイン（『ミニマムデザイン』へ変化）
平面的な構成を模した表層的なデザイン手法
↓
コンテンツファーストを実践するためのデザインを最小化する手法
スキューモフィックデザイン（『リッチデザイン』へ変化）
ボタンらしさスイッチらしさなどの擬似的体験を後押しするデザイン
↓
コンテンツにクリエイティビティな体験（数値化できない心地よさを持った動的・
遊び心・ユーモアのあるUI・UX）をプラスして価値を高めるデザイン
（デザインやクリエイティブによって豊かさや価値を高めるという意味では、
元々呼ばれていたリッチデザインの呼び方は正しい気がしています。）
おわり
いかがでしたでしょうか…ざっと駆け足でお伝えしたフラットデザイン入門シリーズ。
正しい事例の紹介方法ではありませんが『なぜこういった手法が登場しているのか？』
という部分を考えるのは先を読む練習とよい頭の体操になるように思いました。
今後もUIとUXやwebの“よい”デザインを探して考えていきますので、
どうぞよろしくお願いします〜。
