ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/322/room ーーーーーーーーーーーーーーーーーーーーーーー

1. フラッ
トデザインに
出来ること / 出来ないこと
橘 雄大

2. About Me
@toybox_design
NAME
橘 雄大
WORK
Webデザイナー at ALL CONNECT
yuudai.tachibana
商業系のWebサイトを主に制作

3. 授業の流れ
1.フラッ
トデザインとは？
2.フラッ
トデザインの問題と解決策
3.iOS7から考えるユーザビリティ
4.より良いUIの為に考えるべき事
5.フラッ
トデザインに出来る事/出来ない事

4. 生徒の皆さんは
デザイナー / プログラマー
どちらですか?
Designer
or
Programmer

5. section.1
What is Flat Design
フラッ
トデザインとは？

9. Flat Design
フラッ
トデザイン
フラットデザインとは、
シンプルな要素や
図形と共に明るい色を用いて、
シンプルさや、
分かりやすさを強調した
デザインである。
Flat Design and Skeuomorphism より引用

10. なぜフラッ
トデザインが
話題になっているの?

11. Skeuomorphism
※
スキューモーフィズム
実際に存在するものを
模倣して作られるデザイン
※ Skeomorphism スキューモーフィズム / スキュアモーフィズムと発音。

12. 新しいメディア媒体・デバイスに出会ったとき
それに対する扱い方が分からなかった
？
♥
meets

13. 現実にあるものを取り入れる事で
ユーザーに対し感覚的な気付きを与える
Skeomorphismというフィルター

14. 現実にあるものを見せて
ユーザーに直感的な気づきを与える
ユーザー
認識値
使い方が
分からない…
直感的な
気づき
ユーザー
経験値
ユーザー
経験値
スキューモーフィズムを
行わなかった場合
スキューモーフィズムで
直感的な気付きを与える

16. 行き過ぎたスキューモーフィズム
can
swipe
can’t
swipe
iBooks
iOS adress book
無駄な装飾により、予想と一致しない動きが起こり、
ユーザーに対して混乱をもたらす。

17. http://www.youtube.com/watch?v=sVLb7dJ8_VY

18. 無駄な装飾を削ぎ落して
コンテンツを最適化
Skeomorphism
Flat Design

19. ×
Skeomorphism
立体的なものを
平面に直す
Flat Design

20. フラッ
トデ ザインがもたらすもの
Clean
Simple
Interactive

21. http://www.youtube.com/watch?v=IXeFe6M08uw

22. Figureの特徴
・豊かなインタラクション
・シンプルな操作性
・小さな画面の中に
最大限必要な機能
・動かせば何となく
使い方が分かる

23. フラッ
トなインターフェイス
今までに無かった新たな可能性を秘めている

24. フラッ
トなインターフェイス
？
優れたUIで、
より良いユーザー体験をもたらす

25. フラッ
トデザインって
使いづらくないですか？
Yes
or
No

26. Merit
・シンプルなためコンテンツに集中出来る
・インタラクティブな仕掛けを行いやすい
・画像のリクエスト数が減り読み込み速度が向上
Demerit
・感覚的な部分を装飾で伝えにくい
・インターフェースに対し、
より学習を伴う
・ユーザーに対し、
対話的な仕掛けが必要

27. デメリ トについて
ッ
もっ
と深く考える
・感覚的な部分を装飾で伝えにくい
・インターフェースに対し、
より学習を伴う
・ユーザーに対し、
対話的な仕掛けが必要

28. n1
ectio
S
まとめ
フラッ
トデザインとは？
・デバイスを感覚的に使いやすくする為、
スキューモーフィズムが流行った。
・平坦にするというより、無駄なものを
削るデザイン。
・デメリッ
トの部分をきっちりと理解して
制作を進めないと、
上手く行かない。

29. section.2
Problems & Solutions
フラッ
トデザインの問題点と解決策

30. フラッ
トデザインの問題点
ユーザー
認識値
明快さの欠如
気づき値
気づき値
ユーザー
経験値
ユーザー
経験値
Skeomophism
Flat Design

31. ユーザーに対して分かりやすい
気付きを与える
visit
訪問
観覧
行動

32. 対話的な要素で行動を促す
行動までの道筋を学ばなければ行けない
visit
訪問
観覧
触る
予想
UIに対しての学習を行う可能性
行動

38. 目的を達成出来るように誘導
観覧や触るの行動の時点で、直感的に行動を起こさせる仕組みが必要
目的への誘導
visit
訪問
観覧
触る
予想
行動

39. 付け足しのデザイン

41. 程よいドロップシャ
ドウ
検索

42. 程よいグラデーション
button

43. 程よい立体感
button

44. 程よいスキューモーフィズム

45. どっちがスキューモーフ
ィズム
？

46. 現実のものを模倣という意味では
どちらもスキューモーフィズム

48. フラッ
トデザインでは伝える事が出来ない
具体性や感情的表現を、
写真では伝える事が出来る

49. n2
ectio
S
まとめ
フラッ
トデザインの
問題と解決策？
・フラッ
トデザインでは抜け落ちてしまった
感覚的な気付きをどう埋めるかが重要。
・対話的な要素で補う。
・フラッ
トな状態から、
要素を付け足す
。
・程よいスキューモーフィズム。

50. section.3
Learn from iOS7
iOS7から学ぶユーザビリティ

51. iOS7が導き出した新しいアプローチ

52. レイヤーデザイン
フラッ
トなレイヤーと
奥行きのある空間デザイン
http://gizmodo.com/ios-7-instead-of-flatness-we-got-depth-512291484

53. レイヤーデザインが
もたらすもの
・よりインタラクティブな表現
・情報の階層への意識
・アプリと操作画面の分離

55. ユーザビリティエンジニアリング原論
学習しやすさ
エラー
ユーザビリティエンジニアリング言論
効率性
記憶しやすさ
主観的満足度
http://www.usability.gr.jp/whatis/definitions/

56. iOS7はこれらを達成出来てる？
・壁紙によってデザインが左右される
・アイコンをシンプルにした事による弊害
・今までのUIに対する慣れが大きい
・アプリに対する学習コス
トが高い

57. iOS7はこれらを達成出来てる？
・壁紙によってデザインが左右される
・アイコンをシンプルにした事による弊害
・今までのUIに対する慣れが大きい
・アプリに対する学習コストが高い

58. Year
Month
Week / Day

59. 2014年に移動するには
どうすればよい？

61. スワイプの方向が予測出来ない
or

63. 機能の視認性が悪い
？
visit
訪問
見る
曖昧な予想
機能の視認性が悪いと
曖昧な予想のまま、
行動に移してしまう

64. 予想と行動に対する、
結果の不一致
行動
正しい動作
経験を足した予想

65. 予想と行動に対する、
結果の不一致
行動
正しい動作
UIに対する学習
ユーザーに対する負担
経験を足した予想

66. n3
ectio
S
まとめ
iOS7から考える
ユーザビリティ
・レイヤーデザインを通して、
情報レイヤーの切り分けを行った。
・根本的な使いやすさは考えられているのか？
・機能の視認性が悪いため、
UIに対する
学習コス
ト、
ユーザーへの負担が高い。

67. section.4
For the better UI
より良いUIの為に考えるべき事

68. インターフェイスの前に考える事

69. 表層
ビジュアル設計
骨格 インターフェイス設計 ナビゲーション設計
構造
インタラクション設計
情報の構造
要件
企画仕様
コンテンツ要件
step
エン
ドユーザ
（サイ
ト観覧者）
のニーズ
戦略
制作物の目的

70. 表層
ビジュアル設計
骨格 インターフェイス設計 ナビゲーション設計
構造
インタラクション設計
情報の構造
要件
企画仕様
コンテンツ要件
step
戦略
要件定義書
エン
ドユーザ
（サイ
ト観覧者）
のニーズ
コンセプト ダイアグラム
・
制作物の目的

71. スマートフォン販売サイトの要件定義
目的
スマートフォンの販売
課題
ネッ
トで携帯を買うという認識が
定着していない。
コンセプト
ユーザー傾向
公式サイ
トのような信頼感を
持ちつつ、
お得な情報で惹き付ける
ネッ
トで全てを簡潔させたい。
面倒な構造だと離脱しそう。

72. 商材の背景
・課題
Webサイ
トの目的
コンセプト
ターゲッ
ト
ユーザー傾向
ユーザーニーズ
コンテンツ
競合
訴求
納期
予想リソース
流入ワード
機能要件
ビジュアルコンセプト
コピー案

73. 考えられるユーザーの行動パターン
ユーザーA
ユーザーB
トップページ
トップページ
新しく出たあの機種に変更したい
キャリアの乗り換えをしたい
機種一覧
機種詳細
料金詳細
キャンペーン
機種詳細
申し込み
機種詳細
料金詳細
申し込み
機種詳細
申し込み
申し込み

74. 表層
ビジュアル設計
骨格 インターフェイス設計 ナビゲーション設計
プロ
トタイピング
構造
インタラクション設計
情報の構造
要件
企画仕様
コンテンツ要件
step
エン
ドユーザ
（サイ
ト観覧者）
のニーズ
戦略
制作物の目的

75. https://popapp.in/

76. https://popapp.in/

77. https://popapp.in/

78. http://www.invisionapp.com/

79. n4
ectio
S
まとめ
よりよいUIの為に
考えるべき事
・UIに捕われすぎて、
目的を失ってはいけない。
・目的 ビジョンを明確にする為に、
・
要件定義を行う。
・装飾的な作り込みの前に、
プロ
トタイピングで、
機能するかを確かめる。

80. section.5
Flat design brings
フラッ
トデザインに出来る事 / 出来ない事

81. ？
Skeomorphism

82. Flat Design

83. Flat Design
？

84. Flat + α

85. Flat Design
コンテンツを邪魔せず、
クリーンで繊細な
イ
メージを与えられる

86. フラッ
トデザインは
あくまでも手段の一つ

87. 手段が目的になってはいけない
フラッ
ト
デザイン
目的の
達成

88. 目的のためにどうアプローチをするか
目的の
達成
ユーザー
体験
UI

89. Flat Design
目的の
達成
ユーザー
体験
UI

90. Fin

91. 宿題
フラッ
トデザインの
Webサイ ・
ト アプリを１
つ取り上げて、
何故フラッ
トデザインを
採用しているのかを考えてみよう