2017 fall

1. Practical UX Design
Patterns, Properties and
Principles of Good UX Design
M0 道券裕二/Yuji Douken
05

2. Summary of the first half 2
Christopher Alexander
全体性(Wholeness)
• 優れたデザインは無意識の
レベルで伝える
• 客観的にデザインの品質を
成す要素がある
• これを認知する力は生来自
然に獲得されている

3. The fifteen fundamental properties of wholeness
アレキサンダーの全体性の基本的性質15種
• Levels of Scale
• Strong Centers
• Boundaries
• Alternating Repetition
• Positive Space
• Local Symmetries
• Deep Interlock
• Contrast
• Graded Variation
• Roughness
• Echoes
• The Void
• Inner Calm
• Not-Separateness
3
今回説明する
パターン

4. Local Symmetries
対称性(Symmetry)
• 図形が半分視認できれば再現可能
ゲシュタルト(gestalt)
• 部分で対象を認識するのではなく、全体像を形成して
認知すること
• 例：アスキーアート
4
ﾁｬｰﾊﾝ作るよ!!
`∧,,∧
(;`･ω･) ｡･ﾟ･⌒)
/ ｏ━ヽニニフ))
しー-Ｊ
文字列
イラスト

5. Examples of Symmetry
対称性の種類
• 反射対称
• 循環対称・放射対称
• 平行対称
5

6. Deep Interlock and Ambiguity
深い連結と曖昧さ
• 2点の間に新たに点を置くことでより連続性ができる
• 異なる要素同士を繋げる接続点をつくる
• 接続点をつくることで、継ぎ目のない変化ができる
例：IoT (information of things)
6

7. Contrast
対比・コントラスト
• 様々な種類の対比
• 明るい・暗い
• 大きい・小さい
• 太い・細い etc…
• 対比は異なる結果をもたらす
• ネイティブ広告の例
7
バーナー広告
ネイティブ広告

8. Contrast
注意点
• ユーザは一番興味が引かれる部分に、必ずしも行こうと
しているわけではない
• 良いデザインはビジネス要件を満たす一方で、ユーザも満足
させる
コントラストの利用法
• 次ページ
8

9. Contrast
効率的な利用法８つ
1. バランスや対称性を持つと、要素同士が衝突しない
2. 気を散らす要素ではなく、興味に基づいて目を配る
3. パターンは共通性や一貫性を示す
4. 他の特徴が同等に利用される
5. 画像は素早く明確に意図を示す
6. 視覚的な区切りはページをより早く、楽に見渡せる
7. 色に関する要素は気を散らさない
8. ユーザが内容ではなく色に気を取られるならば、色が気を
散らす要因になっている
9

10. Gradients
勾配・傾斜・変化量
• グラフィックデザイナーは、色や影を混ぜることで、
色や影を滑らかに変化させる効果を作る
• 教育者は、生徒の理解に関する言葉を広げたり、
深めたりするのに意味上の変化を用いる
• 建築家は、様々な度合のくつろぎを作る。
どこに寝床や書斎やキッチンなどを配置するかなど
• Gradientsは、空間に特性と意味を与え、
経験や出会い、収集に影響を与える
10
“あるもの”から”あるもの”へ繋げる方法

11. Gradient sample 1
トランジション
• フェード
• フリップ
• スライド
• アップダウン
11
https://blogs.adobe.com/creativestation/web-xd-ui-transition-easing

12. Gradient sample 2
トランジション
• フェード
• フリップ
• スライド
• アップダウン
• フロー
• ポップ
• スライドフェード
• ターン
12
http://jsrun.it/vinton/1Et

13. Roughness
粗さ・不完全さ
• 変な形のブロックでつくる壁
• 雨だれのついたガラス
• 即興の音楽
• ペンで手描きした文字
共通点・特徴
• 望むと望まざるに関わらずミスを消すのは難しい
• ランダムなことが結果として、受け手にとってより本物
の経験を提供することができる
13

14. Echoes
Echo=反響 → 繰り返し・一貫性
• 似た要素を繰り返すことで、デザインを通して親しみを
与える
• UXデザイナーはデザインで親しみを感じさせるものを提
供すると良い
• その製品を使ったことがない、初めて使う場合にも親し
みを感じさせるようなデザインにすべき
似た要素の繰り返しが生む効果
• 規則正しさ
• 均一性
14

15. The Void
 Void = 空、欠如
 乱れた中での落ち着きのある空間 = Void
15
http://www.tkwa.com/fifteen-properties/
• 全てを詳細乱れた状態にすると
全体としての強度が下がる
• 例：NYC
• タイムズスクエア
セントラルパーク
• 例：音楽
• 休符、一時停止

16. Inner Calm
内部の穏やかさ(Inner Calm)
• 不必要な混乱させる要素を排除→内部の穏やかさ
• ≒シンプル・単純さ
Minimum Viable Product(MVP)
• 最も重要なインタラクションや要素だけで構成されたデ
ザイン
• 特定のユーザシナリオやインタラクションをテストする
さいに用いられる手法
16

17. Not-Separateness
 非分離
 “何か”から”分離”しないようにすること
• 一貫性、統一性 (Consistency, Unity)
• 穏やかさ、平和 (Peaceful, Calm)
• 完全 (Complete)
• 連続 (Connected)
• バランス、重心 (Centered)
• 均一さ (Blended, Smooth)
• 調和 (Belonging)
UXデザインでも同様
• デザインの技術とユーザが求める製品の乖離を防ぐ
• ユーザテストをして“早い馬が欲しい”神話を防ぐ
17

18. Finding wholeness in your design work
全体性を実際のデザインへの利用
• 全体性の特徴をすべて持つデザインをするのは難しい
• 特徴について考慮・適用することは価値がある
• 全体性を持つデザインをするのに有効な質問
→次ページ
18

19. Finding wholeness in your design work
全体性を持つデザインに有効な質問
• その開発した製品であなたは何かしらの方法で、より有効である、
連続していることを感じられるだろうか？
• 組み合わさった特徴は、どのようにUXに影響するか？
• いくつかの特徴を持たせた後で、デザインに対するユーザの反応
の変化に気づくか？
• 特徴を無理矢理に取り入れるのではなく、いかにデザインがより
自然なものと感じさせるものとなっているか？
• そのデザインはできる限りシンプルであるか？
• 必要のない混乱を招くデザインになっていないか？
• UXや主目的を邪魔するものを取り除いてあるか？
19

20. Pattern Libraries vs Style guides
パターンの利用法
パターンライブラリとスタイルガイドの使い分け
デザインの段階で分ける
• 例：ワイヤーフレーム作成の段階ならばパターンを用いる
パターン
• パターンは先取りするためのデザイン要素
• インタラクションやIAの可視化に役立つ
スタイルガイド
• デザインをする段階が完了した時点で作成
• 開発チームでビジュアルを共有するのに使われる
20

21. Summary
 15の全体性のパターンについて
• 具体例からどのようにパターンが利用されているか理解
• パターンがどのように形成されるか
• パターンがどのようにデザインに組み込まれるか
• 複雑そうに見えるが、本質はシンプルであり、
UXデザインに適用すると良い
21