google developer day 2010 japan: html5 とウェブサイトデザイン (矢倉 眞隆)
DESCRIPTION
すでに多くの Web サイト、アプリケーションで利用が進んでいる HTML5。本セッションでは、Web デザインにフォーカスした HTML5 や CSS3 の機能紹介、そしてスマートフォンやタブレットに見られる、これからの Web デザインについて考えるべきことをご紹介いたします。TRANSCRIPT
HTML5とWebデザイン
masataka yakura
HTML5
単なる流行り?
HTML5はもう使う段階にある。
使える機能は
これからさらに増える。
Webアプリ開発向けの
機能だけではない。
"HTML5"と"デザイン"
• HTML5
• CSS3
• Performance
• Smartphone
HTML5
HTML5 For Web Designersby Jeremy Keithflic.kr/p/8e3R8d
デザインは見た目だけじゃない。
Structure & Semantics
情報を構造化する
新しい要素の追加。
<header> <footer> <section> <nav>
<aside> <article> <figure> ...
HTML5doctor
Sectioning Flowcharthtml5doctor.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=number>
...
専用のUIが
用意されるものもある。
<input type=date>
UIの実装はOperaが進む。
Chrome, Firefoxも実装中。
端末の性質を活かした
UIが提供されることも。
<input type=email>
<input type=tel>
構造や新しいUIの追加で
よりよい体験を与えられる。
CSS3
CSS Carved Pumpkinby Maurice Svayflic.kr/p/7bHSNq
レイアウトや視覚効果
動的な表現が強化された。
プロパティが拡張され
かゆいところに手が届くように。
Multiple Backgrounds
背景画像を複数重ねられる。
#elem {
background-image: url(bg-front.png),
url(...), ... , url(bg-rear.png);
}
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 Propertywww.zurb.com/playground/awesome-overlays
Gradients
CSSだけでグラデーション。
画像をつくる必要がない。
各ベンダーが独自に実装。
CSS3 Imagesで標準化。
Visual Effects
Appleが提案した
動きや変形を行うCSS拡張。
WebKit以外でも
実装が進んでいる。
2D Transforms
拡大/縮小、回転などを行う。
Polaroids with CSS3www.zurb.com/playground/css3-polaroids
Firefox, Operaでも使える。
Transitions
段階的に値を変化させる。
Operaも対応。
Firefox 4もサポート。
3D Transforms
パースを定義して
立体的な変形が行えるように。
Safariがサポート。
Chrome, Firefoxも実装中。
Animations
キーフレームを定義して
アニメーションを行う。
Star Wars in CSS & HTMLwww.gesteves.com/experiments/starwars.html
A long time ago in a galaxy far,far away...
Safari, Chromeのみサポート。
標準化もあまり進んでない。
動きが加わると
静的なカンプでは説明しづらい。
コードをふまえた
カンプの作成が不可欠になる。
CSSでデモを作るケースも
出てくるかも?
構造、表現が豊かになった。
さらに何が求められる?
Performance
Stopwatchby William Warbyflic.kr/p/62hNF6
速くて悪いことはない。
Best Practices for
Speeding Up Your Web Sitedeveloper.yahoo.com/performance/rules.html
Best Practices for a
Faster Web App with HTML5www.html5rocks.com/tutorials/speed/quick/
• ファイルサイズは小さく。
• リクエストは少なく。
• スクリプトは高速に。
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
0%00%20%00IDATx%01%EC%9D%07%B8
%14E%D6%86%0F%19%24%E7E..." ...>
テクニックだけではなく
原因を探って最適化する。
Auditing Your
Web App For Speedgoo.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 smartphonesby Denis Dervisevicflic.kr/p/7XHVjx
Smartphone
iPhoneやAndroid端末が
急速に普及している。
2011年には米国で
半数がスマートフォンを所持。
Smartphones to Overtake Feature Phones in U.S. by 2011blog.nielsen.com/nielsenwire/consumer/smartphones-to-overtake-feature-phones-in-u-s-by-2011/
2013年にはブラウザーが載る
モバイル端末がPCを超える。
Gartner Highlights Key Predictions for IT Organizations and Users in 2010 and Beyond www.gartner.com/it/page.jsp?id=1278413
2015年には日本でも
半数がスマートフォンを所持。
スマートフォン利用者、５年後４割に拡大 ＭＭ総研予測www.asahi.com/business/update/0905/TKY201009050227.html
これからのWeb開発は
PCだけを考えていられない。
スマートフォン向けWebは
新しい技術を使いやすい。
多くのプラットフォームに
高性能なブラウザーが搭載。
ターゲットが広がると
考えることも増える。
iPhone 4.0by Robert Scobleflic.kr/p/89Utsr
Screen Size &
Resolution
スマートフォンは小さい。
解像度はPCより高い。
小さい＋高解像度
→ いろいろ小さく細かくなる。
ズームもできるが
情報量が多いと大変。
タッチスクリーン
→ 精度の高い操作はしづらい。
小さい・せまいと
タップしづらい。
情報量や動線設計
「さわること」への意識。
pixels iPhone 4by 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でつくる
2. SVGを使う
※ Androidはこれから対応……
サイズや解像度の違いに
柔軟なつくり方にシフトする?
Performance!!!
Stopwatchby William Warbyflic.kr/p/62hNF6
回線速度・品質も
大きな問題になる。
ダウンロードに時間がかかる。
接続が切れることもある。
サイズは小さく
リクエストは少なく。
モバイルから
設計を始めることも?
So?
Web開発で
求められることは増えるばかり。
より広い視点から
デザインを進める必要がある。
新しい技術が
手助けしてくれることは多い。
新しいものを使っていく
土壌づくりをしていこう。
ありがとうございました。
