プログラミングとデザイン、スタートアップの話

プログラミングやデザイン、スタートアップ関連についての雑記

マテリアルデザインは結局何が良くて、何が悪いのか。- 新刊『UI GRAPHICS』を読んで -

下記の記事で年末年始に読みたい本として挙げた12月17日発売の『UI GRAPHICS』を早速Kindleで購入して読み進めているのだが、とても良い内容となっているので、読書と平行してメモを残していく。 特にマテリアルデザインについての説明はとても明瞭かつ完結となっていて、良い復習教材となり頭の整理が出来た

harv-tech.hatenablog.com

002. メタファ

フラットデザインとメタファ

この章では、これ以降の章で述べられるマテリアルデザインについて説明するための前章といった位置付けにあり、フラットデザインとメタファとの関係性について述べられている。

フラットデザインは原則的にメタファを使わない。言い換えれば、フラットデザインはメタメディアという表現の自由度と柔軟性の高さを駆使し、活かしていこうとする流れである。物理的制約を表現する必要もなく、文化を象徴する必要もなく、コンピュータの性能やデバイスの性質を活かしてデザインする世界だ。

数年前からトレンドとなったフラットデザインはそれまでのスキューモーフィズム(現実世界の原則に則るデザイン様式)系のデザインとは異なり、メタファを切り離した。なぜそのような流れになったのかは、Appleのジョナサン・アイブもフラットデザインをiOS7から取り入れた際に述べた言葉が参考になる。

彼は『ユーザーはこれまでの体験からスマートフォンにおいてタッチインターフェースに慣れたため、メタファを取り入れ現実世界の物理的模倣をする必要がなくなった』と述べている。

フラットデザインが一般に普及するまでの流れについても本書で述べられていて、それのメモ。 まず、Windowsのメトロデザインを皮切りにフラットデザインの流れに傾く。トレンドが生まれた理由は製作コストの低さと、スタイルシートとの相性の良さ。Drribbleを中心に盛り上がりを見せたが、実用外のものばかりだった。その後iOS7が実用性を加味したフラットデザインを採用し発展。

008. マテリアルデザインとその可能性

マテリアルデザインとその可能性

筆者が非常に面白いと感じた章がこの『マテリアルデザインとその可能性』だ。これまでインターネット上で深津氏の下の記事などでもマテリアルデザインについて言及はされていて、その内容も非常にわかりやすいが、さらに内容がブラッシュアップされ、要点がまとめられている。

よくわかるマテリアルデザインの設計コンセプト | fladdict

(マテリアルデザインにおいて)特筆すべき点は徹底した意味の付与であり、決定的なのが画面を構成するピクセルへの考え方である。マテリアルデザインでは、ピクセルの厚みをある物理的な存在(マテリアル)と解釈する。… ビジュアル上はフラットデザインであるが、概念や挙動としては物理世界の拡張シミュレーションなのだ。 … 現存するフラットデザインの系譜においては、コンセプトレベルで最も先進的であることは疑いがない。

フラットデザインが完全にメタファを切り捨てたが、マテリアルデザインではピクセルに意味を持たせることで物理世界を再現しようとするコンセプトを持つ。スキューモーフィズムのような現実世界ではなく、物理世界という点が比較としてポイントだ。

開発者の中にはマテリアルデザインを指して「デザインにおけるRuby on Rails」という人もいる。フレームワークを採用する最大の利点は、車輪の再発明を避けられることだデザイナーはマテリアルデザインのマナーに則ることにより、プロジェクトごとにトーンや文字サイズ、グリッド設計などに過度なリソースを費やす必要がなくなる。このように、マテリアルデザインを採用することで、デザイナーはコンセプトや構造、サービス設計といった高レイヤーにリソースを集中できるようになるのだ。

まさにその通りだが、Ruby on Railsはバックエンドであるためユーザーとの直接的な接触はないが、デザインはそうではないためフレームワーク化することによる均一化にはデメリットが存在する。つまり、UIデザインによる差別化がポイントが少なくなる。

一方、メリットとしてAndroidプラットフォーム全体における統一感の醸成によってUXを向上させることはできる。ひとつひとつのアプリについてユーザーが学習する必要がなくなる。

つまりマテリアルデザインの普及にとって、デザイナーは単なるビジュアルデザイン、UIデザインよりも「誰に対して、どんなものを作るのか」という本質的かつ高度な作業に集中する流れになるはず。また、マテリアルデザインに完全に依存するのではなく、それとどのように共存しながら逸脱していくかが差別化を生み出す方法となる。

下記サイトで、マテリアルデザインに対するベストプラクティスが掲載されているが、100%マテリアルデザインに厳格なわけではない。彼らがそれぞれマテリアルデザインを咀嚼・解釈・落し込みを行い、オリジナルな実装も取り入れている。 design.google.com

マテリアルデザインは、紙や物理のルールを骨格に、既存のデザインにおいてセンスとして説明されていたのを、エンジニアリングしたものである。これはスキューモーフィズムから始まったスマートフォンUIとモバイル市場が十分に成熟し、これまでの様々なアプローチが集約されたひとつの到達点とも言える。

この説明はとても明瞭な説明で、好きだ。まさにその通りだと言える。この引用をこの記事の終わりとしたい。