🧪 実践 01スマホで崩れたページを「指さすだけ」で直す（Orca のフィードバック）
Orca のフィードバック機能。直してほしい所をクリックして、日本語で書くだけ。コードは読みません。
今回の流れ
- 崩れを見つける — Orca のブラウザで、表示の幅をスマホサイズに切り替える
- 指さして、日本語で書く — 吹き出しのアイコンで直してほしい所をクリックし、指示を書く
- Claude に送る — ためた指示を、動いている Claude にまとめて渡す
- 確かめる — スマホの幅とパソコンの幅で、崩れていないか見る
始める前に用意するもの
- Orca — インストール済み
（無料） - Claude Code — インストールと
ログインを済ませておく - 直したいページ — Orca のプロジェクトに
入っている HTML
例に使う「珈琲 こもれび」は、この回のために用意した架空のお店のページです。Orca の入れ方は前回の記事で解説しています。
PART 1 崩れを見つける
パソコンでは普通に見えるページでも、スマホで開くと崩れていることがあります
パソコンの幅では、ちゃんとできている
Orca のブラウザタブでページを開いたところ。見出しもメニューもボタンも、問題なく並んでいます
…メニュー →「ビューポートのサイズ」
ブラウザ右上の … を押して「ビューポートのサイズ」→「Mobile M（375×667）」。表示の幅がスマホと同じになります
スマホの幅で見ると、崩れていた
見出しが切れて、メニューとボタンは画面の外。カードもはみ出して、横にスクロールしないと読めません
PART 2 指さして、日本語で書く
Orca の「フィードバック」を使います。コードを読む必要はありません
吹き出しのアイコン＝フィードバック
ブラウザのツールバーにある吹き出しのアイコンを押すと「要素をクリックして Agent へのフィードバックを追加します」と出ます
直したい所をクリックして、書く
見出しをクリックすると入力欄が出ます。「スマホで見出しが切れてる」と日本語でそのまま書いて「追加」
メニューとボタンも同じように
ヘッダーには「メニューが画面の外に出てる」、ボタンには「ボタンが半分切れてる」。1か所ずつ追加していきます
指示が3つたまった
右下に「3件の注釈」として並びます。この時点では、まだ AI には送っていません
PART 3 Claude に送る
ためた指示を、まとめて1回で渡します
「送信」→ 動いている Claude
送信先の一番上に、いま動いている Claude が出ます。これを選ぶと、3件まとめて渡ります
Claude に届いたもの
書いた一言だけでなく、クリックした要素の場所（body > div.hero > h1 など）・クラス・スタイル・HTML までまとめて届きます。だから一言で直せます
31秒で直った
原因は、ページの幅が 1100px に固定されていたこと。見出し・メニュー・ボタンに加えて、カードの並びまで直してくれました
PART 4 確かめる
スマホの幅とパソコンの幅、両方で見ます
スマホの幅：直す前と後
見出しは2行に折り返し、メニューは2段に、ボタンは2つとも画面に収まりました
カードは1列に
はみ出していたカードは、スマホでは縦に1列で並ぶようになりました
パソコンの幅に戻しても崩れない
ビューポートのサイズを「デフォルト」に戻して確認。パソコンでも同じページで見られます
つまずきポイント
初めて開くフォルダだと、
送った瞬間に Claude が終了することがある
送った指示が「このフォルダを信頼しますか」の確認に吸われて「No, exit」が選ばれてしまうためです。先に一度 Claude を起動して「Yes, I trust this folder」を選んでおいてください。
今日のポイント
- … →「ビューポートのサイズ」でスマホの幅にする — パソコンだけで見ていると、崩れに気づけない
- 吹き出しのアイコンで、直したい所をクリックして日本語で書く — 場所の説明もコードもいらない。クリックした要素の情報は Orca が添えてくれる
- 「送信」で、動いている Claude にまとめて渡す — 1か所ずつ頼むより、まとめて送るほうが早い
直したら、スマホの幅とパソコンの幅の両方で確かめるところまでがセットです。
動画と記事は AI勉強会 にまとめています。