コーポレートサイトをAIと2人で1日で作った話

前提 — なぜ自分で作ったのか

ANDOORはデザイン制作会社として創業した。クライアントのサイトは何十と作ってきた。だが、自社サイトはずっと後回しだった。「靴屋の子が裸足」の典型だ。

外注する選択肢もあった。だが、今の自分にはAIがある。コンセプト設計からコーディング、デプロイまで、AIと2人でどこまでやれるのか。実験も兼ねて、自分で作ることにした。

技術選定 — Astro + Tailwind CSS v4

フレームワークは Astro を選んだ。理由は3つ。

1. 静的サイト生成（SSG）に特化 — コーポレートサイトにSPAは不要。HTMLを吐くだけでいい
2. コンポーネント指向 — ヘッダー・フッターの使い回しが効く
3. Markdownでブログが書ける — Content Collectionsで記事管理が完結する

CSSは Tailwind CSS v4 を採用。v4はCSS-firstの設計に変わり、@theme ディレクティブでデザイントークンをCSSファイル内に直接定義できる。設定ファイルが不要になった分、セットアップが速い。

ホスティングは Cloudflare Pages。GitHub連携で git push するだけで自動デプロイ。CDNも無料。選ばない理由がなかった。

デザイン — ブルータリストという選択

デザインは ブルータリスト にした。装飾を削ぎ落とし、タイポグラフィとコントラストで勝負するスタイル。

なぜブルータリストか。

• 画像素材が不要 — ストックフォト探しの時間がゼロになる
• コンポーネントがシンプル — AIが生成するコードの精度が上がる
• メッセージが際立つ — 余計な装飾がない分、コピーの力がそのまま伝わる

つまり、AI × 一人開発との相性が極めて良い。

フォントは3種。見出しに Anton（ディスプレイ）、本文に IBM Plex Mono（モノスペース）、日本語に Noto Sans JP。この3つだけでブルータリストの雰囲気は十分に成立する。

アクセントカラーはページ読み込みのたびにランダムに変わる仕組みにした。5色（ブルー、グリーン、ピンク、パープル、イエロー）からJavaScriptで選択し、CSS変数を差し替える。ロゴ画像も色に連動して切り替わる。遊び心と、「毎回違う表情を見せる」というブランド体験を両立した。

AIとの協働 — 実際のワークフロー

午前: 設計とベース構築

1. サイトマップとページ構成をAIと壁打ちして決定
2. デザインシステム（カラー、フォント、スペーシング）を定義
3. Layout、Header、Footer、SEOコンポーネントを生成
4. トップページのセクションを順に構築

午後: コンテンツとページ量産

5. 各サブページ（About、Services、Products、Work、Careers、Contact、Legal）を一気に作成
6. i18n対応（日英切り替え）を実装
7. ブログ機能（Content Collections + 記事テンプレート）を追加
8. Cloudflare Pagesにデプロイ、ドメイン設定

AIに任せたのは、主に コーディングと構造化。自分がやったのは コンセプト、コピーライティング、ディレクション。

重要だったのは、最初にデザインシステムを厳密に定義したこと。CSS変数、フォント、間隔のルールをCSSファイルに書き込んでおけば、AIはそのルールに従ってコンポーネントを量産できる。ルールが曖昧だと、ページごとにデザインがブレる。

数字で振り返る

やってわかった限界

万能ではない。

• コピーライティングはAIに任せきれない — ANDOORのトーン「断言・短文・実体験ベース」を再現するには、人間が書いて見せる必要がある
• 画像生成は別軸 — ロゴやOGP画像はFigmaで自作した。テキストベースのAIではカバーできない領域
• レスポンシブの微調整 — 大枠はAIが作れるが、768px以下の細かい調整は目視確認しながら人間が詰める必要があった

まとめ

コーポレートサイトをAIと1日で作った。これは「AIがすごい」という話ではない。10年以上Web制作をやってきた人間が、AIをツールとして正しく使った結果、こうなったという話だ。

AIは指示の精度に比例してアウトプットの質が変わる。デザインシステムを定義できるのも、コンポーネント分割の粒度を判断できるのも、制作経験があるからだ。

逆に言えば、その経験さえあれば、もうチームを組まなくても1日で本番レベルのサイトが作れる。これが2026年の現実だ。