インナーブランディングカンパニーである弊社イランコッペは、このたびコーポレートサイトをリニューアルいたしました。
普通なら制作会社に依頼したり、社内のエンジニアが手がけるかと思いますが、今回はコードを一行も書いたことのない私自身が、AIコーディングツール「Claude Code」を使って自社サイトをゼロから構築しました。制作期間は、たったの3時間。
この記事では、なぜブランディング会社がAIコーディングという選択をしたのか、ノンコーダーがどのようにサイトを完成させたのか、そして「企業のらしさ」をサイトに反映するうえでAIコーディングがどんな可能性を持っているのかを、リアルな体験をもとにお伝えしたいと思います。
なぜAIコーディングだったのか
イランコッペは「余計なことで、文化をつくる」をミッションに掲げるインナーブランディングカンパニーです。社員数は少数で、エンジニアは在籍していません。これまでもコーポレートサイトの制作は外部のパートナーに依頼してきました。
しかし、コーポレートサイトは企業にとっての「顔」。
ブランディングを生業にしている会社として、サイトのトーン、言葉選び、情報の見せ方すべてに「自分たちらしさ」を行き渡らせたいというのが正直な思いでした。しかしながら、クライアント案件が専業である弊社にとって、自社サイトは後回しになってしまいがちでした。
一方で、少し前から「AIコーディング（バイブコーディング）」のニュースが目立ち始めました。 YouTubeのおすすめやビジネスメディアの特集など、「バイブコーディングとは？」みたいなものが溢れ、なんとなく横目で見ながらも、自分には関係ないかなと、しばらくは見て見ぬふりをしていました。
ほどなくし、コーポレートサイトをリニューアルしたいと思ったときに、改めて「バイブコーディングでどこまでできるんだろう」と思いたったのです。本当に自分一人でサイトやサービスがつくれるのかは疑心暗鬼でしたが、使ってみたら仕事でもっと活用できるかもしれないですし、失敗しても自社サイトであれば迷惑もかからないかなと思い、挑戦してみたというわけです。
試してみたのは、YouTubeでもよくオススメに出てきたAnthropicの「Claude Code」というものです。正直、なんとなくClaudeは知っていましたが、あまり使ったことがなかったものの、噂を信じて使ってみました。
制作プロセス：「うちのサイトを作って」から始まった
ここからは、実際の制作プロセスをステップごとにお伝えします。 エンジニアリングの知識がない人間が、どうやってサイトを完成させたのか。その道のりを正直に書いていきたいと思います。
サイトが形になるまでにかかった時間はわずか3時間。
通常、コーポレートサイトのリニューアルには数ヶ月かかると思うのですが、そのスピード感に驚きでした。もちろん細かな調整やコンテンツの入稿はその後も続きましたが、サイトの骨格ができあがるまでのスピード感こそがAIコーディングの魅力だと感じました。
ステップ1：Claudeのチャットで気軽に聞いてみる
最初にやったことは、いきなりコーディングに入るのではなく、まずはClaudeのチャット上でTOPページのデザインをラフに作ってみることにしました。これはChatGPTのような対話型のUIと同じようなもので、気軽にスタートすることができます。（Claude Codeとは別機能のようです）
まずはClaudeとの対話に慣れることから始めました。みなさんがお使いの生成AIサービスにもそれぞれ個性があると思いますが、Claudeは初対面だったので、いくつか会話して雰囲気に慣れました。
さらに、Claudeには「アーティファクト」という機能があり、チャットの中で簡単なHTMLやReactのプレビューをその場で表示できるようです。「うちのサイトのTOPページ、こんなイメージで作ってみて」と伝えると、会話の横にラフなデザインが出てくる。コードを一行も書いていないのに、画面のイメージが目の前に現れる体験は新鮮でした。
ステップ2：AIが要件をヒアリングしてくれる
ここで、Claudeはいくつか選択肢を出してくれます。
これも画期的でした。こちらの要件を具体化するために選択肢を提示して、ポチポチ選んでいくだけでOKでした。
簡単なヒアリングでは、「STUDIOから移行したい主な理由は？」「サイトの規模感は？」「ホスティング先の希望は？」などなど、まるで制作会社の初回ヒアリングのような問いかけでした。
こちらが「デザインの自由度を上げたい」「Claude Codeで自分で管理したい」と答えると、AIはその回答をもとにClaude Codeで構築するメリットと考慮すべき点を整理してくれました。
コードベースだからアニメーションやレイアウトの制約がなくなること、STUDIOの月額費用がなくなること、一方でビジュアルエディタがなくなるのでテキストの差し替えにもコードを触る必要があること、ただしClaude Codeがあればそこは補えるという補足付きでの説明でした。
このやりとりを経て、headless CMS（microCMS）の導入が提案され、技術構成の方向性が固まっていきました。もちろん、そういうCMSのことやサーバーのことなど、ほとんど知りません。
ステップ3：「うちのサイトを作って」と指示してみる
そこで出てきたのが以下の技術構成でした。
それぞれ、全然知識がなかったので、正直に聞きながら理解を深めていきました。お金がかかるかどうかや、運用のしやすさなども聞いてみました。
ステップ4：事業内容を伝え、キービジュアルを提示する
次に、イランコッペの事業内容やデザインで変更したいポイントなどをヒアリングされました。インナーブランディングカンパニーであること。MVVの策定、社内報の構築、カルチャーブックの制作などを手がけていること。クライアントにはどんな企業がいるのか。そしてキービジュアルのイメージを提示しました。
ここで気づいたのは、AIコーディングでサイトを作るプロセスは、制作会社にオリエンテーションするプロセスと本質的に同じだということです。自分たちが何者で、何を大切にしていて、誰に届けたいのかを言語化しなければ、良いアウトプットは出てこないようでした。
ステップ5：自社のコアを言語化する
さらに深掘りして、イランコッペのコアとなる3つの強みを伝えました。「編集」「クリエイティブ」「インナーブランディング」。この3つが私たちの仕事の根幹であり、他のブランディング会社との違いでもあります。
面白かったのは、この3つのコアを伝えた途端、AIがメインコピーの提案をしてきたことです。事業の本質を伝えると、AIはそれを言葉に変換しようとします。もちろんそのまま採用するわけではありませんが、「自分たちのコアを言語化すると、こういう言葉が返ってくるのか」という発見がありました。ブランディング会社としての自分たちの大事にしたいものと向き合う感覚でした。
ステップ6：デザインコンセプトを言葉で伝え、他社サイトを参照する
デザインの方向性は、結局3つのキーワードで伝えました。
「信頼感」「スタイリッシュ」、そして「余計なことを少し」。
最初の2つはコーポレートサイトとして基本的な要件です。重要なのは3つ目の「余計なことを少し」。イランコッペのミッション「余計なことで、文化をつくる」を、サイトのデザインにも宿らせたかったからです。全体は落ち着いていて信頼感があるけれど、どこかに遊び心やちょっとした驚きがある。そんなサイトを目指しました。（「余計なこと」を落とし込むデザインはまだ確定しておらず、現在も検討中です）
ここで活用したのが、他社サイトの参照です。
デザインコンセプトに近いトーンを持つサイトをいくつかピックアップし、「このサイトの余白の使い方が近い」「このタイポグラフィの雰囲気を参考にしたい」といった形でClaude Codeに共有しました。言葉だけでは伝わりにくいニュアンスも、具体的なリファレンスがあるとAIの出力精度が一気に上がります。デザイナーにムードボードを見せてオリエンテーションするのと同じ感覚です。
ここで、何度もやり取りをして納得のいくTOPのデザインを確定させていきました。
ステップ7：AIにはできないTODOの整理
AIはコードを書いてくれますが、アカウントの作成やサービスの連携など、人間が手を動かさなければならない作業もあります。ここでありがたかったのは、Claudeがそうした「AIにはできないけど、あなたがやるべきこと」を明確に整理してくれたことです。
初回セットアップとして示されたのは7つのステップでした。
- GitHubアカウントをつくる（無料）
- Vercelアカウントをつくる（GitHubでログイン）
- microCMSアカウントをつくる（無料）
- Claude Codeでサイトを構築
- GitHubにコードを上げる
- VercelとGitHubを連携する
- irankoppe.comのDNSをVercelに向ける
さらに、日常の運用フローも整理してくれました。
- 実績を追加したいときはmicroCMSの管理画面で記事を書く
- デザインを変えたいときはClaude Codeに指示して修正
- テキストを直したいときもClaude Codeに指示して修正。
こうしたTODOリストをAIがまとめてくれたおかげで、「自分は何をすればいいのか」が明確になりました。ノンコーダーにとって最も不安なのは、「何がわからないかがわからない」状態です。AIがやること・人間がやることを切り分けて見せてくれることで、その不安が一気に解消されました。
ステップ8：いよいよClaude Codeへ
さまざまなアカウントの準備が終わって、ようやくClaude Codeへ移行しました。慣れている人であれば最初からClaude Codeでも良いと思いますが、なんせ初めてだったため、Claude自体に慣れてから、Claude Codeに移行しました。
移行は以下のチャットをしました。TOPのデザインデータはClaudeチャットが吐き出してくれていました。
Claude Codeは、Claudeチャットとは違い、実際のローカルフォルダ（もしくはクラウド上）の中でコードを直接生成・編集してくれます。とはいえ、デスクトップ版のClaude Codeの場合は、見た目はClaudeチャットとほぼ同じです。
チャットで固めたデザインコンセプト、カラーパレット、サイト構成をもとに、「このプロトタイプをNext.jsで本格的に組んで」と指示すると、ファイル構成からコンポーネント設計まであっという間に一気に作り上げてくれました。
ということで、ここからさらに、下層ページをデザインしてもらい、都度都度GitHubにアップしてバックアップを取ります。正直、GitHubも今回がほぼ初めてだったので、YouTubeで「10分でわかるGitHub」などの動画を見ました。
ただし、TOPのデザインが終わっていたので、下層ページはスムーズに進みました。掲載する情報を伝えれば、TOPと同じデザインシステムで構築してくれました。
あとは、公開までの具体的なステップです。
ステップ9：microCMSへ登録
今回のサイトは、実績やお知らせなど、CMSで管理するものが合ったので、microCMSというサービスを使って、情報を流し込みました。このあたりもAIに言われるままに進めていきました。（登録できる個数の制限などはありますが、いまのところ無料で利用可能でした。）
ステップ10：Vercelへアップ
ここまでは自分のローカルでサイト制作を進め、コンテンツのみCMSにある状態です。なので、CMSへの登録が終わったら、いよいよサーバーにアップです。
Vercelというのは本当に今回初耳でしたが、「静的サイトおよびJavaScriptアプリケーションのためのクラウドプラットフォーム」だそうです。AIの言うことだけを信じるのも良くないので、自分でもリサーチし、安全性を確認して、アカウント登録をしました。問題なさそうなことを確認したら、そのあとのセットアップ手順は、またもやAIの言いなりでした。
GitHubと連携してくれるので、ほぼ一瞬で設定は終わります。
ステップ11：ドメインをVercelに登録し、公開
ということで、Vercelに正常にアップできたら、これで全世界に公開です！
ただし、このままではドメインは弊社のirankoppe.comのドメインではないので、ドメインを取得しているサービスの設定を変更し、Vercelと連携しいきます。これもAIにやり方を聞きながら実行。
そして、１時間くらい待つと、自動的に自社サイトが新しいものに切り替わっていました！
「らしさ」をコードに落とし込むということ
ということで、およそ３時間ほどで弊社のリニューアルされたサイトが公開されました。いまもバグなどは見つかるので、適宜Claude Codeで「ここを直して」などと伝えると、きれいに直してくれます。社内エンジニアに依頼している感じです。
振り返ってみると、このプロセスで最も重要だったのは、コードを書く技術ではなく、「自分たちが何者か」「何を伝えたいサイトなのか」を言語化する力でした。
ブランディング会社のサイトは、それ自体がブランディングの実践でなければなりません。ミッションである「余計なことで、文化をつくる」が、デザインだけでなく構造やインタラクション、コンテンツの届け方にまで反映されているか。それが重要でした。もちろん、まだ十分ではありません。ですが、これからは、とてもラフでスピーディーにデザイン修正が可能です。（さっきは、実績のプレビュー画面をPDFにダウンロードして、クライアントに送る機能などを追加して、利便性も向上しています）
AIコーディングでは、自分たちのことを言葉で伝えれば伝えるほど、アウトプットの精度が上がっていきます。事業内容、コアの強み、デザインコンセプト、運用の方針など、これらをひとつずつ言語化していくプロセスは、まさにブランディングそのものでした。
コードの知識はなくても、ブランドの言語を持っている人がサイトを作る。そのほうが「らしさ」がストレートに反映されるという逆説的な発見が、このプロジェクトの最大の収穫でした。
ノンコーダーが直面した壁と、乗り越え方
もちろん、すべてが順調だったわけではありません。
何よりも、デザインの再現性の問題が一番大きかったです。頭の中にあるイメージをAIに言葉で伝え、コードとして出力してもらう。このプロセスでは、「思っていたのと違う」ということが頻繁に起こります。
ここで大事だったのは、一度で完璧を求めないことです。大まかな方向性を出してもらい、「ここをもう少し右に」「フォントサイズを一段階下げて」と細かく調整していく。まるでデザイナーにフィードバックを出すように、AIと対話しながら詰めていく感覚です。
さらに、装飾の細かなコントロールはほぼ結構イライラしました。たとえば、余白の微妙なバランス、ホバー時のアニメーション、要素間のリズム感など、ニュアンスで表現しなければいけない部分はあまり伝わりませんでした。（本当はTOPのファーストビューにモーションなどが欲しかったですが断念しました）
こうした「数値では指定しにくいが、見ればわかる」領域は、言葉で伝えるだけではなかなか意図通りになりません。「もう少し上品に」「あと数ピクセル詰めて」といった調整を何度も繰り返したり、事例を見せるしかありません。
そして最も難しいと感じたのが、独特な意匠の設計です。他のサイトにはない、その会社だけの視覚的な個性（アイコン、イラスト、ビジュアルアセット系）は、Claudeだけではほぼ無理そうでした。むしろビジュアルに強いGeminiなどと連携すればいいのかもしれませんが、それでも再現性のあるアイコンやロゴなどは、かなり骨が折れそうです。
裏を返せば、AIコーディングが得意なのは「構造」と「ロジック」です。
ページの構成、データの受け渡し、CMSとの連携、レスポンシブ対応——こうした骨格部分は驚くほど速く正確に組み上げてくれます。骨格をAIで素早く立て、ビジュアルの仕上げはデザイナーと協業する。そんなハイブリッドな制作体制が、現時点での最適解かもしれません。
AIコーディングがブランディングにもたらすもの
この経験を通じて感じたのは、AIコーディングは「ブランディングの民主化」を加速させるということです。
従来、企業が「自社らしいサイト」を作ろうとすると、ブランド戦略を考える人と、それを実装するエンジニアの間にどうしても翻訳のプロセスが発生します。「この会社の空気感」「余白の意味」「言葉のトーン」などなど、こうした微妙なニュアンスを仕様書やデザインカンプだけで伝えきるのは難しいものです。
AIコーディングを使えば、ブランドを最もよく理解している人が、直接サイトを作ることができます。もちろん、プロのエンジニアやデザイナーが作るサイトのクオリティには及ばない部分もあります。しかし「らしさの純度」という意味では、中間に翻訳を挟まない分、ブランドの意図がストレートに反映される面があります。
これは大企業というよりも、私たちのような少数のチームや、スタートアップ、個人事業主にとって特に大きな可能性です。ブランディングにお金をかけられるのは大企業だけ、という時代が変わりつつあるのかもしれません。
ということで、イランコッペのサイトは、今も日々更新を続けています。microCMSのおかげで実績やジャーナルの記事はブラウザから追加でき、デザインの微調整が必要なときはClaude Codeを立ち上げて対応しています。
私たちにとってこのサイトは「作って納品して終わり」のものではなく、日々の活動とともに育てていく「生きたメディア」です。実験しながら、自分たちらしいものであれば実装していく、というサイクルを高速で回せるようになったのは大きな変化です。
今後、このジャーナルではAIコーディングに関する知見やTipsも継続的に発信していく予定です。
ブランディングとテクノロジーの可能性を探っていければと思います。