- 投稿日：2026/04/12
- 更新日：2026/04/12
はじめに
こんにちは。岡山県児島でジーンズブランド「ONZO JEANS」を運営している田中です。
突然ですが、みなさん
「自分のブランドサイトを【作りたい・修正したい】
でもコードもルールも全然わからない…」
と思ったことはありませんか？
今日は、そんな私がAIツール「Claude Code」を使って、1日でブランドサイトを作って公開するまでの話をします。
【ビフォー】これが今までの手作りWixサイト
実は今まで、自分でWixを使って手作りしたサイトがありました。
【ビフォー】
https://54321qazxcv.wixsite.com/onzo
他人からも言われてましたし、
自分でも「もう少し手を加えた方が...」と思ってはいましたが、
なかなかお願いするのはコストもかかるし面倒くさい
Wixは「ドラッグ＆ドロップで作れる」と聞いて始めたものの、正直なところ…
・どこに何を置けばいいかわからない
・なんとなく「手作り感」が出てしまう
・ブランドの世界観が伝わらない
・更新するたびに操作が面倒
・メディア向けのページとして使うには心もとない
デザインの知識もコードの知識もない私が手探りで作ったサイトは、販売目的のカラーミーショップとも役割が被り、「これをメディアや取材先に送るのはちょっと…」という状態でした。
---
きっかけ：メディア向けのサイトが必要だった
ONZO JEANSはありがたいことに、取材やコラボのお声がけをいただく機会が増えてきました。
でもその度に困っていたのが、
「どこを見てもらえばいいか」という問題。
ECサイトを送っても商品ページばかり。Wixのサイトを送っても世界観が伝わりにくい。
「会社概要・ブランドストーリー・メディア向けのプレスページ。これを一つのカッコいいサイトにまとめたい」
そう思ったのが今日の出発点です。
まず相談：どの方法で作るか
最初にClaude Codeに「Wixを使わずにホームページを作りたい」と相談しました。
提案された主な方法：
「Claude Codeとの連携しやすさはどれですか？」と聞いたところ、HTML+Netlifyが圧倒的に相性がいいとのこと。費用も無料。即決でした。
---
Framerも試してみた（が、断念）
その前にFramerも試しました。ログインして、テンプレートも選んで…でも背景を黒にするだけで「このボタンを押して」「次はここをクリックして」という手順が続く。
Framer自体はClaude Codeとの相性はいいが日本語の対応をしていないことで
「これはずっと私が操作しないといけないじゃないか！」
そこでClaude Codeが正直に言ってくれました。
「Claude Codeはブラウザの操作を直接することができません。でも、コードを全部書くので、あなたはファイルをアップするだけにしましょう」
ということで「HTML+Netlify」に変更
この一言で方針転換。一気にスムーズになりました。
ClaudeCodeと私の作業内容軽減で両方が簡単な方法を選択
---
サイトの構成とデザインイメージを伝え、
どんなページが必要かを整理しました。
・TOP（ヒーロー画像・キャッチコピー）
・BRAND STORY（競馬調教から生まれた原点）
・CRAFT（児島・職人・こだわり）
・SCENE（使用シーン5種類）
・VIDEO（YouTube動画）
・AMBASSADORS（武豊騎手・村竹ラシッド・ンダホさん）
・COMPANY（会社概要・連絡先）
デザインのイメージも言葉で伝えました。
「背景はブラック。文字は白。スポーティで上品でハイブランドのようなイメージ。ジーンズブランドらしくネイビーが映えるデザイン」
これだけ伝えると、Claude Codeが実際のコードを丸ごと書いてくれました。コードを一行も自分で書いていません。
---
写真を次々と埋め込む
コードができたら、あとは写真を送るだけ。
「ここにはどんな写真がいい？」
「では、この写真を画像に使いたい」
→ Claude Codeがコードに組み込んでもらう
「この3枚をブランドストーリーにして大きさは調整して」
→ 自動でグリッドレイアウトに配置
「SCENEにこの5枚を入れて」
→ 即反映
「YouTubeのURLはこれです」
→ サムネイル付きで自動埋め込み
「InstagramのURLはこれです」
→ 実際の投稿がそのまま表示
武豊騎手・村竹ラシッドさん・ンダホさんのInstagram投稿も、URLを貼り付けるだけで埋め込まれました。
---
Netlifyで公開→画像が出ない問題発生
サイトが完成したら「Netlify」で公開。最初は「websiteフォルダをドラッグ＆ドロップ」と教えてもらい試みましたが…
サイトを開いたら写真が全部表示されない！
Claude Codeに確認してもらうと、画像ファイルがNetlifyに正しく届いていないことが判明。フォルダをそのままドロップする方法では、中のファイルが欠落していたようです。
ここで登場したのがZIPファイルという解決策。
フォルダをそのままドロップ → 画像が届かない ❌
↓
ZIPファイルに圧縮してドロップ → 全ファイル確実に届く ✅
Claude Codeが自動でZIPを作ってくれて、それをNetlifyにドロップしたら無事に全ての写真が表示されました。
---
【アフター】完成したブランドサイト
---
ビフォーアフター比較
やってみてわかったこと
Claude Codeは「操作の手伝い」ではなく「代わりに作る」ツール
WixやFramerは「自分で操作する作業」が多い。でもClaude Codeは**「作ってもらう」**ことが得意。
コードがわからなくても必要なのはこれだけ：
・どんなデザインにしたいかのイメージ
・使いたい写真
・載せたい情報（会社名・電話番号など）
---
更新も超簡単
今後の修正も同じ流れです。
「ここの文章を変えて」
→ Claude Codeが修正
→ ZIPにしてNetlifyにドロップ
→ 完了
自分でコードを触る必要は一切ありません。
---
まとめ
「コードがわからないからホームページは作れない」は、もう過去の話かもしれません。
Claude Codeに相談しながら、イメージを伝えて、写真を送る。それだけで、プロが作ったようなブランドサイトが1日・無料で公開できました。
Wixで何年も手探りしていた私が言うので、間違いないと思います。
同じように悩んでいる方の参考になれば嬉しいです。
今回の学び
「claude codeから見て助かる方法はどれ？」
ClaudeCodeに寄り添いながら聞いてみました。
このサイトは独自のコードなので、とClaudeCodeの得意不得意も教えてくれました。
そのおかげで３時間ほどで完成
