- 投稿日：2026/04/03
- 更新日：2026/04/03
Claude Code、みなさん使ってみましたか？
私は普段、仕事でC言語を扱い、趣味でHTML/CSS/JavaScriptを触る程度のITエンジニアです。ちょっとしたアニメーションやスマホ用のハンバーガーメニューを実装しようと思うと、いちいち調べながらの作業になるため、まともにやれば最低でも丸1日がかりの作業になります。
今回はあえてコードを一切自分では触らず、すべて Claude Code に任せてホームページをリニューアルするという実験をしてみました。デリバリー専門店「元気玉」のホームページが舞台です。※架空のお店です。
こんなに変わりました
まずは Before / After をご覧ください。
▼ Before-TOP：ヘッダが寂しかったり、文字が見辛いかも🤔
▼ After-TOP：全体的にバランスが整った✨️
▼ Before-メニュー：悪くはないけど、少し古くて地味な印象
▼ After-メニュー：温かみのある色合いで、ぐっとおしゃれに
実際のやり取りを見せます
やり取り① デザインをモダンに
私：「このページのデザインをモダンにしたいです。」
たったこれだけです。Claude Code はまず自分でページの内容を読み込んで構造を把握し、何をするかを説明してから作業を始めてくれました。
Claude Code：「現在のコードを把握しました。モダンなデザインに刷新します。主な変更点：Google Fonts に切り替え、カード型デザイン（シャドウ・丸角）、温かみのある配色（テラコッタ系）、ヒーロー部分にグラデーションオーバーレイ、ホバーエフェクト・アニメーション改善」
いきなり作業するのではなく、まず何をするか説明してから動くスタイルは、任せる側として安心感がありました。
やり取り② ヘッダーを改善
「ロゴだけで寂しい」と一言伝えると、ナビゲーションメニューを追加してくれました。
▼ Before：ロゴが中央にあるだけ
▼ After：ナビゲーションメニューが加わってすっきり
さらにナビの文字を英語にしたいと伝えると、即座に Onigiri / Donuts / Soup / Drinks / Set に変更してくれました。このスピード感はさすがです。
やり取り③ 見栄えの調整は根気が要る
ヘッダーのナビ文字サイズを「飾り程度の小ささにしたい」とお願いしたときのやり取りです。
私：「文字が大きすぎるかな。飾り程度で良いと思うのでとびきりお洒落に」
Claude Code：（変更）
私：「まだ文字が大きい。本当に小さくして良いよ。」
Claude Code：（変更）
私：「文字サイズかわってない。」
Claude Code：「原因はファイルの別の箇所で上書きされていたためです。修正しました。」
私：「小さすぎます😅」
Claude Code：（調整）
私：「もうちょっと目立たせて。今の状態だとさすがに見えない」
このやり取り、人間のデザイナーであれば画面を見ながら「このくらい？」と一瞬で合わせてくれる部分です。Claude Code は実際の見た目を目で確認できないため、「小さくして → 小さすぎ → もう少し大きく」という往復が何度も発生しました。
テキストが画面から切れてしまったり、スマホで文字が小さすぎて読めないといった問題も、こちらが気づいて指摘するまで修正されませんでした。見栄えの感覚はまだ AI が苦手とする領域だと感じた場面でした。
やり取り④ スマホ対応でハンバーガーメニューを導入
PCでは横幅に余裕があるためナビメニューをヘッダーに並べて表示できますが、スマホは画面幅が狭いため同じように表示しようとするとメニューが右端で切れてしまいます。このためスマホ向けには「ハンバーガーメニュー」（☰ のアイコンをタップするとメニューが展開するUI）を採用することにしました。
私：「ハンバーガーメニューにしよ。」
Claude Code：「HTML・CSS・JSの3ファイルを変更します。モバイル: ロゴ左・ハンバーガーアイコン右でバランスよく配置。タップで縦並びのドロップダウンが展開。リンクをタップすると自動でメニューが閉じる。ハンバーガーアイコンが ☰ → ✕ にアニメーション。デスクトップ: ハンバーガー非表示、従来の横並びナビに戻る」
ひとことの指示でここまで実装してくれるのは素直に驚きました。
▼ スマホではハンバーガーメニューでスッキリ表示
使ってみて感じたこと
良かった点
作業スピードが圧倒的に速い。
チャットで指示を出すだけで即座に実装されます。デザイナーやエンジニアへの依頼・見積もり・修正のやり取りといった従来のプロセスと比べると、スピードの差は歴然です。
曖昧な言葉でも意図を汲んでくれる。
「おしゃれにして」「寂しい感じがする」といった言葉でも、それなりに意図を汲んだ実装をしてくれます。
相談にも乗ってくれる。
「ヘッダーの右側が寂しくない？どう思う？」と意見を求めると、ちゃんと提案を返してくれました。一方的に作業するだけでなく、対話できる点は助かりました。
注意が必要だった点
見栄えの感覚は人間には及ばない。
文字サイズのような視覚的な調整は、実際の画面を目で見て判断できないため、往復のやり取りが必要になりがちです。「ちょっと大きい」「ちょっと小さい」という微妙なさじ加減は、まだ苦手な領域です。
スマホ表示の確認は自分でやる必要がある。
「修正しました」と言われても、実際にスマホで見ると文字が切れていたり、ボタンが画面の外に出ていたりすることがありました。最終確認は必ず自分の目で行うことが大切です。
頼んでいない部分を変えることがある。
「ここを直して」とお願いすると、関係ない部分まで変えてしまう場面がありました。「元のデザインを守ること」と明示的に伝えるのがコツです。
おまけ：この記事も Claude Code が書きました
実はこの記事自体も、ホームページの改修が終わったあとに Claude Code に依頼して書いてもらったものです。
私：「以上でホームページのリニューアル案件は終了ですが、これまでのやり取りを、Claude Codeを試してみたというブログ記事としたいので、内容をMarkdownファイルに出力してもらえませんか？」
そこからも何度かフィードバックを重ねて、今の形になっています。ホームページの改修と同じく、「こうしてほしい」と伝え続けることで、だんだん理想の形に近づいていく感覚でした。
まとめ
Claude Code は、コードを自分で書かなくてもホームページを作り変えられる、実用的なツールです。ただし「全部任せればOK」ではなく、ディレクションをする人間の目と判断が不可欠だと感じました。
特に視覚的な見栄えの調整は、今のところAIが最も苦手とする部分。そこは人間がしっかり確認・指示する役割を担いながら使うのが、うまく付き合うコツかもしれません。
皆さんはClaude Code（または他のAIツール）、どんな風に使っていますか？
「こんな作業を一瞬で終わらせた！」「ここがうまく行かなかった…」など、皆さんのリアルなAI体験談もぜひコメント欄で教えてください！
この記事が少しでも「参考になった！」「面白かった！」と思っていただけたら、気軽にコメントいただけるとすごく励みになります✨
