Claude Code 活用のコツ
Claude Codeをもっと上手に使うためのコツをまとめました。これらのポイントを意識するだけで、作業効率と仕上がりの質が大きく変わります。
プロジェクトを「セクションごと」に分けて作る
プロジェクト全体を一度に作ろうとしないでください。セクション（部分）に分けて、一つずつ完成させていくのが成功の鍵です。
🏠 家を建てる時と同じです。基礎→骨組み→外壁→内装→設備、と順番に進めますよね。「家を全部一度に建てて」とは言わないはずです。ウェブサイトも同じです。
「物件紹介サイトを作って。ヘッダー、物件一覧、検索機能、物件詳細ページ、お問い合わせフォーム、フッター、全部入れて」
「まずヘッダーを作って。会社ロゴを左、ナビゲーションメニューを右に配置して」
一度に全部指示すると、Claude Codeは全体のバランスを取ろうとして、各部分の品質が下がります
「全ページのデザインを変えて。色をもっと明るくして、フォントも変えて、レイアウトも調整して」
「ヘッダーの背景色を #2d5be3 に変えて」→ 確認 →「次にフォントを Noto Sans JP に変えて」→ 確認
一度に複数の変更を指示すると、どの変更が問題を起こしたか分からなくなります
おすすめの進め方
具体的に書く
曖昧な指示は曖昧な結果になります。何が欲しいかを明確に伝えましょう。
「お問い合わせフォームを作って」
「お問い合わせフォームを作って。入力欄は名前、メールアドレス、電話番号、お問い合わせ内容の4つ。送信ボタンは青色で」
完成イメージを言葉で説明する
レイアウトや配置を言葉で伝えると、イメージ通りのものが出てきやすくなります。
「かっこいいトップページを作って」
「トップに大きな物件写真、その下に3つの特徴を横並びのカードで表示、さらにその下にお客様の声のセクションを追加して」
参考サイトを伝える
「こんな感じ」という参考があると、デザインの方向性が合いやすくなります。
「おしゃれなデザインにして」
「○○不動産のサイトのような、白基調でシンプルなデザインにして。写真を大きく使う感じで」
色やサイズは具体的な数値で
「もう少し大きく」より「フォントサイズを20pxにして」の方が確実です。
「文字をもう少し大きくして」
「見出しのフォントサイズを24pxにして」「ボタンの色を #2d5be3 にして」
よく使う指示フレーズ集
そのままコピーしてClaude Codeに貼り付けられる便利なフレーズです。
ここまでの変更を保存して今の変更を元に戻して今の状態をブラウザで確認したいスマホでどう見えるか確認したい最後に
最初から完璧を目指す必要はありません。Claude Codeと一緒に、少しずつ良いものを作っていきましょう。慣れてくると、どんどん効率よく作れるようになります。困ったらいつでもエンジニアに相談してください。