Showcase【これは便利!】Webのレビューに使えるオンライン付箋(アノテーション)ツール9+α個まとめWebのレビューをオンラインで効率化できるアノテーションサービスについて紹介する。noteで書く[AD]Webのレビューに便利なオンライン付箋このコーナーでは、ネットビジネスを強力に支援する製品について、それを支える技術や市場動向を説明し、さらに各社から提供されている製品を紹介する。競合がひしめく市場で、他社に差を付けるための武器として、ぜひ導入を検討してみてほしい。今回は、Webのレビューをオンラインで効率化できるアノテーションサービスについて紹介する。Webレビューのよくある悩みWebのレビューはサイト立ち上げ後に事業者側のスタッフが地道に行っていく運用業務であり、立ち上げに関わる制作・コンサル側はあまりケアしていないのが実情だ。印刷物や各種資料と同じようにWebのレビューを行ってしまいがちだが、実はWebのレビューには課題が多く、改善の余地が多いのだ。メールやワークフロー画面で修正指示を出すが、テキストのみで表現すると伝わらない。CMSでワークフローを実装したのに、紙に手で赤字を入れている。紙だとバイク便の時間やコストがかかる。FAXだと字がつぶれて読めないことも。画面キャプチャーをPowerPointに貼り付けてデジタル校正(?)している。クールだけど紙よりも面倒。大勢から戻ってくる修正依頼や指摘・質問に、矛盾や重複が多く、取りまとめるのが大変。こんな場合は、オンラインでWebページ(やPDFやOfficeドキュメント)に付箋でコメントを入れたり、線で修正指示を入れたり、テキストの差し替え指示ができる「アノテーションツール」を活用してみよう。アノテーション=付箋+コラボレーションコンピュータを教育や研究活動に活用する方法については、Webが普及する前から、学術的な研究が行われてきた。マルチメディアやハイパーメディアはCD-ROMコンテンツとして一般化し、その後のWebの土台となった。コラボレーションを支援するための研究は、後のグループウェアや共有ホワイトボード、ソーシャルなサービスのUIなどにつながっていった。この流れを汲み、遠隔地にいる複数のユーザーが同じドキュメントを共有し、リアルタイムでレビューやディスカッション、編集を行うことができるサービスがいろいろ実用化されてきた。米国でドットコムバブルが起こった90年代後半、いくつかのアノテーションサービスが開始され、ネットの新しい活用方法として話題になった。Voiceは事業を停止した。ソーシャルブックマーキングやSNS、ブログ、Wikiなどが普及してきた今、数多くのベンチャー企業がアノテーションサービスを提供するようになってきた。日本ではいまひとつ普及していないが、実はアノテーションのサービスはすでに数多く存在する。印刷物のレビューでさえ、最近はオンライン化が進んでいるのだ。今回は厳選した9つのアノテーションサービスと、Webのレビューにも使える3つのアプリケーションやCMSを紹介する。それぞれのサービスを実際に使ってサンプルページに赤字を入れた画面写真も掲載してある。どれも直感的に使えるので、実際にアノテーションやコメントを追加するなど、ぜひ体験してみてほしい。これらを比べてみると、商用サービス/製品の完成度の高さが際立つが、重要なのはネットを活用してコラボレーションすることで効率を高められる、という意識を組織の中で育てていくことだろう。手軽なものを実験的に導入し、現場がメリットを感じるようになったらグレードアップしていくのもオススメだ。Webの運用を標準化し効率よく回していくための1つの手段として、ぜひアノテーションツールの活用を検討してみてほしい。各リンクをクリックすると、この記事内でそのサービスを解説している部分にジャンプします。オンラインサービス【Web専用タイプ】いつものブラウザを使って、閲覧中のページの一部をマーカーでハイライトしたり、付箋を貼り付けたり、線でドローしたりできるため使い勝手が良く、手軽に導入できる。Diigo(ディーゴ)DrawHere(ドロー・ヒア)SharedCopy(シェアド・コピー)ShiftSpace(シフト・スペース)Stickis(スティッキーズ)Twiddla(ツィドラ)オンラインサービス【アップロードタイプ】ファイルをアップロードするタイプの場合は、Webページに加えてWordやExcel、PDF、画像なども共有・レビューが可能だ。A.nnotate(ア・ノテート)ShowDocument(ショウ・ドキュメント)Vyew(ビュー)参考:アノテーションが可能な関連ソフトウェアやCMS情報セキュリティなどのポリシーのために、社外のオンラインサービスを利用できない場合でも、社内ネットワークの中でアノテーションを実現する方法はいくつかある。Publisher(EMCジャパン製)TeamSite(インターウォーブン・ジャパン製)オンラインサービス【Web専用タイプ】Diigo(ディーゴ)http://diigo.com/内容ツールバーをインストールしたWebブラウザ上で、閲覧中ページのテキストを選択してハイライトしたり、付箋を追加できる。アノテーションを開始すると自動発行されるURLを相手に伝えれば、他のユーザーとアノテーションを共有することも可能だ。通常はアノテーションのみがDiigoサーバー経由で共有されるが、WebページとアノテーションをまるごとDiigoサーバーに送信できるので、ツールバーをインストールしていないユーザーもアノテーションを閲覧できるようになる。アノテーションの種類ハイライト、付箋、コメント対応フォーマットHTML共有方法ランダムURLインストール必要(閲覧のみのゲストは不要)ユーザー登録必要(閲覧のみのゲストは不要)アノテーションを加えた状態DrawHere(ドロー・ヒア)http://drawhere.com/内容アノテートしたいページをブラウザで表示させてブックマークレットを実行すると自由にドローができる状態になる。インストール不要のシンプルなツールだ。名前のとおりドローのみが可能で、ペンの色と太さ、透明度を変更できる。テキストを打ち込むことができないため、文字の差し替え指示や意見・提案を伝えるには不向きだ。文字情報はメールやワークフローで伝えるので、DrawHere上ではレイアウトやデザインの指示のみを伝えられれば良い、という場合に適している。アノテーションの種類ペン対応フォーマットHTML共有方法ランダムURLインストール不要ユーザー登録必要アノテーションを加えた状態SharedCopy(シェアド・コピー)http://sharedcopy.com/内容付箋やハイライトに加えて、線や丸、四角形をWebページ上にドローできるので、レビュー結果を伝えやすい。DrawHereと同じように、URLを指定すると該当ページをロードして表示するタイプのWebアプリケーションだ。インストールは不要で、ブラウザ上ですべての機能が利用できる。アノテーション情報のみがサーバーを経由して共有されるため、ファイルサーバー上のHTMLファイルやテスト環境のページもアノテートできる。テキスト対応フォーマットHTML共有方法ランダムURLインストール不要ユーザー登録必要(閲覧のみのゲストは不要)アノテーションを加えた状態ShiftSpace(シフト・スペース)http://shiftspace.org/内容閲覧中にShiftキーを押すとメニューが表示され、さらにスペースキーを押すとアノテーションが可能になる。オープンソースのブラウザであるFirefoxのアドオン「Greasemonkey(グリースモンキー)」から利用するスクリプトなので、対応はFirefoxのみ。アノテーションとしては、付箋とハイライトが基本だ。画像の差し替えやHTMLソースの変更機能もあるが、UIが独特で敷居が高い。同じURLのページを閲覧するユーザーは、そのページに対するアノテーションをすべて閲覧できる。社内からのアクセスしかできない環境でアノテーションを行えば、社内限定の共有も可能だ。書かないように注意したい。対応フォーマットHTML共有方法全公開インストール必要(Firefoxのみに対応、Greasemonkeyというアドオンも別途必要)ユーザー登録必要アノテーションを加えた状態Stickis(スティッキーズ)http://stickis.com/内容アノテーションは付箋のみに対応している。付箋とはいえ、その中でスタイル指定や画像追加もできるなど、表現力は高い。付箋はチャンネルとして束ねられ、他のユーザーはチャンネルごとに購読できる。ブラウザで閲覧中のページに購読中のチャンネルに属する付箋があれば、それが表示されるのだ。同じページのアノテーションを初校と再校などの時間軸、または部署ごと、などに分類するという使い方が考えられる。アノテーションに対しては、タグを付けることができる。対応フォーマットHTML共有方法RSS、タグインストール必要ユーザー登録必要アノテーションを加えた状態Twiddla(ツィドラ)http://www.twiddla.com/内容付箋やハイライトに加えて、線や丸、四角形をWebページ上にドローできるので、レビュー結果をグラフィカルに伝えやすい。対象ページのURLをTwiddlaのサイト上のフォームに入力すると、そのコンテンツが背景として表示されてアノテート可能な状態になる。プラグインやアドオンのインストールは不要だ。ユーザー登録でさえ不要で、自動生成されるURLを相手に伝えればリアルタイムでコラボレーションできる。特定の指定ユーザーのみと共有する設定はできないが、今回紹介したサービスの中ではもっとも手軽に利用できる。参加ユーザーによって追加されるアノテーションの状態をスナップショットとしてバージョン管理できるのが意外と便利だ。アノテーションの種類ペン、図形、付箋、スタンプ対応フォーマットHTML共有方法ランダムURLインストール不要ユーザー登録不要アノテーションを加えた状態オンラインサービス【アップロードタイプ】A.nnotate(ア・ノテート)http://a.nnotate.com/内容共有したいコンテンツのURLを指定するだけでなく、PDFやWordなどのファイルをアップロードすることができ、幅広いレビューに活用できる。アノテーション方法としては付箋を貼り付けるだけなので、画像の位置やレイアウトなどのグラフィカルな修正指示には向かない。無料アカウントは月間アップロード数に制限がある。自社サーバーに自分でインストールすることもできるため(10ユーザーで2,000ドルから)、セキュリティのポリシーのために外部ネットワーク上のサービスを利用できない企業でも導入できる。APIが公開されているため、他のシステムとの連携も可能だ。共有方法ランダムURLインストール不要ユーザー登録必要(閲覧のみのゲストは不要)アノテーションを加えた状態ShowDocument(ショウ・ドキュメント)http://www.showdocument.com/内容アップロードしたドキュメントをFlashのビューワーで閲覧しながらアノテートできる。他ユーザーのマウスの動きが見えたり、レビュー参加者とチャットができたりするなど、リアルタイムのコラボレーションを想定して作られている。アップロード後に自動発行されるURLを入力すると、誰でもセッションに参加できる。主催者がログアウトするとセッションが終了するため、同時参加する必要がある。画像共有機能つきメッセンジャーのような位置づけだ。共有方法ランダムURLインストール不要ユーザー登録不要アノテーションを加えた状態Vyew(ビュー)http://vyew.com/site/内容URL指定に加えて、HTMLやPDF、Wordなどのファイルをアップロードできる。アノテーションとしてはハイライトとペン、付箋が使えるため、表現力は高い。リアルタイムのコラボレーションが強力で、同時参加者のマウスの動きの表示、チャット/音声チャットなどにも対応する。無料版は広告が表示され、アップロード数などに制限がある。他と比べてかゆいところに手が届く機能が多く、全体的に完成度が高い。アノテーションが組み込まれたCMSもある。レビューや承認のワークフローを流すと、レビュー者はブラウザ上で鉛筆ツールや付箋を使ってレビュー結果を入力できるのだ。それ以外のCMSでも、運用を工夫すれば上記のようなサービスを併用できる。(アドビシステムズ)http://www.adobe.com/jp/products/acrobat/WebページをPDF化すれば、Acrobatの共有レビュー機能を使ってマルチユーザーで同時に注釈を入れることができるようになる。PDF上でテキストを選択してDeleteキーを押すと削除を指示したことになり、取り消し線が表示される。テキストの途中をクリックしてタイプすれば、テキスト追加を表す記号と吹き出しが表示される。ステータスを設定することもできるなど、印刷物で培われた校正のノウハウが詰まっている。Publisher(EMCジャパン)http://japan.emc.com/products/detail/software/web-publisher.htmiiMarkupサーバーのSDKを組み込めば、ワークフローからアノテーション機能を呼び出すことが可能になる(別途ライセンスが必要)。ペン、付箋、ハイライト、テキスト差し替えが可能だ。Annotateと呼ばれるアノテーション機能がワークフローに組み込まれている。付箋、ハイライト、ペンが利用可能だ。まこと)Webビジネス歴24年。UXとIAの分野を開拓後、楽天やWebCrewなどの事業会社においてIT・UX・アナリティクス活用による改革を推進。Analytics(SiteCatalyst)の企画・開発・啓蒙に携わる。2014年に帰国し独立。コンセプトダイアグラム提唱者。2008年文部科学省アドバイザー委員。2014年Web人賞受賞。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!伝説のTwitter企業アカウント“中の人”の先駆け。いいね!「おもてなし」は思考停止ワード。いいね!私は変人コレクター。いいね!続き最新のニュースデジタルによる「仕事の自動化」、日本は無関心な人が主流。コンテンツマーケター募集です(東京勤務)。“スキル不足PM・名ばかりPM”問題、サポートや教育が足りない企業側に原因?【ネオマーケティング調べ】アマゾン日本事業の売上高は約1.7兆円【Amazonの2019年実績まとめ】アドビが「Photoshop」デスクトップ版と「iPad」版に新機能を追加、誕生30年の記念で「おもてなし」は思考停止ワード。Patterns』を3名様にプレゼント!【受付終了】企業がDXに向かう取り組み方を考える『デジタルファースト・ソサエティ』を3名様にプレゼント!すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。