HTML5と情報表現の最適化Photo  by  Carlos  VarelaQcon 2013-4-23 Atsushi Miura
about.me/atsushi.miura 名前 : 三浦  敦史 年年齢 : 49 職業 : Webディレクター(プランニング、テクニカル系)フロントエンドエンジニア(UI開発、マークアップ)システム設計スクール講師(Web制作全般、...
最適?Photo by LondonAnnie
20.9%79.1%利利⽤用した 利利⽤用していない⾃自宅宅のPC⾃自宅宅以外のPC携帯電話スマートフォン家庭⽤用ゲーム機・その他タブレット型端末インターネット接続テレビ0 20 40 60 804.1%4.2%6.0%16.2%52.1%39...
Photo  by  Leonard  John  Matthews Photo  by  World  Bank  Photo  Collection初めてのインターネットがモバイル端末という⼈人も増えている
多くのデバイスへどう対応するか?
Photo by adactio=  最適化?
Photo by adactioResponsiveWebDesign表⽰示の最適化=コンテンツの汎⽤用化
Photo by adactioモバイルファーストコンテンツファースト最適な情報掲載
Illustration  by  Tsahi  Levent-‐‑‒Leviデバイス対応には情報構造の最適化が重要
HTML5  というと、何を思い浮かべますか?Photo  by  karola  riegler  photography
HTML5=Technic ?
HTML5VocabularyHTML5 MicrodataHTML5 + RDFaApplication CashWeb StrageFile APIWeb WorkersXMLHttpRespons2Web SocketsServer-Se...
情報構造レイアウトデザイン効果HTMLCSSJavaScript・CSSPHP・CGIバックエンド処理理テクニックデザインコンテンツ
StructureUserDeviceユーザー情報構造表⽰示装置最適な情報表現ContentsコンテンツTechnic技術Designデザイン
HTMLHTML5VocabularyHTML5 MicrodataHTML5 + RDFaApplication CashWeb StrageFile APIWeb WorkersXMLHttpRespons2Web SocketsServe...
Photo  by  NatBatテクニックばかり勉強していませんか?
情報最適化の⽅方法Photo by yukop
Letʼ’s  start  with  structure.  Letʼ’s  know  what  our  content  is  made  from.構造から始めよう。コンテンツの構成内容を知ろう。The  Personal  D...
明確な枠組みによる情報の構造化<body><nav> <article> <aside><footer><header><header><footer><section><section><section><section>
アウトラインの構造化<article><h1>受発注構造の変化</h1><p>元請け業者の関連会社やパートナー企業へ発注を⾏行行うピラミ...</p><section><h1>メッシュ型構造が増加した要因</h1><section><h1>クラ...
アウトラインの構造化Google  Chrome  の機能拡張  HTML5  Outliner  を利利⽤用したアウトライン構造の表⽰示
Microdataによるコンテクストの拡張<section  itemscope  itemtype="http://microformats.org/profile/hcard"><p><span  itemprop="fn">  <span ...
<div  itemscope  itemtype="http://schema.org/LocalBusiness"><div  id="bizInfoHeader"><h1  itemprop="name">Alma  Pan-‐‑‒Lat...
OGPを利利⽤用したMETA情報の提供The  Open  Graph  protocolhttp://ogp.me/OGP(Open  Graph  Protocol)Webページの掲載内容の概略略をMETA情報として提供するための記述⽅方法...
<meta  property="og:url"        content="http://www.yelp.com/biz/alma-‐‑‒pan-‐‑‒latin-‐‑‒kitchen-‐‑‒pittsburgh"><meta  pro...
OGPを利利⽤用したMETA情報の提供<meta  property="og:title"content="Whats  NEW  ⽇日産  NOTE?"  /><meta  property="og:description"content="...
WAI-‐‑‒ARIAhttp://www.w3.org/TR/wai-‐‑‒aria/RDFahttp://www.w3.org/TR/html-‐‑‒rdfa/
Microdataの詳細Google  ウェブマスター  ツール  リッチ  スニペットに関するガイドラインhttp://support.google.com/webmasters/bin/answer.py?hl=ja&answer=2722...
Photo  by  DavidMartynHunt最適化のポイント
このコンテンツをiPad対応にする現在、三浦が検討を進めている案件です。
予定しているレイアウト
‣こういったコンテンツを利利⽤用する⼈人は、iPadの操作にある程度度なれているのでは?→  利利⽤用ユーザの特性を考える→  iPad的な操作⽅方法を利利⽤用する‣携帯端末内に情報を詰め込みすぎると、ユーザにとって判りづらくなる。→  表⽰示...
‣ 指先によるシークバーの操作は使いづらいので、シークバーに代わる操作⽅方法を考える。‣ スライドを⼤大きく表⽰示するために、どの項⽬目を削除するか?‣ 再⽣生するチャプターを変更更するために、どのような⽅方法が最適か?iPad対応の検討事項
スライドの選択とチャプターの移動は指でフリックしてタップするタップして再⽣生と停⽌止をトグルする予定している操作⽅方法⾳音声ボリュームはハードキーを利利⽤用する
Photo  by  odonata98最適な情報表現のための⽅方法は「何が必要なのか」「本当に必要なのか」…  を考えることが重要
Creative  CoderPhoto  by  DavidMartynHunt
原⽂文:3  Reasons  Why  Learning  To  Code  Makes  You  A  Better  Designer      http://www.uie.com/brainsparks/2011/06/06/3-...
3,997  distinct  devices  /  61,389  usersOpenSignal:  August,  2012    http://opensignal.com/reports/fragmentation.phpThe...
企画・戦略略情報設計運⽤用保守デザイン開発テスト企画・戦略略情報設計デザイン開発テスト運⽤用・保守今までのワークフローこれからのワークフロー
Designingin  the  BrowserNo  needPhotoshopDesignFestival  -‐‑‒  Insights  into  Form  and  Function  from  The  Web  Desig...
Designing  in  the  Browserこの⽅方法が向くケース‣Webアプリ・Webサービスの開発‣デザイン画では予測できないレスポンシブデザイン‣動的な表現が含まれるWebページこの⽅方法が向かないケース‣ビジュアル重視‣対象デ...
Illust  by  mistergeslGoodjob!TechnicIAPresentation=+Creative  Coder
Photo  by  tantekいつから?  いまでしょ!ご静聴ありがとうございました。atsushi@miura.me
Upcoming SlideShare
Loading in …5
×

Qcon slide 20130423

553 views

Published on

今年のQConで講演した際の資料。
http://www.qcontokyo.com/
レポートは下記。
http://www.atmarkit.co.jp/ait/articles/1305/30/news024.html

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

  • Be the first to like this

No Downloads
Views
Total views
553
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Qcon slide 20130423

  1. 1. HTML5と情報表現の最適化Photo  by  Carlos  VarelaQcon 2013-4-23 Atsushi Miura
  2. 2. about.me/atsushi.miura 名前 : 三浦  敦史 年年齢 : 49 職業 : Webディレクター(プランニング、テクニカル系)フロントエンドエンジニア(UI開発、マークアップ)システム設計スクール講師(Web制作全般、2Dグラフィック)企業研修等講師(Web制作全般、SEO対策)(社)⽇日本Webソリューションデザイン協会  会員⽶米Appcelerator社認定Titanium  アプリケーション  デベロッパー 作業領領域 : HTML5、CSS3、JavaScript、Flash、PHP、Java
  3. 3. 最適?Photo by LondonAnnie
  4. 4. 20.9%79.1%利利⽤用した 利利⽤用していない⾃自宅宅のPC⾃自宅宅以外のPC携帯電話スマートフォン家庭⽤用ゲーム機・その他タブレット型端末インターネット接続テレビ0 20 40 60 804.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だけではない
  5. 5. Photo  by  Leonard  John  Matthews Photo  by  World  Bank  Photo  Collection初めてのインターネットがモバイル端末という⼈人も増えている
  6. 6. 多くのデバイスへどう対応するか?
  7. 7. Photo by adactio=  最適化?
  8. 8. Photo by adactioResponsiveWebDesign表⽰示の最適化=コンテンツの汎⽤用化
  9. 9. Photo by adactioモバイルファーストコンテンツファースト最適な情報掲載
  10. 10. Illustration  by  Tsahi  Levent-‐‑‒Leviデバイス対応には情報構造の最適化が重要
  11. 11. HTML5  というと、何を思い浮かべますか?Photo  by  karola  riegler  photography
  12. 12. HTML5=Technic ?
  13. 13. HTML5VocabularyHTML5 MicrodataHTML5 + RDFaApplication CashWeb StrageFile APIWeb WorkersXMLHttpRespons2Web SocketsServer-Sent EventsCSS SelectorCSS NamespaceCSS ColorSVGCanvasWebGLVideoAudioGeolocation APIOrientation EventHTML
  14. 14. 情報構造レイアウトデザイン効果HTMLCSSJavaScript・CSSPHP・CGIバックエンド処理理テクニックデザインコンテンツ
  15. 15. StructureUserDeviceユーザー情報構造表⽰示装置最適な情報表現ContentsコンテンツTechnic技術Designデザイン
  16. 16. HTMLHTML5VocabularyHTML5 MicrodataHTML5 + RDFaApplication CashWeb StrageFile APIWeb WorkersXMLHttpRespons2Web SocketsServer-Sent EventsCSS SelectorCSS NamespaceCSS ColorSVGCanvasWebGLVideoAudioGeolocation APIOrientation Event
  17. 17. Photo  by  NatBatテクニックばかり勉強していませんか?
  18. 18. 情報最適化の⽅方法Photo by yukop
  19. 19. 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
  20. 20. 明確な枠組みによる情報の構造化<body><nav> <article> <aside><footer><header><header><footer><section><section><section><section>
  21. 21. アウトラインの構造化<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⽂文章内の⾒見見出しを起点としたアウトライン構造を明確にし、機械が認識識しやすくします。
  22. 22. アウトラインの構造化Google  Chrome  の機能拡張  HTML5  Outliner  を利利⽤用したアウトライン構造の表⽰示
  23. 23. Microdataによるコンテクストの拡張<section  itemscope  itemtype="http://microformats.org/profile/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のコンテクストを認識識しやすくします。
  24. 24. <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-‐‑‒pittsburghGoogle 検索索結果表⽰示 Web画⾯面表⽰示
  25. 25. OGPを利利⽤用したMETA情報の提供The  Open  Graph  protocolhttp://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上での表⽰示内容を指定することができます。
  26. 26. <meta  property="og:url"        content="http://www.yelp.com/biz/alma-‐‑‒pan-‐‑‒latin-‐‑‒kitchen-‐‑‒pittsburgh"><meta  property="place:location:longitude"  content="-‐‑‒79.8975055"><meta  property="og:type"        content="yelpyelp:business"><meta  property="og:title"        content="Alma  Pan-‐‑‒Latin  Kitchen"><meta  property="place:location:latitude"  content="40.4396672"><meta  property="og:description"        content="Latin  American  in  Pittsburgh,  PA"><meta  property="fb:app_̲id"  content="97534753161"><meta  property="og:image"        content="http://s3-‐‑‒media4.ak.yelpcdn.com...>http://www.yelp.com/biz/alma-‐‑‒pan-‐‑‒latin-‐‑‒kitchen-‐‑‒pittsburghFacebook投稿画⾯面
  27. 27. OGPを利利⽤用したMETA情報の提供<meta  property="og:title"content="Whats  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"  />Whats  NEW  ⽇日産  NOTE?http://www.nissan.co.jp/SP/NOTE/SPECIAL/property="og:title"property="og:description"property="og:url"property="og:image"
  28. 28. WAI-‐‑‒ARIAhttp://www.w3.org/TR/wai-‐‑‒aria/RDFahttp://www.w3.org/TR/html-‐‑‒rdfa/
  29. 29. Microdataの詳細Google  ウェブマスター  ツール  リッチ  スニペットに関するガイドラインhttp://support.google.com/webmasters/bin/answer.py?hl=ja&answer=2722261&topic=21997&ctx=topic
  30. 30. Photo  by  DavidMartynHunt最適化のポイント
  31. 31. このコンテンツをiPad対応にする現在、三浦が検討を進めている案件です。
  32. 32. 予定しているレイアウト
  33. 33. ‣こういったコンテンツを利利⽤用する⼈人は、iPadの操作にある程度度なれているのでは?→  利利⽤用ユーザの特性を考える→  iPad的な操作⽅方法を利利⽤用する‣携帯端末内に情報を詰め込みすぎると、ユーザにとって判りづらくなる。→  表⽰示項⽬目を絞る開発のための想定項⽬目ターゲティングと情報設計
  34. 34. ‣ 指先によるシークバーの操作は使いづらいので、シークバーに代わる操作⽅方法を考える。‣ スライドを⼤大きく表⽰示するために、どの項⽬目を削除するか?‣ 再⽣生するチャプターを変更更するために、どのような⽅方法が最適か?iPad対応の検討事項
  35. 35. スライドの選択とチャプターの移動は指でフリックしてタップするタップして再⽣生と停⽌止をトグルする予定している操作⽅方法⾳音声ボリュームはハードキーを利利⽤用する
  36. 36. Photo  by  odonata98最適な情報表現のための⽅方法は「何が必要なのか」「本当に必要なのか」…  を考えることが重要
  37. 37. Creative  CoderPhoto  by  DavidMartynHunt
  38. 38. 原⽂文: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  Designer1.あなたが働いている領領域の中間についてより深く理理解できるでしょう。もし効率率率的なデータベース処理理をできるクエリーが書ければ、トレードオフに必要な適切切なレスポンス時間を設定できます。なにがコードを簡単にし、難しくするのか理理解していれば、アイデアをより速く実装できるでしょう。(開発⼯工数は限られているので⼯工数削減以上のものが得られるかもしれません。)中間領領域を知ることは事をうまく運び、  より考えられたデザインの決定をする上で役⽴立立つでしょう。2.プログラミングを理理解することで、より良良いプロトタイプ作ることができます。デザインアイデアをチームメイトやクライアントに伝えるための最適な⽅方法は、動くプロトタイプを作ることです。素早くプロトタイプを作ることであなたのアイデアに命が吹き込まれ、内なる素晴らしいアイデアを解き放たれ、あなたのデザインの本当の意味を皆が理理解するのに役⽴立立つでしょう。3.プログラミングを理理解することで、製品コードのバグや⽋欠陥を特定するのに役⽴立立つでしょう。チームメイトのデザイナーが活気づくにつれて、あなたはUIインタラクションの問題に取り掛かっているプログラマーを助ける重要な役割を担うことができるでしょう。つまりそれは、最終プロダクトがこれ以上無いほどの出来になるということです。3  Reasons  Why  Learning  To  Code  Makes  You  A  Better  Designer1.あなたが働いている領領域の中間についてより深く理理解できるでしょう。もし効率率率的なデータベース処理理をできるクエリーが書ければ、トレードオフに必要な適切切なレスポンス時間を設定できます。なにがコードを簡単にし、難しくするのか理理解していれば、アイデアをより速く実装できるでしょう。(開発⼯工数は限られているので⼯工数削減以上のものが得られるかもしれません。)中間領領域を知ることは事をうまく運び、  より考えられたデザインの決定をする上で役⽴立立つでしょう。2.プログラミングを理理解することで、より良良いプロトタイプ作ることができます。デザインアイデアをチームメイトやクライアントに伝えるための最適な⽅方法は、動くプロトタイプを作ることです。素早くプロトタイプを作ることであなたのアイデアに命が吹き込まれ、内なる素晴らしいアイデアを解き放たれ、あなたのデザインの本当の意味を皆が理理解するのに役⽴立立つでしょう。3.プログラミングを理理解することで、製品コードのバグや⽋欠陥を特定するのに役⽴立立つでしょう。チームメイトのデザイナーが活気づくにつれて、あなたはUIインタラクションの問題に取り掛かっているプログラマーを助ける重要な役割を担うことができるでしょう。つまりそれは、最終プロダクトがこれ以上無いほどの出来になるということです。
  39. 39. 3,997  distinct  devices  /  61,389  usersOpenSignal:  August,  2012    http://opensignal.com/reports/fragmentation.phpThe  many  faces  of  a  little  green  robot  
  40. 40. 企画・戦略略情報設計運⽤用保守デザイン開発テスト企画・戦略略情報設計デザイン開発テスト運⽤用・保守今までのワークフローこれからのワークフロー
  41. 41. Designingin  the  BrowserNo  needPhotoshopDesignFestival  -‐‑‒  Insights  into  Form  and  Function  from  The  Web  Designers  Roadmaphttp://designfestival.com/insights-‐‑‒into-‐‑‒form-‐‑‒and-‐‑‒function-‐‑‒from-‐‑‒the-‐‑‒web-‐‑‒designer39s-‐‑‒roadmap/Vanseo  Design  -‐‑‒  Workflows  In  A  Responsive  World:  From  Waterfall  To  Agilehttp://www.vanseodesign.com/web-‐‑‒design/responsive-‐‑‒workflows/
  42. 42. Designing  in  the  Browserこの⽅方法が向くケース‣Webアプリ・Webサービスの開発‣デザイン画では予測できないレスポンシブデザイン‣動的な表現が含まれるWebページこの⽅方法が向かないケース‣ビジュアル重視‣対象デバイスが少ない
  43. 43. Illust  by  mistergeslGoodjob!TechnicIAPresentation=+Creative  Coder
  44. 44. Photo  by  tantekいつから?  いまでしょ!ご静聴ありがとうございました。atsushi@miura.me

×