当社のコーポレートサイト（strikethrough.co.jp）は、もともとノーコードツール「Studio」で構築・運用していました。
Studioは直感的なUIで素早くサイトを公開でき、立ち上げ期には非常に助かりました。しかし事業の成長に伴い、LPの量産・実績ページの拡充・表示速度の改善など「やりたいこと」がStudioの制約にぶつかる場面が増えてきました。
そこで2026年3月、AIを活用してコードベースの静的サイトに全面移行。結果として、月額の運用コストはサーバー代のみに。しかもAIとの協業により、ページの追加や修正はノーコード時代よりもむしろ速くなりました。
この記事では、移行の判断基準から実際の手順、Before/Afterまでを公開します。
移行を決めた理由
Studioで運用を続ける中で、以下のような課題が顕在化してきました。
カスタマイズの限界
サービスが増えるにつれ、ページごとに異なるレイアウトや独自のインタラクションが必要になりました。Studioのコンポーネント機能では実現が難しい表現が増え、「やりたいデザイン」と「できること」のギャップが広がっていきました。
表示速度の壁
Studioはページを表示する際にJavaScriptの実行が必要な仕組みです。静的なHTMLファイルと比較すると、体感速度やPageSpeed Insightsのスコアに差が出る場面がありました。
SEOの細部が制御できない
構造化データの自由な設定、meta情報のページ単位での細かい制御、sitemap.xmlのカスタマイズなど、SEOを突き詰めようとすると手が届かない部分がありました。
AIとの協業で「コードが書けない」が理由にならなくなった
最大の後押しになったのは、AIツール（Claude）との協業で、コードベースの開発でも十分な速度が出せる体制が整ったことです。「コードを書けないから」ノーコードを選んでいた前提が変わりました。
Before / After
せっかくなので、コンテンツ追加、多少の色味や、CSSのアニメーションの追加などしてみました。
トップページ
サービスページ
実績ページ
デザインの方向性は踏襲しつつ、余白の使い方やタイポグラフィ、ホバーアニメーションなどの細部を改善しています。
移行の全手順
STEP 1：ページと素材の棚卸し
まず旧サイトの全ページをリストアップしました。
- トップページ
- サービス一覧 + 各サービス詳細（6ページ）
- 実績紹介一覧 + 各実績詳細（7ページ）
- 会社概要
- 資料ダウンロード
- お問い合わせ
- プライバシーポリシー
合計で約20ページ。各ページのテキスト、画像、リンク先を一覧にして、移行漏れが起きないようにしました。
STEP 2：コンテンツの抽出
Studioからテキストと画像を取り出します。
テキストはStudioの編集画面から直接コピーするのが確実です。
画像は、ローカルに保存してある元ファイルを使うのが基本です。購入した素材のオリジナルファイルや、自社で撮影・作成した元データがあるはずなので、そこから引っ張ってくるのが安全で確実です。
STEP 3：画像の権利確認
移行時に見落としがちなのが、画像の権利確認です。
| 画像の出所 | 対応 |
|---|---|
| 自社で撮影・作成した画像 | 問題なし。そのまま使えます |
| Adobe Stockなど有料素材で購入済み | ローカルに保存してある元ファイルから利用。購入時のライセンス条件を念のため確認 |
| Unsplashなどのフリー素材 | Unsplashで改めて検索してダウンロードし、利用規約に沿って使用しましょう |
| 出所が不明な画像 | 使用を控え、代替の素材を探す |
StudioにはUnsplashの画像検索が組み込まれています。もしStudio上でUnsplashから選んで使っていた画像がある場合は、改めてUnsplashのサイト（unsplash.com）で同じ画像を検索してダウンロードし直すのがおすすめです。Unsplashの利用規約を確認した上で、規約に沿って使用しましょう。
STEP 4：AIと一緒にサイトを構築する
ここが今回の移行で最も大きなポイントです。
従来のサイト移行では、デザイナーにデザインを依頼し、エンジニアに実装を発注し、何度もフィードバックを往復する…というプロセスが必要でした。しかし今回は、AIとの対話だけでサイト全体を構築しました。
やったことはシンプルです。
- 「トップページをこういう構成で作って」と指示する
- AIがコードを生成する
- 表示を確認して「ここをもう少しこうして」とフィードバックする
- AIが即座に修正する
この繰り返しだけです。実装コードの細部を理解していなくても、「何を作りたいか」「どう見せたいか」が言語化できれば、AIが形にしてくれます。
技術的には、Reactベースのフレームワークで静的HTMLを生成する構成を採用しました。が、正直なところ技術選定もAIに相談して決めています。重要なのは技術そのものではなく、「AIと一緒に作れる環境を選ぶ」ということです。
STEP 5：フォームの移行
Studioでは組み込みのフォーム機能を使っていましたが、移行先ではHubSpotのフォームを採用しました。
HubSpotを選んだ理由：
- CRMとの連携で問い合わせを一元管理できる
- 自動返信メールの設定が柔軟
- 無料プランでも十分な機能
フォームの埋め込みもAIに任せれば、数分で実装が完了します。
STEP 6：サーバーにアップロードする
生成した静的HTMLファイルをサーバーにアップロードします。
当社の場合はXserverを使っていたため、Gitを使った自動デプロイの仕組みを構築しました。コマンド1つで本番に反映される環境です。
ただし、ここまで凝る必要はありません。サーバーの種類は何でもOKです。
- Xserver、さくら、ConoHa等のレンタルサーバー
- AWS、GCP等のクラウドサービス
- Vercel、Netlify等のホスティングサービス
どれを使っても問題ありません。レンタルサーバーなら、生成された静的ファイル（HTMLやCSS、画像）をFTPで手動アップロードするだけでも動きます。自動化はあとから検討すれば十分です。
サーバーの設定がわからなければ、契約しているサーバーの管理者やサポートに聞きましょう。「静的HTMLファイルをアップロードしたい」と伝えれば、案内してもらえるはずです。
STEP 7：ドメインの切り替え
最後にドメイン（URL）を切り替えます。Studio側でカスタムドメインの設定を解除し、新しいサーバー側にドメインを向けます。
SSL証明書（https化）は多くのサーバーで無料で提供されています。切り替え後、全ページの表示確認・フォーム送信テスト・OGP表示確認を行い、問題がないことを確認して移行完了です。
何が変わったか
| 項目 | Studio（旧） | AI×コードベース（新） |
|---|---|---|
| サイトの編集 | Studioの管理画面で操作 | AIに指示して修正 |
| ページの追加 | テンプレートの範囲で作成 | AIに「こういうページ作って」と言うだけ |
| 表示速度 | やや遅い（JS実行が必要） | 高速（静的HTML） |
| デプロイ | 管理画面から「公開」 | コマンド1つ or FTPアップロード |
| フォーム | Studio組み込み | HubSpot（CRM連携付き） |
| 月額コスト | Studio有料プラン | サーバー代のみ（月額1,000円前後） |
| 自由度 | テンプレートの範囲内 | 制約なし |
Studioのままでいい人 / 移行を検討すべき人
移行が常に正解とは限りません。以下を参考に判断してください。
Studioのままでいい人
- サイトの更新を非エンジニアが1人で行いたい。Studioの最大の強みは、コードを書かずに直感的にページを編集・公開できること。この手軽さは大きな価値です。
- ページ数が少なく、構成の変更もほぼない。5〜10ページ程度のシンプルなサイトで、今後も大きく増やす予定がなければ、Studioで十分です。
- デザインの自由度より、運用の手軽さを優先したい。テンプレートの範囲でデザインが収まるなら、無理に移行する理由はありません。
- AIツールを使う予定がない。移行後の更新手段がないと、サイトが塩漬けになります。
移行を検討すべき人
- LP追加や実績更新が頻繁で、Studioの操作性に限界を感じている。AIを使えば、ページの量産はむしろ速くなります。
- 表示速度やSEOを本気で改善したい。静的HTMLは初回表示が圧倒的に速く、SEOの細部も完全にコントロールできます。
- ランニングコストを下げたい。Studioの有料プランが不要になり、サーバー代のみで運用可能です。
- AIとの協業に抵抗がない。「やりたいこと」を言語化できるなら、コードの知識は必須ではありません。
- 将来的にサイトを事業成長に合わせて進化させたい。機能追加、多言語化、外部サービス連携など、何でも自由にできる基盤が手に入ります。
Studioのメリット・デメリット
メリット
- ノーコードで即公開できる。思い立ったその日にサイトを公開できる手軽さは最大の強み。
- デザインUIが直感的。ドラッグ＆ドロップでレイアウトを組め、デザイナーでなくても見栄えの良いサイトが作れる。
- CMSが組み込み。ブログや実績などの動的コンテンツも、Studioの管理画面だけで完結する。
- 日本語サポート。日本企業が開発しており、ドキュメントやサポートが日本語で受けられる。
- チーム共同編集ができる。複数人で同時にサイトを編集できる。
デメリット
- カスタマイズに限界がある。独自のレイアウト、アニメーション、外部サービス連携など、「あと少し」ができない場面がある。
- 表示速度に構造的な制約がある。JavaScript実行後に画面を描画する仕組みのため、静的HTMLと比べると初回表示が遅くなりがち。
- SEOの細部が制御しにくい。構造化データやsitemap.xmlなど、細かい設定に手が届きにくい。
- ベンダーロック。Studioから他のプラットフォームに移行する際、エクスポート機能がないため手動での移行作業が必要。
- コストが事業成長で増加する。ページ数やPV数の増加に伴い、上位プランが必要になる場合がある。
AI×コードベースのメリット・デメリット
メリット
- 完全に自由。レイアウト、アニメーション、機能、なんでも実現できる。制約がない。
- 表示速度が圧倒的に速い。静的HTMLなのでサーバー処理が不要。ユーザーが待つ時間が最小化される。
- SEOを完全に制御できる。meta情報、構造化データ、OGP、sitemap.xml、すべてをページ単位で自由に設定できる。
- 運用コストが安い。サーバー代のみで運用可能。月額1,000円前後。
- AIで自動化できる。ページの追加、修正、LP量産、テスト──すべてAIとの対話で完結する。開発会社への外注が不要。
- 変更履歴が残る。誰がいつ何を変更したか、すべて追跡可能。問題が起きてもすぐに戻せる。
デメリット
- AIを使いこなす前提がある。「何を作りたいか」を言語化できる必要がある。ただし、コードを書ける必要はない。
- 初期構築に時間がかかる。ゼロからの構築は、Studioで同じページ数を作るより時間がかかる。
- CMS機能は別途必要。ブログなどの動的コンテンツ管理は、外部のCMSサービスと連携するか、AIに都度依頼する形になる。
コードがわからなくても、なんとかなる時代
「コードベースに移行する」と聞くと、プログラミングの知識が必須のように感じるかもしれません。しかし、AIとの協業が前提であれば、話は変わります。
実際のところ、今回の移行で私がやったことは：
- 「こういうページを作ってほしい」とAIに伝える
- 表示を見て「ここをこう直して」とフィードバックする
- 「本番に公開して」と指示する
これだけです。CSSの書き方やフレームワークの設定ファイルの意味を理解している必要はありません。「やりたいこと」を人に説明するのと同じ感覚で、AIに伝えればいいのです。
もちろん、技術的な仕組みを理解していればより精度の高い指示が出せます。しかし「理解できないとまったく無理」ということはありません。AIが生成したコードの結果（=実際の画面表示）を見て、「違う」「もうちょっとこう」と言えれば、それで回ります。
将来的な展望
今回の移行で得られた最大の収穫は、「サイトの制約に縛られず、事業の成長に合わせてサイトを自由に進化させられる基盤」 を手に入れたことです。
実際に移行後すぐ、サービスのLPや制作パートナー募集のLPを素早く追加できました。Studioのままだったら、同じスピードでは実現できなかったと思います。
そして何より、この基盤は今後もっと価値を発揮します。
- AIの進化でさらに加速する。AIは日々進化しており、今できることは半年後にはもっと速く、もっと高品質にできるようになります。コードベースの資産はその恩恵をダイレクトに受けられます。
- 自動化の幅が広がる。ページの自動生成、コンテンツの自動更新、テストの自動化──コードベースだからこそ自動化できる領域が広い。
- 外部サービスとの連携が自由。CRM、MAツール、アクセス解析、チャットボット──何と連携するにも、コードベースなら制約がありません。
ノーコードかコードベースかという二項対立ではなく、事業のフェーズと体制に合った選択をすることが大切です。立ち上げ期はStudioで素早く公開し、成長期にAI×コードベースに移行する──これは一つの有効なパターンだと考えています。
まとめ
ノーコードからAI×コードベースへの移行は、「エンジニアがいなければ無理」という話ではなくなりました。
AIが何をしているのかを理解し、やりたいことを言葉にできるなら、基本的になんとかなります。
しかも一度移行すれば、運用コストはサーバー代だけ。ページ追加やデザイン修正はAIとの対話で完結。さらにAIの進化に伴って、できることは今後どんどん広がっていきます。
移行を迷っている方は、まず小さなLPを1枚、AIと一緒に作ってみてください。「あ、これでいけるんだ」と体感すれば、判断がつくはずです。
