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

1. SKILLHUB
ノンデザイナーのための
Webデザイン入門
初心者でもちょっと良いデザインを実現
1

2. SKILLHUB
自己紹介
2
株式会社スキルハブ代表
吉田 光利
Skillhubの制作者
http://skillhub.jp
スキルセット
RubyとRailsプログラミング
UI/UX, Webデザイン
HTML/CSSマークアップ
Webマーケティング
教育関連
民間ITスクール
Web講座企画・開発・講師
企業用Web講座企画・開発・講師
担当した企業は1000社以上
教えた生徒数は10000人以上
著書：起業のWeb技術

3. SKILLHUB
本日の目的と内容
デザインの4原則を知り、少しデザイン力を上げる
1.近接
2.整列
3.反復
4.コントラスト
3

4. SKILLHUB
近接
Proximity
4

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. SKILLHUB
近接:Proximity
6
Computers
MacBook
MacBook Pro
MacBook Air
Windows8
ChromeBook
Macintosh
iPad
iPhone
左側
これは共通する
何かがあるな

7. SKILLHUB
近接:Proximity
7
右側
下の方は何か違う意
味があるな
Computers
MacBook
MacBook Pro
MacBook Air
Windows8
ChromeBook
Macintosh
iPad
iPhone

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. SKILLHUB
近接:Proximity
9
吉田 光利
スキルハブ代表
この名刺には5つの要素があります
090-0000-0000
上目黒5丁目 東京都目黒区

10. SKILLHUB
近接:Proximity
10
吉田 光利
スキルハブ代表
この名刺には5つの要素があります
090-0000-0000
上目黒5丁目 東京都目黒区

11. SKILLHUB
近接:Proximity
11
吉田 光利
スキルハブ代表
Q1. どこから読み始めますか？
090-0000-0000
上目黒5丁目 東京都目黒区
…

12. SKILLHUB
近接:Proximity
12
吉田 光利
スキルハブ代表
Q1. どこから読み始めますか？
090-0000-0000
上目黒5丁目 東京都目黒区
真ん中です。
文字が太いからです。

13. SKILLHUB
近接:Proximity
13
吉田 光利
スキルハブ代表
Q2. 次はどこを読みますか？
090-0000-0000
上目黒5丁目 東京都目黒区
…

14. SKILLHUB
近接:Proximity
14
吉田 光利
スキルハブ代表
Q2. 次はどこを読みますか？
090-0000-0000
上目黒5丁目 東京都目黒区
左から右に読みます

15. SKILLHUB
近接:Proximity
15
吉田 光利
スキルハブ代表
Q3. 右下まで行ったら次に視線はどこに行きますか？
090-0000-0000
上目黒5丁目 東京都目黒区
…

16. SKILLHUB
近接:Proximity
16
吉田 光利
スキルハブ代表
Q3. 右下まで行ったら次に視線はどこに行きますか？
090-0000-0000
上目黒5丁目 東京都目黒区
隅を見落としていな
いかあちこち見てし
まいます。

17. SKILLHUB
近接:Proximity
17
吉田 光利
スキルハブ代表
Q4. 太字を増やしてみると
090-0000-0000
上目黒5丁目 東京都目黒区

18. SKILLHUB
近接:Proximity
18
吉田 光利
スキルハブ代表
Q4. どこから読み始めますか？
090-0000-0000
上目黒5丁目 東京都目黒区
…

19. SKILLHUB
近接:Proximity
19
吉田 光利
スキルハブ代表
Q4. どこから読み始めますか？
090-0000-0000
上目黒5丁目 東京都目黒区
なんか太字を行った
り来たりしてしまい
ます。定まりません

20. SKILLHUB
近接:Proximity
20
吉田 光利
スキルハブ代表
Q4. いつ読み終わったかわかりますか？
090-0000-0000
上目黒5丁目 東京都目黒区
…

21. SKILLHUB
近接:Proximity
21
吉田 光利
スキルハブ代表
Q4. いつ読み終わったかわかりますか？
090-0000-0000
上目黒5丁目 東京都目黒区
わ、わかりません

22. 関連する要素を近接させ
グルーピングする
22

23. SKILLHUB
近接:Proximity
23
吉田 光利
スキルハブ代表
関連する要素を近接させグルーピングする
090-0000-0000
上目黒5丁目 東京都目黒区

24. SKILLHUB
近接:Proximity
24
吉田 光利
スキルハブ代表
いかがでしょう？
090-0000-0000
上目黒5丁目
東京都目黒区

25. SKILLHUB
近接:Proximity
25
吉田 光利
スキルハブ代表
以下の問いに答えられるようになっているはずです
090-0000-0000
上目黒5丁目
東京都目黒区
どこから読み始めるか迷います
か？
次はどこを読むべきかすぐにわ
かりますか？
読み終えた実感は湧きますか？

26. SKILLHUB
近接:Proximity
26
吉田 光利
スキルハブ代表
近接させると…
090-0000-0000
上目黒5丁目
東京都目黒区
知覚的に組織化する
視覚的に組織化する
上の2つにより「情報がより伝
わるようになる」

27. 近接：Webサイト事例
27

28. SKILLHUB
近接:Proximity
28
Amazonの場合
イメージユニット 情報ユニット アクション
ユニット

29. 近接：実習
29

30. SKILLHUB
近接:Proximity
課題：近接
30
以下を近接の法則に従って並べ替えましょう

31. SKILLHUB
解答：情報がグルーピングされた状態
31

32. SKILLHUB
解答：情報がグルーピングされた状態（枠線つき）
32
キャッチフレーズ イメージ
ボタン
3つのメリット

33. SKILLHUB
解答：グループに感覚をつけた
33
間隔
間隔
間隔

34. SKILLHUB
近接:Proximity
34
吉田 光利
スキルハブ代表
まとめ
090-0000-0000
上目黒5丁目
東京都目黒区
関連する項目をまとめる
情報の流れがわかるようにする
スペースをとって情報の区別が
できるようにする

35. SKILLHUB
整列
Alignment
35

36. SKILLHUB
整列:Alignment
36
Q. このデザインから何か関連を見つけられますか？
…
吉田 光利
スキルハブ代表 090-0000-0000
上目黒5丁目
東京都目黒区

37. SKILLHUB
整列:Alignment
37
Q. このデザインから何か関連を見つけられますか？
いいえ、バラバラで
どこが関連している
かはわかりません吉田 光利
スキルハブ代表 090-0000-0000
上目黒5丁目
東京都目黒区

38. SKILLHUB
整列:Alignment
38
Q. では、これは関連がわかりますか？
…
吉田 光利
スキルハブ代表
090-0000-0000
上目黒5丁目
東京都目黒区

39. SKILLHUB
整列:Alignment
39
Q. では、これは関連がわかりますか？
上がその人が何者か
下が住所ですね。
吉田 光利
スキルハブ代表
090-0000-0000
上目黒5丁目
東京都目黒区

40. SKILLHUB
整列:Alignment
40
見えない線があるからそう感じるのです
なるほど
吉田 光利
スキルハブ代表
090-0000-0000
上目黒5丁目
東京都目黒区

41. 整列は強い結びつきを作り
レイアウトに強さを与える
41

42. SKILLHUB
整列:Alignment
42
端 えは真ん中 えよりも力強い
吉田 光利
スキルハブ代表
090-0000-0000
上目黒5丁目
東京都目黒区
吉田 光利
スキルハブ代表
090-0000-0000
上目黒5丁目
東京都目黒区

43. SKILLHUB
整列:Alignment
43
端 えは真ん中 えよりも力強い
吉田 光利
スキルハブ代表
090-0000-0000
上目黒5丁目
東京都目黒区
吉田 光利
スキルハブ代表
090-0000-0000
上目黒5丁目
東京都目黒区

44. SKILLHUB
整列:Alignment
44
左右に配置するパターンも強力
吉田 光利
スキルハブ代表
090-0000-0000
上目黒5丁目
東京都目黒区

45. 究極の整列を実現する
グリッドシステム
45

46. 46
グリッドシステムとは
“
“
レイアウトを行う際、画面上に架空の
縦横線をガイドラインとして引き、そ
のブロックごとに文字や図版を配置し、
無駄なくスッキリした画面を作る手法。

47. 要は
「見えない線を利用する」
ということ
47

48. SKILLHUB
整列:Alignment
48
Webページの場合
http://www.slideshare.net/Leursism/grid-systems

49. SKILLHUB
整列:Alignment
49
昔（200年前くらい）の本もグリッド
http://www.slideshare.net/Leursism/grid-systems

50. SKILLHUB
整列:Alignment
50
モダンな建物もグリッド
http://www.slideshare.net/Leursism/grid-systems

51. SKILLHUB
近接:Proximity
51
Sony Music: 16個のグリッドで区切られている

52. 実習：整列
52

53. SKILLHUB
並べ替えて整列させてみましょう
53

54. SKILLHUB
整列の比較
54
整列前 整列後

55. SKILLHUB
見えない線
55

56. SKILLHUB
見えない線の比較
56

57. SKILLHUB
グリッドデザインの作り方
57

58. SKILLHUB
整列まとめ
58
「見えない線」が見え
るか
完成デザインをジーっと見た時に、しっかりとアラ
イン線を認識できるか。
異なった行 えになって
いないか
同じ要素の中で異なった行 えになっていないか。
左 え、真ん中 え、右 えが同じ要素の中で混在
していると整列感がなくなる。
異なる要素を整列させ
ていないか
異なる情報レベルの要素が整列によって結ばれてい
ないか。もし整列させてしまっていれば、ユーザー
は「近い情報」として認識してしまう。
例外がきちんと処理され
ているか
アライン線をはみ出している表現であったり、行
えをわざと変えている場合にそれが理解できるか。
これらの例外は、他の部分で整列原則が守られてい
る場合に成立する

59. SKILLHUB
反復
Repetition
59

60. SKILLHUB
反復:Repetition
60
これはトップページです
…

61. SKILLHUB
反復:Repetition
61
学習を開始ボタンをクリックすると
…

62. SKILLHUB
反復:Repetition
62
コース（講座）の一覧ページに移動します
…

63. SKILLHUB
反復:Repetition
63
2つ目の講座を見るためにクリックします
…

64. SKILLHUB
反復:Repetition
64
レッスンページに移動します
…

65. SKILLHUB
反復:Repetition
65
3ページは同じサイトです。どう思いましたか？
…

66. SKILLHUB
反復:Repetition
66
3ページは同じサイトです。どう思いましたか？
ほとんど同じサイト
だとは思えません。
なんというか…

67. SKILLHUB
反復:Repetition
67
3ページは同じサイトです。どう思いましたか？
一貫性に欠けている
気がするのです

68. 一貫性、それこそが
反復を通して得られるもの
「反復 = 一貫性」
68

69. SKILLHUB
反復:Repetition
69
一貫性を保ったデザイン

70. SKILLHUB
反復:Repetition
70
ページをまたいで反復している

71. SKILLHUB
反復:Repetition
71
内部も一貫性がある
ロゴ グローバルナビ インフォメーション

72. SKILLHUB
反復:Repetition
72
リンクカラーも反復している

73. SKILLHUB
反復:Repetition
73
ページの中での反復

74. SKILLHUB
反復:Repetition
74
ページの中での反復
・学習途中が半分塗りつぶし
・学習終了がチェックマーク

75. SKILLHUB
反復:Repetition
75
一貫性の比較

76. 実習：反復
76

77. SKILLHUB
第2階層を反復させてみましょう
77
文字の大きさや色、図形などを使って反復を作ってみましょう

78. SKILLHUB
反復まとめ
78
ヘッダーは共通か？ ロゴの位置、ナビゲーションの項目は同じであるか
見出しは共通か？ 大見出し、中見出しなどHTMLで言えばh1, h2などの見た目がページ間
で共通であるか？
文字について 本文の文字サイズや行間などの設定が共通であるか。引用などにもルー
ルが設定されているか。
アイコンで意味の反復を実現でき
ているか？
アイコンはユーザーに意味を学習させる要素になります。例えば会話で
あれば、吹き出しなどになります。意味のあるアイコンを繰り返してい
るかが重要です。
階層ごとのレイアウトは共通か？ レイアウトのパターンはサイトの中でいくつもあっていいのだが、階層
ごとに用意することが好ましい。多くても3以内のレイアウトパターン
に収めるべきであろう。
ルック・アンド・フィールが守ら
れているか？
使い勝手が共通になっているか？ユーザーは使い方を学習します。使い
勝手が機能によってバラバラになっていないか？
カラー 色に統一感があるか？きちんとベースカラーを守られているか
テイスト 画像やイラストなどビジュアルのテイストは共通か？例えばフラットデ
ザインで統一されているかなど。

79. SKILLHUB
第2階層を反復させてみましょう
79
模範解答は以下になります

80. SKILLHUB
コントラスト
Contrast
80

81. SKILLHUB
コントラスト:Contrast
81
左と右は同じ文書です

82. SKILLHUB
コントラスト:Contrast
82
左と右を比べるとどうですか？
…

83. SKILLHUB
コントラスト:Contrast
83
左と右を比べるとどうですか？
右のほうが情報が伝
わるような気がしま
す。

84. SKILLHUB
コントラスト:Contrast
84
上と下を比べるとどうですか？
…

85. SKILLHUB
コントラスト:Contrast
85
上と下を比べるとどうですか？
下のほうがすぐに意
味が伝わります

86. コントラストをつけることで
情報が分離され
役割がはっきりする
86

87. SKILLHUB
コントラスト:Contrast
87
異なる要素は大きさを変える
大胆に違いをつける
臆病にならないこと！

88. SKILLHUB
コントラスト:Contrast
88
大胆に違いをつける
臆病にならないこと！
大きさと色でコントラストをつける

89. ５秒ルール
ランディングページは5秒で
情報を伝えなければならない
89

90. SKILLHUB
コントラスト:Contrast
90
キャッチフレーズでコンテクス
トを理解させる
カードの画像で情報を明確化
赤ボタンでCTA
コントラストをうまく使い情報をコントロールする

91. SKILLHUB
コントラスト:Contrast
91
異なる要素は大きさを変える
大胆に違いをつける
臆病にならないこと！

92. SKILLHUB
コントラスト:Contrast
92
異なる要素は大きさを変える
大胆に違いをつける
臆病にならないこと！

93. 実習：反復
93

94. SKILLHUB
コントラスト実習
94
ビッグイメージにコントラストをつけてみましょう

95. SKILLHUB
コントラスト実習
95
第３階層にコントラストをつけてみましょう

96. SKILLHUB
コントラストまとめ
96
見出し文字は大きいか 見出しの文字はびっくりするくらい大きくて大丈夫です。そのほうが目を
引くし拾い読みができるようになります。例外は論文など読ませるコンテ
ンツになります。それらは見出しが小さくてもOKです。
異なる要素で分けられているか 同じ要素にコントラストをつけると意味が分離してしまいます。なので、
コントラストをつけるべきものは異なる要素ということになります。
色使いが適当か？ 白抜きや補色などでコントラストをつけることができます。クリックさせ
たいボタンなどは、そのような色使いになっているかが重要です。
レイアウトの中でコントラストが
あるか？
ページをパッと見た時にすぐに内容が理解できるか。チェックする方法と
して遠くから見るとか、薄目で見るなどを試みる。
臆病になっていないか？ 重要なことは「ハッキリとした違い」をつくること。そのためには勇敢に
なる必要があります。見出しと本文の文字サイズや線の使い方などでは
「ええーい、これだ、文句あるか！」と覚悟を決めて大胆に行いましょ
う。

97. SKILLHUB
コントラスト
97
模範解答は以下になります

98. まとめ
98

99. SKILLHUB
まとめ
99
目的を達成できるWebページを実現する
情報を正確・効果的に伝える
クリック率を高める
申し込みや販売などのコンバージョンを達成する
デザインの４原則で結果の出るWebサイトを

100. SKILLHUB
ありがとうございました
http://skillhub.jp
100