Download as PDF, PPTX
![広研塾（山村）[1]](https://cdn.slidesharecdn.com/ss_thumbnails/1-111019031442-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Tips of Design
- 1. Tips of Design 2013.04.13 Hokuriku.NET × WCAF 佐々木 敏明（Web Designer at ALLCONNECT. Inc.）
- 2. To s hi 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.
- 10. What causes peopleto believe (or not believe) what they find on the Web? 人々がWeb上で何かを探すときに信頼出来る（または信頼できない）ことの原因はなにか？
- 11. 結果 ユーザーは素人が作ったようなサイトは信用されず、 専門家が作ったようなWebサイトの方がユーザーを先まで進ませた
- 12.
- 13. 結果 UIの改善により、利用時間の大幅なコスト削減に成功 ストレスの軽減により笑顔が増えた :)
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. デザインの基本原則 近接 / 整列/ 反復 / コントラスト
- 20. デザインの基本原則 近接 / 整列 / 反復 / コントラスト 一言でまとめると 「きちんと情報をまとめて、整理してから配置して、特徴的な何かを 繰り返し使うことで印象が強くなって、メリハリつけたほうが良い 感じに見えるよ！」です。
- 21. デザインの基本原則 近接 / 整列/ 反復 / コントラスト です。 では見てみましょう
- 22. 近接 関連する項目（情報）をまとめてグループ化する 項目が散らかってる 項目がグループ化されている
- 23.
- 24.
- 25.
- 26.
- 27. デザインの基本原則 近接 / 整列 / 反復 / コントラスト 「きちんと情報をまとめて、整理してから配置して、特徴的な何かを 繰り返し使うことで印象が強くなって、メリハリつけたほうが良い 感じに見えるよ！」
- 28. 整列 各項目（情報）を意図的に整列して配置する 項目が散らかってる 項目が整理され見やすい
- 29. 整列 各項目（情報）を意図的に整列して配置する 項目が散らかってる 項目が整理され見やすい 上下左右の「見えない線」を意識する
- 30.
- 31.
- 32.
- 33.
- 34. デザインの基本原則 近接 / 整列 / 反復 / コントラスト 「きちんと情報をまとめて、整理してから配置して、特徴的な何かを 繰り返し使うことで印象が強くなって、メリハリつけたほうが良い 感じに見えるよ！」
- 35. 反復 なにかの特徴を全体を通して繰り返す 複数のパターンを使っている 使用するパターンを統一している
- 36. 反復 なにかの特徴を全体を通して繰り返す 複数のパターンを使っている 使用するパターンを統一している 角丸や色彩なども繰り返される 何かの対象となりえる
- 37. 反復 なにかの特徴を全体を通して繰り返す 特徴あるパターンを繰り返し使うことで 複数のパターンを使っている 使用するパターンを統一している 作品全体に統一感が生まれる。 角丸や色彩なども繰り返される 何かの対象となりえる
- 38.
- 39.
- 40. デザインの基本原則 近接 / 整列 / 反復 / コントラスト 「きちんと情報をまとめて、整理してから配置して、特徴的な何かを 繰り返し使うことで印象が強くなって、メリハリつけたほうが良い 感じに見えるよ！」
- 41. コントラスト 異なる要素をはっきりと違わせる 違いがわからない 違いが一目瞭然
- 42.
- 43.
- 44.
- 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.
- 56.
- 57.
- 58.
- 59.
- 60.
- 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.
- 67. 手書きラフ ▶ HTML▶ CSS ▶ 完成
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78. 本日お話させてもらったことはセオリーの一部です。 さらに人を惹きつけるためには、セオリーを知ったうえで、 セオリーを破ることです。
- 79. 「真似ぶ」ことから始めるのは 学びの基本
- 80. デザインスキルを向上させるコツはひたすら手を 動かすことです。そのためには優れたデザインを よく見て真似て、学びましょう。
- 81.
- 82.
- 83. Great design isinvisible
- 84.
- 85.
- 86. Thanks all #hokunet 2013.04.13 Hokuriku.NET × WCAF 佐々木 敏明（Web Designer at ALLCONNECT. Inc.）