Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

開発者のためのUIデザイン入門

142 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

開発者のためのUIデザイン入門

  1. 1. 開発者のためのUIデザイン入門 ちょっとだけかじるUIデザイン Hiroyuki Mori Microsoft MVP - Developer Technologies #GyutanKaigi2019
  2. 2. #burikaigi 自己紹介 森 博之 (もり ひろゆき) Work • Microsoft開発技術を専門にするフリーランスエンジニア • テクニカルライター • セミナースピーカー Community • AWS .NET Developer Users Group Japan • Visual Studio Users Community Japan • 極東IT-Engineers • Visual Studio Code - Japanese Translation
  3. 3. #burikaigi Agenda 開発者のためのUIデザイン入門 • ユーザーインターフェースとデザイン • レイアウト • Color(配色)
  4. 4. #burikaigi ユーザーインターフェース とデザイン 変わることと変わらないこと 4
  5. 5. #burikaigi この書籍はご存知ですか? 「デザインが苦手」の処方箋 フッターを追加 5
  6. 6. #burikaigi ジョシュアツリーの悟り 言葉を知ることの重要性 • 言葉を知り • 言葉を得て • 言葉を意識し • 言葉を支配し • 言葉を所有し • 言葉をコントロールできる 6
  7. 7. #burikaigi 4つの基本原則 フッターを追加 7 整列 近接 反復 コントラスト
  8. 8. #burikaigi 整列 • 表示されるものはすべてを意図的に配置する必要がある • あらゆる要素は他の要素と視覚的な関連を持つ必要がある • これにより明解、洗練、新鮮という印象が生まれる
  9. 9. #burikaigi 意図をもって位置を決める • 表現として位置を決める
  10. 10. #burikaigi 関係を表す • インデントによって重要度を表現
  11. 11. #burikaigi 近接 • 互いに関連する項目は近づけることでグループ化する • バラバラな要素じゃなくなることで視覚的なユニットして認識される • 近接は情報の組織化に役立ち、混乱を減らし、明解な構造を提供できる
  12. 12. #burikaigi 整列と組み合わせると • 極端な例ですが、関係や組織、構造は明確になったように思いませんか?
  13. 13. #burikaigi 反復 • 色、形、質感、位置関係、線の太さ、書体、サイズ、画像などの視覚要素を繰り返す • 繰り返すことで組織化を促進し、一体性を強化する
  14. 14. #burikaigi コントラスト • コントラストによってページ上にある要素同士が「類似」するのを避ける • もし、要素(書体、色、サイズ、線の太さ、形、空きなど)が「同一」ではないのであれば、はっきり違わ せる • コントラストはページ上でもっとも重要な要素に視覚を引き付ける要因になる。 • つまり「読む気にさせる」役割を持つ
  15. 15. #burikaigi フォントのサイズを調整 • 要素同士の関係が明確になったように思いませんか?
  16. 16. #burikaigi さらにコントラスト・整列・反復・近接を加える • 意図や要素間の関係が明確になり、読みやすくなったような気がしませんか?
  17. 17. #burikaigi このように… • レイアウトの基礎原則だけですが、キーワードを知り、理解できれば、コントロールできますね
  18. 18. #burikaigi Color 配色はルールに沿ってサクサクと。 フッターを追加 18
  19. 19. #burikaigi 配色の基本のキ • 色相(Hue) • 赤・青・黄色といった色味の変化を色相と呼ぶ • 明度(Value) • 色の明るい・暗いといった明るさの段階を明度と呼ぶ • 彩度(Saturation) • 色の鮮やかさを表す要素 フッターを追加 19 Hue Saturation Value
  20. 20. #burikaigi 色相
  21. 21. #burikaigi 色相
  22. 22. #burikaigi 色相環(Color Wheel)
  23. 23. #burikaigi 補色 • 色相環の向かいにある色同士を補色関係と呼ぶ • 片側をメインに片側をアクセントとして利用すると相性がよい色
  24. 24. #burikaigi トライアド • 色相環の同じ距離にある3つの色の組み合わせはバランスのよい「トライアド」の組み合わせとなる • バランスのよい色の組み合わせを見つけたい場合は、色相環の距離を同じにするとバランスがよくなる
  25. 25. #burikaigi 2020 Toyama スプリット・コンプリメント・トライアド • 補色から等間隔での配色は洗練された印象を持つ組み合わせになる burikaigi
  26. 26. #burikaigi 2020 Toyama 類似色 • 色相環の近い距離にある色の組み合わせは調和のとれた組み合わせとなる burikaigi
  27. 27. #burikaigi • 特徴 • 引き締まった印象や奥まった印象を与える • 寒色で低彩度の色は沈静した印象を与える 寒色と暖色/興奮と沈静(色相の使い分け) • 色相環の近い距離にある色の組み合わせは調和のとれた組み合わせとなる寒色 - 冷たい色を使った配色 • 特徴 • 膨張した印象や前に出る印象を与える • 暖色で高彩度の色は興奮した印象を与える 暖色 - 暖かい印象を与える
  28. 28. #burikaigi • 特徴 • 軽い印象や重い印象を与える • ポップな印象を与える 軽いと重い/柔らかいと堅い(明度の使い分け) • 色相環の近い距離にある色の組み合わせは調和のとれた組み合わせとなる高明度の配色 • 特徴 • 重い印象や堅い印象を与える • 重厚で大人っぽい印象を与える 重いと堅い
  29. 29. #burikaigi • 特徴 • 派手な印象を与える • 色相差を大きくすると更にそれぞれが強調されて派手になる 派手と地味(彩度の使い分け) • 色相環の近い距離にある色の組み合わせは調和のとれた組み合わせとなる高彩度の配色 • 特徴 • 地味な印象を与える • 色相差を小さくすると更に地味な配色となる 低彩度の配色
  30. 30. #burikaigi いまどきデザインに近づけるために(既定値に気をつけよう) • OfficeのSmartArtやツールは縁取りが多様されている • 黒は自然界に存在しない色のため、強い印象を与える • 黒よりのグレーを利用する • グラデーションはかなり高度なデザイン • 配色に自信がないうちは利用しない勇気も! • 適切な配色を行えば、図形にあるパーツだけでも表現力があがります! 縁取りは控えめに・・・ 黒は使わない グラデーションの利用は気をつけて! 「図形」のパーツも配色次第でよい見た目に!
  31. 31. #burikaigi 名前を知ったあなたはもうUIデザインが怖くない! 31 まとめ
  32. 32. #burikaigi Thankyou! Hiroyuki Mori @hiroyuki_mori 32

×