流行に乗っていいの？フラットデザインの落とし穴

流行に乗っていいの？フラットデザインの落とし穴Yudai Tach ibana (Web Des igner a t ALL CONNECT INC. . )

第8回 Creators Mee tUp

Y u d a i T a c h i b a n a (W e b D e s i g n e r a t A L L CONNEC T I N C . . )

@toybox_design blog toybox-design.net

What is “Flat Design”?１

質感や立体感のない平面的なデザインWindows Metro UI / Apple iOS7 / Yahoo! Japan and more...

Skeuomorphism

スキュアモーフィズム実際に存在するものを模倣して作られる装飾やデザイン

Skeuomorphism

実際に存在するものを模倣して作られる装飾やデザイン

ユーザーの予想を促すためユーザビリティ向上に繋がる

Flat Design

三次元のものを二次元の画面で表現することへの違和感

コンテンツに悪影響を及ぼす無駄な装飾的表現を排除

2 Why? “Flat Design”Diffcult

明快さの欠落リアリズムを

スキュアモーフィズム以外で埋めようとする。

訪問観覧 CV（目的達成）

ユーザーに対して明確な気付きを与える（わかりやすさ）

グラデーションやドロップシャドウなど、装飾的要素でコンテンツを差別化していた。

訪問観覧 CV（目的達成）

触るという行程が必要なため、ユーザーに対する負担が大きくなる。その結果、目的の達成も困難になる。

インタラクティブな仕掛けで観覧から行動へ誘導する

見る行動（触る）予想

見る行動触る認識

ユーザーの予測を促した場合の行動

インタラクティブな要素を挟んだ行動

iOS6 iOS7

装飾が無くなった代わりに『スライドでロック解除』という文言に

装飾を文字説明で補う

iOS7になった途端、困り果てる赤ちゃん

http://www.youtube.com/watch?v=UIh8qshSliA




ユーザーの経験値と作り手のスキル値

製品A 製品B 製品C

ユーザー満足値

ユーザー経験値



スキル値

スキル値

スキル値

ユーザーの経験値と作り手のスキル値

製品A 製品B 製品C

ユーザー満足値




スキル値

スキル値

スキル値デザイナーに求められるものが

更に多くなってません？？

表面的なデザイン

インタラクティブデザイン

Webデザイナーに求められる技術

photoshopでのカンプ作成HTML CSS

JavascriptWebパフォーマンス（速度）Designing in Browser

3 Typography & Layout

I LOVEWEB DESIGN

英語でのタイポグラフィ表現

日本語でのタイポグラフィ表現

WEBデザインを愛しています。

日本語でのタイポグラフィ表現

WEBデザインを愛しています。日本語フォントにした途端イメージ変わりませんか？

日本語は複雑ですね。

English is easy

雑

E画数によってボックスが埋まるため、ごちゃつきやすい。

画数が少ない上に、大文字・小文字で文脈を把握しやすい。

Typograpy ContentImage

日本語って複雑だね

日本語ではフラットデザイン特有のシンプルさ、洗練さを同等に伝えるのが難しい。

http://fltdsgn.com/

http://fltdsgn.com/

http://fltdsgn.com/

http://gospecless.com/

1カラムデザインが多い

http://cloudcannon.com/

要素をシンプルに見せる為。グリッドでコンテンツの強弱を付ける。見出しを分かりやすく表示出来る。





HeadLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.



HeadLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.




small small

small small small small

フラットデザイン日本語タイポグラフィの問題

コンテンツが縮小される程見出しのジャンプ率も縮小

見出しをスッキリさせるためカーニングを広めに取る

リアリズムを埋めるために文章がより説明的に

感覚的な気付きの減少

ユーザーの感覚値とデザイン表現



フラットなデザイン

感情の欠落アイコンや写真で補う


ユーザー感覚値

Walk on the streetGo without question. I understand it if I go


detail button

この道を行く。迷わず行けよ。行けばわかる。

猪木でも、とってもクールですね。イメージを伝えるなら写真最強。

フラットだからこそ生きるデザイン

フラットだからこそ部分的なグラデーションや、シャドウ、立体感がアクセントに。


ドロップシャドウ

グラデーション写真

アイコン

フラットデザイン

装飾を削るデザインではなく、フラットな状態から要素を付け足すデザイン。

thanks