HTML5 for IA

18,167 views
18,051 views

Published on

Introducing HTML5 from IA viewpoint for Webmasters.

Published in: Design

HTML5 for IA

  1. 1. HTML5  for  IA 2012/7/31 ⻑⾧長⾕谷川敦⼠士  @ahaseg Concent,  Inc.
  2. 2. HTML5  for  IA• セマンティックWebの実現• 企業Webサイトがどう変わるか
  3. 3. セマンティックWebとはセマンティック・ウェブ(Wikipediaより)セマンティック・ウェブ(Semantic  Web)はW3Cのティム・バーナーズ=リーによって提唱された、ウェブページの意味を扱うことを可能とする標準やツール群の開発によってWorld  Wide  Webの利利便便性を向上させるプロジェクト。セマンティック・ウェブの⽬目的はウェブページの閲覧という⾏行行為に、データの交換の側⾯面に加えて意味の疎通を付け加えることにある。現在のWorld  Wide  Web上のコンテンツは主にHTMLで記述されている。HTMLでは⽂文書構造を伝えることは可能だが、個々の単語の意味をはじめとする詳細な意味を伝えることはできない。これに対し、セマンティック・ウェブはXMLによって記述した⽂文書にRDFやOWLを⽤用いてタグを付け加える。この、データの意味を記述したタグが⽂文書の含む意味を形式化し、コンピュータによる⾃自動的な情報の収集や分析へのアプローチが可能となると期待されている。セマンティックウェブはXML、XML  Schema、RDF、RDF  Schema、OWLなどの標準およびツール群から構成されている。  OWL  Web  Ontology  Language  Overview  [1]はセマンティックウェブにおけるこれら標準およびツール群の機能・関連について述べている。 参考:http://ja.wikipedia.org/wiki/セマンティック・ウェブ
  4. 4. セマンティックWebとは• HTMLが、⾃自分⾃自⾝身がどんな情報かの 定義まで持っている状態
  5. 5. セマンティックWebとはうれしいこと1. 検索索エンジン(および同等のキュレーションサ ービス)からのコンテンツ発⾒見見性向上2. ユーザーのコンテンツの利利⽤用のしやすさ向上3. 開発効率率率の向上
  6. 6. セマンティックWebとはこれまで、• 標準的な技術がなかった• 標準的な語彙が運⽤用できなかった ↓ 構想⽌止まり
  7. 7. セマンティックWebとはHTML5によって、  HTMLがセマンティックな構造を標準化  検索索エンジン連合主導による、標準語彙誕⽣生 ↓ 実現のタイミング
  8. 8. ページ情報構造の変化 参考:http://www.concentinc.jp/news/2012/07/usable-‐‑‒usability-‐‑‒praise/
  9. 9. <div> </div><div> </div> HTML4時代 HTML内の構造は、外部からは均質に⾒見見える </div> </div><div> </div>
  10. 10. <header> </header><nav> <article> HTML5 HTMLが、意味構造を 定義する </nav> </article><footer> </footer>
  11. 11. ページ情報構造の変化 HTML4 HTML5<div> <header> </div> </header><div> </div> <nav> <article> </div> </div> </nav> </article><div> <footer> </div> </footer>
  12. 12. HTML5が持つ構造要素• body:本⽂文• section:要素くくり• nav:ナビゲーション• article:記事• aside:副次要素• hx:⾒見見出し• hgroup:Hxのまとまり• header:ヘッダ• footer:フッタ 参考:http://www.w3.org/TR/2011/WD-‐‑‒html5-‐‑‒20110525/sections.html
  13. 13. セマンティックWebHTML5によって、  HTMLがセマンティックな構造を標準化  検索索エンジン連合主導による、標準語彙誕⽣生
  14. 14. 構造と要素• 構造:HTML5• 要素の属性(意味):???
  15. 15. 参考:https://play.google.com/store/apps/details?id=com.zeptolab.ctr.ads&hl=ja
  16. 16. これは「アプリケーション」の情報です 名称:Cut  the  Rope 開発会社:ZeptoLab レーティング:4.5  (77,402票) 価格:99円 →  要素の属性情報 参考:https://play.google.com/store/apps/details?id=com.zeptolab.ctr.ads&hl=ja
  17. 17. 要素の属性情報製品情報の標準要素定義 A社 B社 C社 → 業界標準定義が必要
  18. 18. 代表的な構造化データマークアップ• microdata• microformats• RDFa
  19. 19. schema.org• http://schema.org/• microdata形式を⽤用いた、 構造化データマークアップの共通仕様• 2011年年  Google、Yahoo!、Bingの3社で策定• 2012年年  Googleではセマンティック検索索導⼊入
  20. 20. リッチスニペット
  21. 21. schema.org対応しているコンテンツタイプ • レビュー • ⼈人物 • 製品 • 会社と組織 • レシピ • イベント • ⾳音楽→  リッチスニペットテスティングツール→  リッチスニペットについて 参考:http://schema.org/docs/gs.html#schemaorg_̲types
  22. 22. セマンティックWebHTML5によって、  HTMLがセマンティックな構造を標準化  検索索エンジン連合主導による、標準語彙誕⽣生 →  ユーザーメリット、 企業メリットは?
  23. 23. ユーザーから⾒見見た活⽤用• レシピ  to  Evernote• TripIt →  ネット上の情報の標準化により、 活⽤用の幅が広がる
  24. 24. セマンティックウェブ時代の 企業サイト• 企業情報サイトの構造 →  よりコンテンツDB的な⽅方向性へ• 企業情報サイトの使われ⽅方 →  情報探索索の際には統合サイトからの利利⽤用がメインに• スマートフォンでの使われ⽅方 →  Siriなどエージェント経由のアクセス増加• 商品情報・⽣生活情報 →  標準化によって、横断的活⽤用が促進• ニュース →  ニュースリーダーからのアクセス
  25. 25. セマンティックウェブ時代の 企業サイト• 標準語彙採⽤用による、設計プロセスの簡略略化• 業界横断サービスによる、総合的なUX、ユーザビリティの向上
  26. 26. まとめ:HTML5  for  IA• 検索索エンジン効率率率• ユーザーのデータ活⽤用• 開発・制作効率率率向上
  27. 27. CONCENT,inc New Logotype Desing by Shintaro Kobayashi Twitter @ahaseg Facebook facebook.com/ahasegロゴタイプコンセプト ロゴマークコンセプト新しさを感じさせながら、10 年後に古く感じさせない デザインを目 ロゴタイプの右肩に付いているマーク。丸の中の二本の棒は、良く見指しました。角を少し丸める事で、有機的で親しみやすい雰囲気を出 れば右が少し短く、左が少し長い。これはコンセントです。わかりづしつつも、文字の骨格はあくまでもニュートラルに設計することで、 らいです。しかし、この丸には可能性があります。WEB ではボタンに奇をてらわない 現代らしさを表現しています。また、 右への傾きには、 なるかもしれません。紙ではハンコになって押されるかもしれません。これから先、ますます加速していくだろう世の中の変化に、WEB(コ そうして様々なかたちで使用していくと、いずれこのマークだけでンセント)と紙(アレフ・ゼロ)のハイブリットにより対応し、絶え CONCENT と読めるようになる。そんな存在になってくれることをず前進していこう、という意志を込めました。 望んでいます。 THANKS! concentinc.jp/

×