本文へスキップ

Headless CMS × Next.js + AIO

個人情報を持たない、
安全性を重視した
Webサイトへ。

サイトに個人情報を残さず、問い合わせは専用の窓口へ直接。WordPressの脆弱性対応にも、ノーコードツールの情報流出にも振り回されない、ヘッドレスCMSのWebサイトをつくります。

  • WordPressから移行
  • ノーコードツールから移行
  • デザインはそのまま or 刷新
  • AIO対策
無料でサイトを診断する相談無料・無理な移行提案はしません

Problem

こんなお悩み、ありませんか?

WordPressのサイト

  • 脆弱性・改ざんが心配
  • 更新すると壊れそうで怖い
  • プラグインが増え続けている
  • 保守の手間と費用がかさむ

ノーコードツールのサイト

  • 情報流出のニュースで不安に
  • サイトやデータを持ち出せるか不明
  • 解約・退会後のサイトの扱いが不明
  • 機能がツールの制約に縛られる

そしてどちらも ― AI検索で自社がどう紹介されているか、分からない。

PHP Risk

なぜ「PHPに依存しない」ことが重要なのか

WordPressをはじめ、多くのWebサイトはPHPで動いています。しかしPHPには構造的なセキュリティリスクがあり、継続的な対策が欠かせません。

PHPの脆弱性は年間数百件

PHPは世界で最も広く使われるサーバーサイド言語である一方、毎年多数の脆弱性が報告されています。WordPressの脆弱性の多くもPHPに起因します。

サーバーで動くからこそ狙われる

PHPはリクエストのたびにサーバーで実行されます。攻撃者はこの仕組みを利用し、悪意あるコードを仕込む「Webシェル」攻撃を仕掛けてきます。

更新を止めると危険が増す

PHP本体やWordPress、プラグインの更新を怠ると、既知の脆弱性が放置された状態に。攻撃の標的になりやすくなります。

MOLE's Approach

PHPを使わない、静的サイト生成。
サーバーで動くコードがないから、攻撃される場所そのものを減らせます。

  • ビルド時にHTMLを生成
  • CDNから静的配信
  • サーバー実行コードなし
  • プラグイン更新不要

参考:窓の杜:PHPに複数の脆弱性、Flatt Security Blog:PHP2Shellの脅威、Yahoo!ニュース:サイバー攻撃の実態

Compare

3つの作り方を、比べてみる。

WordPress・ノーコードSaaS・ヘッドレスCMSの比較

WordPress 一体型

ノーコードSaaS 預ける型

ヘッドレスCMS 分離型

公開サイトの攻撃面サーバーが常に公開ツール側が管理静的配信で最小限
個人情報の置き場所サーバーのDBに保存ツールに一括で預けるサイトには保存しない
コードの所有テーマ・プラグインに依存ツールの中にある自社のGitに残る
データの持ち出し可能だが手間が大きいツールの仕様しだいAPI・エクスポートで可能
保守の手間継続的な更新が必要ほぼ不要小さい
デザイン・機能の自由度テーマの範囲内ツールの機能の範囲内制約が少ない
AIO対策のしやすさプラグインで部分対応設定できる範囲のみ設計段階から組み込める

優れている条件しだい課題が残りやすい※ 一般的な傾向です。サイトの構成や運用体制によって異なります。

Security

被害を、1か所で止める設計へ。

まとめて預ける構成

1つの侵入で、すべてが対象に。

ヘッドレスCMSの分離構成

影響を、役割ごとに小さく抑える。

  1. 01フォームの回答はサイトに保存せず、専用の窓口へ直接届ける
  2. 02公開サイトは静的に配信。サーバーで動くCMSを外に出さない
  3. 03APIキーはホスティング側の環境変数で管理。制作ツールに預けない
  4. 04CMSは読み取り専用のトークンで接続。権限を最小にする

※ どの構成でもリスクはゼロにはなりません。ヘッドレスCMSも外部のクラウドサービスのため、権限設計と運用ルールまで含めてご提案します。

Ownership

サイトの「持ち主」は、あなた。

  • コード

    保管場所自社のGitリポジトリ

  • コンテンツ

    保管場所ヘッドレスCMS(APIで取り出し可能)

  • ドメイン・ホスティング

    保管場所自社名義の契約(Vercel・AWSなど)

CMSを替えても、サイトは作り直さなくていい。フロントエンドを活かしたまま、CMSの差し替えも見据えて設計します。

CMS

エンジニアがいなくても、
更新はかんたん。

お知らせ、ブログ、導入事例、採用情報、FAQ。今管理しているコンテンツを、使いやすい管理画面へ移します。入力項目も、更新する人に合わせて設計します。

Benefits

変わるのは、セキュリティだけではない。

  • Security攻撃される場所を減らす
  • PerformanceCDN配信で高速に
  • Maintenanceプラグイン管理から解放
  • ScalabilityEC・CRM・MAとつなげやすい
  • Designテーマやツールに縛られない
  • AI ReadinessAIに読み取られやすい構造

Design

デザインは、そのままでも。アップデートしても。

Option A

そのまま移行

見た目はそのまま、中身だけ入れ替え。

Option B

この機会にアップデート

導線・スマホ表示・ブランドを見直す。一部ページだけでもOK。

移行できるもの

  • 記事・固定ページ
  • 画像
  • カテゴリ・タグ
  • title / description
  • OGP
  • URL構造・リダイレクト

※ ノーコードツールからの移行は、公開中のページをもとにデザインとコンテンツを再構築します。

AIO — AI Optimization

作り直す今が、AIO対策のタイミング。

ChatGPTやGoogleの「AIによる概要」など、AIが答える時代。コンテンツの構造からつくり直すヘッドレスCMSなら、後付けではなく設計段階からAIO対策を組み込めます。

  • コンテンツモデル設計
  • 構造化データの自動出力
  • 読み取りやすいHTML
  • 企業情報の一貫性
  • AIクローラーの方針設計
  • AI検索での計測と改善

※ AIの回答への掲載や引用を保証するものではありません。

AI ASSISTANT
イメージ

〇〇で信頼できる会社を教えて

Platform

CMSは、サイトに合わせて選びます。

  • Contentful大規模・多言語・複雑な構造に強い
  • HygraphGraphQLネイティブ・柔軟なデータモデリング
  • …and more規模・体制・予算に合わせてご提案

Recommended Stack

おすすめの構成

サイトの目的・規模・運用体制に合わせて、最適な技術スタックをご提案します。

  • 人気

    Astro + Contentful + HubSpot

    コーポレートLPメディア

    静的サイト生成で最速の表示。コンテンツ管理はContentfulで柔軟に。フォームはHubSpotでリード管理まで一貫。

  • Next.js + Contentful + HubSpot

    コーポレートサービスサイト多言語

    SSR/ISRで動的な要素にも対応。大規模・多言語サイトに最適。HubSpotでMA連携も。

  • Next.js + Hygraph + HubSpot

    コーポレートメディアGraphQL

    GraphQLネイティブのCMS。複雑なデータ構造や関連コンテンツが多いサイトに。

  • Next.js + Firebase

    Webアプリ会員サイトリアルタイム

    認証・データベース・ホスティングを一元化。会員機能やリアルタイム更新が必要なサービスに。

  • Next.js + Shopify API

    ECD2Cカスタムストア

    Shopifyの商品管理・決済を活かしつつ、フロントは完全カスタム。ブランド体験を重視するECに。

  • Astro + Storyblok + HubSpot

    コーポレート代理店向けビジュアル編集

    ビジュアルエディタで直感的に編集。非エンジニアでも更新しやすい構成。

※ 上記以外の構成も対応可能です。Nuxt.js、Gatsby、Sanity、Strapi、Prismic など、ご要望に合わせてご提案します。

Why MOLE

MOLEが選ばれる、4つの理由。

200+社・プロジェクト

大企業から中小企業・スタートアップまで幅広く支援

大手企業30%
中小企業・スタートアップ50%
自治体20%
  1. 01

    デザインも開発も、一社で

    UI/UXデザインとNext.js開発を社内で一貫。見た目と仕組みを分断しません。

  2. 02

    ヘッドレス・JAMstackの開発経験

    ヘッドレスCMSとNext.js・Nuxt.js、AWS・GCPを使った開発に取り組んできました。

  3. 03

    自社プロダクト運営の知見

    自社でもWebサービスを開発・運営。運用する人の目線で設計します。

  4. 04

    公開後も、伴走する

    保守・改善・AIO計測まで。作って終わりにしません。

自社プロダクトLocalryWorkationspeeepsJammy

For You

こんな企業におすすめです。

  • ノーコードツールの情報流出を受け、構成を見直したい
  • WordPressの脆弱性対応・保守に疲れている
  • サイトのコードとデータを自社で持ちたい
  • セキュリティ基準が厳しくなってきた
  • 外部システムとの連携を考えている
  • AI検索での見え方が気になっている

Price

料金プラン

サイトの規模と、デザイン・AIOの組み合わせで選べます。表示価格はすべて税別です。

  • Light

    そのまま移行

    10ページ程度・デザインは現行踏襲

    ¥30万円〜

    • 現状調査・CMS設計
    • Next.js / Astroでの再構築
    • 記事・画像のデータ移行
    • URL・リダイレクト設定
    • 公開・旧環境の停止

    期間目安:約1〜2か月

    ※10ページ程度の参考価格

  • おすすめ

    Standard

    移行 + デザイン刷新

    10ページ程度・デザインをアップデート

    ¥100万円〜

    • Lightの内容すべて
    • UI/UXデザイン・情報設計
    • スマホ最適化・アクセシビリティ
    • AIO基本実装(構造化データ)
    • CMS入力画面の使いやすさ設計

    期間目安:約2〜3か月

    ※10ページ程度の参考価格

  • Enterprise

    大規模・多言語

    大量の記事・多言語・外部システム連携

    個別お見積り

    • Standardの内容すべて
    • 多言語・複数サイト対応
    • CRM・MA・ECなどの連携
    • 権限・承認フローの設計
    • セキュリティ要件への対応

    期間目安:ご要件に応じて

オプション

AIO対策AIO計測・改善レポートノーコードツールからの再構築ページ追加フォーム・外部サービス連携AI系プロダクト開発

詳細はお問い合わせください。

保守・運用プラン

月額プラン従量課金プラン

月額プラン・従量課金プランの両方をご用意しています。サイトの規模や更新頻度に応じて最適なプランをご提案します。

  • 監視・パッケージ更新
  • 軽微な修正・改善提案
  • ページ追加サポート
  • AI検索の計測・レポート

保守契約なしで、社内運用としてお引き渡しすることも可能です。

※ ContentfulやHygraph(GraphCMS)などのCMS利用料、ホスティング費用は別途、各サービスの料金体系に準じます。規模によっては無料プランで運用できる場合もあります。

Process

ご相談から公開までの流れ

  1. 01無料

    ご相談・診断

    URLから現状とリスクを診断

  2. 02

    お見積り・ご契約

    範囲・費用・スケジュールを確定

  3. 03

    調査・CMS設計

    AIOを見据えたデータ設計

  4. 04

    デザイン

    刷新時のみ・現行踏襲も可

  5. 05

    開発・データ移行

    Next.jsで構築し記事を移行

  6. 06

    確認・公開

    SEO・フォームを確認し切り替え

  7. 07

    保守・改善

    運用サポート・AIO計測

スケジュール例Standardプラン・約3か月の場合
123456789101112
調査・CMS設計
デザイン
開発
データ移行
確認・公開

単位:週(目安)

まずは、今のサイトを無料で診断します。

このサイト、
ヘッドレスにすると
いくら?

WordPressでも、ノーコードツールでも。今の構成を確認し、「今のまま使い続けるべきか」も含めてご提案します。無理に移行をおすすめすることはありません。

  1. 1フォームからURLを送る入力は1分ほど
  2. 2MOLEが構成とリスクを診断2-3営業日以内
  3. 3オンラインでご報告概算費用・期間・おすすめのCMS

無料診断・お問い合わせ

送信内容は本サイトには保存されず、お問い合わせ窓口へ直接届きます。

FAQ

よくあるご質問

移行・制作

Q.ノーコードツールのサイトからも移行できますか?

可能です。ツールによってはデータを書き出せないため、公開中のページをもとにデザインとコンテンツを再構築します。

Q.今のデザインをそのまま使えますか?

可能です。見た目を変えずに中身だけ移行することも、全面・部分的にアップデートすることもできます。

Q.SEOへの影響はありませんか?

影響を完全になくすことは保証できませんが、URL構造、metadata、構造化データ、リダイレクトなどを確認し、既存のSEO資産に配慮して移行します。

Q.制作期間はどのくらいですか?

規模によって異なります。そのまま移行で約1〜2か月、デザイン刷新を含む場合は約2〜3か月が目安です。

費用・契約

Q.CMSやサーバーの費用は別にかかりますか?

はい。CMSとホスティングは各サービスの利用料が別途かかります。規模によっては無料プランで運用できる場合もあります。

Q.お支払いのタイミングは?

着手時30%・公開月締翌月末払いで残りの70%の分割でのお支払いが基本です。詳細はお見積り時にご案内します。

Q.保守契約は必須ですか?

必須ではありません。社内で運用する場合は、更新マニュアルとあわせてお引き渡しします。

Q.デザイン刷新やAIO対策は必須ですか?

必須ではありません。ヘッドレスCMSへの移行を基本に、必要なものだけを組み合わせられます。

セキュリティ

Q.「個人情報を持たない」とはどういうことですか?

Webサイト(CMSや公開サーバー)に、お問い合わせ内容などの個人情報を保存しない構成のことです。フォームの送信内容はサイトに保存せず、専用のフォームサービスや貴社のCRM・メールへ直接届けます。個人情報そのものを扱わなくなるわけではないため、送信先の選定と設定もあわせてご提案します。

Q.ヘッドレスCMSもクラウドですが、安全なのですか?

リスクがゼロになるわけではありません。公開サイト・コンテンツ・コード・秘密情報を分けて管理するため、1か所に問題が起きても影響を限定しやすい構成です。権限設計や運用ルールもあわせてご提案します。

Q.今使っているツールの情報流出が心配です。

まずは運営会社の案内に沿って、パスワードやAPIキーなどの変更を行ってください。そのうえで、構成の見直しをご相談いただけます。

Q.秘密保持契約(NDA)は結べますか?

はい。ご相談の段階から締結できます。

Q.納品したコードは誰のものになりますか?

コードは貴社のGitリポジトリで管理します。権利の帰属は契約で取り決めます。

運用・AIO

Q.自分たちで更新できますか?

できます。CMSの管理画面から記事やお知らせを更新できます。更新する方に合わせて入力項目を設計します。

Q.公開後に機能を追加できますか?

可能です。API前提の構成のため、フォームや外部サービスとの連携も後から追加しやすくなっています。

Q.AIO対策とは何ですか?

ChatGPTやGoogleの「AIによる概要」などが回答をつくる際に、自社の情報が正しく読み取られ、参照されやすい状態に整える取り組みです。

Q.AIの回答に必ず表示されますか?

保証はできません。AIの回答は各社の仕組みで決まり、変化も速いためです。効果が見込める施策を実施し、公開後の計測で改善を続けます。

Company

会社概要

会社名
株式会社MOLE(MOLE inc.)
所在地
〒150-0002 東京都渋谷区渋谷1-23-21 co-lab渋谷キャスト
代表者
岡崎友宏
設立
2019年4月
事業内容
自社プロダクトの開発・運営/WEBサイト制作・開発/UI/UXデザイン/JAMstack開発/ECサイト開発/ネイティブアプリ開発

守るべき情報を、
サイトに置かない。

守り続けるか、構造から変えるか。今のサイトを確認し、継続利用も含めて最適な方法をご提案します。

無料でサイトを診断するWordPress / ノーコード → Headless CMS × Next.js + AIO