インターネットのみなさん、こんにちは。せなです。
最近X（旧Twitter）のタイムラインを開くたびに「Claude Code」の文字列が視界に飛び込んできます。果たしてこれがエコーチェンバー現象なのか、本当に世間で流行っているのか真偽は定かではありませんが、AI驚き屋の一人としてClaude Codeに触れていきます（追記：どうやらAI驚き屋は廃れたらしいです）。
さて、僕自身はフロントエンドで本格的なWebサイトを実装した経験がまったくありません（コードは一応読めます）。そんな人間が、CTOであるづやさんからの「社内LPをClaude Codeで作れない？」という熱い期待に応えるべく、Claude CodeだけでLPを実装してみました。
|
CTO づやさん我らがCTO。今回の |
|---|
デザインカンプは弊社デザイナーのこばりんさんに作成していただきました。
|
デザイナー こばりんさんLPの全体デザインを行う（大量フィードバックで迷惑をかけました、Sorry）。メンバーページ |
|---|
結論から言うと、実装経験ゼロでも約2週間程度でデザインカンプからLP公開まで持っていくことができました。
目次
インストールとセットアップ
すでにインターネット上に多くの解説記事が出ている上に、公式でも詳細に解説されているので導入部分はざっくりといきます。
前提条件
個人でClaude Codeを使うにはProプラン以上が必要です（2026年3月現在、Proプランは月額20ドルで契約可能）。インストール方法はこちら。
インストール終了後、好きなディレクトリでClaudeを立ち上げましょう。ターミナルやコマンドプロンプト上などのCLIを起動し、作業したいプロジェクトやディレクトリに移動します。続いて、claudeを入力することでClaude Codeが起動します。
$ claude
Clawdくんが出てきました。ここからは通常のように日本語や英語などの自然言語でタスクを進められます。Claude Codeのクイックスタートも参考にしてください。
Claudeで使うコマンドですが、通常利用では個人的にこれらでなんとかなります。
| コマンド | 内容 |
|---|---|
/clear |
現在の会話履歴をリセット（作業が一区切りしたときに使う） |
/exit |
Claudeを終了。通常のターミナルに戻る |
/fork |
既存の会話状態を引き継ぎ、新しいセッションを始める コードの意図や実装を確認したいがコンテキストを汚染したくないときに使う |
/rewind |
さっきの会話やコード実装を無かったことにできる（要はロールバック機能） |
細かい挙動や他のコマンドについては公式のドキュメントを参考にしてください。
いったんClaudeに丸投げしてみる
Claude Codeはコマンドラインで動きますが、チャット形式でやり取りをするという点においてはClaudeやChatGPTのような対話型AIと変わりません。「こういうの作って」と投げれば、それなりに作ってくれます。
「Claude Codeを使ってみた！」系の記事をインターネットで調べたところ、どうやら計画させてから実装するほうが精度が良いようです。最初からAuto-Accept Mode（デフォルトの編集モード）作業させると、言語化が甘い部分をAI側の解釈で補完して進めてしまいます。結果として「いや、そうじゃないんだよな……」が頻発します。
まずはプランを立てるところからやってもらいましょう。ここで使うのがPlan Modeです。
Shift + Tabキーを押すことでAuto Accept ModeからPlan Modeに切り替えられます。
Plan ModeではClaude Codeが実際にコードを書く前にユーザーと対話を行い、サブエージェントが計画を立ててから実装するため、ユーザーとClaude Code間の齟齬を事前に潰せます。
TIPS：指示はファイルに書いて読み込ませる
経験上、Claude Codeへの指示はmdファイルやtxtファイルに文章として書き起こしてパスを渡すのが一番確実です。
理由は単純で、コマンドライン上で長文を書いていると途中で間違って送信してしまうからです（改行をミスってreturnキーで送信してしまいがちです）。
実際に僕が作った指示ファイルはこんな構成でした。
ポイントはセクションごとに指示を分割することです。最初に「全体を一気に作って」と投げたところ、途中からClaudeの解釈が入り込み、指示とは異なるレイアウトができあがりました。これはおそらくコンテキスト長の超過による自動圧縮（auto-compaction）が原因です。
セクション単位で区切ると、1回のやりとりで扱う情報量が適切に保たれるため、精度が格段に上がります。セクションの順番や命名もinstruction.mdのようなファイルに書き出しておくと、Claudeが迷子にならずに済みます。
今回は最終的に上記のような指示ファイルの構成に（後々得た知見ですが、分け過ぎてもトークン効率が悪いらしいので、少なめのほうがいいかもしれません）。
いざ実装。returnキーを押すだけのお仕事。
Plan Modeで方針を合わせたら、セクションごとに実装してもらいます。
実行途中はInstagramのストーリーでも見て待ちたかったのですが、ちょこちょこユーザーの操作を求められます。ファイルの書き込みに関してはAuto-Accept Modeを有効にしていれば問題ありませんが、ls, mkdirといったbashコマンドの実行は許可を求められるので、リラックスどころではありません。ついに人間はreturnキーを押すマシーンへとなりました。さながらディストピア小説です。
この間、本当にreturnキーを押して、あとは待つだけになる。
そこでsettings.jsonの出番です。この設定ファイルは、プロジェクト単位、グローバルに動作と選べるのですが、今回はプロジェクト内のみでコマンドを許可したいので、作業しているディレクトリに.claude/settings.jsonを作成します（公式ドキュメント）。サンプルとして下記に掲載します。
{
"permissions": {
"ask":[
"Bash(git push *)",
],
"allow": [
"Bash(npm run dev)",
"Bash(ls *)",
"Bash(cat *)",
"Read(~/.zshrc)",
],
"deny": [
"Bash(curl *)",
"Read(./.env)",
"Read(./.env.*)",
"Read(**/*.pem)",
},
}
それぞれの機能を説明しておくと、askはコマンド実行時にユーザーに許可をとり、allowは自動で実行、denyはそのコマンドを実行しません（ただし別の手段で同じ動作をするコマンドを実行する可能性はあります）。
他にもいろいろ許可リストにコマンドを加えて、破壊的な変更を含むコマンドをaskやdenyに指定しましょう。これでClaude Codeが作業している間に、次の旅行先をゆっくり選べます。
さて、Claude Codeが実装を終了し、ビルドに成功した模様です。
Figmaのデザインカンプとの差異はゼロではないものの、修正すれば使えそうです。
さっそくCTOに報告したところ——
社内LPはもうClaude Codeでいいかもしれない……運用含めていろいろ試していこう！
CTOにもAI驚き屋になっていただけたようでなによりです。
アニメーション実装で苦戦。”なんかもっとこう”を多用する人間
静的なレイアウトが形になったところで、CTOから追加のオーダーが飛んできました。
アニメーションも実装してみようか
本当にできるんだろうか。
アニメーションは「動きの質感」が重要なので、言語化の精度が問われます。兎にも角にもやってみないとわからないので、いったんやり取りしてみます。
この時点でだいぶ雲行きが怪しいやり取りです。Plexusっていうんですね。初めて知りました。
実際に確認するとそれっぽいものは上がってきていますが、正確に指定できていないのでここからデザイナーの想定に近づくようにしていきます。
実際のやりとりがこちらです。
僕: 2層の構造にしてほしくて、後ろ側ブラーかけてください。
Claude: [奥レイヤーと手前レイヤーを作成]
僕: いい感じなんですが、なんかこうちょっと距離感近く見えるようにしたくて。あとノード間のコネクション数をちょっと増やしてください。
Claude: [ノード数の調整 + 接続距離の拡大を実装]
僕: ああ、いい感じです。もうちょっとデカくできますか。あとちょっと動き早くしてください。
Claude: [移動速度を調整 + ノードを拡大]
「なんかもっとこう」を多用しがち。僕のふわふわしたわたあめのような指示を、Claudeの補完能力がなんとか形にしてくれている図です。ちなみにAIに謀反を起こされないように「ありがとうございます」「助かります」を毎回添えており、そのぶんのトークンは確実に無駄遣いしています。そのうちこれも経費の無駄遣いや環境負荷として怒られそうです。
さて、できあがったものですが……
えぐい。自分で書けと言われたら胃が痛くなるレベルの実装が、対話だけで出てきます。しかもこのアニメーション部分に関しては、参考画像、色指定と動きの説明のみで指示を出しました。プロンプトエンジニアリングの偉大さに気付かされます。
今後の時代、プログラミング能力と日本語能力、どちらも大事そうです。
TIPS：FigmaとClaude CodeのMCP接続について
今回はFigmaのデータがあるわけですが、いちいちマージンやフォントサイズの情報を流しているといくら時間があっても間に合いません。そこでClaude CodeとFigmaをMCP（Model Context Protocol）接続することで、直接データを読み取れるようにします。Figmaの場合、接続方法は2つあります。
| 接続方法 | 特徴 |
|---|---|
| デスクトップアプリ経由（ローカルサーバー） | セレクションベースでデザインデータを読み込める |
| リモートサーバー経由 | ファイル全体を読み込む |
個人的にはデスクトップアプリ経由が圧倒的におすすめです。理由は「ここだけ修正したい」というときに、Figma上で修正箇所だけをClaudeに渡せるからです。ファイル全体を読み込ませると情報過多でAIが混乱しがちですが、セレクションベースなら的確に「このデザインのこの部分」を伝えられます。ただし、デスクトップアプリ経由の場合は有料ライセンスが必要になることがあります（参考：FigmaのMCP接続）。
LP実装において、この連携は本当に重宝しました。セクション単位で「ここのデザインに合わせて」と投げる運用との相性が抜群です。
デプロイ
いよいよデプロイしてできたのがこちらです。
実際のサイトとしてうまく動いています。
（思いっきりカットしていますが、ここに至るまでデザイナーからめちゃくちゃフィードバックをもらい、マージン調整などの修正を行っています）
もともとデザイン時にマージン指定などが細かにされてたおかげで、最終的に想定とほぼ同じものができたのではないでしょうか。微調整はもちろん必要でしたが、「ゼロから手で書いていたら何日かかっただろう」と考えると、恐ろしいコスパです。
おすすめの運用フロー
今回の流れをまとめると、以下のようなサイクルです。
- instruction.md に全体構成・技術スタック・命名規則を記述
- plan mode で方針をすり合わせ
- planに基づいて実装
- Figma連携はセレクションベースで必要な箇所だけ渡す
- 実装を確認・修正
番外編：プラグインで開発を快適に
Claude Codeはプラグインを導入することで、より自分好みに実装を進めることができます。Claude Code内のマーケットプレイスからプラグインを探して入手することができます。
以下はどちらとも公式のプラグインではなく、サードパーティ製ですので、使用は自己責任でお願いします。
superpowers
個人的に重宝したのがsuperpowersというプラグインです。タスクの実行前にユーザーとの対話を挟み、詳細な行動計画を立ててから実装に入るモードを強制してくれます。plan mode同様、実装前に計画を立ててから実装しますが通常のplanと比べて仔細に計画してくれている気がします。
UI UX Pro Max
他にも、UI UX Pro MaxもLPなどのデザインを作成する際に役立ちました。UI/UX関連の作業をする際に自動でトリガーされるので、ユーザーが意識せずに使えます。ストックしているデザインモデルを参考にサイトを作成するので、比較的Webサイトの形が崩れにくい印象です。
まとめ
今回Claude Codeで実装したLP、テーマが「AI駆動開発」なんです。つまりこの記事は、AI駆動開発を紹介するLPを、AI駆動開発で作ったというマトリョーシカみたいな構造になっています（ちなみにこのまとめは半分AIに書かせています、もはやAI介護ですね）。
実装経験ゼロの人間がClaude Codeだけでデザインカンプからデプロイまで持っていけたこと自体が、AI駆動開発の可能性を一番リアルに証明しているんじゃないかと思っています。
ここまでAIを大々的に推してきましたが、「AIが全部やってくれるから人間は不要」という話ではありません。デザインカンプを作ったのは弊社デザイナーで、「ここをこうしたい」という意思決定は最後まで人間がやっています。AIは”実装力”を民主化してくれるけど、”何を作るか”を決めるのは相変わらず人間の仕事です。
CTOに最終報告をしたところ、「次はファーストビューだけ提供するのでまたLP作って」と言われました。
AIエンジニアに転職ですかね。（次回に続く？）
