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

185,604 views
193,447 views

Published on

PHPカンファレンス2012@東京 ( http://www.ustream.tv/recorded/25414614 )

Published in: Design
0 Comments
121 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
185,604
On SlideShare
0
From Embeds
0
Number of Embeds
141,920
Actions
Shares
0
Downloads
247
Comments
0
Likes
121
Embeds 0
No embeds

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

    1. 1. これくらいはやってほしい Webデザイン
    2. 2. プロフィール• 高橋裕也(@takahashiyuya)• CakePHPが大好きなWebデザイナー• アシアル
    3. 3. Monaca(もなか) • HTML + CSS + JavaScript • IOS、Android の同時開発 • ブラウザで動く • 使いやすいデバッガ • 気軽にビルド
    4. 4. はじめに
    5. 5. はじめに• デザインセンス不要
    6. 6. はじめに• デザインセンス不要• グラフィックソフト不要
    7. 7. はじめに• デザインセンス不要• グラフィックソフト不要• プログラミング言語不要
    8. 8. はじめに• デザインセンス不要• グラフィックソフト不要• プログラミング言語不要 必要なのは あなたのやる気だけ
    9. 9. 3つだけ
    10. 10. 噂の3つのテクニック• グリッドシステム• ホワイトスペース• アプローチ
    11. 11. こんな感じ
    12. 12. グリッドシステム
    13. 13. グリッドシステム • 垂直水平にガイド • 整然とした印象 • 応用が利く
    14. 14. グリッドシステム(基本)
    15. 15. グリッドシステム(応用)
    16. 16. ホワイトスペース
    17. 17. 意外とね
    18. 18. 意図して配置する
    19. 19. アプローチ
    20. 20. アプローチ • 見た瞬間伝わる • 費用対効果が高い • 応用が利く
    21. 21. たしかに
    22. 22. グリッドシステム
    23. 23. ホワイトスペース
    24. 24. アプローチ
    25. 25. ぜひ
    26. 26. ご静聴ありがとうございました。

    ×