自社サイトをClaude Codeで内製構築 — 情報設計から実装・公開までをAIと一人で完結

制作モデルの設計

本プロジェクトの制作モデルは、4つの工程を役割で分け、デザインだけをClaude Code Design、残りをClaude Codeが担う構造にしました。AIに丸投げするのではなく、工程ごとに「AIが機械的に進める部分」と「人が方針を決める部分」を切り分けています。

この分担のポイントは、①の情報設計を先に固めてから②のデザインに渡す順序です。何を載せるか（コンテンツと構成）が決まっていない状態でデザインだけ先行させると、後から大きな手戻りが発生します。原稿とサイト構成を依頼書（デザインブリーフ）にまとめてからデザイン工程に入ることで、デザインと中身のズレを抑えました。

制作プロセス

情報設計・コンテンツ生成（Claude Code）

最初の工程は、サイトに載せる中身とその構成を固める情報設計です。Claude Codeを使い、以下を整備しました。

• デザインブリーフの作成: サイトの目的・ターゲット・ブランド要素（ブランドパープル #88619A、ロゴ、トーン&マナー）・サイト構成・トップのセクション構成・技術制約を1本の依頼書にまとめました。これがデザイン工程への発注仕様になります
• トップページ原稿: ファーストビューのキャッチからCONCEPT・SERVICES・STRENGTHS・FLOW・PRICING・MESSAGE・FAQまで、各セクションの確定原稿を用意しました
• 強みの言語化: 「何をすべきか」の先にある「やりきる力」という独自ポジションを、抽象的なキャッチで終わらせず、支援領域・体制・進め方のレベルまで分解して言語化しました。強み6項目それぞれに、根拠となる実績や提供価値をひもづけ、サイトに載せる前段の素材として整理しています
• 事例コンテンツ: 支援実績を、公開可能な形に整備しました（→ 詳細は第5章）

強みの言語化は、コピーを書く作業ではなく「自社が何で選ばれるか」を構造で定義する作業です。ここを曖昧にしたままデザインや実装に進むと、サイト全体のメッセージがぶれます。情報設計の段階で「何を、どの粒度で打ち出すか」を固めておくことで、後の工程で迷いが出ない状態を作りました。

デザイン（Claude Code Design）

固めた情報設計（デザインブリーフ）をClaude Code Designに渡し、デザインを制作しました。

• トップのフルカンプを先に1案: まずトップページのフルデザインカンプ（PC・SP両対応）を作り、確定してから下層テンプレートへ展開する順序にしました
• バリアントの比較検討と確定: ファーストビュー・サービス・強みのセクションは複数のレイアウト案を出し、比較したうえで「FV＝非対称」「サービス＝カード」「強み＝エディトリアル」を確定バリアントとして採用しました
• デザイントークンの体系化: 色・タイポグラフィ・余白・影などをCSS変数（tokens.css）に集約し、共通部品（base.css）・セクション（sections.css）・下層専用（subpage.css）に整理しました。ブランドパープルを軸にしたミニマルで洗練されたトーンを、面で塗りすぎずアクセントとして効かせる方針です
• 下層テンプレートへの展開: 会社概要・サービス一覧/詳細・事例一覧/詳細・ブログ一覧/記事・お問い合わせ・プライバシーポリシーを、トップで確定した語彙（左寄せ・余白多め・エディトリアル調）で統一しました

デザイン成果物は、レイアウト・配色・コンポーネントまでを確定したHTML/CSSとして出力し、「ここから先はローカルのClaude Codeで実装する」という役割分担をハンドオフ文書（HANDOFF.md）に明記しました。デザインと実装の境界を文書で固定することで、工程の引き渡しを明確にしています。

WordPressクラシックテーマの実装（Claude Code）

デザイン成果物（HTML/CSS）を、WordPressのクラシックテーマ「solicio」として実装しました。実装はローカル環境で進め、デザインの再現と動的化を同時に行っています。

• 実装方式の選定: ブロックテーマ（FSE）やヘッドレス構成ではなく、**クラシックテーマ（PHP自作）**を選びました。テンプレート枚数が少なく構造がシンプルなこと、PHPテンプレートの生成・調整がClaude Codeと相性が良いこと、追加のビルド環境が不要なことが理由です
• ローカル開発環境: Homebrewの PHP 8.3＋wp-cli＋SQLite で構成し、MySQLや仮想環境を立てずに localhost:8080 で動かせる軽量な環境にしました。テーマのソースはバージョン管理下のフォルダに置き、開発用WordPressへはシンボリックリンクで反映する形にしています
• テンプレートの実装: 共通パーツ（ヘッダー・フッター・CTA）、トップ（front-page.php）、固定ページ、カスタム投稿タイプのアーカイブ・詳細を実装しました
• カスタム投稿タイプの設計: 増えていく前提のコンテンツを「事例（case）」「サービス（service）」「お知らせ（news）」の3つのカスタム投稿タイプで設計しました

実装段階では、デザインの見た目を保ったまま、コンテンツを管理画面から編集できる状態にすることを重視しました。技術的な工夫は第6章にまとめます。

本番デプロイ・運用設計（Claude Code）

ローカルで完成したテーマを本番環境（Xserver）へ反映し、継続的に更新できるデプロイの仕組みを整えました。

• 継続デプロイの自動化: 本番サーバーにバージョン管理のリポジトリを置き、メインブランチへ反映するだけでテーマが本番に展開されるgit push型のデプロイを構築しました。手動でファイルをアップロードする運用をやめ、更新のたびの作業を1コマンドに集約しています
• 安全な切り替え: 本番テーマの切り替えはメンテナンス状態を挟んで行い、問題があればすぐ元に戻せるようにバックアップを取った状態で公開しました
• 計測・SEOの引き継ぎ: タグマネージャー（GTM）・構造化データ・サイトマップ等を本番に引き継ぎ、公開直後から計測と検索エンジン向けの情報提供が成立する状態にしました

2026年6月10日にオリジナルテーマを本番へ反映し、公開しました。

事例ページの設計と作り込み

本サイトでもっとも力を入れたのが、支援実績を見せる「事例ページ」の設計と作成です。事例はBtoBの相談検討で最も読まれる場所であり、サイトの説得力を左右します。情報の設計から1ページの構造、制作の進め方までを作り込みました。なお、いまご覧いただいているこのページも、ここで解説する仕組みの上で作られています。

公開可否を「仕組み」で管理する情報設計

事例の難しさは、実績を具体的に見せたい一方で、クライアントの固有情報をそのまま出せない点にあります。そこで、1案件を3つのファイル（入力情報／実名マスター版／匿名版）で管理する運用ルールを先に決めました。

• マスター版: 社名・URL・数値を実名で持つ事実の正本。営業説明やクライアント承認後の公開に使う
• 匿名版: マスター版から派生し、固有名・数値の粒度を抽象化した公開用。業界向けの一般訴求に使う
• 匿名化チェックリスト: 社名・固有技術名・GA4イベント名・数値などを段階（Tier）ごとに整理し、「どこまで出すか」を毎回同じ基準で判断できるようにした

公開判断を担当者の感覚に委ねず、チェックリストで標準化したことで、案件が増えても安全に事例を出し続けられる状態を作りました。

一覧カードと詳細を兼ねる「二層構成」

事例の1ページは、一覧カード用の要約と、フル詳細の本文を同居させる二層構造にしました。

• 一覧では要約（カスタムフィールド）から成果ハイライトを抜き出してカード表示する
• 詳細では本文（the_content）でフル尺を読ませる
• 詳細本文の見出しから目次を自動生成し、PCでは追従するサイドバーに、スマートフォンでは本文内に出し分ける
• サイドバーには目次だけでなく、相談CTAと成果サマリーをまとめて固定表示する

一覧と詳細でコンテンツを二重に持たず、1つの事例データから両方を生成する設計です。

章立ての標準化と「AI活用」の横串

事例ごとに構成がバラつくと、読み手が比較しづらくなります。そこで、全事例で章立てを標準化しました。案件概要→課題→課題分析と仮説→実施した施策→Claude Code活用→成果→ふり返り→まとめ、という流れです。

特に「Claude Code環境を活用した工数削減・品質向上」は、全事例に横串で専用章を設けました。どの案件でAIをどう使い、何を効率化できたかを1か所で読めるようにしています。

手元の原稿からの半自動流し込み

事例は管理画面で直接書くのではなく、手元のMarkdown原稿を変換してWordPressへ流し込む正規ルートを整えました。原稿（md）を本文HTMLへ変換するスクリプトを用意し、管理画面ではメタ情報やカスタムフィールドだけを触る運用です。原稿はバージョン管理下に残るため、修正履歴を追え、量産時も同じ品質で展開できます。

技術的な工夫・判断

本事例の中身は、「AIに書かせた」だけでは越えられない制約への対処と設計判断にあります。実運用に耐えるサイトにするために行った主な工夫を整理します。

ACF無料版の制約をパーサーで回避

コンテンツを管理画面から編集できるようにするため、カスタムフィールド（ACF）を使いました。ただし無料版は繰り返し入力（リピーター）に対応していません。サービスカード・強み・流れ・料金・FAQ・事例の実績欄など、繰り返し構造はサイト全体で12箇所あります。

そこで、1行＝1レコード・区切り記号で項目を分ける「テキストエリア方式」に作り替え、共通のパーサー関数（solicio_parse_rows()）で展開する設計にしました。有料プランに頼らず、無料版のまま全セクションを管理画面から編集できる状態を作っています。コードのデフォルト値とDBの入力値が二重管理になる注意点も、運用ドキュメントに明記して取り違えを防いでいます。

SEO・計測をテーマに内製

外部プラグインに頼らず、メタディスクリプション・canonical・OGP・構造化データ（Organization / WebSite / BreadcrumbList / Article）をテーマ側で出力する実装にしました。検索回遊に不要なページ（検索結果・404・添付ファイル等）をnoindexにする方針もコードで管理しています。計測タグは管理画面から設定できる専用画面を用意し、タグマネージャーやアクセス解析のIDをコードを触らずに切り替えられるようにしました。

壊れにくい開発環境とコード品質の担保

クラウド同期フォルダ上で開発するため、バージョン管理の実体を同期対象の外へ分離し、リポジトリの破損を避ける構成にしました。あわせてWordPressのコーディング規約（WPCS）を導入し、エスケープ・サニタイズ・接頭辞の統一といった品質基準を機械的にチェックできるようにしています。一人で作るからこそ、後から保守・引き継ぎできる状態を最初から組み込みました。

AIの担当と人の担当を分けた

これらの工程でClaude Code・Claude Code Designが担ったのは、**テンプレート生成・コード実装・ドキュメント整備・デザイン案出しといった「手を速く動かす部分」**です。一方で、デザインのバリアント選定、ACF制約への対処方針、公開可否の判断、本番切り替えの最終確認は人が行いました。反復作業と量産はAIに任せ、方針決定と最終レビューは人間が持つ——この切り分けが、内製で品質を保つための前提になっています。

成果

本プロジェクトの成果は、検索順位やセッション数といった運用後のKPIではなく（公開直後のため、これらは今後の運用で蓄積されます）、「AIを業務基盤にしたWeb制作モデルが、自社サイトで実際に成立した」ことにあります。

設計から本番公開までを1名・外注なしで完結

デザイナー・コーダー・ディレクターの分業を前提にする工程を、Claude CodeとClaude Code Designの組み合わせで一人で回し切りました。テーマの設計着手から本番公開までを2026年6月初旬の約1週間で進めています（事例・強みなどのコンテンツ素材は先行して整備済み）。

自由に作り込めるオリジナル基盤を獲得

構造から自分で設計したテーマのため、ブランドカラーの効かせ方・余白設計・事例やサービスの見せ方を思い通りに作れる状態になりました。事例やサービスは「増やせる」カスタム投稿タイプで設計したため、今後コンテンツが増えても同じ仕組みで拡張できます。

制約下でも運用できる内製基盤を確立

ACF無料版・SQLite・軽量なローカル環境という、コストを抑えた構成のまま、管理画面から全セクションを編集でき、1コマンドで本番反映できる運用基盤を作りました。「お金をかけないと内製は回らない」という前提を置かずに成立させた点が、再現性のある成果です。

提案モデルを自社で実証

ソリシオがお客様に提案する「AIで業務が回る状態を作る」という支援を、自社サイトの制作そのもので先に実証しました。サイトの制作過程が、そのまま営業上の説明材料になっています。

ふり返り・横展開ポイント

再現可能なポイント

本事例の核は、**「情報設計を先に固める × デザインと実装の役割分担を文書で固定する × AIに反復、人に判断を割り振る」**の3点です。これはソリシオの自社サイトに限らず、コーポレートサイトの内製・リニューアルに広く応用できます。

同じやり方でご支援できること

ソリシオは、本事例で確立した制作モデルを、お客様のコーポレートサイト制作・リニューアルにそのまま提供できます。

• AIを活用したサイトの内製・リニューアル: 情報設計から原稿・デザイン・実装・公開までを一気通貫で支援します
• オリジナルWordPressテーマの構築: 汎用テンプレートの枠に縛られず、ブランドと運用に合わせた基盤を一から設計します
• 公開後に自社で回せる運用設計: 管理画面で編集でき、更新が1コマンドで反映される仕組みまで含めて整えます
• AI業務基盤の移植: 「AIで何をすべきか」ではなく「AIで業務が回る状態」を、貴社の制作・運用に組み込みます

限界・前提条件

• 公開直後のため運用成果はこれから: 検索順位・流入・問い合わせといった定量成果は、今後の運用で蓄積されます
• 判断は人が持つ前提: AIは反復作業と量産を速くしますが、デザインの選定・公開可否・最終レビューは人が担う前提です。丸投げで品質が出る性質のものではありません
• クラシックテーマ方式の前提: 本事例はテンプレート数が少ないコーポレートサイトを想定した構成です。大規模・複雑な要件では別の実装方式の検討が必要になります