01-05_Claude使いこなしガイド
出典: 制作部署マニュアル Claude使いこなしガイド（自動ミラー・正本は /Users/oogushiyuuki/manual-terasu）
Claudeで制作クオリティを10倍上げる
ClaudeはTERASUのHP制作において「賢い制作パートナー」として使う。ただし使い方が9割で、同じ素材を渡しても指示が雑なら雑な出力が返ってくる。この章は「初めて触る人がつまずかない基礎」から「上級者がさらにクオリティを上げるための技」まで、制作の現場で即使える形で整理した。
初心者が最初に知ること（3つだけ）
指示は「丸ごと渡す」のが正解
Claudeへの指示で一番多い失敗が「情報を出し惜しみする」こと。
| パターン | 精度 |
|---|---|
| 「キャッチコピー作って」 | 汎用すぎて使えない |
| 「清掃会社のキャッチコピー作って」 | まだ弱い |
| 「都内の個人・中小向け清掃会社。30〜50代のビジネスオーナーがターゲット。『頼めば確実に来てくれる・安心感』で差別化したい。トーンは堅苦しくなく、でも軽すぎない感じで5案」 | 使えるものが出てくる |
渡す情報が多いほど精度が上がる。 迷ったら「クライアントのヒアリング内容をそのままコピペ」でいい。余計な情報を渡しすぎる失敗はほぼない。
渡すといいセット：
- 事業概要（何をやっている会社か）
- ターゲット（誰に向けて）
- 差別化ポイント（なぜ選ばれるか）
- トーン（例：親しみやすい / 高級感 / スピード感 / 信頼・誠実）
- 参考URL（「このHPのコピーみたいな感じで」はとても有効）
一発で完成を求めない
Claudeが返す最初の出力はたたき台。
「違う」「こんな感じじゃなくて」「もっと短く」——これだけで十分。Claudeは前の会話を覚えているので、こまかく修正を重ねながら育てていくのが正しい使い方。
一発で完璧を目指して長い指示を書くより、短く投げて・返ってきたものを直す の往復の方が速く完成する。
怖くない。コードを貼っても壊れない
「コードが何か分からない」「貼ったら壊れそう」——この恐怖は不要。
- 出力されたコードはそのままコピー&ペーストしてOK
- 意味が分からなくても「貼って確認」が最速
- もし画面が崩れても、tar.gzバックアップ（GitHubを使っている案件なら
git revert）で元に戻せる - Claudeは何かを壊す権限を持っていない。出力するだけ
バックアップを取ってから適用する——この順番を守れば、失敗は全部やり直せる事故で終わる。
制作フロー別・この場面でこう使う
TERASUの制作フロー（hp-flow）の各ステップで、Claudeをどう使うかをまとめた実践ガイド。
| 場面 | 渡し方 |
|---|---|
| キャッチコピー・コピー文 | 事業概要＋ターゲット＋トーン＋「5案出して」 |
| クライアント原稿の整え | 原稿をそのまま貼って「HP向けに読みやすく整えて」 |
| 参考HPの構成分析 | URL貼って「このHPのセクション構成と、なぜ効果的かを分析して」 |
| コードのエラー修正 | エラーメッセージをそのままコピペ＋「何が起きているか」を1行添える |
| スマホ対応の崩れ修正 | 「このHTMLを貼るので、スマホで崩れている部分を直して」で解決率8割 |
| 著作権チェック | 「このセクションの文章が参考サイトと似すぎていないか確認して」 |
| FAQ・よくある質問生成 | 「この事業でよく聞かれそうな質問と答えを10個」 |
| 代替テキスト（alt）生成 | 「この画像の内容から適切なalt属性テキストを書いて」 |
上級者が精度をさらに上げる5つの技
技 コンテキストを先に積む
Claudeは会話の中で積まれた情報を使って出力する。セッション冒頭に「プロジェクトの文脈」を渡すだけで、その後の出力がまるで変わる。
▼ セッション冒頭に貼るテンプレ
---
今日の作業：○○株式会社のHP制作（hp-flow ステップ○）
クライアント概要：都内の〇〇会社。ターゲットは〜。差別化は〜。
制作中HP：https://preview.client-〇〇.pages.dev/
トーン：〜
---
途中から精度が落ちてきたら「さっきの案件の概要を踏まえて」と一言添えるだけでリセットできる。
技 役割を与える
「TERASUのHP制作担当として」「このクライアントのマーケターとして」と前置きするだけで、出力のトーンと視点が変わる。
例：「TERASUのHP制作担当として、このクライアントのファーストビューに最適なキャッチコピーを5案出して」
汎用的な答えではなく、制作現場の文脈に合った出力になる。
技 比較案を出させてから選ぶ
「これで書いて」と一発指定するより、「A案・B案・C案の3パターン出して」の方が質が上がる。
理由：Claudeは選択肢を複数出すとき、意図的に違うアプローチをとる。あなたが思いつかなかった角度が入ることがある。
- 全部採用しなくていい
- 「A案のトーンでB案の構成を使って」のミックスもOK
- 「この中で一番○○に効くのはどれ？理由も」と聞くとさらに考えが整理される
技 「ここだけ変えて」を使う
HTML/CSSを丸ごと渡すのではなく、変えたい部分だけを指定する方が速くてブレが少ない。
例：「このCSSのh1のfont-sizeとfont-weightだけ変えて。他は絶対に触らないで」
「他は触らないで」の一言が重要。Claudeは親切心で別の部分も最適化しようとすることがあるが、それが崩れの原因になる。変更範囲を明示的に絞るのが上級者の使い方。
技 Claude Codeで制作作業ごと任せる（最上級）
Claudeのチャット版から一段上の話。Claude Code（ターミナル版）を使うと、ファイル操作・コード修正・デプロイまでClaudeに対話で実行させられる。
TERASUの /hp-flow コマンドはこのClaude Code上で動く。制作未経験でも、コマンドを打つだけで「参考HP分析→再現→オリジナル化→プレビュー→公開」の全12ステップをガイドしてくれる。
「チャットで指示を出して、自分でコードを貼る」段階から「Claude Codeに制作作業の実行ごと任せる」段階に上がると、制作速度が別次元になる。興味が出てきたら大串に相談を。
やりがちなミス3つ
| ミス | なぜ起きるか | 対策 |
|---|---|---|
| 長文を一気に作らせて「なんか違う」で詰まる | 最初の指示が曖昧なまま全力で作らせた | まず「方向性だけ確認させて」→OKなら「全文書いて」の2段階 |
| 何度修正しても変わらない | 同じセッションで詰め込みすぎてコンテキストが重くなった | 新しいセッションを開いて、最初のコンテキストだけ再度貼り直す |
| コードを貼ったら画面が崩れた | バックアップを取る前に適用した | バックアップ（tar.gz or git commit）→適用→確認、の順番を守る |
まとめ・チェックリスト
結論：Claudeは「丸ごと渡して・往復で磨く」が基本。上級になるほど「文脈を最初に積む・比較案で選ぶ・変更範囲を絞る」を使いこなす。
初心者チェック：
- [ ] 「情報を丸ごと渡す（事業概要＋ターゲット＋トーン）」を意識できた
- [ ] 最初の出力はたたきとして「違う部分だけ直して」で往復できた
- [ ] バックアップを取ってからコードを適用する順番を守れた
上級者チェック：
- [ ] セッション冒頭にプロジェクト概要を貼ってコンテキストを積めた
- [ ] 「〇〇として」の役割付与を試した
- [ ] 「A案・B案・C案の3パターン」で比較してから選んだ
- [ ] 「ここだけ変えて・他は触らないで」で変更範囲を絞れた
- [ ] Claude Codeを使いこなす段階に興味が出てきた
どんなに高性能なツールでも、使い方次第で全く別物になる。Claude も同じ。渡す情報・指示の仕方・往復の回し方——この3つを意識するだけで、制作クオリティと速度が明確に変わる。
修正指示の出し方（手を止めない進め方）
修正は一気にまとめて送ってOK
「一個ずつ送った方が丁寧」と思いがちだが、まとめて送る方が効率がいい。Claudeは複数の指示を同時に処理できる。
送り方のテンプレ：
＜トップページ＞
・ファーストビューのキャッチコピーをもっと簡潔に（20文字以内）
・「お問い合わせ」ボタンの色をオレンジに
・会社紹介のテキストの最後の段落を削除
＜会社概要ページ＞
・代表者名を「山田 太郎」に修正
・設立年を2018年に変更
ポイント：
- 冒頭にどのページかを明示（＜トップページ＞ ＜会社概要＞ など）
- 箇条書きで列挙する
- 1回の送信でどれだけ多く送ってもOK
「Claudeが作っている間に次の修正箇所を探す」が最速
Claudeが修正を実行している間、手を止めて待つのは時間のムダ。
Claudeが動いている → あなたは次の修正箇所を探す → できたら次の指示を投げる
このループを回すと、体感速度が2〜3倍になる。制作経験者ほどここで差がつく。
1セッション＝1HP の鉄則（絶対に守る）
別々のセッションで同じHPを同時に触ると、事故が起きる。
例：AさんのセッションとBさんのセッションが同じHPのファイルを同時に編集→pushする→後からpushした方が前の修正を上書きして消す。
1つのHPは、1つのセッションで触る。
複数人で制作する場合も、修正を入れる時間帯をずらすか、GitHubのブランチを分けて衝突を防ぐ（→ GitHubの章を参照）。
セッションの仕組みについては次の章「Claude 基礎知識」で詳しく説明している。
Claudeの挙動がおかしくなったら
Claudeは長時間使い続けると、まれに指示が通らない・同じことを繰り返す・前の内容を忘れるなどの挙動が起きることがある。その時の対処法を順番に試す。
/handoff で別セッションへ引き継ぐ（最優先）
一度おかしくなったセッションは、その後もずっとおかしい状態が続く。「少し直せばまた使える」ということはほぼない。
迷わず別のセッションに切り替える。その際、現在のセッションで /handoff コマンドを実行すると、今どこまで進んでいるか・どのファイルを触ったか・次にやることが整理されて引き継ぎメッセージになる。新セッションにそのメッセージを貼れば、ほぼ完全にそこから再開できる。
/handoffが一番精度の高い引き継ぎ方法。まずここから試す。
おかしいセッションで /handoff もできない場合
セッションがひどく壊れていると、/handoff 自体の出力も信頼できないことがある。
その場合は：
1. 新しいセッションを開く
2. 「○○のHPの修正を別のセッションから引き継ぎたい」と伝える
3. 制作中のHPのURL・今日触ったファイル・やりたいことを手で貼り直す
手動引き継ぎになるので /handoff より精度は落ちるが、おかしいセッションで出した /handoff よりは信頼できる。両方試してみて、精度が高い方を使う、という判断でOK。
Claude を一旦ログアウト → 強制終了
アプリレベルのキャッシュや状態が原因でおかしくなっているケース。
- Claudeアプリからログアウト
- アプリを完全に終了（Macなら
Cmd + Q） - 再起動して新しいセッションを開く
PC の再起動
ログアウト・強制終了でも直らない場合。メモリやシステムレベルのリセット。
時間をあける
Claudeのサーバー側の一時的な障害や混雑が原因のこともある。5〜15分待ってから試すと自然に解消することが多い。
まとめると：① /handoff → ② 手動で新セッションに引き継ぎ → ③ ログアウト → ④ PC再起動 → ⑤ 時間をあけるの順で試す。「少し様子を見ながら同じセッションで粘る」は一番時間のムダになるので、早めに切り替えを判断する。