• Like
HTML5時代のWebデザイン
Upcoming SlideShare
Loading in...5
×

HTML5時代のWebデザイン

  • 49,734 views
Uploaded on

HTML5 Conference 2012

HTML5 Conference 2012

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • How are you today,
    i hope fine,my name is miss blessing, i saw your profile today at (www.slideshare.net) and i became interested in you i will also like to know more about you, and i will like you to send an email to me so that i can send my photos to you, remember that distance, color or language does not matter but love matters allot in life, am waiting for your reply in my E-mail ID at blessingandrew3@yahoo.com have a nice day yours blessing.
    Are you sure you want to
    Your message goes here
  • Hi, my name is Morine, I am new here, I like your profile and i will be happy if you contact me through my email (morinebaby1988@yahoo.com) so that i will tell you about myself and also share more pictures with you, Take Care.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
49,734
On Slideshare
0
From Embeds
0
Number of Embeds
21

Actions

Shares
Downloads
263
Comments
2
Likes
141

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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