※この記事は、私が実際にAIでコーポレートサイトを作った体験をまとめたものです。専門用語はできるだけかみくだいて書いています。
「コードは書けない。でも、会社のサイトくらい自分で作れたら——」
そう思っていた私（現役のWebディレクター／EC運営支援。プログラミングは未経験）が、先日、自社のコーポレートサイトを、AI（Claude Code）と会話するだけで一つ作りきりました。デザインの世界観づくりから、スマホ対応、問い合わせフォーム、公開前のSEO設定まで、ひととおり全部です。HTMLもCSSも、いまだに自分ではほとんど書けないのに、です。
この記事では、その「作ってみてどうだったか」を正直にお話しします。再現できる細かい手順や、実際にAIへ投げた指示（プロンプト）の全文は、別途noteにまとめていますので、「自分も作りたい」という方は最後のリンクからどうぞ。
何を作ったのか
作ったのは、アトピー性皮膚炎の方向けの商品を扱う会社のコーポレートサイトです。上からスクロールすると、コンセプト → 代表メッセージ → 事業内容 → 会社概要 → 問い合わせフォーム、と続く、よくある形の会社ホームページです。
デザインの方向性は「静かで上品な、明朝体ベース」。アイボリー（生成り）を基調に、ベージュと墨色でまとめた、余白の多い落ち着いたトーンにしました。刺激の少ない商品を扱う会社なので、色も自然で穏やかな配色にしています。
見た目だけでなく、こんな動きも仕込みました。
- サイトを開いた瞬間、左右のカーテンがすっと開くオープニング演出
- スクロールすると、文章がふわっと浮かび上がってくる動き
- スマホでは自動でレイアウトが整い、メニューが三本線に切り替わる
- 問い合わせフォームの入力チェック（未入力やメール形式の間違いを教えてくれる）
技術的には、流行りの難しい仕組み（フレームワーク）は一切使わず、HTML・CSS・JavaScript という基本の3つだけで作っています。これが実は初心者にとって大事で、「壊れにくい・表示が速い・サーバーに置くだけで動く」という利点があります。
実物はすでに公開しています。言葉で説明するより、見てもらうのが早いです。
なぜ「外注」でも「テンプレ」でもなく、AIで自作したのか
会社サイトを作る方法は、ざっくり3つあります。制作会社に外注する（数十万円〜、修正のたびに費用と時間）。Wixやペライチ、WordPressテーマなどのテンプレートを使う（安いが、細部が”それっぽく”揃わず、他社と似がち）。そして自分でAIと作る（今回これ）。
私がAIを選んだ理由は3つです。ひとつは細部まで自分の言葉で詰められること。「もっと余白を」「明朝で」「この一文はこう変えて」と、会話でいくらでも微調整できます。ふたつめは修正が一瞬で、しかも無料なこと。外注なら「色を変えて」だけで見積もりと数日ですが、AIなら数十秒です。みっつめは自分の資産として手元に残ること。できあがるのはただのファイルなので、特定のサービスに縛られず、どこのサーバーにも置けて、後から自由にいじれます。
どう進めたか（大まかな流れ）
行き当たりばったりではなく、大きく次の順番で進めました。この順番にはちゃんと意味があります。
- 土台を決める：AIに触る前に、「誰に・何を・どんなトーンで」だけ自分の言葉で言語化する
- 世界観と骨組みを作らせる：デザインの方向性とページ構成を、最初の一発で大きく作る
- 中身を流し込む：会社概要や代表メッセージなど、事実を入れていく
- 動きと仕上げ：オープニング演出・アニメーション・フォームを足す
- スマホ対応と微調整：崩れを直し、細部を整える
- 公開前の下ごしらえ：SEOやプライバシーポリシーなど、裏側を仕込む
やっていることは、ずっと「日本語でお願いして、出てきたものを見て、直してもらう」の繰り返しです。料理でいえば、レシピを考えるのが自分、実際に作るのがAI、という分担でした。
気をつけたこと（つまずきやすい2つ）
細かい落とし穴はいくつもありましたが、ここでは特に効いた2つだけ。
① 「土台」を先に決めないと、何度作り直してもブレる。
いきなり「かっこいい会社サイト作って」と頼むと、”それっぽいけど刺さらない”ものが出てきます。「誰向けで・どんな印象を与えたいか」を先に言葉にしておくだけで、AIの出す方向がぐっと安定しました。
② 崩れや違和感は、スクショを見せて直す。
「スマホで崩れてる」と文字で伝えるより、スクリーンショットを渡すほうが、AIは原因を特定して直してくれます。見て、撮って、渡す。これが一番早い直し方でした。
ほかにも「先に決めておくべきこと」「詰まったときのAIへの聞き方」など、非エンジニアがハマりやすいポイントはまだあります。そのあたりは、後述のnoteに詳しくまとめました。
やってみた率直な感想
一番の発見は、「作りたいものを言葉にできれば、コードが書けなくても形になる時代になった」ということです。少し前なら、会社サイトを1つ作るのは「外注で数十万円」の世界でした。それを、HTMLもまともに書けない私が、自分の手元で作れてしまった。
もちろんAIは万能ではなく、丸投げでは思い通りに動きません。でも「どうしたいか」を言葉にして、出てきたものを確認・修正できれば十分に戦えます。“作りたいものを言語化する”というWebディレクターの仕事が、そのまま武器になった実感があります。
まとめ｜細かい手順は、noteに全部まとめました
プログラミング未経験でも、AIと会話するだけで会社のサイトを作れる——それを実際にやってみた記録でした。
この記事では「何を・なぜ・どう作ったか」の全体像をお話ししましたが、実際にAIへ投げた指示（プロンプト）を作った順番どおりに全文公開し、非エンジニアがつまずくポイントと回避策、確認用チェックリストまでまとめたものを、noteで用意しています。「自分も同じように作りたい」という方は、こちらをなぞれば近道になるはずです。
▶ 【note】AIだけでコーポレートサイトを作った全手順・プロンプト全文を見る
まずは実物を見てみたい方は、こちらからどうぞ。
コメント