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

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

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

4. orz

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

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

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

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

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/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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