ウェブはつながることで強くなれる（ご飯屋さん情報編） -Liner Note

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

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

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

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

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

できれば

「ここから徒歩10分以内で行ける、美味しいパスタが食べられて、男子でもそこそこお腹がいっぱいになるくらいの料理を出してくれる上限1,000円程度のお店」

と言えば、

「はい、それですと〇〇というお店がいいですね。ここからあのビル方向へ徒歩5分、先月△△さんの記事で見つけたもので、人気メニューは☓☓です。よければ口コミも見ます？」

とか夜中11時に

「うどん屋さんでまだ空いてるところってあるかな？」

と言えば、

「この近くにはありません。隣の駅で良ければ、2件のうどん屋さんがまだ空いています」

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

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

コンテンツの２つの価値

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

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

内容面での価値
活用性という面での価値

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

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

僕のブックマークには、そうした活用性という点ではまだ今ひとつな記事が、残念だけど結構ありました。でもそれはマッチングミスであって、もったいないことです。こういうウェブ上に散らばった情報が、サービスをまたがってつながって集約できるとしたなら、それはウェブ自体の価値を大きく高められるんじゃないか。

これが今、僕がWebアクセシビリティを意識している動機です。

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

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

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

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

じゃあ、どうするの？というところですが、実はMicrosoft,Google,Yahooというウェブの巨人がこういう風にマークアップしてくれたら検索エンジンが情報をクロールする際に、意味まで解釈して拾うことがりやりやすくなるよ！という標準パターンを作ってくれていたりします（schema.orgというサイトで公開されています）そして、飲食店をマークアップするための標準も公開されています。これに則って、先日行った鶏の炭火焼が美味しいお店をマークアップするとこうなります。

<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>

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

改善策

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

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

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

<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マップ、食べログなど自身のワンボタンですぐに利用できるようになり、情報を有効に活用できる
おみせ情報を統一した形式で見ることができるため、情報の過不足などがなく、知りたい情報がサイトによらず入手できる
ぐぐらビリティが上がることによって、掲載サイトを忘れたとしても検索して呼び出しやすくなる？

という感じでしょうか。

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

Liner Note