これくらいはやってほしいWebデザイン

Editor's Notes

1. 動機を話す\n
2. 主にエンジニアとしてフロントエンドやサーバサイドの開発をやってます。\nたまにデザイン、あとはスクールでフレームワーク編の講師を担当。\n最近、Monacaを使ってiOSとAndroidのアプリをプロダクトで開発した\n
3. デバッガよかった\n
4. \n
5. 芸術ではなく、設計の話です。\n
6. フォトショの話でもない。\nユーザを意識したビュー・レイアウト\n\n
7. PHPの事を聞きにきた方が多いと思いますが・・・\n
8. 会場の雰囲気次第で、求人の話しようかな。\n
9. ネタは３つだけ\n
10. この３つを組み合わせると一体どうなるのか・・・\nといえば\n\n\n
11. こんな感じ\n
12. \n
13. 「グリッドシステム」とは、画面上に垂直・水平のガイドラインを置いて、\nそのガイドラインよって構成される格子（グリッド）に合わせて、文字や画像などを配置していくことを言います。\n\n\n情報が整理されていて非常に効率がよいレイアウトという事で、\n読みやすく整然とした印象のページデザインに仕上げる事ができます。\n\n\n決まった位置に画像やテキストをはめ込んでいくことで\n見る人の視線を迷わせることなく、見やすい読みやすいレイアウトを実現する事が可能になります。\n\n応用の話に続く\n
14. \n
15. \n
16. ホワイトスペースは、文字や画像などのエレメントが何もない部分のことです。\n\n\n
17. ホワイトスペースと聞くと、難解プログラミング言語のこちらを思い浮かべた方もいるかもしれませんね。\n\n（リスナーに知り合い多かったら挙手求めようかな\n（んで、手は挙がらないはず。\n（正しいスペースを意識しているというフリでもっと意識することを押し出したい。\n\nあまり普段意識することはないと思うんですが、\nホワイトスペースはページ内で最も面積が大きいエレメントです。\n
18. ついつい画像や文字の配置に気をとられてしまいますが、\n逆にこのホワイトスペースをうまく扱うことが重要。\n\n
19. 「すべてのスペースを意図して配置する」\nこれを押すだけ。\n\nコンビとなるアプローチに繋げる\n
20. ラスト\n\nアプローチとは、近接とも呼ばれます。\n関連する結びつきの強い要素は近づけて配置する。\n
21. 特徴・メリットについて３つ\n\nパッと見で理解できる。\n（画像を見れば、それに関するテキストはどれ\n（テキストを読めば、関連する画像はどれ\n\nローリスク・ハイリターン\nUIに力を入れてるショッピングサイトなら常識\n\nまたあらゆるエレメントで有効です。\n例えば見出しに対しての小見出し、またそれに続くコンテンツ\nブログなど見るとその様がわかる\n\n
22. ここでホワイトスペースとアプローチが組み合わさる好例を紹介する\n\n終わったらおさらい→終了の流れ\n
23. \n
24. \n
25. \n
26. \n
27. パンパカパーン\n