Webページにコメントや注釈を残す方法｜デザインレビューにも使える

「このボタンの文言、もう少し短くしたい」とWebページを見て思っても、それを伝えるにはスクリーンショットを撮り、赤枠を描いてチャットに貼る、という手間がかかります。自分用の確認メモなら、なおさら面倒で後回しになりがちです。

ページの気になる箇所に直接コメントを残せれば、この手間はかなり減ります。この記事では、Webページにコメントや注釈を残す方法と、Web制作のレビューでの使いどころを紹介します。

Webページに直接コメントしたくなる場面

ページ全体へのメモより、特定の箇所へのコメントが欲しくなるのは次のような場面です。

• 公開前のLPを見ながら、見出しや画像の修正点を洗い出す
• 管理画面の、ユーザーがつまずきそうな入力欄に気づきを残す
• 長い仕様書の中で、確認が必要な一文に印を付ける
• 競合サイトの構成で、参考にしたいブロックをメモする

どの場面でも、「どこについてのコメントか」が内容と同じくらい大事になります。「料金表の2列目」と文章で書くより、その場所に印があるほうが誤解がありません。

ピン付きコメントの活用方法

ピン付きコメントは、ページ上のクリックした位置に印を立て、そこにコメントをひも付ける方法です。地図にピンを刺すイメージに近く、ページをスクロールしても印は対象の要素に付いて動きます。

使うときのコツは、1つのピンに1つの指摘だけを書くことです。「余白が狭い、文言も長い、画像も古い」とまとめて書くと、どれが対応済みか分からなくなります。指摘ごとにピンを分けておけば、対応が済んだものから片付けられます。

Web制作・デザインレビューでの使い方

Web制作では、デザインカンプとブラウザでの実装結果を見比べるレビューが欠かせません。実装されたページの上で直接コメントできれば、指摘箇所を説明する文章を短くできます。

チームでフィードバックを集めて管理したい場合は、レビュー専用のツールも選択肢です。たとえばMarker.ioやBugHerdは、Webサイト上で集めたフィードバックをタスクとして管理するサービスで、どちらも有料プランが中心です（2026年10月時点、Marker.ioとBugHerdに無料プランはなく無料トライアルあり）。Pastelには機能を絞った無料プランがあります。

自分のチェックリストとして使うなら、拡張機能で十分なことも多いです。レビュー前に自分でページを確認し、ピンで気づきを残しておくと、ミーティングでそのまま説明できます。

メモ・コメント・スクリーンショットの違い

似たような目的で使われる3つの方法には、それぞれ得意なことがあります。

スクリーンショットは、ページが変わった後も「変更前」の状態を残せるのが強みです。修正前後を比べたいときは、ピン付きコメントと併用するとよいでしょう。なお、Fusenlyにはスクリーンショット機能はないため、OSやChromeの機能を使ってください。

Fusenlyでピン付きコメントを残す手順

Fusenlyでは、サイドパネルからピンを立てます。

1. コメントしたいページでFusenlyのサイドパネルを開く
2. 上部の「画面にピンを立てる」ボタンを押す
3. ページ上でカーソルを動かし、コメントしたい場所をクリックする（Esc キーでキャンセル）
4. 表示された入力欄にコメントを書く
5. 「Save」を押して保存する

立てたピンは、サイドパネルの「ピン」タブで一覧できます。対応が済んだピンはアーカイブしておくと、一覧が散らかりません。ピンの位置は後から移動でき、表示・非表示も切り替えられます。

ピンはサイドパネルを開いている間だけページに表示されます。サイドパネルを閉じれば、普段どおりの画面でページを閲覧できます。

よくある質問

コメントをほかの人と共有できますか？

Fusenlyのピンは、基本的に自分用のメモとして使う機能です。チームで指摘を集めて管理したい場合は、レビュー専用のツールを検討してください。

ページが更新されたら、ピンはどうなりますか？

Fusenlyは、要素のIDや周辺の文章など複数の手がかりからピンの位置を探し直します。対象が見つからない場合は、最後の位置に薄く表示されます。

ページ全体についてのメモも同時に書けますか？

書けます。サイドパネルの「エディタ」タブがページのメモ、「ピン」タブがピン付きコメントです。ページのメモの書き方はChromeでWebページにメモを残す方法を参照してください。

付箋型など、ほかのタイプの拡張機能との違いはChromeでWebサイトに付箋を貼る方法で比較しています。