Liner Note

情報(ユーザー中心デザイン・ユーザビリティ)と技術(ウェブプログラミング・ウェブサービス)についてのメモ書き

要約:数々のブログやウェブサービスで見られる美味しい飲食店情報を、どんなサービスでも利用できるように可搬性を高めることで、データそれ自体の活用性、価値が高まるし、そうしていくことでウェブ全体がより有用になっていくのではないかという話

この記事はWeb Accessibility Advent Calendar 2013の15日目の1本目の記事です

コンテンツはもうウェブには充分すぎるくらいあるのだけれど

僕は割とランチを楽しみにしていて、勤務先の新宿界隈にある美味しいランチがある記事はよくブックマークしています(まあ、遠くて昼休みには行けない店のほうが多いのですが・・)。そういう記事をさっき調べてみたのですが、本当にいっぱいあるのですね。

はてなブックマーク上の多くの飲食店系記事

ただ、実際にそのブックマークを開くかというと、あまり開きません。昼休みになって、ビルの階下に降りてごはん屋を決めるまでのその間は、ブックマークをガツガツ開いて状況にピッタリのお店を探すには少し短すぎるからです。

多くの飲食店情報ページは情報掲載量も違いますし、Googleマップや食べログなどユーザが利用したいサービスに自分で登録する必要があります

できれば

「ここから徒歩10分以内で行ける、美味しいパスタが食べられて、男子でもそこそこお腹がいっぱいになるくらいの料理を出してくれる上限1,000円程度のお店」と言えば、
「はい、それですと〇〇というお店がいいですね。ここからあのビル方向へ徒歩5分、先月△△さんの記事で見つけたもので、人気メニューは☓☓です。よければ口コミも見ます?」

とか

夜中11時に「うどん屋さんでまだ空いてるところってあるかな?」と言えば、
「この近くにはありません。隣の駅で良ければ、2件のうどん屋さんがまだ空いています」

と言ってくれるくらいだといいですね(まあ、ある程度はSiriで実現できるのですが)

Googleマップ for iPhoneで各店舗をブックマークしている状態

ただまあ、そこまではできないのですが、Googleマップに入れておけば場所くらいはわかります。なので、無いよりはマシということで、最近はそういう記事を見つけては、店舗の住所をGoogleマップの検索欄に放り込んでで検索、スターを押して後で参照できるようにしています。その時はもう機械のようにやっていますが、さすがに最近は面倒になってきてやることも減ってきました…


コンテンツの2つの価値

もちろん面倒さに負けてそっとタブを閉じるのは本意ではないのです。読んでみて美味しそう!と思ったのだからそのお店には行ってみたい。行ってみてやっぱり美味しかったのであれば、またそのサイトをチェックしてみたい。

そう思うと、コンテンツの価値って2つに分けられるのかなと思うんですね。

内容面での価値と、活用性という面での価値です。ここでは前者は、記事を読んで美味しそう!行ってみたい!いい情報をありがとうと思わせるような価値、後者は実際にその情報がどれくらい使われるかどうかという価値です。

いくら読ませる記事でも実際に使わなければ、結果的にリーチしたかどうかという点で考えると、不十分でしょう。要するにそうした観点での価値とは、記事のPVではないですし、はてなブックマークでブックマークされた数でもないですし、twitterやFacebookで言及された数でもありません。

僕のブックマークには、そうした活用性という点ではまだ今ひとつな記事が、残念だけど結構ありました。でもそれはマッチングミスであって、もったいないことです。

こういうウェブ上に散らばった情報が、サービスをまたがってつながって集約できるとしたなら、それはウェブ自体の価値を大きく高められるんじゃないか。これが今、僕がWebアクセシビリティを意識している動機です。

余談:ちなみにですが、僕は情報の内容面での価値を、減損なくフルに伝えるための活用性こそがWebアクセシビリティであると捉えていますし、これは一般的な定義よりは広いものだと思っています。

一般にアクセシビリティとユーザビリティは区別されますが私は一体で捉えています。背景として便利なウェブサービスが一般化してきた昨今、使いやすくなければ利用されないというケースも出てくるのではないかと思っていて、ですから、ある情報のアクセシビリティ=情報へアクセスし、利用できる度合いを考える際には、使いやすさ(それはサイトやサービスのユーザビリティではなく、ユーザのタスクに対するユーザビリティです)のような要素も加味しなければならないのではないかと考えています(もちろん、狭義のアクセシビリティが満たされることで、他のユーザビリティの高いサービスがそれを利用して、結果としてユーザビリティが高まることはもちろんあるでしょう)

情報アーキテクチャの領域(データを整理し、統合し、組織化することで、わかりやすい形として提供する、あるいはそのための環境を設計する)に近いかもしれません。

飲食店をマークアップする方法

じゃあ、どうするの?というところですが、実はMicrosoft,Google,Yahooというウェブの巨人がこういう風にマークアップしてくれたら検索エンジンが情報をクロールする際に、意味まで解釈して拾うことがりやりやすくなるよ!という標準パターンを作ってくれていたりします(schema.orgというサイトで公開されています)

そして、飲食店をマークアップするための標準も公開されています。

これに則って、先日行った鶏の炭火焼が美味しいお店をマークアップするとこうなります。

HTMLソースコード
<div itemscope itemtype="http://schema.org/Restaurant">
  <p itemprop="name">白銀屋</p>
  <p itemprop="description">魚と鶏の炭火焼のお店。メニューは魚が多いけど、大山鶏の刺身ステーキというもも肉を焼き上げた定食がおすすめ。外はカリカリ、けど中は生肉。生肉好きには結構お勧めです。大根おろし、柚子胡椒、ワサビなどの薬味?と一緒に添えていただきます。中は結構狭くて小さいのでMAX3名程度。</p>
  <p itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">★★★★☆ (<span itemprop="ratingValue">4</span>/<span itemprop="bestRating">5</span>)</p>
 
  <dl>
  <dt>住所</dt>
  <dd itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="postalCode">160-0023</span>
    <span itemprop="addressRegion">東京都</span>
    <span itemprop="addressLocality">新宿区</span>,
    <span itemprop="streetAddress">西新宿7丁目19-7 1F</span>
  </dd>
  </dl>
 
  <dl>
  <dt>営業時間</dt>
  <dd>昼:<meta itemprop="openingHours" content="Mo-Sa 11:30-15:00">月〜土 11:30-15:00</dd>
  <dd>夜:<meta itemprop="openingHours" content="Mo-Fr 17:30-23:30">月〜金 17:30-23:30、<meta itemprop="openingHours" content="Sa 17:30-22:00">土 17:30-22:00</dd>
  </dl>
 
  <dl>
  <dt>価格帯</dt>
  <dd><span itemprop="priceRange">1000円前後</span></dd>
  </dl>
</div>

これは面倒・・。ここまで面倒だと手で書くことを前提としたものではないのでしょう。

改善策

そうすると、策は2つかなあと思います。

シンプルマークアップ+外部データ形式

手で書けるくらいルールをシンプルにしてしまいます。また、住所や営業時間の詳細な店舗データはGoogle Placesのような外部のサイトからAPI経由で参照する形式にします。

HTMLソースコード
<div itemtype="http://example.com/SimpleRestaurant" itemhref="https://plus.google.com/116216321529596287243/">
  <p>店名:<span class="name">白銀屋<span></p>
  <p>感想:<span class="description">魚と鶏の炭火焼のお店。メニューは魚が多いけど、大山鶏の刺身ステーキというもも肉を焼き上げた定食がおすすめ。外はカリカリ、けど中は生肉。生肉好きには結構お勧めです。大根おろし、柚子胡椒、ワサビなどの薬味?と一緒に添えていただきます。中は結構狭くて小さいのでMAX3名程度。</span></p>
  <p>評価:<span class="rating">4/5</span></p>
</div>

MarkdownやYAMLのようにテキストはプレーンに近い形にしておいて、書くハードルを下げるものです。ただ、似た仕様を乱立させることになるのもあまり良くないと思うので、こちらは無いのかなあという気がしています。

ウィジェット形式

例えば、食べログなどの飲食店検索サービスがウィジェットを配布していて、それを使えば上記のようなコードが簡単に自分のブログに埋め込めるというもの。twitterのツイートやYoutubeの動画を埋め込むような感覚ですね。

今のところ、ウィジェット形式でできるといいなと思い、ただそうしたことをやっている有名サービスは知らないので、フォームなどに店名などの情報を入力することで簡単に埋め込める飲食店ウィジェットを考えているところです。

公開できるようになったら、またこちらのブログでお知らせします(※著作権的に問題のない情報をどう持ってくるかが今のところの課題です)

ウィジェット実装例

大サイズはレビュアーの感想に加え、店舗写真、各サービスへの追加ボタン、店名、評価、地図、住所、最寄り駅、定休日、営業時間、予算を記載しています

小サイズはレビュアーの感想に加え、店舗写真、各サービスへの追加ボタン、店名、評価、最寄り駅、予算を記載しています

まとめ

上記ウィジェットについて利点をまとめておくと、

ウィジェット利用者のメリット
  • 簡単にお店の情報を引っ張ってこれるので手間がかからない
  • 詳細に構造化されたコードが貼り付けられるので、いわゆるSEO効果が期待できる(参考:Google – リッチ スニペットと構造化データについて
  • 今までより実際に利用される確率が高まり、サイトリピート率向上が期待できる
閲覧者のメリット
  • Googleマップ、食べログなど自身のワンボタンですぐに利用できるようになり、情報を有効に活用できる
  • おみせ情報を統一した形式で見ることができるため、情報の過不足などがなく、知りたい情報がサイトによらず入手できる
  • ぐぐらビリティが上がることによって、掲載サイトを忘れたとしても検索して呼び出しやすくなる?

という感じでしょうか。

さて、飲食店以外にもトピックはあるというか、前振りのつもりでこの話を書いたら長くなってしまいました。それはまた別記事で

キーワード:

似たもの記事

読者の皆さんの反応サイト内コメントの更新情報(RSSフィード)

読者のコメント

0

ブックマークコメント

2

他サイトの関連記事

0

読者のコメント

コメントはまだ寄せられていません

はてなブックマークでつけられたコメント

kzakzaさんのプロフィール画像  kzakza
Web Accessibility Advent Calendar 2013の15日目。
jintrickさんのプロフィール画像  jintrick
"アクセシビリティとユーザビリティは区別されますが私は一体で捉えています" ← 誤読しそうなフレーズだが、タスク達成可能性ということを言っている。
非常に重要な概念だから、この界隈にいる人は理解すべき。

他サイトの関連記事

トラックバックはまだ寄せられていません


トラックバックとは
この記事に言及したサイトをこちらに掲載する仕組みをトラックバックと言います。ここでは、このサイトに頂いたトラックバックを一覧表示しています。
トラックバックしてくださる方へ
この記事への言及がない記事など、トラックバック受信方針に沿っていないものは、読者にお見せしても仕方ないこともあり削除させていただいることをご了承ください。
トラックバックを受け取るためのURI