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

1. Tips of Design
2013.04.13 Hokuriku.NET × WCAF
佐々木 敏明（Web Designer at ALLCONNECT. Inc.）

2. To s h i a k i S a s a k i
Web Designer at ALLCONNECT.Inc.
@shirokuro331

3. デザインとは

4. デザインとは
ある問題を解決するために思考・概念の組み立てを行い、それを
様々な媒体に応じて表現することと解される。
デザインの本質とは『問題の発見』と『問題の解決』である

5. ／）
／／／）
／,.=ﾞ''"／
／ i f ,.r='"--'つ＿＿＿_こまけぇこたぁいいんだよ！！
/ / _,.--' ／͡ ͡＼
／ ,i ,二ﾆ （ ●）. （●）＼
/ ﾉ ilﾞフ::::::͡（__人__）͡::::: ＼
,ｲ｢ﾄ､ ,!,!¦ ¦r┬-¦ ¦
/ iﾄヾヽ_/ｨ"＼ `ー'́ ／
※ 本セッションに限る

6. デザインに求められること
見た目をいい感じにしたい
わかりやすく、使いやすくしたい

7. デザインするうえでの背景
目的
ターゲット
ニーズ
コンセプト

8. ／）
／／／）
／,.=ﾞ''"／
／ i f ,.r='"--'つ＿＿＿_こまけぇこたぁいいんだよ！！
/ / _,.--' ／͡ ͡＼
／ ,i ,二ﾆ （ ●）. （●）＼
/ ﾉ ilﾞフ::::::͡（__人__）͡::::: ＼
,ｲ｢ﾄ､ ,!,!¦ ¦r┬-¦ ¦
/ iﾄヾヽ_/ｨ"＼ `ー'́ ／
※ 本セッションに限る

9. http://credibility.stanford.edu/

10. What causes people to believe (or not believe) what
they find on the Web?
人々がWeb上で何かを探すときに信頼出来る（または信頼できない）ことの原因はなにか？

11. 結果
ユーザーは素人が作ったようなサイトは信用されず、
専門家が作ったようなWebサイトの方がユーザーを先まで進ませた

12. http://msdn.microsoft.com/ja-jp/hh850413

13. 結果
UIの改善により、利用時間の大幅なコスト削減に成功
ストレスの軽減により笑顔が増えた :)

14. デザインするうえでの背景はとりあえずおいといて
見た目を良くするコツについてお話します

15. アジェンダ
見た目を良くするコツ
デモ & ツールの紹介
まとめ

16. 見た目を良くするコツ

17. デザインの基礎
色
タイポグラフィ（文字）
レイアウト（配置）

18. デザインの基礎
色
タイポグラフィ（文字）
レイアウト（配置）

19. デザインの基本原則
近接 / 整列 / 反復 / コントラスト

20. デザインの基本原則
近接 / 整列 / 反復 / コントラスト
一言でまとめると
「きちんと情報をまとめて、整理してから配置して、特徴的な何かを
繰り返し使うことで印象が強くなって、メリハリつけたほうが良い
感じに見えるよ！」です。

21. デザインの基本原則
近接 / 整列 / 反復 / コントラスト
です。 では見てみましょう

22. 近接
関連する項目（情報）をまとめてグループ化する
項目が散らかってる 項目がグループ化されている

23. 近接
関連する項目（情報）をまとめてグループ化する
複数のものを近づけて配置すると、見る者は
それらを仲間として関連付ける。
構造と内容の直線的な手がかりをユーザーへ
提供することができる。
項目が散らかってる 項目がグループ化されている

24. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

25. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

26. 画像・アプリ名・説明を一つのグループとしてまとめることで
関連する情報として認識させる
※関連するグループどうしはある程度間隔をあける必要がある

27. デザインの基本原則
近接 / 整列 / 反復 / コントラスト
「きちんと情報をまとめて、整理してから配置して、特徴的な何かを
繰り返し使うことで印象が強くなって、メリハリつけたほうが良い
感じに見えるよ！」

28. 整列
各項目（情報）を意図的に整列して配置する
項目が散らかってる 項目が整理され見やすい

29. 整列
各項目（情報）を意図的に整列して配置する
項目が散らかってる 項目が整理され見やすい
上下左右の「見えない線」を意識する

30. 整列
各項目（情報）を意図的に整列して配置する
配置を整えることにより、見た目が良い印象を
与えることができる。
項目が散らかってる 項目が整理され見やすい

31. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

32. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

33. 上下、左右、各グループの間に存在する「見えない線」を整える
ことで、見た目が良い印象を与える

34. デザインの基本原則
近接 / 整列 / 反復 / コントラスト
「きちんと情報をまとめて、整理してから配置して、特徴的な何かを
繰り返し使うことで印象が強くなって、メリハリつけたほうが良い
感じに見えるよ！」

35. 反復
なにかの特徴を全体を通して繰り返す
複数のパターンを使っている 使用するパターンを統一している

36. 反復
なにかの特徴を全体を通して繰り返す
複数のパターンを使っている 使用するパターンを統一している
角丸や色彩なども繰り返される
何かの対象となりえる

37. 反復
なにかの特徴を全体を通して繰り返す
特徴あるパターンを繰り返し使うことで
複数のパターンを使っている 使用するパターンを統一している
作品全体に統一感が生まれる。
角丸や色彩なども繰り返される
何かの対象となりえる

38. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

39. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

40. デザインの基本原則
近接 / 整列 / 反復 / コントラスト
「きちんと情報をまとめて、整理してから配置して、特徴的な何かを
繰り返し使うことで印象が強くなって、メリハリつけたほうが良い
感じに見えるよ！」

41. コントラスト
異なる要素をはっきりと違わせる
違いがわからない 違いが一目瞭然

42. コントラスト
異なる要素をはっきりと違わせる
異なる要素をはっきりと違わせることにより
目を引きつけさせることができる。
優先すべき情報はコントラストを意識して
大きくしたり色を変えたりする。
違いがわからない 違いが一目瞭然

43. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

44. http://windows.microsoft.com/ja-jp/windows-8/apps#Cat=t1

45. キャッチコピーや見出しなどはコントラストを強くして強調する
ことにより、どういう情報なのかをわかりやすく伝える

46. デザインの基本原則
近接 / 整列 / 反復 / コントラスト
「きちんと情報をまとめて、整理してから配置して、特徴的な何かを
繰り返し使うことで印象が強くなって、メリハリつけたほうが良い
感じに見えるよ！」

47. デザインの基本原則
近接 / 整列 / 反復 / コントラスト
キレイに見えるデザインは 近接 / 整列 / 反復 / コントラスト の
4原則がうまく使われている。
感覚的に情報を配置するのではなく、こういった基本となる原則を押さえてレイアウト
することでまとまりや見やすさを「作り出す」ことができます。
これらをおさえるだけでも見た目をかなり良くすることができます。

48. そのほか見た目をよくするコツ
余白
人間がキレイと感じる形
テクスチャ・グラデーション
見た目に差をつける
行動のとっかかりを与える

49. 余白
余白
上下左右・項目の間隔を調整する
hoge
真ん中

50. 余白
余白
上下左右・項目の間隔を調整する
hoge
真ん中

51. Hokuriku.NET WCAF
北陸のコミュニティがコラボする
今回はデザイナーからプログラマーへ、そしてプログラマーからデザイナーへ、
をテーマにこれまでとは違った視点で勉強会を行います。

52. Hokuriku.NET WCAF
北陸のコミュニティがコラボする
今回はデザイナーからプログラマーへ、そしてプログラマーからデザイナーへ、
をテーマにこれまでとは違った視点で勉強会を行います。

53. Hokuriku.NET WCAF
内側の余白が外側の
北陸のコミュニティがコラボする
余白より大きいと
バランスが良くない
今回はデザイナーからプログラマーへ、そしてプログラマーからデザイナーへ、
をテーマにこれまでとは違った視点で勉強会を行います。

54. キレイに見える形
余白
人間が見た時に美しいと感じる形の比率がある
hoge
1 : 1.618 1 : 1.414
黄金比 白銀比

55. 余白
hoge

56. テクスチャ・グラデーション
要素に質感を与え、見栄えを良くする

57. 木目とか良い感じですね

58. 色使いのけばけばしいものは
あまりよろしくない
色のトーンを抑えましょう

59. グラデーションも良い感じ
情報を邪魔しない、さりげなさがポイントです

60. http://www.kendoui.com/dojo.aspx

61. 見た目に差をつける
色の階調 位置と整列
色の明度 向き

62. 見た目に差をつける
色の彩度 大きさ
abcdef abcdef abcdef abcdef
abcdef abcdef abcdef abcdef
abcdef abcdef abcdef abcdef
abcdef abcdef abcdef abcdef
abcdef abcdef abcdef abcdef
abcdef abcdef abcdef abcdef
質感 形状

63. 行動のとっかかりを与える
デザインによって、ユーザーの行動を誘導する

64. 行動のとっかかりを与える
デザインによって、ユーザーの行動を誘導する

65. デモ & ツールの紹介

66. 「cafe la hokunet」という架空のカフェのサイトをデザインします

67. 手書きラフ ▶ HTML ▶ CSS ▶ 完成

68. http://yeoman.io/

69. http://docs.emmet.io/

70. http://compass-style.org/

71. http://griddle.it/

72. http://fortawesome.github.io/Font-Awesome/

73. http://colorschemedesigner.com/

74. http://www.google.com/fonts/

75. http://css3button.net/

76. まとめ

77. 常識を知らないと非常識はできない

78. 本日お話させてもらったことはセオリーの一部です。
さらに人を惹きつけるためには、セオリーを知ったうえで、
セオリーを破ることです。

79. 「真似ぶ」ことから始めるのは
学びの基本

80. デザインスキルを向上させるコツはひたすら手を
動かすことです。そのためには優れたデザインを
よく見て真似て、学びましょう。

81. http://dribbble.com/

82. http://ui-patterns.com/

83. Great design is invisible

84. デザインの本質は「問題の発見」と「問題の解決」です。
本当に優れたデザインとは、生活に溶け込み、問題と感じない
ものなのかもしれません。

85. 本日の話がみなさまの
「問題発見」と「問題解決」の手助けになれば幸いです。

86. Thanks all #hokunet
2013.04.13 Hokuriku.NET × WCAF
佐々木 敏明（Web Designer at ALLCONNECT. Inc.）