Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

HTML5時代のWebデザイン Slide 1 HTML5時代のWebデザイン Slide 2 HTML5時代のWebデザイン Slide 3 HTML5時代のWebデザイン Slide 4 HTML5時代のWebデザイン Slide 5 HTML5時代のWebデザイン Slide 6 HTML5時代のWebデザイン Slide 7 HTML5時代のWebデザイン Slide 8 HTML5時代のWebデザイン Slide 9 HTML5時代のWebデザイン Slide 10 HTML5時代のWebデザイン Slide 11 HTML5時代のWebデザイン Slide 12 HTML5時代のWebデザイン Slide 13 HTML5時代のWebデザイン Slide 14 HTML5時代のWebデザイン Slide 15 HTML5時代のWebデザイン Slide 16 HTML5時代のWebデザイン Slide 17 HTML5時代のWebデザイン Slide 18 HTML5時代のWebデザイン Slide 19 HTML5時代のWebデザイン Slide 20 HTML5時代のWebデザイン Slide 21 HTML5時代のWebデザイン Slide 22 HTML5時代のWebデザイン Slide 23 HTML5時代のWebデザイン Slide 24 HTML5時代のWebデザイン Slide 25 HTML5時代のWebデザイン Slide 26 HTML5時代のWebデザイン Slide 27 HTML5時代のWebデザイン Slide 28 HTML5時代のWebデザイン Slide 29 HTML5時代のWebデザイン Slide 30 HTML5時代のWebデザイン Slide 31 HTML5時代のWebデザイン Slide 32 HTML5時代のWebデザイン Slide 33 HTML5時代のWebデザイン Slide 34 HTML5時代のWebデザイン Slide 35 HTML5時代のWebデザイン Slide 36 HTML5時代のWebデザイン Slide 37 HTML5時代のWebデザイン Slide 38 HTML5時代のWebデザイン Slide 39 HTML5時代のWebデザイン Slide 40 HTML5時代のWebデザイン Slide 41 HTML5時代のWebデザイン Slide 42 HTML5時代のWebデザイン Slide 43 HTML5時代のWebデザイン Slide 44 HTML5時代のWebデザイン Slide 45 HTML5時代のWebデザイン Slide 46 HTML5時代のWebデザイン Slide 47 HTML5時代のWebデザイン Slide 48
Upcoming SlideShare
これくらいはやってほしいWebデザイン
Next
Download to read offline and view in fullscreen.

152 Likes

Share

Download to read offline

HTML5時代のWebデザイン

Download to read offline

HTML5 Conference 2012

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

HTML5時代のWebデザイン

  1. 1. HTML5 時代のWebデザイン HTML5 Conference 2012 こもりまさあき
  2. 2. 自己紹介を… こもりまさあき http://protean.im 1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大 学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク 関連業務に並行して従事。2001年、会社を退職しフリーランスの道へ。 案件ごとに業務内容や立ち位置が異なるため、職域的な肩書きはなし 近著に『レスポンシブ・ウェブデザイン標準ガイド(MdN刊)』『Webデ ザイナーのためのHTML5移行ガイド(共著・インプレスジャパン刊)』、 など HTML5 Conference 2012 特別価格980円 Twitter: @cipher / @proteanbm http://direct.ips.co.jp/html5/ Instagram: @cipher
  3. 3. これからお話しすること • Webをデザインするって何だろう? • どんどん変わり続ける世界 • 本当に大事な部分に目を向けてみよう • Webの体験がより豊かになるように
  4. 4. Webをデザインするって何だろう?
  5. 5. 「Webデザイン」という言葉は難しい
  6. 6. Webデザインとは? • Photoshopで画面を作ること? • 適当にHTMLで書いておけばいい? • グリグリ動いて、楽しければいい?
  7. 7. もちろん、一部では必要なこと • 視覚的な表現も情報をうまく伝えるための1要素 • 要素に対しては、適切な意味付けが必要 • アクションに対して、 適切な反応を返すということはもちろん大事
  8. 8. 「Webデザイン」の捉え方は異なる • Webに関わるそれぞれの立場で 「Webデザイン」の捉え方が微妙に違う • コンテンツホルダー、ディレクター、 エディター、デザイナー、プログラマ、などなど
  9. 9. これからのWebデザインは… • 局所的なところだけではなく、 もっと大きなところで考えていく • これまで以上に広範な知識が必要になるかも • みんなでWebをデザインしていく、 そんな考え方のほうが良いのでは?
  10. 10. 世界は変わり始めています
  11. 11. どんどん変わり続ける世界
  12. 12. Webを取り巻く環境が変わりはじめた • これからはブロードバンドだ? • ふと周りを見渡せば、 スマートフォンをはじめとしたデバイス増 • 高速な回線と不安定な回線の混在 • さらにディスプレイは高精細化に磨きが…
  13. 13. 閲覧デバイスの多様化も着々と進行中 • Androidの端末は種類も豊富 • 今後ますますデバイスが多様化する? • PC向けのブラウザだって 次から次に新しいものになる (かといって、みんながアップデートしない)
  14. 14. Android、Android… Android Device Gallery: http://www.android.com/devices/
  15. 15. 数多くのブラウザに対応するには? • 過去のバージョンのブラウザの存在 • スマートデバイスのブラウザ • どのように対応していくのが良いか
  16. 16. ほいそれと切り捨てられない現実
  17. 17. そこをサポートすることをふまえつつ
  18. 18. 少し未来のこともあわせて考えましょう
  19. 19. 本当に大事な部分に目を向けてみよう
  20. 20. これからのWebコンテンツ配信は? • PC向けのままでいい? スマートフォンに最適化? レスポンシブな実装でいける? アプリケーションにしてしまう? • 最適な配信形態は、 コンテンツの種類や内容、 そして利用シーンで異なってくる
  21. 21. どっちが良いとか悪いとかの話ではない
  22. 22. 何が適しているか、みんなで考える
  23. 23. ひとつ言えること…
  24. 24. 必ずしもPCに向かっているわけではない
  25. 25. これまでと状況が違うことを認識しよう • 作ったはいいけど、 見てもらえないのであれば意味はない • 閲覧環境の変化をきちんと理解する • さまざまな閲覧デバイスの存在、 それらの利用シーンを考えること • 新しい技術(たとえばHTML5)の登場
  26. 26. Webの根本にあることを見直そう • 閲覧環境に左右されず、 情報を取得できることが大事 • Webが本来もっている性格、 そこをあらためて考え直す良い時期
  27. 27. 誰だって、自分の環境でストレスなく見たい
  28. 28. Webの体験がより豊かになるように
  29. 29. 今のWebデザインの手法、考え方を疑う • 所狭しと情報を並べることが 果たしていいことなのだろうか? • 見た目がキレイとか面白いだけで、 表示が遅くていいのか? • クライアントの望みを 忠実に再現すればいいのか?
  30. 30. デバイスの多様化で、問題が浮き彫りに • スマートフォンに最適化したら、 PCコンテンツとの相違が問題に… • レスポンシブな実装をやってみたら、 いつまで待っても表示されない… • 特定の機種でうまく動作しない…
  31. 31. ページあたりのデータ量は減りつつある HTTP Archive: http://httparchive.org/interesting.php
  32. 32. 今までと考え方を変えていかないと…、 多様化していく環境に対応することが困難に
  33. 33. 誰のためにあるWebサイトなのか? • 読みやすさ、わかりやすさ、使いやすさ、 そして、アクセスのしやすさ • 表層的な部分だけに偏重にならず、 目には見えにくい部分を考えること。 それもデザインのひとつ
  34. 34. これからの未来に向けてできること
  35. 35. コンテンツにこれまで以上の価値を • HTML5で拡充されたタグを きちんと使って意味付けを明確に • RDFa、Microdata、Microformatsの利用 • ただのテキスト以上の価値を与える
  36. 36. これまで見えなかった情報もこのように Googleの検索結果のリスト: Webコンテンツ中にRDFaやMicrodataを埋め込むことでより多くの情報が伝えられる
  37. 37. 不安定な回線環境に対応する • パフォーマンスを考慮した コンテンツの設計と実装 • CSS3の採用、Webフォント、SVG • .appcacheなどの利用
  38. 38. 多様なデバイスへの対応手段を覚える • Media Queriesを使った さまざまな環境に適応できる設計と実装 • ピクセルパーフェクトからの卒業 • 旧来のブラウザへの対応(Polyfillなど)
  39. 39. たとえば、Modernizrを使うとか Modernizr: http://modernizr.com/
  40. 40. 必要に応じて、Polyfillの利用 HTML5 Cross Browser Polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
  41. 41. 「Webをデザインする」ということ、 そろそろみんなで考え直す時期では?
  42. 42. 今まで良しとされてきた、 その価値観を壊すぐらいに
  43. 43. 本当に今のままのWebの構造でいいのか
  44. 44. この先のWebをもっと豊かにできる可能性、 それを実現する術を知ろうとすることは大事
  45. 45. そして、使える時期がきたら使えばいい
  46. 46. HTML5の動向に注目しながら 多くの人の役に立つWebサイトを
  47. 47. 今日のまとめ • Webを取り巻く環境が変化している • 回線環境、デバイス環境、利用シーン これらの変化を認識しておこう • Webの持つ本来の性格を見直して、 Webデザインをみんなで考えよう • 少し先の未来を見つめながら素敵なWebを
  48. 48. 本日はありがとうございました
  • ssuser849a1a

    Jun. 1, 2018
  • AyumiKanou

    Jan. 23, 2017
  • ssuser8b254c

    Dec. 13, 2016
  • NaokiOshimoto

    Dec. 7, 2016
  • ssuserea08b31

    Mar. 10, 2016
  • marihemo

    Feb. 25, 2016
  • HiroshiYoshida11

    Feb. 24, 2016
  • ysasaki10

    Jan. 22, 2016
  • murausg3

    Aug. 15, 2015
  • niigata616

    Aug. 1, 2015
  • hanpen56

    Aug. 1, 2015
  • ShimpeiOhshima

    Jul. 31, 2015
  • ssusercfcf80

    Jul. 11, 2015
  • KatoRyo

    May. 14, 2015
  • SayakaKawai1

    Dec. 8, 2014
  • kazumasahayashi

    Nov. 24, 2014
  • ssgonhouse

    Oct. 26, 2014
  • TakahisaMino

    Oct. 25, 2014
  • xqhungrypx

    Jun. 30, 2014
  • ngm4life

    Mar. 30, 2014

HTML5 Conference 2012

Views

Total views

67,230

On Slideshare

0

From embeds

0

Number of embeds

34,098

Actions

Downloads

280

Shares

0

Comments

0

Likes

152

×