狠狠撸

HTML5と
情報表現の最適化
Photo ?by ?Carlos ?Varela
Qcon 2013-4-23?Atsushi Miura

about.me/atsushi.miura
? 名前：三浦 ?敦史
? 年年齢：４9
? 職業： Webディレクター（プランニング、テクニカル系）
フロントエンドエンジニア（UI開発、マークアップ）
システム設計
スクール講師（Web制作全般、2Dグラフィック）
企業研修等講師（Web制作全般、SEO対策）
(社)?日本Webソリューションデザイン協会 ?会員
?米Appcelerator社認定
Titanium ?アプリケーション ?デベロッパー
? 作業領領域： HTML5、CSS3、JavaScript、Flash、PHP、Java

最適？
Photo by LondonAnnie

20.9%
79.1%
利利?用した利利?用していない
?自宅宅のPC
?自宅宅以外のPC
携帯電話
スマートフォン
家庭?用ゲーム機?その他
タブレット型端末
インターネット接続テレビ
0 20 40 60 80
4.1%
4.2%
6.0%
16.2%
52.1%
39.3%
62.6%
平成23年年通信利利?用動向調査
http://www.soumu.go.jp/johotsusintokei/statistics/pdf/HR201100_?001.pdf
インターネットを利利?用したことのある世帯が利利?用した機器
（※複数回答）
過去?一年年間にインターネットを利利?用した世帯
Web閲覧環境はPCだけではない

Photo ?by ?Leonard ?John ?Matthews Photo ?by ?World ?Bank ?Photo ?Collection
初めてのインターネットが
モバイル端末という?人も増えている

多くのデバイスへどう対応するか？

Photo by adactio
= ?最适化？

Photo by adactio
Responsive
Web
Design
表?示の
最適化
＝
コンテンツの汎?用化

Photo by adactio
モバイルファースト
コンテンツファースト
最適な情報掲載

Illustration ?by ?Tsahi ?Levent-‐??Levi
デバイス対応には
情報構造の最適化が重要

HTML5 ?というと、
何を思い浮かべますか？
Photo ?by ?karola ?riegler ?photography

HTML5Vocabulary
HTML5 Microdata
HTML5 + RDFa
Application Cash
Web Strage
File API
Web Workers
XMLHttpRespons2
Web Sockets
Server-Sent Events
CSS Selector
CSS Namespace
CSS Color
SVG
Canvas
WebGL
Video
Audio
Geolocation API
Orientation Event
HTML

情報構造
レイアウト
デザイン
効果
HTML
CSS
JavaScript?CSS
PHP?CGIバックエンド処理理
テクニック
デザイン
コンテンツ

Structure
User
Device
ユーザー
情報構造
表?示装置
最適な
情報表現
Contents
コンテンツ
Technic
技術
Design
デザイン

HTML
HTML5Vocabulary
HTML5 Microdata
HTML5 + RDFa
Application Cash
Web Strage
File API
Web Workers
XMLHttpRespons2
Web Sockets
Server-Sent Events
CSS Selector
CSS Namespace
CSS Color
SVG
Canvas
WebGL
Video
Audio
Geolocation API
Orientation Event

Photo ?by ?NatBat
テクニックばかり勉強していませんか？

情報最適化の?方法
Photo by yukop

Let?’s ?start ?with ?structure. ?
Let?’s ?know ?what ?our ?content ?is ?made ?from.
構造から始めよう。
コンテンツの構成内容を知ろう。
The ?Personal ?Disquiet ?of ?Mark ?Boulton：Structure ?First. ?Content ?Always. ?-‐?? ?http://www.markboulton.co.uk/journal/structure-‐??first-‐??content-‐??always

明確な枠組みによる情報の構造化
<body>
<nav> <article> <aside>
<footer>
<header>
<header>
<footer>
<section>
<section>
<section>
<section>

アウトラインの構造化
<article>
<h1>受発注構造の変化</h1>
<p>元請け業者の関連会社やパートナー企業へ発注を?行行うピラミ...</p>
<section>
<h1>メッシュ型構造が増加した要因</h1>
<section>
<h1>クライアント側のWebリテラシーの向上</h1>
<p>クライアントのWebに関するリテラシー向上により... ?</p>
</section>
<section>
<h1>制作会社やクリエイター情報の?入?手が容易易</h1>
<p>Web上の情報や年年鑑などにより制作実績情報を?入?手... ?</p>
</section>
</section>
</article>
article ?や ?section ?などの要素を利利?用してHTML?文章内の?見見出しを起点
としたアウトライン構造を明確にし、機械が認識識しやすくします。

アウトラインの構造化
Google ?Chrome ?の機能拡張 ?HTML5 ?Outliner ?を利利?用した
アウトライン構造の表?示

Microdataによるコンテクストの拡張
<section ?itemscope ?itemtype="http://microformats.org/pro?le/hcard">
<p><span ?itemprop="fn">
?<span ?itemprop="family-‐??name">Atsushi</span>
?<span ?itemprop="given-‐??name"> ?Miura</span>
</span></p>
<p><time ?itemprop="bday" ?datetime="1964-‐??07-‐??01">
?1964年年7?月1?日
</time></p>
<p><a ?itemprop="email" ?href="maito:atsushi@miura.me">
?atsushi@miura.me
</a></p>
</section>
itemscope ?や ?itemprop ?などの属性を利利?用してHTML?文章内の情報を
意味づけることで、機械がHTMLのコンテクストを認識識しやすくします。

<div ?itemscope ?itemtype="http://schema.org/LocalBusiness">
<div ?id="bizInfoHeader">
<h1 ?itemprop="name">Alma ?Pan-‐??Latin ?Kitchen</h1>
<div ?itemprop="aggregateRating" ?itemscope ?itemtype="http://schema.org/AggregateRating">
<div ?class="rating">
<i ?class="star-‐??img ?stars_?4"...><img ?src=/slideshow/qcon-slide-20130423/22572124/"..." ?...></i>
<meta ?itemprop="ratingValue" ?content="4.0">
</div>
<span ?class="review-‐??count">
<span ?itemprop="reviewCount">33 ?</span> ?reviews
</span>
<a ?href="#" ?id="rating_?graph" ?class="i-‐??wrap ?ig-‐??wrap-‐??common ?i-‐??rating-‐??chart-‐??common-‐??wrap">
<i ? ?class="i ?ig-‐??common ?i-‐??rating-‐??chart-‐??common"></i> ?Rating ?Details
</a>
</div>
</div>
</div>
http://www.yelp.com/biz/alma-‐??pan-‐??latin-‐??kitchen-‐??pittsburgh
Google 検索索結果表?示 Web画?面表?示

OGPを利利?用したMETA情報の提供
The ?Open ?Graph ?protocol
http://ogp.me/
OGP（Open ?Graph ?Protocol）
Webページの掲載内容の概略略を
META情報として提供するための
記述?方法です。
このOGPはFacebookをはじめ、
m i x i 、 G r e e 、 G o o g l e + 、
LinkedInなどのSNSで利利?用され、
各SNS上での表?示内容を指定する
ことができます。

OGPを利利?用したMETA情報の提供
<meta ?property="og:title"
content="What's ?NEW ??日産 ?NOTE?" ?/>
<meta ?property="og:description"
content="どんな未来も乗せられる。新型NOTE誕?生。" ?/>
<meta ?property="og:url"
content="http://www2.nissan.co.jp/SP/NOTE/SPECIAL/" ?/>
<meta ?property="og:image"
content="http://www2.nissan.co.jp/SP/NOTE/SPECIAL/
? ? ? ?SHARED/IMG/FB_?image.jpg" ?/>
What's ?NEW ??日産 ?NOTE?
http://www.nissan.co.jp/SP/NOTE/SPECIAL/
property="og:title"
property="og:description"
property="og:url"
property="og:image"

WAI-‐??ARIA
http://www.w3.org/TR/wai-‐??aria/
RDFa
http://www.w3.org/TR/html-‐??rdfa/

Microdataの詳細
Google ?ウェブマスター ?ツール?　リッチ ?スニペットに関するガイドライン
http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=2722261&topic=21997&ctx=topic

Photo ?by ?DavidMartynHunt
最適化のポイント

このコンテンツをiPad対応にする
現在、三浦が検討を進めている案件です。

予定しているレイアウト

?こういったコンテンツを利利?用する?人は、iPadの
操作にある程度度なれているのでは？
→ ?利利?用ユーザの特性を考える
→ ?iPad的な操作?方法を利利?用する
?携帯端末内に情報を詰め込みすぎると、ユーザ
にとって判りづらくなる。
→ ?表?示項?目を絞る
開発のための想定項?目
ターゲティングと情報設計

? 指先によるシークバーの操作は使いづら
いので、シークバーに代わる操作?方法を
考える。
? スライドを?大きく表?示するために、どの
項?目を削除するか？
? 再?生するチャプターを変更更するために、
どのような?方法が最適か？
iPad対応の検討事項

スライドの選択とチャプターの移動は
指でフリックしてタップする
タップして再?生と停?止をトグルする
予定している操作?方法
?音声ボリュームはハードキーを利利?用する

Photo ?by ?odonata98
最適な情報表現のための?方法は
「何が必要なのか」「本当に必要なのか」
… ?を考えることが重要

Creative ?Coder
Photo ?by ?DavidMartynHunt

原?文：3 ?Reasons ?Why ?Learning ?To ?Code ?Makes ?You ?A ?Better ?Designer
?　?　?　http://www.uie.com/brainsparks/2011/06/06/3-‐??reasons-‐??why-‐??learning-‐??to-‐??code-‐??makes-‐??you-‐??a-‐??better-‐??designer/
邦訳：t32k.me ?-‐?? ?なぜシリコンバレーはコードの書けるデザイナーを求めているのか？
?　?　?　http://t32k.me/mol/log/why-‐??valley-‐??wants-‐??designers-‐??can-‐??code/
3 ?Reasons ?Why ?Learning ?To ?Code ?Makes ?You ?A ?Better ?Designer
1.
あなたが働いている領領域の中間についてより深く理理解できるでしょう。もし効率率率
的なデータベース処理理をできるクエリーが書ければ、トレードオフに必要な適切切
なレスポンス時間を設定できます。なにがコードを簡単にし、難しくするのか理理
解していれば、アイデアをより速く実装できるでしょう。（開発?工数は限られて
いるので?工数削減以上のものが得られるかもしれません。）中間領領域を知ること
は事をうまく運び、 ?より考えられたデザインの決定をする上で役?立立つでしょう。
2.
プログラミングを理理解することで、より良良いプロトタイプ作ることができます。
デザインアイデアをチームメイトやクライアントに伝えるための最適な?方法は、
動くプロトタイプを作ることです。素早くプロトタイプを作ることであなたのア
イデアに命が吹き込まれ、内なる素晴らしいアイデアを解き放たれ、あなたのデ
ザインの本当の意味を皆が理理解するのに役?立立つでしょう。
3.
プログラミングを理理解することで、製品コードのバグや?欠陥を特定するのに役?立立
つでしょう。チームメイトのデザイナーが活気づくにつれて、あなたはUIインタ
ラクションの問題に取り掛かっているプログラマーを助ける重要な役割を担うこ
とができるでしょう。つまりそれは、最終プロダクトがこれ以上無いほどの出来
になるということです。
3 ?Reasons ?Why ?Learning ?To ?Code ?Makes ?You ?A ?Better ?Designer
1.
あなたが働いている領領域の中間についてより深く理理解できるでしょう。もし効率率率
的なデータベース処理理をできるクエリーが書ければ、トレードオフに必要な適切切
なレスポンス時間を設定できます。なにがコードを簡単にし、難しくするのか理理
解していれば、アイデアをより速く実装できるでしょう。（開発?工数は限られて
いるので?工数削減以上のものが得られるかもしれません。）中間領領域を知ること
は事をうまく運び、 ?より考えられたデザインの決定をする上で役?立立つでしょう。
2.
プログラミングを理理解することで、より良良いプロトタイプ作ることができます。
デザインアイデアをチームメイトやクライアントに伝えるための最適な?方法は、
動くプロトタイプを作ることです。素早くプロトタイプを作ることであなたのア
イデアに命が吹き込まれ、内なる素晴らしいアイデアを解き放たれ、あなたのデ
ザインの本当の意味を皆が理理解するのに役?立立つでしょう。
3.
プログラミングを理理解することで、製品コードのバグや?欠陥を特定するのに役?立立
つでしょう。チームメイトのデザイナーが活気づくにつれて、あなたはUIインタ
ラクションの問題に取り掛かっているプログラマーを助ける重要な役割を担うこ
とができるでしょう。つまりそれは、最終プロダクトがこれ以上無いほどの出来
になるということです。

3,997 ?distinct ?devices ?/ ?61,389 ?users
OpenSignal: ?August, ?2012 ? ?http://opensignal.com/reports/fragmentation.php
The ?many ?faces ?of ?a ?little ?green ?robot ?

企画?戦略略
情報設計
運?用保守
デザイン
開発
テスト
企画?戦略略
情報設計
デザイン
開発
テスト
運?用?保守
今までのワークフロー
これからのワークフロー

Designing
in ?the ?Browser
No ?need
Photoshop
DesignFestival ?-‐?? ?Insights ?into ?Form ?and ?Function ?from ?The ?Web ?Designer's ?Roadmap
http://designfestival.com/insights-‐??into-‐??form-‐??and-‐??function-‐??from-‐??the-‐??web-‐??designer39s-‐??roadmap/
Vanseo ?Design ?-‐?? ?Work?ows ?In ?A ?Responsive ?World: ?From ?Waterfall ?To ?Agile
http://www.vanseodesign.com/web-‐??design/responsive-‐??work?ows/

Designing ?in ?the ?Browser
この?方法が向くケース
?Webアプリ?Webサービス
の開発
?デザイン画では予測できない
レスポンシブデザイン
?動的な表現が含まれるWeb
ページ
この?方法が向かないケース
?ビジュアル重視
?対象デバイスが少ない

Illust ?by ?mistergesl
Good
job!
Technic
IA
Presentation
=+Creative ?Coder

Photo ?by ?tantek
いつから? ?いまでしょ!
ご静聴ありがとうございました。
atsushi@miura.me

狠狠撸

Qcon slide 20130423

Recommended

More Related Content

Similar to Qcon slide 20130423 (20)

Recently uploaded (11)

Qcon slide 20130423