logo

[ウェブサービスレビュー]全工程ブラウザ上で完了--ウェブに注釈を入れる「Markup」

  • このエントリーをはてなブックマークに追加
Medium
内容:「Markup」は、ウェブページのスクリーンショットを撮り、それに注釈をつけて相手に送ることができるウェブサービスだ。線、矩形、円、矢印に加えてテキストツールといった描画ツールが用意されており、相手に見てほしい箇所に印をつけて送ったり、誤記に注釈を入れて訂正を依頼したりと、さまざまな用途に利用できる。
  • 「Markup」トップページ。スクリーンショットを撮影するキャプチャ機能、その画像に注釈を入れるアノテーション機能、そして画像をクラウドに保存してURLを発行する機能が合体したサービスだ

 「Markup」は、ウェブページのスクリーンショットを撮り、それに注釈をつけて相手に送ることができるウェブサービスだ。相手に見てほしい箇所に印をつけて送ったり、誤記に注釈をつけて訂正を依頼したりと、さまざまな用途に利用できる。

 まずは下準備として、サイト上に掲載されているブックマークレットをブラウザに登録しておく。つぎに注釈をつけたいウェブページを表示し、ブックマークレットをクリック。するとウェブページが1枚の画像としてクリップされるので、画面右上に表示されているパレットから描画ツールを選んで注釈を書き込んだのち、「PUBLISH」をクリックして共有URLを発行する。これをコピペし、メールやメッセンジャーなどで相手に送りつければ、注釈が入ったウェブページを相手に見てもらえるというわけだ。

  • まずブックマークレットを登録する。ブラウザのブックマークバーに「GET MARKUP」と書かれた画像をドラッグ&ドロップし、ブックマークバーに「Markup」と表示されれば準備完了

  • 目的のウェブページを表示した状態で、ブックマークバーの「Markup」を押すとキャプチャが行われる

  • 見た目がそっくりなので判別しづらいが、画像化された元ページが表示されたところ。右上に表示されている描画ツールによる書き込みが可能

 描画ツールの種類は、線、矩形、円、矢印に加えてテキストツールと、注釈を入れるのに必要な機能がひと通りそろっている。線の太さはもちろん色の変更も可能なので、書き込むメンバーごとに色を変えたり、また重要度によって色を変えるなどといった活用方法が考えられる。

 本サービスのメリットは、従来のようにローカルにいったん画面を保存してから注釈を記入するといった手間が一切必要なく、ブラウザ上の操作ですべてが完結することだ。描画ツールを用いるにあたってソフトをインストールする必要もなく、キャプチャした画像をメールに添付して送るわずらわしさもない。同種のサービスではウェブページの表示や注釈に日本語が使えない場合もあるが、本サービスはその点でも安心して利用できる。

  • 矢印ツールとテキストツールを使って注釈を入れた状態。日本語もきちんと入力できる

  • 矩形ツールと円ツールを使って、もとのページに注釈を入れた状態。線の太さや文字サイズ、色の変更にも対応する

  • 終わったら「PUBLISH」を押し、上部の「slide to publish」というボタンを右にスライドさせることで共有URLが発行される

 いったんPDFに出力して注釈を入れる方法と比較しても、スクリーンショットに直接書き込むことから、正確なレイアウトを保ったまま注釈が入れられるのはメリットだ。レイアウトのずれや文字化けをサイト管理者に伝える用途では、PDFよりも伝わりやすいだろう。

 一方、ページを画像化して注釈を書き込むことになるので、文字選択ツールを使って差し替えのテキストを記入するといったことはできない。このあたりは一長一短だろう。

 デメリットはおもに二つある。一つはURLの削除機能がなく、サポートにメールで削除を依頼しなくてはならないこと。URLはランダムな文字列なので第三者に見られる危険性は低いとはいえ、将来的には改善を期待したいポイントだ。もう一つはブラウザの種類によって注釈の位置がずれる場合があること。相手にURLを知らせる際は、閲覧するブラウザを指定したほうがよいかもしれない。

 アイデア次第でさまざまな用途に使えるサービスであることは間違いないので、これらの点に気をつけて活用するとよいだろう。

  • 共有URLが発行された。これをコピペし、メールやメッセンジャーなどで相手に送るとよい

  • 受け取った共有URLを開くと、注釈が入った状態のページが表示される

  • もとのブラウザと表示するブラウザが異なっていると、注釈の位置がずれることがあるので注意したい。ちなみにこれはChromeで入れた注釈をInternet Explorer(IE)で表示したところ

-PR-企画特集