BeenosUI研究会

Yusuke Nagata (@nuts612） ＞

iOS7とフラットデザイン

JUNE 19, 2013

フラットデザインって？

まだ「これ！」という定義がされていない？大体WEB上で言われているのは「リッチデザイン、Skeuomorphismデザインの対義語」的な説明のみ。

ナッツのイメージはこういうやつ。

各パーツは単色でグラデーションなし。タイル状。

iOS７はフラットデザイン？

これは「フラットデザイン」？

Flat＝平面という意味だとすると、そもそも背景に奥行きあるけど。

スキューモ（実物感）はなくなったけど、完全なフラットではない。

なんと言うか、“Simpleになった”という印象。

DIGITAL SIGNAGE ＠New York City Information Center

http://youtu.be/P0ydXinJRMI

iOS7はデジタルサイネージっぽい

「実物感がよりリッチになりました」的なSmallPC

iOS7以前のUI

誰にでも容易に使える誘導役へSmallSignage

適切なアフォーダンスキューの配置

iOS7のUI

http://youtu.be/jzXYbqYTeeo

アフォーダンスキュー

ボタンの立体感がなくなる

Follow

イメージしていたフラットデザイン

フラットデザインのボタンは、どこが押せるか分かりづらかったり。だけどiOS7はそもそもの「ボタン」をなくしたデザインに！

しかし、クリックすることで次にどうなるかがわかる（アフォーダンス）デザインになってる（かも）。

だって実際にボタンないもん！

ボタンデザインはスマホにとってマテリアル・オネスティーではない！

うん？まてりある・おねすてぃー？

なんじゃ、そりゃ。

ということで、調べました。

マテリアル・オネスティーとは

“物質は模倣した何か別のものではなく、その物質の姿であるべきだというと考え”

※引用元：http://all-web.org/ala/material-honesty-on-the-web/

※

非オネスティー オネスティー

イームズチェアもマテリアル・オネスティー

※画像引用元：http://all-web.org/ala/material-honesty-on-the-web/

デザイナーのチャールズ＆レイのデザインチェア「イームズ」

素材剥き出しで、意味のない無駄な装飾をなくしたデザインは何十年も愛されている。

マテリアル・オネスティーな作品は時代を超えて支持される！

WEB素材の定義

１．ファンデーション

２．スタイル

３．装飾

：HTTP、URL、HTML

：CSS

：ラスターグラフィックス

　１．ファンデーション

ご存知、appleはFlashを対応させていない。

：HTTP、URL、HTML

HTTP（どのように）、URL（どこに）、HTML（何が）をすべてそろえたウェブを構築しよう。

FlashサイトのそれぞれのページにURLが存在していないため、ナビゲーションが難しい。

非オネスト。

　２．スタイル ：CSS

フォトショで作ったシャドーやグラデーション。

グラデーションの色を変えるのは非オネストな工程である。CSSで一括変更できる素材を作成しよう。

光はどこから当たっているのか。そう、光は存在していない！偽物の光源を演出している！

非オネスト。

　３．装飾 ：ラスターグラフィックス

まるで本物かのようなスキューモデザイン。

もちろん本物ではない。メタファーの活用は大切だが、マクロメタファーは非オネスト。マイクロメタファーのみにとどめよう。

　まとめ

マテリアル・オネスティーは時代を越える！

スマートフォンならではのマテリアルは何か考えよう。

ただし今のところのiOS7は若干、非オネスティー。