Webデザイントレンド定点観測 注釈やコメントの表現に変化が生まれつつある話
東京都渋谷区でフリーランスWebデザイナーとして働く、黒野明子（くろのあきこ）と申します。
実は、当コラムのネタ探しにおいては、最先端のWeb事情に大変詳しいこもりまさあきさんに、よくお知恵を拝借しているのです（いつもありがとうございます！）。
さて、こもりさんから、夏の終わり頃にこんなつぶやきを頂戴しました。
「おっと、これはどういうことだろう」と調査してみたところ、今月のテーマ「注釈やコメントの表現に変化が生まれつつある話」という記事にまとめることができました。
まずは、こもりさんが指摘しているサイトをチェックしてみましょう。掲載されたスクリーンショットの「thetechcofounder.com」から、見てみます。このブログには、各段落の右側にグレーのピンのような数字入りのアイコンがついていますね。
これをクリックすると本文が左に移動して、この段落に対するコメントが表示されます。Twitterアカウントを利用して、コメント投稿を行える仕組みになっています。
もうひとつ名前が挙げられているサイト、Twitterの共同創業者であるEvan Williamsさんが作った「Medium」の方もチェックしてみましょう。
こちらも各段落の右側に数字入りの吹き出しがついており、クリックすると本文が左に移動して段落に対するコメントが表示されます。
また、まだコメントのついていない段落は「＋」のアイコンが表示されますので、クリックしてTwitterかFacebookのアカウントを利用して、コメントを付与することができます。
さらに興味深いのは、このコメント（note）に対して、固有の識別子やIDのついたURLを生成できることです。
各コメント右上にある鎖アイコンにマウスカーソルを合わせると、「このコメント（note）をシェアすることが可能なリンクを、アドレスバー内に表示させる」というような意味のアラートが表示されます。
読者はこのリンクを利用して、ブログ記事や各種SNSでこのコメントをピンポイントで共有し、さらにWeb上で議論を深めていくことが可能となります。
記事内のフレーズを利用して場所を特定する「Fragmention」について
ここで注目したいのは、記事中の「ある一部分」に対して言及やリンクをする際、その部分をどのように特定するか？という方法についてです。「Medium」の例では、ページ内の固有のIDを利用し、
http://example.com/example.html#exampleid
というように「#」の後にIDを記述して、「ある一部分」に対してリンクしていますね。
著名なエンジニアのKevin Marksさんは、これに対して「Fragmentions」というアイディアを、下記の記事にて提唱しています。
要点をまとめてみますと、
- 記事内の特定箇所を指定するためにHTML要素内のIDを利用するのではなく、記事の中に書かれている特定のフレーズを識別子として利用する。#とIDを利用した形式で記事内の特定箇所を指定するのは、HTMLの中を見に行って当該部分のIDを探す必要があるので、少し面倒である。
- 記事内の特定のフレーズを識別子として利用するために、ダブルハッシュ「##」を利用した新しいURLの表記法を提案する。記述例としては、
http://example.com/example.html##an-example-id のような形になる。
ということになります。
なお、「Fragmentions」という単語は、「fragment（断片）」と「mention（言及）」を足した造語だと思われます。
Fragmentionの仕組みを利用して注釈をつける「Marginalia」というアイディア
さて、「Fragmentions」について言及し、さらに「記事への注釈」の付け方について別の方法を提示している方を発見しましたので、ご紹介しましょう。
Kartik Prabhuさんという方で、「Marginalia」というタイトルで記事を発表されています。「Marginalia」を日本語にすると「欄外の注」という意味になるようです。
Marginalia | Parallel Transport
Prabhuさんは、Web上の記事や電子書籍に、あたかも紙の書籍のように書き込みをするというコンセプトで記事を書いており、前述のKevin Marksさんの書いた「Fragmentions」の記述方法とJavaScript等を利用して、自分のブログ記事内の個別の箇所に対して言及する仕組みを実装しています。
下の画像の左側に注目してください。記事内の段落下部にある吹き出しアイコンをクリックすると、左側に新しいコラムが開き、段落に対するコメントが表示されます。
なお、スマホ等の小さなスクリーンで閲覧した際には、段落のすぐ下にコメントが表示されるデザインが採用されています。
さて、ここにつけられたコメントは、サードパーティのサービスを利用している訳ではなく、コメント投稿者のサイトそのものにデータが置かれています。下記は、Prabhuさんのサイトで表示されているコメントが、投稿者本人（ここでは、Kyle Mahanさん）のサイトに掲載されている様子です。
Kyle Mahan: This is super exciting, great work building it! …
Prabhuさんは、「Medium」のようなコメントの仕組みは、TwitterやFacebookなどのサードパーティのサービスを利用しているという点で、あまり好ましくないと考えているようです。段落ごとにコメント／注をつけるにしても、そのコメントそのもののデータも「自分の管理下である場所に置いておくべき」というのが、彼の考え方だと述べています。
仕組みに関する技術的な解説については、下記の記事をお読みになるとよいでしょう。
「サイト相互での言及を知らせる仕組み」のイメージとしては、かつてブログ間で盛んにやりとりされていたPingに似ていますね。
ブログメディアの集合体「Gawker Media」でも利用
最後にもう一例、ご紹介しておきましょう。
「Lifehacker」や「Gizmodo」を擁するアメリカの巨大ブログメディア連合である「Gawker Media」が開発した「Kinja」というディスカッションシステムです。
Welcome to Kinja, Our New Discussion System
TwitterなどのSNSアカウントを利用してKinjaにログインしておくと、「Gawker Media」に属する各メディア内の記事に、段落を指定してコメントをつけることができるようになっています。2012年から使われているようですので、ちょっと時間がたってしまいましたが。
新しい「注釈」「言及」のかたち
長文の記事にコメント欄で言及する際、「xxxxの部分に関して……」と言葉で指示をするのではなく、「その部分」に対してコメントを寄せる。もしくは、そのコメント自体にも識別子がついて、コメントにさらに返信したり、共有したりすることが可能になる。
ブログ記事やニュース記事に対しては、長らく「記事／投稿単位」でコメントをつけたり共有したりといったアクションが一般的でしたが、もっと細かく分けた「段落」単位での意見交換が可能なユーザーインターフェイス／技術が登場しているわけです。
WWWの醍醐味である「意見を交換する」「言及しあう」という行動に、いままでと少し違うユーザーインターフェイスが与えられ始めているようですね。
以上、今月の記事は、いつもと違ったフォーマットでお届けしてみましたが、いかがでしたでしょうか。
（了）