【Studio初心者ガイド】Preview Commentの使い方｜ライブプレビューでコメントする方法

Web制作では、修正箇所の共有に手間がかかりがちです。

Studioの「Preview Comment」を使えば、ライブプレビュー上でコメントでき、確認とフィードバックを同時に行えます。

本記事では、Preview Commentの使い方と基本を解説します。

Preview Commentとは

Preview Commentは、ライブプレビュー上で要素に直接コメントを追加できる機能です。

編集内容を確認しながら、その場でフィードバックを残せます。追加したコメントはエディタとライブプレビューの両方で確認できます。

さらに、モバイルにも対応しており、PCを開かずにコメントの投稿や確認、返信まで行えます。

コメントをクリックすると、該当箇所へ自動でスクロールし、対象要素にフォーカスされます。

テキストで指示を書き出したり、他ツールを併用する必要がなくなり、制作のやり取りをStudio内で完結できます。

主な機能は次のとおりです。

・プレビュー画面上の要素をクリックしてコメントを追加できる
・追加したコメントを一覧で確認できる
・コメントに返信し、スレッドとしてやり取りできる
・コメントの位置がピンで表示される
・コメントをクリックすると該当箇所へ自動で移動し、要素にフォーカスされる
・エディタとライブプレビューでコメント内容が同期される

利用環境

PCとモバイルのどちらでも利用できます。対応する利用環境は、Studioで作成したWebサイトの閲覧環境に準じます。

推奨閲覧環境

・ブラウザ：Chrome、Safari、Firefox、Edge
・OS：Windows、macOS、Android、iOS

それ以外のブラウザや古いバージョンでは、表示が崩れる場合があります。

ライブプレビューとの関係

Preview Commentはライブプレビュー上で使う機能です。

ライブプレビューとは、エディタの編集内容をブラウザ上でリアルタイムに確認するための機能です。

ライブプレビューとPreview Commentを組み合わせることで、確認とフィードバックを同じ画面で行えます。

ライブプレビューの表示手順

ライブプレビューを初めて利用する場合は、URLの発行から行います。

手順

1.エディタ画面右上の「ライブプレビュー」アイコン（赤四角）をクリックする

2.初回のみ「スタート」（赤四角）をクリックして、ライブプレビューを有効化する

3.ランダムなライブプレビューURL（赤四角）が自動発行されるので、それをクリックし、ブラウザでライブプレビュー画面を開く

ライブプレビュー画面では、現在プレビュー中であることを示す通知が右下に表示されます。

【注意】カスタムコードで追加した内容は、ライブプレビューには反映されません。

ライブプレビューでのレスポンシブ確認

レスポンシブレスポンシブデザインとは、画面サイズや解像度に応じて、Webサイトのレイアウトやデザインが調整される仕組みです。

パソコン・タブレット・スマートフォンなど、異なる端末での見え方を確認できます。

ライブプレビューで確認する場合は、ブラウザのウィンドウ幅を変更して見え方を切り替えます。

但し、エディタ上でブレイクポイントを「タブレット」に変更しただけでは、ライブプレビューの表示は切り替わりません。

確認例

・PCでライブプレビューを開き、ウィンドウ幅を840px以内に調整する
・タブレットやスマートフォンでライブプレビューURLを開く

ライブプレビューの共有方法

ライブプレビューは、URLまたはQRコードで共有できます。

URLを送るか、QRコードを読み取ることで、他の端末でも同じ画面を確認できます。

例えばスマートフォンから確認すれば、実際のスマホ表示に近い状態でチェックできます。

ライブプレビューのURLを削除するには

ライブプレビューで発行したURLは、不要になったタイミングで削除できます。

削除すると、そのURLからのアクセスは無効になります。

削除手順

1.エディタ画面右上の「ライブプレビュー」（赤四角）をクリックする

2.「ライブプレビューURLを削除」（赤四角）を選択する

削除後に再度共有する場合は、新しいURLを発行する必要があります。

Preview Commentの使い方

ライブプレビュー上でコメントを利用するには、ログインとコメントモードの切り替えを行います。

プレビュー画面から直接操作でき、追加したコメントはエディタと同期されます。

ライブプレビューでは、コメントの追加と追加済みコメントの閲覧が可能です。コメントの編集や削除はできないため、その場合はStudioエディタのコメント機能から操作します。

なお、ライブプレビュー上でのコメント編集・削除については、今後のアップデートで対応予定です。

使い方手順

1.ログインする

ライブプレビュー画面左下の「Login」（赤四角）をクリックし、該当プロジェクトに参加しているStudioアカウントでログインします。

エディタからプレビューを開いた場合でも、コメント機能を利用する際は再ログインが必要です。

ログインが完了すると、プレビュー画面左下の表示がコメントアイコンとユーザーアイコン（赤四角）に切り替わります。

2.コメントモードに切り替える

ログイン後、画面左下に表示されるコメントアイコン（赤四角）をクリックすると、コメントモードに切り替わります。

3.コメントを追加する

コメントを残したい要素をクリックすると入力欄（赤四角）が表示されます。

内容を入力し、送信ボタン（赤四角）をクリックするとコメントが追加されます。

4.コメントを確認する

コメントアイコンをクリックすると、追加済みのコメントが一覧（赤四角）で表示されます。

エディタで追加されたコメントも同様に表示されます。コメントをクリックすると該当箇所へ移動し、スレッドが表示されます。

コメント追加のWebhook通知

コメントが追加されたタイミングで通知を受け取りたい場合は、Webhookを設定できます。

コメント追加は、サイト公開・更新・非公開と同様に通知対象に含まれます。

Webhook通知とは

Webhookを設定すると、次のタイミングで通知が送信されます。

・サイト公開
・サイト更新
・サイト非公開
・サイトへのコメント追加

Webhookは、1プロジェクトにつき1つのURLのみ設定できます。

設定手順

1.プロジェクトダッシュボードの「プロジェクト設定」（赤四角）にアクセスする

2.「Webhookの編集」（赤四角）をクリックする

3.通知を受け取るURLを入力し、「保存」をクリックする

4.「テスト送信」で動作を確認する

無効化の手順

通知を停止する場合は、次の手順で設定を変更します。

1.「Webhookの編集」を開く

2.URLを削除して保存する

3.ステータスがOFFになることで無効化される

まとめ

Preview Commentは、ライブプレビューを見ながら、その場でコメントを追加できる便利な機能です。

確認からフィードバックまでを同じ画面で進められるため、やり取りの手間を減らしながら制作を進めやすくなります。