Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。Go-NextブログGo-Nextトップお問い合わせすべてWEBマーケティングサーバー・ネットワークライフスタイルお知らせHOME/WEB/Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。【基礎編】2015.04.24WEBWebデザイナー必見!セマンティックコーディングに欠かせない構造化データ。デザインちーむ入門SEOこの記事はシリーズ全3記事です。Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。現在閲覧している記事Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。【JSON-LD編】Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。【Microdata編】どーも、デザインちーむのさむです。Webページを作成する際に必要となる知識の1つにSEOがあります。Webページをカッコよく作れば良いというものではありません。そこで今回は、Webデザイナー向けに、今後さらに必要となるであろう「構造化データ」のお話しをしたいと思います。3回に分けてお話ししていきますので、良かったら全て目を通して頂ければと思います。いつものように自分メモも兼ねて。まとめセマンティックウェブまずは重要なワードから説明していきます。なんとなく知ってるけどちゃんと説明できないWebデザイナーは多いのでは?まずは、構造化データを始めるにあたって理解しておかなければいけない基礎中の基礎の、「セマンティックウェブ」です。セマンティックウェブとは、Webページおよびその中に記述された内容について、それが何を意味するかを表す情報(メタデータ)を一定の規則に従って付加することで、コンピュータが効率よく情報を収集・解釈できるようにする構想ということです。検索エンジンはページに記述された「HTML」に基づいて検索結果を提供しています。従来では、検索エンジンはHTMLを単純に活用できても、HTMLに書かれている「情報の意味」まで活用することは困難でした。そこで、HTMLにメタデータを記述することによって情報の一つ一つを意味付けし、「情報の意味」をより検索に活用していこうとする「次世代のウェブ構想」が推し進められるようになりました。コンピューターには理解できない情報をより細かく理解できるようにしてあげれば、検索結果にも優位になるかもしれません。(2015/02/20時点では検索結果には影響しません、、、。)しかし、やっておいて損はないと思います。近い将来、必ずや影響してくるはずです!セマンティック検索セマンティック検索とは、利用者が何を求めて検索を行ったかという意味をコンピュータが正しく解釈し、それに即した検索結果を提供するという概念、または、そのための一連の技術のことである。先ほども説明しましたが、Webページの全ての箇所のデータをコンピューターに明示的に示せれば、ユーザーが検索しようとしているものを理解し、膨大にあるWebページの中から最適な答えを返してくるようになるでしょう。従来の「hタグ」のようなものだけでは、伝えてる量が圧倒的に少ないのです。HTML52014/10/28にW3Cにて正式勧告となったHTML5も、セマンティックなマークアップとなっています。HTML5ではアウトラインを強く意識します。アウトラインとは文章の概要で、簡単に言うと「本の目次のようなもの」で、ツリー構造にて形成します。今までのマークアップだと検索エンジンは、視覚的にアウトラインを認識できません。div要素で囲まれた文書では、どこが重要なセクションで、どこがナビゲーションであるのかを認識できないのです。div要素は汎用的なブロック要素としてしか定義されておらず、セマンティックな意味合いを持たないものだからです。「HTMLの使用目的は装飾目的ではなく、セマンティックな目的で使用すること」と定義されています。HTML5でもセマンティックな考え方が必要になってきます。header、footer、section、article、navなどがセクショニングコンテンツと呼ばれ、アウトラインを形成します。構造化データ構造化データとは、HTMLに書かれている情報を、検索ロボットでも理解できるように意味づけする”メタデータ”のことをいいます。セマンティックウェブを実現させるための手段が「構造化データ」ということになります。今後のWeb制作には必ずと言っていいほど、構造化データのスキルを求められると思います。人に対して意味やカッコ良さを伝えることも大事ですが、コンピューターに対しても理解できるようなWebページを作成していくスキルも必要です。コンピューターに対して理解できるようにしなければ、検索結果で表示されることは難しいでしょう。どんなに作りこんだデザインでも誰もたどり着けないのです、、、。ここまでで、基本的な概念が理解できたと思います。次からは具体的に構造化データを進めていくうえで必要なものを説明していきます。ウェブの改善を目的として共同で進めている、構造化データマークアップの共通仕様を策定する取り組み。schema.orgは、モノゴトが持つ意味を表現するために定義された「ボキャブラリー(vocabulary)」です。構造化データマークアップにより、検索エンジンはウェブページ上の情報を認識し、より有用な検索結果を提供できるようになります。次回からは、このschema.orgを利用して説明していきます。schema.orgには様々なものが定義されていますので、まずは以下のリンクからチェックしてみましょう!Schema.org(日本語版)かなりの量が定義されているので、把握するのにも一苦労です、、、。今後は上記サイトを確認しながらマークアップしていくことになります。先ほども説明しましたがschema.orgは、モノゴトが持つ意味を表現するために定義された「ボキャブラリー(vocabulary)」です。その他にもボキャブラリーには様々なものが存在します。Friend)(人物の情報を表すためのボキャブラリーを定義)rNews(ニュース関連の情報を表すためのボキャブラリーを定義)Data-Vocabulary.org(幅広いジャンルをカバーするボキャブラリーを定義)※Data-Vocabulary.orgは、schema.orgの登場によってその役割をschema.orgに引き継いでいます。※GoodRelationsは、そのボキャブラリーほとんどが現在はschema.orgに移植されています。き方のルール」とここでは理解してください。schema.orgやFOAFが定めたボキャブラリーをどのようにして記述するかのフォーマット(記述方法)です。シンタックスには様々なものが存在します。LiteJSON-LDRDFaは、構造化データをマークアップするシンタックスとして幅広く使われていて拡張性にも富んでいます。LiteはRDFaをもっと使いやすく簡素化したものです。現在schema.orgは、MicrodataとRDFa、JSON-LDの3つのシンタックスを公式にサポートしています。(15/02/23現在)まとめ今回は、ざっと基本的なところを説明しました。説明しかなく自分も疲れました、、、。最後にまとめてみます。き方のルール」こんな感じでしょうか。次回は「Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。【JSON-LD編】」をお届けします!ボキャブラリーには「schema.org」、シンタックスには「JSON-LD」を用いて説明します。乞うご期待!!この記事はシリーズ全3記事です。Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。現在閲覧している記事Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。【JSON-LD編】Webデザイナー必見!セマンティックコーディングに欠かせない構造化データ。メルマガ(メールマガジン)の運用と配信やメールマ2016.04.13Gulpの使い方。Webデザイナーはるばる雪国、新潟から参上。服飾販売、ITサポートの仕事を経て現職へ。Webの世界でいる以上は、職種にとらわれずにいろんな知識を吸収したいです。スマホサイト制作にかかせないbackground-sizeについて5簡単作成!オリジナルのイラストなどのデザインQRコードを作ってみた。