「DevDo：北海道開発オフ」の第9回勉強会で使用した、ライトニングトーク（全然ライトニングじゃないですが）のスライドです。

1. デザイン苦手さんのための Web デザイン の よさげポイント DevDo Vol.9 ～成果発表強化集会～ Apr. 26, 2009

2. 私は肩書きは Web デザイナーですが デザインは大の苦手です。

3. 学生時代 先輩から贈呈 w -> -> -> -> -> -> 母「色使いが 中国四千年 だよね」 前の勤め先

4. orz

5. それでは仕事にならないので 「よさげに見える」ポイント にしぼって勉強してきました 今日はその 「 Web デザインのよさげポイント 」を ご紹介します… v_v

6. 私のよさげポイント 2+1+1 色 を決める 右 を重くする 30 で揃える 余白 でリズムを作る 微妙な 影 付ける 一部だけ 崩す

7. 2+1+1 色 を決める １

8. 大量の色を使うデザイナーもいますが Webdesigner Depot http://www.webdesignerdepot.com/ 色数は多いほど難しくなります

9. むりむりむりむりかたつむり @irasally

10. なので ベースの薄い色 2 色 ベースの濃い色 1 色 差し色 1 色 の 4 色くらいで考えてます

11. 同じトーン （グレイッシュ） 補色・準補色 ＋ OR OR

12. 右 を重くする ２

13. ウェブサイトのセオリー F 型の視点移動 ↓ 左が重くなる ↓ そこで 右に画像を置く □□□□□□□□ □□□□□□□ □□□□□ □□□□□□□□ □□□□□□□ □□□□□ □□□□□□□ □□□□□□□ □□□□□□□□□□□□□□ □□□□ □□□□□□□□□□□□□□ □□□□ □□□□□

14. 右に花の画像を置いてます CSS Zen Garden ： “ Sakura” http://www.csszengarden.com/tr/japanese/?cssfile=/208/208.css&page=0

15. ボタンの右に写真を置いてます 福岡で一戸建て、注文住宅ならハウスメーカーでなく 【コモス・スタイル】 http://www.comos-style.com/

16. 30 で揃える ３

17. 30 のグリッドで考える px

18. 30 の倍数は… 一般的なウィンドウ幅に合わせやすい ＋ 黄金比 (1:1.6) ・ 白銀比 (1:1.4) を 計算しやすい 780px 960px

19. 300px 480px 325px 455px 780px 黄金比 白銀比

20. 余白 でリズムを作る ４

21. 段落の余白が全部同じだと 文章の流れがつかみにくい DevDo ：北海道開発オフとは 北海道開発オフ部 、通称 DevDo （でぶどう）は、 ついったー部「道民部」から派生した 「北海道在住の勉強好きな技術者」の技術交流を推進する 集まりです。 設立のきっかけ 2008 年 1 月 13 日 ( 日 ) に開催された 「 Twitter 道民部新年会」の参加者が、開発者が中心だったのが きっかけで・・・・・・

22. 段落の上は本文の倍くらい取ります DevDo ：北海道開発オフとは 北海道開発オフ部 、通称 DevDo （でぶどう）は、 ついったー部「道民部」から派生した 「北海道在住の勉強好きな技術者」の技術交流を推進する 集まりです。 設立のきっかけ 2008 年 1 月 13 日 ( 日 ) に開催された 「 Twitter 道民部新年会」の参加者が、開発者が中心だったのが きっかけで・・・・・・

23. 本文の余白は メニューよりゆったり取ります メニューメニューメニューメニューメニュー メニューメニューメニューメニューメニューメニューメニューメニューメニュー メニューメニューメニューメニューメニュー メニュー 本文ですよ本文ですよ 本文ですよ本文ですよ本文ですよ本文ですよ本文ですよ 本文ですよ本文ですよ本文ですよ本文ですよ 本文ですよ本文ですよ本文ですよ本文ですよ本文ですよ本文ですよ 本文ですよ 本文ですよ本文ですよ

24. 余白で 文章のリズムを作ることで h2 p p h2 p p 読む人を目的の情報まで 誘導することができます h1

25. 微妙な 影 付ける ５

26. 真白い壁でも 光の具合で両端の色が違います 人間の目は こんなわずかな色の違いを見分けます

27. ポップなデザインなら 単色でいいですが 微妙な影を付けると そこだけ ぐっと引き立ちます

28. プロジェクタだと 全然わかりませんね。

29. グラデーション 白->黒 OR 白->地の色 色の重なり 乗算 OR ｽｸﾘｰﾝ OR ｵｰﾊﾞｰﾚｲ 透明度 10% ～ 35% ほとんど 上の組み合わせでできます 加工ソフトで どう作ったらいいの？

30. この辺りのライティングは アパレルショップが参考になります

31. ╬ ಠ 益 ಠ ) 非コミュの自分に ショップ入れってのか という貴方は

32. Display λ... ショップの前を 通る時に ディスプレイやお店のロゴを 遠巻きに見る習慣をつけましょう 私もそうしてます

33. 一部だけ 崩す ６

34. ここまで話しておいてなんですが １～５を全部守ると つまんないサイト ができます

35. 整ったレイアウトの一部分だけ はみださせたり 傾けたりして崩すと 結果として全体を強調することができます

36. わかりやすい例 ロゴが傾いて 本文枠に食い込んでます チカッパ！レンタルサーバー http://chicappa.jp/

37. ロゴやタイポグラフィでも キーワードを大きくしたり 助詞 を小さくすると 崩すことができます の

38. メイン画像を 大胆にトリミング してみたりするのも いいと思います 海外のゲーム雑誌の表紙が素敵すぎる件｜情報屋さん。 http://jyouhouya3.net/2009/04/post_1206.html

39. まとめ ★

40. 先輩に言われたことですが 「かっこいいサイトの どこを かっこいい と思ったか」 「ださいサイトの どこを ださい と思ったか」 を考えるようにすると ある程度 基本は身に付く ぽい です

41. http://coliss.com/ まとめブログでおなじみ コリス 「 どこが良いのか 」 を説明してる デザイン記事が多く 勉強になります

42. いいデザインは みんなを幸せにします というわけで

43. ありがとう ございました v_v