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

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

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

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

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

できれば

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

と言えば、

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

とか 夜中11時に

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

と言えば、

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

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

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

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

コンテンツの2つの価値

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

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

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

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

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

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

これが今、僕が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>

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

改善策

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

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

手で書けるくらいルールをシンプルにしてしまいます。また、住所や営業時間の詳細な店舗データは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の動画を埋め込むような感覚ですね。

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

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

ウィジェット実装例

まとめ

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

ウィジェット利用者のメリット

閲覧者のメリット

という感じでしょうか。

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

smile書き手

このブログは、私(@hashcc)が日々考えていることをまとめて、つなげて、残しておくためのブログです。
関心領域は Webデザイン(特にUXデザインやUIデザイン関連)、食や観光に関する情報環境の整備、情報の可視化、アクセシビリティなどです。

書き手にご興味があれば自己紹介ページで詳細をご確認ください。

commentsコメント

しばらくお待ちください・・