Tips of Design

2,082 views

Published on

4月13日に開催された「Hokuriku.NET × WCAF」で使用したスライドです。

Tips of Design

  1. 1. Tips of Design 2013.04.13 Hokuriku.NET × WCAF 佐々木 敏明(Web Designer at ALLCONNECT. Inc.)
  2. 2. To s h i a k i S a s a k i Web Designer at ALLCONNECT.Inc. @shirokuro331
  3. 3. デザインとは
  4. 4. デザインとはある問題を解決するために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される。デザインの本質とは『問題の発見』と『問題の解決』である
  5. 5.              /)           ///)          /,.=゙"/      /     i f ,.r="--つ____こまけぇこたぁいいんだよ!!  /      /   _,.-- /͡  ͡\    /   ,i   ,二ニ ( ●). (●)\   /    ノ    il゙フ::::::͡(__人__)͡::::: \      ,イ「ト、  ,!,!¦     ¦r┬-¦     ¦     / iトヾヽ_/ィ"\      `ー́     / ※ 本セッションに限る
  6. 6. デザインに求められること見た目をいい感じにしたいわかりやすく、使いやすくしたい
  7. 7. デザインするうえでの背景目的ターゲットニーズコンセプト
  8. 8.              /)           ///)          /,.=゙"/      /     i f ,.r="--つ____こまけぇこたぁいいんだよ!!  /      /   _,.-- /͡  ͡\    /   ,i   ,二ニ ( ●). (●)\   /    ノ    il゙フ::::::͡(__人__)͡::::: \      ,イ「ト、  ,!,!¦     ¦r┬-¦     ¦     / iトヾヽ_/ィ"\      `ー́     / ※ 本セッションに限る
  9. 9. http://credibility.stanford.edu/
  10. 10. What causes people to believe (or not believe) what they find on the Web?人々がWeb上で何かを探すときに信頼出来る(または信頼できない)ことの原因はなにか?
  11. 11. 結果 ユーザーは素人が作ったようなサイトは信用されず、専門家が作ったようなWebサイトの方がユーザーを先まで進ませた
  12. 12. http://msdn.microsoft.com/ja-jp/hh850413
  13. 13. 結果UIの改善により、利用時間の大幅なコスト削減に成功 ストレスの軽減により笑顔が増えた :)
  14. 14. デザインするうえでの背景はとりあえずおいといて 見た目を良くするコツについてお話します
  15. 15. アジェンダ見た目を良くするコツデモ & ツールの紹介まとめ
  16. 16. 見た目を良くするコツ
  17. 17. デザインの基礎色タイポグラフィ(文字)レイアウト(配置)
  18. 18. デザインの基礎色タイポグラフィ(文字)レイアウト(配置)
  19. 19. デザインの基本原則近接 / 整列 / 反復 / コントラスト
  20. 20. デザインの基本原則 近接 / 整列 / 反復 / コントラスト一言でまとめると「きちんと情報をまとめて、整理してから配置して、特徴的な何かを 繰り返し使うことで印象が強くなって、メリハリつけたほうが良い 感じに見えるよ!」です。
  21. 21. デザインの基本原則近接 / 整列 / 反復 / コントラスト です。 では見てみましょう
  22. 22. 近接関連する項目(情報)をまとめてグループ化する 項目が散らかってる 項目がグループ化されている
  23. 23. 近接関連する項目(情報)をまとめてグループ化する複数のものを近づけて配置すると、見る者はそれらを仲間として関連付ける。構造と内容の直線的な手がかりをユーザーへ提供することができる。 項目が散らかってる 項目がグループ化されている
  24. 24. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1
  25. 25. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1
  26. 26. 画像・アプリ名・説明を一つのグループとしてまとめることで関連する情報として認識させる※関連するグループどうしはある程度間隔をあける必要がある
  27. 27. デザインの基本原則 近接 / 整列 / 反復 / コントラスト「きちんと情報をまとめて、整理してから配置して、特徴的な何かを 繰り返し使うことで印象が強くなって、メリハリつけたほうが良い 感じに見えるよ!」
  28. 28. 整列各項目(情報)を意図的に整列して配置する項目が散らかってる 項目が整理され見やすい
  29. 29. 整列各項目(情報)を意図的に整列して配置する項目が散らかってる 項目が整理され見やすい 上下左右の「見えない線」を意識する
  30. 30. 整列 各項目(情報)を意図的に整列して配置する配置を整えることにより、見た目が良い印象を与えることができる。 項目が散らかってる 項目が整理され見やすい
  31. 31. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1
  32. 32. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1
  33. 33. 上下、左右、各グループの間に存在する「見えない線」を整えることで、見た目が良い印象を与える
  34. 34. デザインの基本原則 近接 / 整列 / 反復 / コントラスト「きちんと情報をまとめて、整理してから配置して、特徴的な何かを 繰り返し使うことで印象が強くなって、メリハリつけたほうが良い 感じに見えるよ!」
  35. 35. 反復 なにかの特徴を全体を通して繰り返す複数のパターンを使っている 使用するパターンを統一している
  36. 36. 反復 なにかの特徴を全体を通して繰り返す複数のパターンを使っている 使用するパターンを統一している 角丸や色彩なども繰り返される 何かの対象となりえる
  37. 37. 反復なにかの特徴を全体を通して繰り返す特徴あるパターンを繰り返し使うことで 複数のパターンを使っている 使用するパターンを統一している作品全体に統一感が生まれる。 角丸や色彩なども繰り返される 何かの対象となりえる
  38. 38. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1
  39. 39. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1
  40. 40. デザインの基本原則 近接 / 整列 / 反復 / コントラスト「きちんと情報をまとめて、整理してから配置して、特徴的な何かを 繰り返し使うことで印象が強くなって、メリハリつけたほうが良い 感じに見えるよ!」
  41. 41. コントラスト 異なる要素をはっきりと違わせる違いがわからない 違いが一目瞭然
  42. 42. コントラスト異なる要素をはっきりと違わせる異なる要素をはっきりと違わせることにより目を引きつけさせることができる。優先すべき情報はコントラストを意識して大きくしたり色を変えたりする。 違いがわからない 違いが一目瞭然
  43. 43. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1
  44. 44. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1
  45. 45. キャッチコピーや見出しなどはコントラストを強くして強調することにより、どういう情報なのかをわかりやすく伝える
  46. 46. デザインの基本原則 近接 / 整列 / 反復 / コントラスト「きちんと情報をまとめて、整理してから配置して、特徴的な何かを 繰り返し使うことで印象が強くなって、メリハリつけたほうが良い 感じに見えるよ!」
  47. 47. デザインの基本原則 近接 / 整列 / 反復 / コントラストキレイに見えるデザインは 近接 / 整列 / 反復 / コントラスト の4原則がうまく使われている。感覚的に情報を配置するのではなく、こういった基本となる原則を押さえてレイアウトすることでまとまりや見やすさを「作り出す」ことができます。これらをおさえるだけでも見た目をかなり良くすることができます。
  48. 48. そのほか見た目をよくするコツ余白人間がキレイと感じる形テクスチャ・グラデーション見た目に差をつける行動のとっかかりを与える
  49. 49. 余白 余白 上下左右・項目の間隔を調整するhoge 真ん中
  50. 50. 余白 余白 上下左右・項目の間隔を調整するhoge 真ん中
  51. 51. Hokuriku.NET WCAF 北陸のコミュニティがコラボする今回はデザイナーからプログラマーへ、そしてプログラマーからデザイナーへ、 をテーマにこれまでとは違った視点で勉強会を行います。
  52. 52. Hokuriku.NET WCAF 北陸のコミュニティがコラボする今回はデザイナーからプログラマーへ、そしてプログラマーからデザイナーへ、 をテーマにこれまでとは違った視点で勉強会を行います。
  53. 53. Hokuriku.NET WCAF内側の余白が外側の 北陸のコミュニティがコラボする余白より大きいとバランスが良くない 今回はデザイナーからプログラマーへ、そしてプログラマーからデザイナーへ、 をテーマにこれまでとは違った視点で勉強会を行います。
  54. 54. キレイに見える形 余白 人間が見た時に美しいと感じる形の比率があるhoge 1 : 1.618 1 : 1.414 黄金比 白銀比
  55. 55. 余白hoge
  56. 56. テクスチャ・グラデーション要素に質感を与え、見栄えを良くする
  57. 57. 木目とか良い感じですね
  58. 58. 色使いのけばけばしいものは あまりよろしくない色のトーンを抑えましょう
  59. 59. グラデーションも良い感じ情報を邪魔しない、さりげなさがポイントです
  60. 60. http://www.kendoui.com/dojo.aspx
  61. 61. 見た目に差をつける色の階調 位置と整列色の明度 向き
  62. 62. 見た目に差をつける 色の彩度 大きさabcdef abcdef abcdef abcdefabcdef abcdef abcdef abcdefabcdef abcdef abcdef abcdefabcdef abcdef abcdef abcdefabcdef abcdef abcdef abcdefabcdef abcdef abcdef abcdef 質感 形状
  63. 63. 行動のとっかかりを与えるデザインによって、ユーザーの行動を誘導する
  64. 64. 行動のとっかかりを与えるデザインによって、ユーザーの行動を誘導する
  65. 65. デモ & ツールの紹介
  66. 66. 「cafe la hokunet」という架空のカフェのサイトをデザインします
  67. 67. 手書きラフ ▶ HTML ▶ CSS ▶ 完成
  68. 68. http://yeoman.io/
  69. 69. http://docs.emmet.io/
  70. 70. http://compass-style.org/
  71. 71. http://griddle.it/
  72. 72. http://fortawesome.github.io/Font-Awesome/
  73. 73. http://colorschemedesigner.com/
  74. 74. http://www.google.com/fonts/
  75. 75. http://css3button.net/
  76. 76. まとめ
  77. 77. 常識を知らないと非常識はできない
  78. 78. 本日お話させてもらったことはセオリーの一部です。さらに人を惹きつけるためには、セオリーを知ったうえで、 セオリーを破ることです。
  79. 79. 「真似ぶ」ことから始めるのは 学びの基本
  80. 80. デザインスキルを向上させるコツはひたすら手を動かすことです。そのためには優れたデザインを よく見て真似て、学びましょう。
  81. 81. http://dribbble.com/
  82. 82. http://ui-patterns.com/
  83. 83. Great design is invisible
  84. 84. デザインの本質は「問題の発見」と「問題の解決」です。本当に優れたデザインとは、生活に溶け込み、問題と感じない ものなのかもしれません。
  85. 85. 本日の話がみなさまの「問題発見」と「問題解決」の手助けになれば幸いです。
  86. 86. Thanks all #hokunet 2013.04.13 Hokuriku.NET × WCAF 佐々木 敏明(Web Designer at ALLCONNECT. Inc.)

×