HTML5と
Webデザイン
masataka yakura
HTML5
単なる流行り?
HTML5 はもう使う段階にある。
使える機能は
これからさらに増える。
Webアプリ開発向けの
機能だけではない。
"HTML5"と"デザイン"
• HTML5
• CSS3
• Performance
• Smartphone
HTML5
HTML5 For Web Designers
by Jeremy Keith
flic.kr/p/8e3R8d
デザインは見た目だけじゃない。
Structure & Semantics
情報を構造化する
新しい要素の追加。
<header> <footer> <section> <nav>
<aside> <article> <figure> ...
HTML5doctor
Sectioning Flowchart
html5doctor.com/happy-1st-birthday-us/
Chrome 5, Safari 5,
Firefox 4 からサポート。
Firefox 4, Chrome 7 には
HTML5 パーサも内蔵。
パーサを待たなくても
CSSを書けば利用できる。
header, footer,
section, nav, article, aside,
hgroup, ... {
display: block
}
Forms (2.0)
新しいコントロールの追加。
<input type=search>
<input type=email>
<input type=url>
<input type=tel>
<input type=date>
<input type=range>
<input type=...
専用のUI が
用意されるものもある。
<input type=date>
UI の実装は Opera が進む。
Chrome, Firefoxも実装中。
端末の性質を活かした
UIが提供されることも。
<input type=email>
<input type=tel>
構造や新しいUIの追加で
よりよい体験を与えられる。
CSS3
CSS Carved Pumpkin
by Maurice Svay
flic.kr/p/7bHSNq
レイアウトや視覚効果
動的な表現が強化された。
プロパティが拡張され
かゆいところに手が届くように。
Multiple Backgrounds
背景画像を複数重ねられる。
#elem {
background-image: url(bg-front.png),
url(...), ... , url(bg-rear.png);
}
Stunning CSS3
www.stunningcss3.com
border-image
画像をボーダーにする。
#elem {
border-image: url(bdr.png) 5 round;
}
border-imageを利用した
ボックスデザイン
2xup.org/blog/2009/11/css3-border-image
Awesome Overlays with
CSS3's Border-Image Property
www.zurb.com/playground/awesome-overlays
Gradients
CSSだけでグラデーション。
画像をつくる必要がない。
Google Images
images.google.com
各ベンダーが独自に実装。
CSS3 Imagesで標準化。
Visual Effects
Apple が提案した
動きや変形を行うCSS拡張。
WebKit以外でも
実装が進んでいる。
2D Transforms
拡大/縮小、回転などを行う。
Polaroids with CSS3
www.zurb.com/playground/css3-polaroids
Firefox, Opera でも使える。
Transitions
段階的に値を変化させる。
For A Beautiful Web
forabeautifulweb.com
Operaも対応。
Firefox 4もサポート。
3D Transforms
パースを定義して
立体的な変形が行えるように。
Safari がサポート。
Chrome, Firefoxも実装中。
Animations
キーフレームを定義して
アニメーションを行う。
Star Wars in CSS & HTML
www.gesteves.com/experiments/starwars.html
A long time ago in a galaxy far,
far away...
Pure CSS3 AT-AT Walker
anthonycalzadilla.com/css3-ATAT/
Safari, Chrome のみサポート。
標準化もあまり進んでない。
動きが加わると
静的なカンプでは説明しづらい。
コードをふまえた
カンプの作成が不可欠になる。
CSSでデモを作るケースも
出てくるかも?
構造、表現が豊かになった。
さらに何が求められる?
Performance
Stopwatch
by William Warby
flic.kr/p/62hNF6
速くて悪いことはない。
Best Practices for
Speeding Up Your Web Site
developer.yahoo.com/performance/rules.html
Best Practices for a
Faster Web App with HTML5
www.html5rocks.com/tutorials/speed/quick/
Mobile Web Application
Best Practices
www.w3.org/TR/mwabp/
• ファイルサイズは小さく。
• リクエストは少なく。
• スクリプトは高速に。
Application Cache
キャッシュさせるファイルを
明示的に指定する。
CACHE MANIFEST
# ver. 2010-09-28
style.css
script.js
...
<html
manifest="cache.manifest">
data: URI scheme
画像を base64 エンコードし
data: URI にして埋め込む。
<img src="data:image/png;base64,
%89PNG%0D%0A%1A%0A%00%00%00%0
DIHDR%00%00%02%80%00%00%03%C0
%08%06%00%00%00%A5%E2%C8%FB%0...
テクニックだけではなく
原因を探って最適化する。
Auditing Your
Web App For Speed
goo.gl/ltJH
Google Chrome版Firebug:デベロッパーツール取扱説明書
ウェブサイトの最適化
gihyo.jp/dev/feature/01/devtools/0003
これという正解はない。
バランスをとって。
High Performance Web Design
~デザインから考えるハイパフォーマンスWebサイト~
t32k.com/mol/2009/11/high-performance-web-design/
PC向けのみのWebは
いつまで続くのか?
All about smartphones
by Denis Dervisevic
flic.kr/p/7XHVjx
Smartphone
iPhoneやAndroid端末が
急速に普及している。
2011 年には米国で
半数がスマートフォンを所持。
Smartphones to Overtake Feature Phones in U.S. by 2011
blog.nielsen.com/nielsenwire/consumer/sm...
2013年にはブラウザーが載る
モバイル端末が PCを超える。
Gartner Highlights Key Predictions for IT Organizations and Users in 2010 and Beyond
www.g...
2015 年には日本でも
半数がスマートフォンを所持。
スマートフォン利用者、5年後4割に拡大 MM総研予測
www.asahi.com/business/update/0905/TKY201009050227.html
これからの Web 開発は
PC だけを考えていられない。
スマートフォン向けWebは
新しい技術を使いやすい。
多くのプラットフォームに
高性能なブラウザーが搭載。
ターゲットが広がると
考えることも増える。
iPhone 4.0
by Robert Scoble
flic.kr/p/89Utsr
Screen Size &
Resolution
スマートフォンは小さい。
解像度は PCより高い。
小さい+高解像度
→ いろいろ小さく細かくなる。
ズームもできるが
情報量が多いと大変。
タッチスクリーン
→ 精度の高い操作はしづらい。
小さい・せまいと
タップしづらい。
情報量や動線設計
「さわること」への意識。
pixels iPhone 4
by Jordi Masagué
flic.kr/p/8s33Kx
Pixel Density
PCよりも高解像度
→ きれい!
ただ、端末によって
ピクセル密度はばらばら……
PC : 96 dpi
iPhone 3 : 163 dpi
Android* : 240 dpi
iPhone 4 : 326 dpi
デバイスピクセルと
CSSピクセルの違いも……
iPhone 4では
csspx : dpx = 1 : 2
Android*では
csspx : dpx = 1 : 1.5
1 : 1 でないと
画像がぼやけて見える。
画像を使わない表現が増えてくる?
1. ボタンなどは CSS でつくる
BonBon Buttons
lab.simurai.com/css/buttons
2. SVGを使う
The New York Times
www.nytimes.com
※ Androidはこれから対応……
サイズや解像度の違いに
柔軟なつくり方にシフトする?
Performance!!!
Stopwatch
by William Warby
flic.kr/p/62hNF6
回線速度・品質も
大きな問題になる。
ダウンロードに時間がかかる。
接続が切れることもある。
サイズは小さく
リクエストは少なく。
モバイルから
設計を始めることも?
So?
Web 開発で
求められることは増えるばかり。
より広い視点から
デザインを進める必要がある。
新しい技術が
手助けしてくれることは多い。
新しいものを使っていく
土壌づくりをしていこう。
ありがとうございました。
Contact
yakura-masataka@mitsue.co.jp
@myakura
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Upcoming SlideShare
Loading in …5
×

Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)

3,767 views

Published on

すでに多くの Web サイト、アプリケーションで利用が進んでいる HTML5。本セッションでは、Web デザインにフォーカスした HTML5 や CSS3 の機能紹介、そしてスマートフォンやタブレットに見られる、これからの Web デザインについて考えるべきことをご紹介いたします。

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,767
On SlideShare
0
From Embeds
0
Number of Embeds
1,126
Actions
Shares
0
Downloads
30
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)

  1. 1. HTML5と Webデザイン masataka yakura
  2. 2. HTML5
  3. 3. 単なる流行り?
  4. 4. HTML5 はもう使う段階にある。
  5. 5. 使える機能は これからさらに増える。
  6. 6. Webアプリ開発向けの 機能だけではない。
  7. 7. "HTML5"と"デザイン"
  8. 8. • HTML5 • CSS3 • Performance • Smartphone
  9. 9. HTML5 HTML5 For Web Designers by Jeremy Keith flic.kr/p/8e3R8d
  10. 10. デザインは見た目だけじゃない。
  11. 11. Structure & Semantics
  12. 12. 情報を構造化する 新しい要素の追加。
  13. 13. <header> <footer> <section> <nav> <aside> <article> <figure> ...
  14. 14. HTML5doctor Sectioning Flowchart html5doctor.com/happy-1st-birthday-us/
  15. 15. Chrome 5, Safari 5, Firefox 4 からサポート。
  16. 16. Firefox 4, Chrome 7 には HTML5 パーサも内蔵。
  17. 17. パーサを待たなくても CSSを書けば利用できる。
  18. 18. header, footer, section, nav, article, aside, hgroup, ... { display: block }
  19. 19. Forms (2.0)
  20. 20. 新しいコントロールの追加。
  21. 21. <input type=search> <input type=email> <input type=url> <input type=tel> <input type=date> <input type=range> <input type=number> ...
  22. 22. 専用のUI が 用意されるものもある。
  23. 23. <input type=date>
  24. 24. UI の実装は Opera が進む。 Chrome, Firefoxも実装中。
  25. 25. 端末の性質を活かした UIが提供されることも。
  26. 26. <input type=email>
  27. 27. <input type=tel>
  28. 28. 構造や新しいUIの追加で よりよい体験を与えられる。
  29. 29. CSS3 CSS Carved Pumpkin by Maurice Svay flic.kr/p/7bHSNq
  30. 30. レイアウトや視覚効果 動的な表現が強化された。
  31. 31. プロパティが拡張され かゆいところに手が届くように。
  32. 32. Multiple Backgrounds
  33. 33. 背景画像を複数重ねられる。
  34. 34. #elem { background-image: url(bg-front.png), url(...), ... , url(bg-rear.png); }
  35. 35. Stunning CSS3 www.stunningcss3.com
  36. 36. border-image
  37. 37. 画像をボーダーにする。
  38. 38. #elem { border-image: url(bdr.png) 5 round; }
  39. 39. border-imageを利用した ボックスデザイン 2xup.org/blog/2009/11/css3-border-image
  40. 40. Awesome Overlays with CSS3's Border-Image Property www.zurb.com/playground/awesome-overlays
  41. 41. Gradients
  42. 42. CSSだけでグラデーション。 画像をつくる必要がない。
  43. 43. Google Images images.google.com
  44. 44. 各ベンダーが独自に実装。 CSS3 Imagesで標準化。
  45. 45. Visual Effects
  46. 46. Apple が提案した 動きや変形を行うCSS拡張。
  47. 47. WebKit以外でも 実装が進んでいる。
  48. 48. 2D Transforms
  49. 49. 拡大/縮小、回転などを行う。
  50. 50. Polaroids with CSS3 www.zurb.com/playground/css3-polaroids
  51. 51. Firefox, Opera でも使える。
  52. 52. Transitions
  53. 53. 段階的に値を変化させる。
  54. 54. For A Beautiful Web forabeautifulweb.com
  55. 55. Operaも対応。 Firefox 4もサポート。
  56. 56. 3D Transforms
  57. 57. パースを定義して 立体的な変形が行えるように。
  58. 58. Safari がサポート。 Chrome, Firefoxも実装中。
  59. 59. Animations
  60. 60. キーフレームを定義して アニメーションを行う。
  61. 61. Star Wars in CSS & HTML www.gesteves.com/experiments/starwars.html A long time ago in a galaxy far, far away...
  62. 62. Pure CSS3 AT-AT Walker anthonycalzadilla.com/css3-ATAT/
  63. 63. Safari, Chrome のみサポート。 標準化もあまり進んでない。
  64. 64. 動きが加わると 静的なカンプでは説明しづらい。
  65. 65. コードをふまえた カンプの作成が不可欠になる。
  66. 66. CSSでデモを作るケースも 出てくるかも?
  67. 67. 構造、表現が豊かになった。 さらに何が求められる?
  68. 68. Performance Stopwatch by William Warby flic.kr/p/62hNF6
  69. 69. 速くて悪いことはない。
  70. 70. Best Practices for Speeding Up Your Web Site developer.yahoo.com/performance/rules.html
  71. 71. Best Practices for a Faster Web App with HTML5 www.html5rocks.com/tutorials/speed/quick/
  72. 72. Mobile Web Application Best Practices www.w3.org/TR/mwabp/
  73. 73. • ファイルサイズは小さく。 • リクエストは少なく。 • スクリプトは高速に。
  74. 74. Application Cache
  75. 75. キャッシュさせるファイルを 明示的に指定する。
  76. 76. CACHE MANIFEST # ver. 2010-09-28 style.css script.js ...
  77. 77. <html manifest="cache.manifest">
  78. 78. data: URI scheme
  79. 79. 画像を base64 エンコードし data: URI にして埋め込む。
  80. 80. <img src="data:image/png;base64, %89PNG%0D%0A%1A%0A%00%00%00%0 DIHDR%00%00%02%80%00%00%03%C0 %08%06%00%00%00%A5%E2%C8%FB%0 0%00%20%00IDATx%01%EC%9D%07%B8 %14E%D6%86%0F%19%24%E7E..." ...>
  81. 81. テクニックだけではなく 原因を探って最適化する。
  82. 82. Auditing Your Web App For Speed goo.gl/ltJH
  83. 83. Google Chrome版Firebug:デベロッパーツール取扱説明書 ウェブサイトの最適化 gihyo.jp/dev/feature/01/devtools/0003
  84. 84. これという正解はない。 バランスをとって。
  85. 85. High Performance Web Design ~デザインから考えるハイパフォーマンスWebサイト~ t32k.com/mol/2009/11/high-performance-web-design/
  86. 86. PC向けのみのWebは いつまで続くのか?
  87. 87. All about smartphones by Denis Dervisevic flic.kr/p/7XHVjx Smartphone
  88. 88. iPhoneやAndroid端末が 急速に普及している。
  89. 89. 2011 年には米国で 半数がスマートフォンを所持。 Smartphones to Overtake Feature Phones in U.S. by 2011 blog.nielsen.com/nielsenwire/consumer/smartphones-to-overtake-feature-phones-in-u-s-by-2011/
  90. 90. 2013年にはブラウザーが載る モバイル端末が PCを超える。 Gartner Highlights Key Predictions for IT Organizations and Users in 2010 and Beyond www.gartner.com/it/page.jsp?id=1278413
  91. 91. 2015 年には日本でも 半数がスマートフォンを所持。 スマートフォン利用者、5年後4割に拡大 MM総研予測 www.asahi.com/business/update/0905/TKY201009050227.html
  92. 92. これからの Web 開発は PC だけを考えていられない。
  93. 93. スマートフォン向けWebは 新しい技術を使いやすい。
  94. 94. 多くのプラットフォームに 高性能なブラウザーが搭載。
  95. 95. ターゲットが広がると 考えることも増える。
  96. 96. iPhone 4.0 by Robert Scoble flic.kr/p/89Utsr Screen Size & Resolution
  97. 97. スマートフォンは小さい。 解像度は PCより高い。
  98. 98. 小さい+高解像度 → いろいろ小さく細かくなる。
  99. 99. ズームもできるが 情報量が多いと大変。
  100. 100. タッチスクリーン → 精度の高い操作はしづらい。
  101. 101. 小さい・せまいと タップしづらい。
  102. 102. 情報量や動線設計 「さわること」への意識。
  103. 103. pixels iPhone 4 by Jordi Masagué flic.kr/p/8s33Kx Pixel Density
  104. 104. PCよりも高解像度 → きれい!
  105. 105. ただ、端末によって ピクセル密度はばらばら……
  106. 106. PC : 96 dpi iPhone 3 : 163 dpi Android* : 240 dpi iPhone 4 : 326 dpi
  107. 107. デバイスピクセルと CSSピクセルの違いも……
  108. 108. iPhone 4では csspx : dpx = 1 : 2
  109. 109. Android*では csspx : dpx = 1 : 1.5
  110. 110. 1 : 1 でないと 画像がぼやけて見える。
  111. 111. 画像を使わない表現が増えてくる?
  112. 112. 1. ボタンなどは CSS でつくる
  113. 113. BonBon Buttons lab.simurai.com/css/buttons
  114. 114. 2. SVGを使う
  115. 115. The New York Times www.nytimes.com
  116. 116. ※ Androidはこれから対応……
  117. 117. サイズや解像度の違いに 柔軟なつくり方にシフトする?
  118. 118. Performance!!! Stopwatch by William Warby flic.kr/p/62hNF6
  119. 119. 回線速度・品質も 大きな問題になる。
  120. 120. ダウンロードに時間がかかる。 接続が切れることもある。
  121. 121. サイズは小さく リクエストは少なく。
  122. 122. モバイルから 設計を始めることも?
  123. 123. So?
  124. 124. Web 開発で 求められることは増えるばかり。
  125. 125. より広い視点から デザインを進める必要がある。
  126. 126. 新しい技術が 手助けしてくれることは多い。
  127. 127. 新しいものを使っていく 土壌づくりをしていこう。
  128. 128. ありがとうございました。
  129. 129. Contact yakura-masataka@mitsue.co.jp @myakura

×