Burikaigi2020で実施したUIデザイン入門のセッション資料です。 UI デザインのエッセンスについて、ノンデザイナーズデザインブックのナレッジと自身のTipsを共有しました。

1. 開発者のためのUIデザイン入門
ちょっとだけかじるUIデザイン
Hiroyuki Mori
Microsoft MVP - Developer Technologies
#GyutanKaigi2019

2. #burikaigi
自己紹介
森 博之 (もり ひろゆき)
Work
• Microsoft開発技術を専門にするフリーランスエンジニア
• テクニカルライター
• セミナースピーカー
Community
• AWS .NET Developer Users Group Japan
• Visual Studio Users Community Japan
• 極東IT-Engineers
• Visual Studio Code - Japanese Translation

3. #burikaigi
Agenda
開発者のためのUIデザイン入門
• ユーザーインターフェースとデザイン
• レイアウト
• Color（配色）

4. #burikaigi
ユーザーインターフェース
とデザイン
変わることと変わらないこと
4

5. #burikaigi
この書籍はご存知ですか？
「デザインが苦手」の処方箋
フッターを追加 5

6. #burikaigi
ジョシュアツリーの悟り
言葉を知ることの重要性
• 言葉を知り
• 言葉を得て
• 言葉を意識し
• 言葉を支配し
• 言葉を所有し
• 言葉をコントロールできる
6

7. #burikaigi
4つの基本原則
フッターを追加 7
整列 近接
反復 コントラスト

8. #burikaigi
整列
• 表示されるものはすべてを意図的に配置する必要がある
• あらゆる要素は他の要素と視覚的な関連を持つ必要がある
• これにより明解、洗練、新鮮という印象が生まれる

9. #burikaigi
意図をもって位置を決める
• 表現として位置を決める

10. #burikaigi
関係を表す
• インデントによって重要度を表現

11. #burikaigi
近接
• 互いに関連する項目は近づけることでグループ化する
• バラバラな要素じゃなくなることで視覚的なユニットして認識される
• 近接は情報の組織化に役立ち、混乱を減らし、明解な構造を提供できる

12. #burikaigi
整列と組み合わせると
• 極端な例ですが、関係や組織、構造は明確になったように思いませんか？

13. #burikaigi
反復
• 色、形、質感、位置関係、線の太さ、書体、サイズ、画像などの視覚要素を繰り返す
• 繰り返すことで組織化を促進し、一体性を強化する

14. #burikaigi
コントラスト
• コントラストによってページ上にある要素同士が「類似」するのを避ける
• もし、要素（書体、色、サイズ、線の太さ、形、空きなど）が「同一」ではないのであれば、はっきり違わ
せる
• コントラストはページ上でもっとも重要な要素に視覚を引き付ける要因になる。
• つまり「読む気にさせる」役割を持つ

15. #burikaigi
フォントのサイズを調整
• 要素同士の関係が明確になったように思いませんか？

16. #burikaigi
さらにコントラスト・整列・反復・近接を加える
• 意図や要素間の関係が明確になり、読みやすくなったような気がしませんか？

17. #burikaigi
このように…
• レイアウトの基礎原則だけですが、キーワードを知り、理解できれば、コントロールできますね

18. #burikaigi
Color
配色はルールに沿ってサクサクと。
フッターを追加 18

19. #burikaigi
配色の基本のキ
• 色相(Hue)
• 赤・青・黄色といった色味の変化を色相と呼ぶ
• 明度(Value)
• 色の明るい・暗いといった明るさの段階を明度と呼ぶ
• 彩度(Saturation)
• 色の鮮やかさを表す要素
フッターを追加 19
Hue
Saturation
Value

20. #burikaigi
色相

21. #burikaigi
色相

22. #burikaigi
色相環(Color Wheel)

23. #burikaigi
補色
• 色相環の向かいにある色同士を補色関係と呼ぶ
• 片側をメインに片側をアクセントとして利用すると相性がよい色

24. #burikaigi
トライアド
• 色相環の同じ距離にある３つの色の組み合わせはバランスのよい「トライアド」の組み合わせとなる
• バランスのよい色の組み合わせを見つけたい場合は、色相環の距離を同じにするとバランスがよくなる

25. #burikaigi
2020 Toyama
スプリット・コンプリメント・トライアド
• 補色から等間隔での配色は洗練された印象を持つ組み合わせになる
burikaigi

26. #burikaigi
2020 Toyama
類似色
• 色相環の近い距離にある色の組み合わせは調和のとれた組み合わせとなる
burikaigi

27. #burikaigi
• 特徴
• 引き締まった印象や奥まった印象を与える
• 寒色で低彩度の色は沈静した印象を与える
寒色と暖色／興奮と沈静（色相の使い分け）
• 色相環の近い距離にある色の組み合わせは調和のとれた組み合わせとなる寒色 － 冷たい色を使った配色
• 特徴
• 膨張した印象や前に出る印象を与える
• 暖色で高彩度の色は興奮した印象を与える
暖色 － 暖かい印象を与える

28. #burikaigi
• 特徴
• 軽い印象や重い印象を与える
• ポップな印象を与える
軽いと重い／柔らかいと堅い（明度の使い分け）
• 色相環の近い距離にある色の組み合わせは調和のとれた組み合わせとなる高明度の配色
• 特徴
• 重い印象や堅い印象を与える
• 重厚で大人っぽい印象を与える
重いと堅い

29. #burikaigi
• 特徴
• 派手な印象を与える
• 色相差を大きくすると更にそれぞれが強調されて派手になる
派手と地味（彩度の使い分け）
• 色相環の近い距離にある色の組み合わせは調和のとれた組み合わせとなる高彩度の配色
• 特徴
• 地味な印象を与える
• 色相差を小さくすると更に地味な配色となる
低彩度の配色

30. #burikaigi
いまどきデザインに近づけるために（既定値に気をつけよう）
• OfficeのSmartArtやツールは縁取りが多様されている
• 黒は自然界に存在しない色のため、強い印象を与える
• 黒よりのグレーを利用する
• グラデーションはかなり高度なデザイン
• 配色に自信がないうちは利用しない勇気も！
• 適切な配色を行えば、図形にあるパーツだけでも表現力があがります！
縁取りは控えめに･･･
黒は使わない
グラデーションの利用は気をつけて！
「図形」のパーツも配色次第でよい見た目に！

31. #burikaigi
名前を知ったあなたはもうUIデザインが怖くない！
31
まとめ

32. #burikaigi
Thankyou!
Hiroyuki Mori
@hiroyuki_mori
32