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

HTML5と
Webデザイン
masataka yakura

HTML5 はもう使う段階にある。

使える機能は
これからさらに増える。

Webアプリ開発向けの
機能だけではない。

• HTML5
• CSS3
• Performance
• Smartphone

HTML5
HTML5 For Web Designers
by Jeremy Keith
flic.kr/p/8e3R8d

デザインは見た目だけじゃない。

情報を構造化する
新しい要素の追加。

<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
}

新しいコントロールの追加。

<input type=search>
<input type=email>
<input type=url>
<input type=tel>
<input type=date>
<input type=range>
<input type=number>
...

専用のUI が
用意されるものもある。

UI の実装は Opera が進む。
Chrome, Firefoxも実装中。

端末の性質を活かした
UIが提供されることも。

構造や新しいUIの追加で
よりよい体験を与えられる。

CSS3
CSS Carved Pumpkin
by Maurice Svay
flic.kr/p/7bHSNq

レイアウトや視覚効果
動的な表現が強化された。

プロパティが拡張され
かゆいところに手が届くように。

背景画像を複数重ねられる。

#elem {
background-image: url(bg-front.png),
url(...), ... , url(bg-rear.png);
}

Stunning CSS3
www.stunningcss3.com

画像をボーダーにする。

#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

CSSだけでグラデーション。
画像をつくる必要がない。

Google Images
images.google.com

各ベンダーが独自に実装。
CSS3 Imagesで標準化。

Apple が提案した
動きや変形を行うCSS拡張。

WebKit以外でも
実装が進んでいる。

拡大/縮小、回転などを行う。

Polaroids with CSS3
www.zurb.com/playground/css3-polaroids

Firefox, Opera でも使える。

段階的に値を変化させる。

For A Beautiful Web
forabeautifulweb.com

Operaも対応。
Firefox 4もサポート。

パースを定義して
立体的な変形が行えるように。

Safari がサポート。
Chrome, Firefoxも実装中。

キーフレームを定義して
アニメーションを行う。

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/

• ファイルサイズは小さく。
• リクエストは少なく。
• スクリプトは高速に。

キャッシュさせるファイルを
明示的に指定する。

CACHE MANIFEST
# ver. 2010-09-28
style.css
script.js
...

画像を base64 エンコードし
data: URI にして埋め込む。

テクニックだけではなく
原因を探って最適化する。

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/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.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

The New York Times
www.nytimes.com

※ Androidはこれから対応……

サイズや解像度の違いに
柔軟なつくり方にシフトする?

Performance!!!
Stopwatch
by William Warby
flic.kr/p/62hNF6

回線速度・品質も
大きな問題になる。

ダウンロードに時間がかかる。
接続が切れることもある。

サイズは小さく
リクエストは少なく。

モバイルから
設計を始めることも?

Web 開発で
求められることは増えるばかり。

より広い視点から
デザインを進める必要がある。

新しい技術が
手助けしてくれることは多い。

新しいものを使っていく
土壌づくりをしていこう。

ありがとうございました。

Contact
yakura-masataka@mitsue.co.jp
@myakura

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

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (6)

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

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

Mais de Google Developer Relations Team

Mais de Google Developer Relations Team (12)

Último

Último (10)