Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a HTML5時代のWebデザイン
Similar a HTML5時代のWebデザイン (20)
Más de masaaki komori (20)
HTML5時代のWebデザイン
- 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. これからお話しすること
• Webをデザインするって何だろう?
• どんどん変わり続ける世界
• 本当に大事な部分に目を向けてみよう
• Webの体験がより豊かになるように
- 12. Webを取り巻く環境が変わりはじめた
• これからはブロードバンドだ?
• ふと周りを見渡せば、
スマートフォンをはじめとしたデバイス増
• 高速な回線と不安定な回線の混在
• さらにディスプレイは高精細化に磨きが…
- 13. 閲覧デバイスの多様化も着々と進行中
• Androidの端末は種類も豊富
• 今後ますますデバイスが多様化する?
• PC向けのブラウザだって
次から次に新しいものになる
(かといって、みんながアップデートしない)
- 20. これからのWebコンテンツ配信は?
• PC向けのままでいい?
スマートフォンに最適化?
レスポンシブな実装でいける?
アプリケーションにしてしまう?
• 最適な配信形態は、
コンテンツの種類や内容、
そして利用シーンで異なってくる
- 25. これまでと状況が違うことを認識しよう
• 作ったはいいけど、
見てもらえないのであれば意味はない
• 閲覧環境の変化をきちんと理解する
• さまざまな閲覧デバイスの存在、
それらの利用シーンを考えること
• 新しい技術(たとえばHTML5)の登場
- 29. 今のWebデザインの手法、考え方を疑う
• 所狭しと情報を並べることが
果たしていいことなのだろうか?
• 見た目がキレイとか面白いだけで、
表示が遅くていいのか?
• クライアントの望みを
忠実に再現すればいいのか?
- 30. デバイスの多様化で、問題が浮き彫りに
• スマートフォンに最適化したら、
PCコンテンツとの相違が問題に…
• レスポンシブな実装をやってみたら、
いつまで待っても表示されない…
• 特定の機種でうまく動作しない…
- 33. 誰のためにあるWebサイトなのか?
• 読みやすさ、わかりやすさ、使いやすさ、
そして、アクセスのしやすさ
• 表層的な部分だけに偏重にならず、
目には見えにくい部分を考えること。
それもデザインのひとつ
- 35. コンテンツにこれまで以上の価値を
• HTML5で拡充されたタグを
きちんと使って意味付けを明確に
• RDFa、Microdata、Microformatsの利用
• ただのテキスト以上の価値を与える
- 37. 不安定な回線環境に対応する
• パフォーマンスを考慮した
コンテンツの設計と実装
• CSS3の採用、Webフォント、SVG
• .appcacheなどの利用
- 38. 多様なデバイスへの対応手段を覚える
• Media Queriesを使った
さまざまな環境に適応できる設計と実装
• ピクセルパーフェクトからの卒業
• 旧来のブラウザへの対応(Polyfillなど)
- 47. 今日のまとめ
• Webを取り巻く環境が変化している
• 回線環境、デバイス環境、利用シーン
これらの変化を認識しておこう
• Webの持つ本来の性格を見直して、
Webデザインをみんなで考えよう
• 少し先の未来を見つめながら素敵なWebを