SlideShare a Scribd company logo
1 of 28
HTML5  for  IA
       2012/7/31
  ⻑⾧長⾕谷川敦⼠士  @ahaseg
      Concent,  Inc.
HTML5  for  IA



• セマンティックWebの実現
• 企業Webサイトがどう変わるか
セマンティック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/セマンティック・ウェブ
セマンティックWebとは



• HTMLが、⾃自分⾃自⾝身がどんな情報かの
 定義まで持っている状態
セマンティックWebとは
うれしいこと

1. 検索索エンジン(および同等のキュレーションサ
   ービス)からのコンテンツ発⾒見見性向上

2. ユーザーのコンテンツの利利⽤用のしやすさ向上

3. 開発効率率率の向上
セマンティックWebとは
これまで、

• 標準的な技術がなかった
• 標準的な語彙が運⽤用できなかった


            ↓

          構想⽌止まり
セマンティックWebとは
HTML5によって、

   HTMLがセマンティックな構造を標準化

   検索索エンジン連合主導による、標準語彙誕⽣生



             ↓

         実現のタイミング
ページ情報構造の変化




    参考:http://www.concentinc.jp/news/2012/07/usable-‐‑‒usability-‐‑‒praise/
<div>
                    </div>
<div>      </div>




   HTML4時代
 HTML内の構造は、
外部からは均質に⾒見見える

  </div>            </div>
<div>               </div>
<header>
                       </header>
<nav>      <article>




     HTML5
 HTMLが、意味構造を
     定義する

  </nav>               </article>
<footer>               </footer>
ページ情報構造の変化
        HTML4                           HTML5

<div>                        <header>
                    </div>                           </header>
<div>      </div>            <nav>       <article>




  </div>            </div>      </nav>               </article>
<div>                        <footer>
                    </div>                           </footer>
HTML5が持つ構造要素
•   body:本⽂文

•   section:要素くくり

•   nav:ナビゲーション

•   article:記事

•   aside:副次要素

•   hx:⾒見見出し

•   hgroup:Hxのまとまり

•   header:ヘッダ

•   footer:フッタ


                     参考:http://www.w3.org/TR/2011/WD-‐‑‒html5-‐‑‒20110525/sections.html
セマンティックWeb
HTML5によって、

   HTMLがセマンティックな構造を標準化

   検索索エンジン連合主導による、標準語彙誕⽣生
構造と要素



• 構造:HTML5
• 要素の属性(意味):???
参考:https://play.google.com/store/apps/details?id=com.zeptolab.ctr.ads&hl=ja
これは「アプリケーション」の情報です

    名称:Cut  the  Rope
    開発会社:ZeptoLab
      レーティング:4.5  (77,402票)
      価格:99円



                            →  要素の属性情報


           参考:https://play.google.com/store/apps/details?id=com.zeptolab.ctr.ads&hl=ja
要素の属性情報
製品情報の標準要素定義




 A社           B社    C社


      → 業界標準定義が必要
HTML5 for IA
代表的な
構造化データマークアップ


• microdata
• microformats
• RDFa
schema.org

• http://schema.org/
• microdata形式を⽤用いた、
 構造化データマークアップの共通仕様

• 2011年年  Google、Yahoo!、Bingの3社で策定
• 2012年年  Googleではセマンティック検索索導⼊入
リッチスニペット
schema.org
対応しているコンテンツタイプ
  • レビュー
  • ⼈人物
  • 製品
  • 会社と組織
  • レシピ
  • イベント
  • ⾳音楽


→  リッチスニペットテスティングツール
→  リッチスニペットについて




                       参考:http://schema.org/docs/gs.html#schemaorg_̲types
セマンティックWeb
HTML5によって、

   HTMLがセマンティックな構造を標準化

   検索索エンジン連合主導による、標準語彙誕⽣生



      →  ユーザーメリット、
        企業メリットは?
ユーザーから⾒見見た活⽤用



• レシピ  to  Evernote
• TripIt

   →  ネット上の情報の標準化により、
         活⽤用の幅が広がる
セマンティックウェブ時代の
         企業サイト

•   企業情報サイトの構造
    →  よりコンテンツDB的な⽅方向性へ

•   企業情報サイトの使われ⽅方
    →  情報探索索の際には統合サイトからの利利⽤用がメインに

•   スマートフォンでの使われ⽅方
    →  Siriなどエージェント経由のアクセス増加

•   商品情報・⽣生活情報
    →  標準化によって、横断的活⽤用が促進

•   ニュース
    →  ニュースリーダーからのアクセス
セマンティックウェブ時代の
         企業サイト




•   標準語彙採⽤用による、設計プロセスの簡略略化


•   業界横断サービスによる、総合的なUX、ユーザビリティの向上
まとめ:HTML5  for  IA


• 検索索エンジン効率率率
• ユーザーのデータ活⽤用
• 開発・制作効率率率向上
CONCENT,inc New Logotype                               Desing by Shintaro Kobayashi




               Twitter @ahaseg

               Facebook facebook.com/ahaseg
ロゴタイプコンセプト                          ロゴマークコンセプト
新しさを感じさせながら、10 年後に古く感じさせない デザインを目   ロゴタイプの右肩に付いているマーク。丸の中の二本の棒は、良く見
指しました。角を少し丸める事で、有機的で親しみやすい雰囲気を出     れば右が少し短く、左が少し長い。これはコンセントです。わかりづ
しつつも、文字の骨格はあくまでもニュートラルに設計することで、     らいです。しかし、この丸には可能性があります。WEB ではボタンに
奇をてらわない 現代らしさを表現しています。また、
                        右への傾きには、    なるかもしれません。紙ではハンコになって押されるかもしれません。
これから先、ますます加速していくだろう世の中の変化に、WEB(コ    そうして様々なかたちで使用していくと、いずれこのマークだけで
ンセント)と紙(アレフ・ゼロ)のハイブリットにより対応し、絶え     CONCENT と読めるようになる。そんな存在になってくれることを
ず前進していこう、という意志を込めました。               望んでいます。




               THANKS!



               concentinc.jp/

More Related Content

Similar to HTML5 for IA

Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)Google Developer Relations Team
 
GDG Women DevfestW
GDG Women DevfestWGDG Women DevfestW
GDG Women DevfestWTomoko Sato
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5Sho Ito
 
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Masakazu Muraoka
 
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolistShinichiro Kumeuchi
 
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)Kenji Shirane
 
About rails 3
About rails 3About rails 3
About rails 3issei126
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法Futomi Hatano
 
HTML5概要、コードサンプル
HTML5概要、コードサンプルHTML5概要、コードサンプル
HTML5概要、コードサンプルourmaninjapan
 
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15Hideki Hashizume
 
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装Mitsue-Links
 
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介Shotaro Suzuki
 
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目Takashi Endo
 
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様株式会社GreenHack
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドTetsuji Hayashi
 
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介Tadahiro Higuchi
 
マークアップ講座 01b HTML
マークアップ講座 01b HTMLマークアップ講座 01b HTML
マークアップ講座 01b HTMLeiji sekiya
 

Similar to HTML5 for IA (20)

Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
 
GDG Women DevfestW
GDG Women DevfestWGDG Women DevfestW
GDG Women DevfestW
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
 
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
 
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolist
 
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
 
About rails 3
About rails 3About rails 3
About rails 3
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
 
HTML5概要、コードサンプル
HTML5概要、コードサンプルHTML5概要、コードサンプル
HTML5概要、コードサンプル
 
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
 
テスト
テストテスト
テスト
 
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
 
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips   Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
 
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
 
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
 
HTML5
HTML5HTML5
HTML5
 
Data API 2.0
Data API 2.0Data API 2.0
Data API 2.0
 
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
 
マークアップ講座 01b HTML
マークアップ講座 01b HTMLマークアップ講座 01b HTML
マークアップ講座 01b HTML
 

More from Atsushi HASEGAWA, Ph.D.

IA Dark Patterns and challenges WIAD Tokyo 2024
IA Dark Patterns and challenges WIAD Tokyo 2024IA Dark Patterns and challenges WIAD Tokyo 2024
IA Dark Patterns and challenges WIAD Tokyo 2024Atsushi HASEGAWA, Ph.D.
 
デザインする組織、組織のデザイン
デザインする組織、組織のデザインデザインする組織、組織のデザイン
デザインする組織、組織のデザインAtsushi HASEGAWA, Ph.D.
 
サービスデザインの時代 〜顧客価値をビジネスに〜
サービスデザインの時代 〜顧客価値をビジネスに〜サービスデザインの時代 〜顧客価値をビジネスに〜
サービスデザインの時代 〜顧客価値をビジネスに〜Atsushi HASEGAWA, Ph.D.
 
A Guide to Service Design / サービスデザインの基礎・応用・最新事例
A Guide to Service Design / サービスデザインの基礎・応用・最新事例A Guide to Service Design / サービスデザインの基礎・応用・最新事例
A Guide to Service Design / サービスデザインの基礎・応用・最新事例Atsushi HASEGAWA, Ph.D.
 
Taxonomy issues in the IA community_WIAD17 Tokyo
Taxonomy issues in the IA community_WIAD17 TokyoTaxonomy issues in the IA community_WIAD17 Tokyo
Taxonomy issues in the IA community_WIAD17 TokyoAtsushi HASEGAWA, Ph.D.
 
Human Agent Interaction and Information Architecture at HAI2016
Human Agent Interaction and Information Architecture at HAI2016Human Agent Interaction and Information Architecture at HAI2016
Human Agent Interaction and Information Architecture at HAI2016Atsushi HASEGAWA, Ph.D.
 
SDN Japan | Service Business Model SIG Vol. 1
SDN Japan | Service Business Model SIG Vol. 1SDN Japan | Service Business Model SIG Vol. 1
SDN Japan | Service Business Model SIG Vol. 1Atsushi HASEGAWA, Ph.D.
 
Japanese IA, Weak IA - 日本のIA、弱いIA
Japanese IA, Weak IA - 日本のIA、弱いIAJapanese IA, Weak IA - 日本のIA、弱いIA
Japanese IA, Weak IA - 日本のIA、弱いIAAtsushi HASEGAWA, Ph.D.
 
サービスデザインの時代_ FITS2015
サービスデザインの時代_ FITS2015サービスデザインの時代_ FITS2015
サービスデザインの時代_ FITS2015Atsushi HASEGAWA, Ph.D.
 
Good Dominant Logic and Service Dominant Logic
Good Dominant Logic and Service Dominant LogicGood Dominant Logic and Service Dominant Logic
Good Dominant Logic and Service Dominant LogicAtsushi HASEGAWA, Ph.D.
 

More from Atsushi HASEGAWA, Ph.D. (20)

IA Dark Patterns and challenges WIAD Tokyo 2024
IA Dark Patterns and challenges WIAD Tokyo 2024IA Dark Patterns and challenges WIAD Tokyo 2024
IA Dark Patterns and challenges WIAD Tokyo 2024
 
Design Confidence | Designship 2018
Design Confidence | Designship 2018Design Confidence | Designship 2018
Design Confidence | Designship 2018
 
デザインする組織、組織のデザイン
デザインする組織、組織のデザインデザインする組織、組織のデザイン
デザインする組織、組織のデザイン
 
HCD and NEXT DESIGN
HCD and NEXT DESIGNHCD and NEXT DESIGN
HCD and NEXT DESIGN
 
サービスデザインの時代 〜顧客価値をビジネスに〜
サービスデザインの時代 〜顧客価値をビジネスに〜サービスデザインの時代 〜顧客価値をビジネスに〜
サービスデザインの時代 〜顧客価値をビジネスに〜
 
A Guide to Service Design / サービスデザインの基礎・応用・最新事例
A Guide to Service Design / サービスデザインの基礎・応用・最新事例A Guide to Service Design / サービスデザインの基礎・応用・最新事例
A Guide to Service Design / サービスデザインの基礎・応用・最新事例
 
DE$IGN and NEXT DESIGN
DE$IGN and NEXT DESIGNDE$IGN and NEXT DESIGN
DE$IGN and NEXT DESIGN
 
Taxonomy issues in the IA community_WIAD17 Tokyo
Taxonomy issues in the IA community_WIAD17 TokyoTaxonomy issues in the IA community_WIAD17 Tokyo
Taxonomy issues in the IA community_WIAD17 Tokyo
 
World IA Day 2017 Tokyo
World IA Day 2017 TokyoWorld IA Day 2017 Tokyo
World IA Day 2017 Tokyo
 
World IA Day 2017 Tokyo opening remarks
World IA Day 2017 Tokyo opening remarksWorld IA Day 2017 Tokyo opening remarks
World IA Day 2017 Tokyo opening remarks
 
Human Agent Interaction and Information Architecture at HAI2016
Human Agent Interaction and Information Architecture at HAI2016Human Agent Interaction and Information Architecture at HAI2016
Human Agent Interaction and Information Architecture at HAI2016
 
SDN Japan | Service Business Model SIG Vol. 1
SDN Japan | Service Business Model SIG Vol. 1SDN Japan | Service Business Model SIG Vol. 1
SDN Japan | Service Business Model SIG Vol. 1
 
Era of UX Team of One
Era of UX Team of OneEra of UX Team of One
Era of UX Team of One
 
Japanese IA, Weak IA - 日本のIA、弱いIA
Japanese IA, Weak IA - 日本のIA、弱いIAJapanese IA, Weak IA - 日本のIA、弱いIA
Japanese IA, Weak IA - 日本のIA、弱いIA
 
サービスデザインの時代_ FITS2015
サービスデザインの時代_ FITS2015サービスデザインの時代_ FITS2015
サービスデザインの時代_ FITS2015
 
UX TOKYO Jam 2014 Closing Keynote
UX TOKYO Jam 2014 Closing KeynoteUX TOKYO Jam 2014 Closing Keynote
UX TOKYO Jam 2014 Closing Keynote
 
Good Dominant Logic and Service Dominant Logic
Good Dominant Logic and Service Dominant LogicGood Dominant Logic and Service Dominant Logic
Good Dominant Logic and Service Dominant Logic
 
Age of the Customer
Age of the CustomerAge of the Customer
Age of the Customer
 
Definition of UX from UX White Paper
Definition of UX from UX White PaperDefinition of UX from UX White Paper
Definition of UX from UX White Paper
 
UXSTRAT 2013 Redux in Tokyo via schoo
UXSTRAT 2013 Redux in Tokyo via schooUXSTRAT 2013 Redux in Tokyo via schoo
UXSTRAT 2013 Redux in Tokyo via schoo
 

HTML5 for IA