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.

ノンデザイナーのためのWebデザイン講座

4,566 views

Published on

ノンデザイナーのためのWebデザイン講座

Published in: Design
  • Be the first to comment

ノンデザイナーのためのWebデザイン講座

  1. 1. SKILLHUB ノンデザイナーのための Webデザイン入門 初心者でもちょっと良いデザインを実現 1
  2. 2. SKILLHUB 自己紹介 2 株式会社スキルハブ代表 吉田 光利 Skillhubの制作者 http://skillhub.jp スキルセット RubyとRailsプログラミング UI/UX, Webデザイン HTML/CSSマークアップ Webマーケティング 教育関連 民間ITスクール Web講座企画・開発・講師 企業用Web講座企画・開発・講師 担当した企業は1000社以上 教えた生徒数は10000人以上 著書:起業のWeb技術
  3. 3. SKILLHUB 本日の目的と内容 デザインの4原則を知り、少しデザイン力を上げる 1.近接 2.整列 3.反復 4.コントラスト 3
  4. 4. SKILLHUB 近接 Proximity 4
  5. 5. SKILLHUB 近接:Proximity 5 Computers MacBook MacBook Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone Computers MacBook MacBook Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone この2つを見てどう思いますか?
  6. 6. SKILLHUB 近接:Proximity 6 Computers MacBook MacBook Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone 左側 これは共通する 何かがあるな
  7. 7. SKILLHUB 近接:Proximity 7 右側 下の方は何か違う意 味があるな Computers MacBook MacBook Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone
  8. 8. SKILLHUB 近接:Proximity 8 Computers MacBook MacBook Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone Computers MacBook MacBook Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone 「近くにあるということは関係がある」ことを意味する
  9. 9. SKILLHUB 近接:Proximity 9 吉田 光利 スキルハブ代表 この名刺には5つの要素があります 090-0000-0000 上目黒5丁目 東京都目黒区
  10. 10. SKILLHUB 近接:Proximity 10 吉田 光利 スキルハブ代表 この名刺には5つの要素があります 090-0000-0000 上目黒5丁目 東京都目黒区
  11. 11. SKILLHUB 近接:Proximity 11 吉田 光利 スキルハブ代表 Q1. どこから読み始めますか? 090-0000-0000 上目黒5丁目 東京都目黒区 …
  12. 12. SKILLHUB 近接:Proximity 12 吉田 光利 スキルハブ代表 Q1. どこから読み始めますか? 090-0000-0000 上目黒5丁目 東京都目黒区 真ん中です。 文字が太いからです。
  13. 13. SKILLHUB 近接:Proximity 13 吉田 光利 スキルハブ代表 Q2. 次はどこを読みますか? 090-0000-0000 上目黒5丁目 東京都目黒区 …
  14. 14. SKILLHUB 近接:Proximity 14 吉田 光利 スキルハブ代表 Q2. 次はどこを読みますか? 090-0000-0000 上目黒5丁目 東京都目黒区 左から右に読みます
  15. 15. SKILLHUB 近接:Proximity 15 吉田 光利 スキルハブ代表 Q3. 右下まで行ったら次に視線はどこに行きますか? 090-0000-0000 上目黒5丁目 東京都目黒区 …
  16. 16. SKILLHUB 近接:Proximity 16 吉田 光利 スキルハブ代表 Q3. 右下まで行ったら次に視線はどこに行きますか? 090-0000-0000 上目黒5丁目 東京都目黒区 隅を見落としていな いかあちこち見てし まいます。
  17. 17. SKILLHUB 近接:Proximity 17 吉田 光利 スキルハブ代表 Q4. 太字を増やしてみると 090-0000-0000 上目黒5丁目 東京都目黒区
  18. 18. SKILLHUB 近接:Proximity 18 吉田 光利 スキルハブ代表 Q4. どこから読み始めますか? 090-0000-0000 上目黒5丁目 東京都目黒区 …
  19. 19. SKILLHUB 近接:Proximity 19 吉田 光利 スキルハブ代表 Q4. どこから読み始めますか? 090-0000-0000 上目黒5丁目 東京都目黒区 なんか太字を行った り来たりしてしまい ます。定まりません
  20. 20. SKILLHUB 近接:Proximity 20 吉田 光利 スキルハブ代表 Q4. いつ読み終わったかわかりますか? 090-0000-0000 上目黒5丁目 東京都目黒区 …
  21. 21. SKILLHUB 近接:Proximity 21 吉田 光利 スキルハブ代表 Q4. いつ読み終わったかわかりますか? 090-0000-0000 上目黒5丁目 東京都目黒区 わ、わかりません
  22. 22. 関連する要素を近接させ グルーピングする 22
  23. 23. SKILLHUB 近接:Proximity 23 吉田 光利 スキルハブ代表 関連する要素を近接させグルーピングする 090-0000-0000 上目黒5丁目 東京都目黒区
  24. 24. SKILLHUB 近接:Proximity 24 吉田 光利 スキルハブ代表 いかがでしょう? 090-0000-0000 上目黒5丁目 東京都目黒区
  25. 25. SKILLHUB 近接:Proximity 25 吉田 光利 スキルハブ代表 以下の問いに答えられるようになっているはずです 090-0000-0000 上目黒5丁目 東京都目黒区 どこから読み始めるか迷います か? 次はどこを読むべきかすぐにわ かりますか? 読み終えた実感は湧きますか?
  26. 26. SKILLHUB 近接:Proximity 26 吉田 光利 スキルハブ代表 近接させると… 090-0000-0000 上目黒5丁目 東京都目黒区 知覚的に組織化する 視覚的に組織化する 上の2つにより「情報がより伝 わるようになる」
  27. 27. 近接:Webサイト事例 27
  28. 28. SKILLHUB 近接:Proximity 28 Amazonの場合 イメージユニット 情報ユニット アクション ユニット
  29. 29. 近接:実習 29
  30. 30. SKILLHUB 近接:Proximity 課題:近接 30 以下を近接の法則に従って並べ替えましょう
  31. 31. SKILLHUB 解答:情報がグルーピングされた状態 31
  32. 32. SKILLHUB 解答:情報がグルーピングされた状態(枠線つき) 32 キャッチフレーズ イメージ ボタン 3つのメリット
  33. 33. SKILLHUB 解答:グループに感覚をつけた 33 間隔 間隔 間隔
  34. 34. SKILLHUB 近接:Proximity 34 吉田 光利 スキルハブ代表 まとめ 090-0000-0000 上目黒5丁目 東京都目黒区 関連する項目をまとめる 情報の流れがわかるようにする スペースをとって情報の区別が できるようにする
  35. 35. SKILLHUB 整列 Alignment 35
  36. 36. SKILLHUB 整列:Alignment 36 Q. このデザインから何か関連を見つけられますか? … 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区
  37. 37. SKILLHUB 整列:Alignment 37 Q. このデザインから何か関連を見つけられますか? いいえ、バラバラで どこが関連している かはわかりません吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区
  38. 38. SKILLHUB 整列:Alignment 38 Q. では、これは関連がわかりますか? … 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区
  39. 39. SKILLHUB 整列:Alignment 39 Q. では、これは関連がわかりますか? 上がその人が何者か 下が住所ですね。 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区
  40. 40. SKILLHUB 整列:Alignment 40 見えない線があるからそう感じるのです なるほど 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区
  41. 41. 整列は強い結びつきを作り レイアウトに強さを与える 41
  42. 42. SKILLHUB 整列:Alignment 42 端 えは真ん中 えよりも力強い 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区
  43. 43. SKILLHUB 整列:Alignment 43 端 えは真ん中 えよりも力強い 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区
  44. 44. SKILLHUB 整列:Alignment 44 左右に配置するパターンも強力 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 東京都目黒区
  45. 45. 究極の整列を実現する グリッドシステム 45
  46. 46. 46 グリッドシステムとは “ “ レイアウトを行う際、画面上に架空の 縦横線をガイドラインとして引き、そ のブロックごとに文字や図版を配置し、 無駄なくスッキリした画面を作る手法。
  47. 47. 要は 「見えない線を利用する」 ということ 47
  48. 48. SKILLHUB 整列:Alignment 48 Webページの場合 http://www.slideshare.net/Leursism/grid-systems
  49. 49. SKILLHUB 整列:Alignment 49 昔(200年前くらい)の本もグリッド http://www.slideshare.net/Leursism/grid-systems
  50. 50. SKILLHUB 整列:Alignment 50 モダンな建物もグリッド http://www.slideshare.net/Leursism/grid-systems
  51. 51. SKILLHUB 近接:Proximity 51 Sony Music: 16個のグリッドで区切られている
  52. 52. 実習:整列 52
  53. 53. SKILLHUB 並べ替えて整列させてみましょう 53
  54. 54. SKILLHUB 整列の比較 54 整列前 整列後
  55. 55. SKILLHUB 見えない線 55
  56. 56. SKILLHUB 見えない線の比較 56
  57. 57. SKILLHUB グリッドデザインの作り方 57
  58. 58. SKILLHUB 整列まとめ 58 「見えない線」が見え るか 完成デザインをジーっと見た時に、しっかりとアラ イン線を認識できるか。 異なった行 えになって いないか 同じ要素の中で異なった行 えになっていないか。 左 え、真ん中 え、右 えが同じ要素の中で混在 していると整列感がなくなる。 異なる要素を整列させ ていないか 異なる情報レベルの要素が整列によって結ばれてい ないか。もし整列させてしまっていれば、ユーザー は「近い情報」として認識してしまう。 例外がきちんと処理され ているか アライン線をはみ出している表現であったり、行 えをわざと変えている場合にそれが理解できるか。 これらの例外は、他の部分で整列原則が守られてい る場合に成立する
  59. 59. SKILLHUB 反復 Repetition 59
  60. 60. SKILLHUB 反復:Repetition 60 これはトップページです …
  61. 61. SKILLHUB 反復:Repetition 61 学習を開始ボタンをクリックすると …
  62. 62. SKILLHUB 反復:Repetition 62 コース(講座)の一覧ページに移動します …
  63. 63. SKILLHUB 反復:Repetition 63 2つ目の講座を見るためにクリックします …
  64. 64. SKILLHUB 反復:Repetition 64 レッスンページに移動します …
  65. 65. SKILLHUB 反復:Repetition 65 3ページは同じサイトです。どう思いましたか? …
  66. 66. SKILLHUB 反復:Repetition 66 3ページは同じサイトです。どう思いましたか? ほとんど同じサイト だとは思えません。 なんというか…
  67. 67. SKILLHUB 反復:Repetition 67 3ページは同じサイトです。どう思いましたか? 一貫性に欠けている 気がするのです
  68. 68. 一貫性、それこそが 反復を通して得られるもの 「反復 = 一貫性」 68
  69. 69. SKILLHUB 反復:Repetition 69 一貫性を保ったデザイン
  70. 70. SKILLHUB 反復:Repetition 70 ページをまたいで反復している
  71. 71. SKILLHUB 反復:Repetition 71 内部も一貫性がある ロゴ グローバルナビ インフォメーション
  72. 72. SKILLHUB 反復:Repetition 72 リンクカラーも反復している
  73. 73. SKILLHUB 反復:Repetition 73 ページの中での反復
  74. 74. SKILLHUB 反復:Repetition 74 ページの中での反復 ・学習途中が半分塗りつぶし ・学習終了がチェックマーク
  75. 75. SKILLHUB 反復:Repetition 75 一貫性の比較
  76. 76. 実習:反復 76
  77. 77. SKILLHUB 第2階層を反復させてみましょう 77 文字の大きさや色、図形などを使って反復を作ってみましょう
  78. 78. SKILLHUB 反復まとめ 78 ヘッダーは共通か? ロゴの位置、ナビゲーションの項目は同じであるか 見出しは共通か? 大見出し、中見出しなどHTMLで言えばh1, h2などの見た目がページ間 で共通であるか? 文字について 本文の文字サイズや行間などの設定が共通であるか。引用などにもルー ルが設定されているか。 アイコンで意味の反復を実現でき ているか? アイコンはユーザーに意味を学習させる要素になります。例えば会話で あれば、吹き出しなどになります。意味のあるアイコンを繰り返してい るかが重要です。 階層ごとのレイアウトは共通か? レイアウトのパターンはサイトの中でいくつもあっていいのだが、階層 ごとに用意することが好ましい。多くても3以内のレイアウトパターン に収めるべきであろう。 ルック・アンド・フィールが守ら れているか? 使い勝手が共通になっているか?ユーザーは使い方を学習します。使い 勝手が機能によってバラバラになっていないか? カラー 色に統一感があるか?きちんとベースカラーを守られているか テイスト 画像やイラストなどビジュアルのテイストは共通か?例えばフラットデ ザインで統一されているかなど。
  79. 79. SKILLHUB 第2階層を反復させてみましょう 79 模範解答は以下になります
  80. 80. SKILLHUB コントラスト Contrast 80
  81. 81. SKILLHUB コントラスト:Contrast 81 左と右は同じ文書です
  82. 82. SKILLHUB コントラスト:Contrast 82 左と右を比べるとどうですか? …
  83. 83. SKILLHUB コントラスト:Contrast 83 左と右を比べるとどうですか? 右のほうが情報が伝 わるような気がしま す。
  84. 84. SKILLHUB コントラスト:Contrast 84 上と下を比べるとどうですか? …
  85. 85. SKILLHUB コントラスト:Contrast 85 上と下を比べるとどうですか? 下のほうがすぐに意 味が伝わります
  86. 86. コントラストをつけることで 情報が分離され 役割がはっきりする 86
  87. 87. SKILLHUB コントラスト:Contrast 87 異なる要素は大きさを変える 大胆に違いをつける 臆病にならないこと!
  88. 88. SKILLHUB コントラスト:Contrast 88 大胆に違いをつける 臆病にならないこと! 大きさと色でコントラストをつける
  89. 89. 5秒ルール ランディングページは5秒で 情報を伝えなければならない 89
  90. 90. SKILLHUB コントラスト:Contrast 90 キャッチフレーズでコンテクス トを理解させる カードの画像で情報を明確化 赤ボタンでCTA コントラストをうまく使い情報をコントロールする
  91. 91. SKILLHUB コントラスト:Contrast 91 異なる要素は大きさを変える 大胆に違いをつける 臆病にならないこと!
  92. 92. SKILLHUB コントラスト:Contrast 92 異なる要素は大きさを変える 大胆に違いをつける 臆病にならないこと!
  93. 93. 実習:反復 93
  94. 94. SKILLHUB コントラスト実習 94 ビッグイメージにコントラストをつけてみましょう
  95. 95. SKILLHUB コントラスト実習 95 第3階層にコントラストをつけてみましょう
  96. 96. SKILLHUB コントラストまとめ 96 見出し文字は大きいか 見出しの文字はびっくりするくらい大きくて大丈夫です。そのほうが目を 引くし拾い読みができるようになります。例外は論文など読ませるコンテ ンツになります。それらは見出しが小さくてもOKです。 異なる要素で分けられているか 同じ要素にコントラストをつけると意味が分離してしまいます。なので、 コントラストをつけるべきものは異なる要素ということになります。 色使いが適当か? 白抜きや補色などでコントラストをつけることができます。クリックさせ たいボタンなどは、そのような色使いになっているかが重要です。 レイアウトの中でコントラストが あるか? ページをパッと見た時にすぐに内容が理解できるか。チェックする方法と して遠くから見るとか、薄目で見るなどを試みる。 臆病になっていないか? 重要なことは「ハッキリとした違い」をつくること。そのためには勇敢に なる必要があります。見出しと本文の文字サイズや線の使い方などでは 「ええーい、これだ、文句あるか!」と覚悟を決めて大胆に行いましょ う。
  97. 97. SKILLHUB コントラスト 97 模範解答は以下になります
  98. 98. まとめ 98
  99. 99. SKILLHUB まとめ 99 目的を達成できるWebページを実現する 情報を正確・効果的に伝える クリック率を高める 申し込みや販売などのコンバージョンを達成する デザインの4原則で結果の出るWebサイトを
  100. 100. SKILLHUB ありがとうございました http://skillhub.jp 100

×