Qcon slide 20130423

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

Recommandé

Recommandé

Contenu connexe

Similaire à Qcon slide 20130423

Similaire à Qcon slide 20130423 (20)

Qcon slide 20130423