CocoonからSWELLへの移行手順｜初心者でも失敗しない完全ガイド

「CocoonからSWELLに乗り換えたいけれど、記事のデザインが崩れないか心配」

「移行の手順が複雑で、どこから始めればいいかわからない」

そんな不安を持っているCocoonユーザーに向けて、移行手順を画像付きで解説します。

手順通りに進めれば、初心者でも安全にCocoonからSWELLへ移行できます。移行前の準備から移行後の設定まで、この記事一本で完結します。

＼簡単操作で高機能なサイトが作れる／

SWELL公式サイトはこちら

一度購入すれば追加料金なしでずっと使えます

この記事でわかること

Cocoon→SWELL移行の全体の流れ
SWELL移行前に必ずやるべき準備
Cocoon→SWELL移行手順
SWELL移行後に行う設定
記事修正の進め方

移行前に知っておきたい2つの注意点

移行を始める前に必ず確認してください。この2点を把握しておくだけで、焦らず作業を進められます。

Cocoon独自の装飾がそのまま引き継がれない

Cocoon独自の吹き出し・ボックスなどの装飾は、SWELLに移行後そのまま表示されません。

そのため、Cocoonの機能を一部引き継いだ状態でSWELLへ移行できる「乗り換えサポートプラグイン」使います。

崩れを最小限に抑えながら移行することができますが、すべての機能やデザインを完全に再現することはできません。

早めにSWELLに合わせたサイト設定や記事修正を行う必要があります。

SWELLにはSEO設定機能がない

CocoonにはSEOタイトル・メタディスクリプションを記事ごとに設定する機能がありますが、SWELLにはありません。

そのため、SEO関連の設定や管理は「SEO SIMPLE PACK」というプラグインを使います。移行前にSEO情報を移しておく必要があります。

「SEO SIMPLE PACK」はSWELLの開発者が制作したプラグインです。安心して利用できます。

CocoonからSWELLへ移行：全体の流れ

SWELLを購入
SWELLERS’に会員登録
乗り換えサポートプラグインをインストール
SEO SIMPLE PACKをインストール
SEO情報を移行
CocoonのCSSを保存
SWELLをインストール・有効化
ユーザー認証を完了させる
SWELL移行後の設定
記事を修正
不要なプラグイン・Cocoonを削除

SWELLを購入する

SWELLの購入方法は、お使いのサーバーによって異なります。

エックスサーバー利用者の方は、SWELLを割引価格（880円OFFの16,720円）で購入できます。エックスサーバー公式ページをご確認ください。

それ以外のサーバーをお使いの方は、SWELL公式サイトから17,600円で購入できます。

本記事では公式サイトからの購入手順で解説しています。

1．SWELL公式サイトにアクセスします。

＼SWELL公式サイトはこちらから／

SWELL購入ページへ

2．利用規約に同意すればチェックを入れて、「SWELLを購入」をクリックします。

3．決済画面で必要事項を入力して「支払う」をクリックします。

4．SWELLの購入が完了しました。支払い画面で入力したメールアドレスにメールが届くので確認してください。

SWELLERS’に会員登録する

SWELLを利用するためには会員サイト「SWELLERS’」への登録が必要です。

1．SWELLの会員サイト（SWELLERS’）にアクセスします。

2．新規会員登録ページに必要事項を入力して「登録する」をクリックします。

必ず購入時に登録したメールアドレスを入力してください。

3．「新規登録が完了しました。」と表示されます。

4．Discordコミュニティに参加する場合は「参加する」をクリックして、アカウントを作成してください。（任意）

SWELLのDiscordコミュニティは、SWELLユーザー同士が交流できるオンラインコミュニティです。登録を迷っている場合は先に進んでください。

乗り換えサポートプラグインをインストールする

Cocoonからの移行専用プラグインです。SWELLを有効化する前にインストールしておく必要があります。

1．SWELLERS’のマイページにログインします。

2．SWELL製品ダウンロードの乗り換えサポートプラグイン「Cocoon用」をダウンロードします。

3．WordPress管理画面「プラグイン」→「新規プラグインを追加」→「プラグインのアップロード」をクリックします。

4．「ファイルを選択」をクリックします。

5．先ほどダウンロードした、乗り換えサポートプラグイン「Cocoon用」のファイル（cocoon-to-swell-1-1-2.zip）のファイルを選んでインストールします。

6．「プラグインを有効化」をクリックします。

7．乗り換えサポートプラグイン「Cocoon用」が有効化されました。

SEO SIMPLE PACKのインストール

1．SWELLのSEO関連の設定や管理を行うためのプラグイン「SEO SIMPLE PACK」をインストールします。

WordPress管理画面にアクセスして「プラグイン」→「新規プラグインを追加」をクリック
検索窓に「SEO SIMPLE PACK」と入力
「今すぐインストール」をクリック

2．「有効化」をクリックします。

3．WordPress管理画面「SEO PACK」をクリックして、設定画面を開きます。

基本設定の「フロントページ」のディスクリプションとキーワードを入力→「設定を保存」をクリックします。

Cocoonからコピーする場合

Cocoonでは、「Cocoon設定」→「タイトル」に設定しています。

SEO情報を移行する

SWELLを有効化するとCocoonのSEO設定画面が消えてしまいます。

SWELLを有効化する前に、Cocoonで設定していた各記事のSEO情報を「SEO SIMPLE PACK」へ移行しておきます。

各記事の編集画面を開くと、Cocoonのタグ設定下にSEO SIMPLE PACKの設定欄が表示されます。

記事数が多い場合は時間がかかりますが、SEO評価を守るために必ず行ってください。全て手作業でコピー＆ペーストして行います。

Cocoonのカスタマイザーの独自CSSの保存

CocoonのカスタマイザーでCSSを設定していた場合のみ対応が必要です。

CocoonとSWELLでは、HTML構造（Webページの骨組み）が異なるため、Cocoon用に書いたCSSがSWELLでは適用されない場合があります。さらに、Cocoonのカスタマイザーで設定した独自CSSは、SWELLに移行するとリセットされてしまいます。

そのため、移行前にCocoonのCSSをコピーして保存（Wordやメモ帳など）しておきます。

Cocoonのカスタマイザーとは

Cocoonのカスタマイザーとは、WordPressの管理画面で「外観 → カスタマイズ」からアクセスできる、テーマのデザインや設定を変更できる機能のことです。

Cocoonのカスタマイザーで設定した内容は、Cocoonのテーマに依存しているため、別のテーマに変更すると引き継がれないことがあります。特に「独自CSS」で設定したカスタマイズは、テーマを移行する際にリセットされるため、事前にコピーして保存しておくと安心です。

1．WordPress管理画面「外観」→「カスタマイズ」をクリックします。

2．「追加CSS」をクリックします。

3．追加してあるCSSコードをコピーして保存しておきます。

SWELLをインストール・有効化する

いよいよ、CocoonからSWELLに変わります。

1．SWELLERS’にログインします。

2．マイページにログインしたら、「SWELL本体最新版」と「子テーマ」のファイルをダウンロードします。

3．WordPress管理画面「外観」→「テーマ」→「テーマを追加」をクリックします。

4．「テーマのアップロード」をクリックします。

5．「ファイルを選択」をクリックして、先ほどダウンロードした「SWELL本体最新版」と「子テーマ」のファイルを選んで、それぞれインストールします。

SWELL本体最新版「swell-○-○-○.zip」のファイルを選んで「今すぐインストール」をクリックします。
続けて、子テーマ「swell child.zip」もインストールします。

6．SWELL本体最新版と子テーマがインストールされました。

WordPress管理画面「外観」→「テーマ」→SWELL CHILDにカーソルを合わせて、SWELLの子テーマを「有効化」します。

子テーマを有効化する理由

親テーマを直接カスタマイズすると、SWELLのアップデート時に変更内容が上書きされてしまいます。子テーマを使うことで、カスタマイズ内容を保ったまま安心してアップデートできます。

ユーザー認証を完了させる

SWELLが有効化されたので、ユーザー認証を行います。ユーザー認証を行わないとSWELLの管理画面からアップデートができなくなるので、必ず行いましょう。

1．「SWELLのユーザー認証が完了してません」をクリックします。

2．SWELLERS’会員アドレスを入力して、「認証リクエストを送信」をクリックします。

SWELLERS’会員アドレスとは、SWELL購入時に登録したメールアドレスです。

3．登録したメールアドレスに、SWELLのユーザー認証用のメールが届きます。URLをクリックします。

4．「認証が完了しました。」と表示されれば、完了です。

SWELLへ移行後に行う設定

テーマが「Cocoon」から「SWELL」に変わりました。乗り換えサポートプラグインが有効な間に以下の設定を進めます。

Googleアナリティクスとサーチコンソールの設定
SWELLのCSSの設定
OGP設定
プラグインの整理
SWELLテーマの設定

Googleアナリティクスとサーチコンソールの設定

Googleアナリティクスの測定ID入力とGoogleサーチコンソールの認証コード入力は、「SEO SIMPLE PACK」の一般設定から行います。

Googleアナリティクスの測定ID入力

「Googleアナリティクス」タグ→測定IDを入力→「設定を保存」をクリックします。

Googleアナリティクスの測定ID取得方法

①Googleアナリティクス「管理」→②「データストリーム」→③ストリーム名→④測定IDをコピー

Googleサーチコンソールの認証コード入力

「ウェブマスターツール」タブ→Googleサーチコンソールの認証コードを入力→「設定を保存」をクリックします。

Googleサーチコンソールの認証コード取得方法

①Googleサーチコンソール「設定」→②「所有権の確認」→③「HTMLタグ」→④入力コードをコピー

OGP設定

WordPress管理画面「SEO PACK」→「OGP設定」をクリックします。

OGPとは、SNSでシェアされたときに画像やタイトルなどサイトの内容が正しく表示される仕組みのことです。

基本設定

「基本設定」では、トップページがSNSでシェアされたときに表示される画像を設定します。画像を選択して、設定を保存してください。

OGP画像の推奨サイズは「横1200×縦630px」

Facebook

「Facebook」タブをクリックします。必要項目を入力して、設定を保存します。

Twitter

「Twitter」タブをクリックします。必要項目を入力して、設定を保存します。

summary：シンプルなサマリーカード
summary_large_image：大きな画像で、目立つサマリーカード（当サイトはこちら）

SWELLのCSSの設定

Cocoonで設定していたCSSをSWELLに設定します。事前に保存していたCocoonのカスタマイザーの独自CSSをSWELLのカスタマイザーに貼り付ける作業です。

また、他にも設定していたCSSがあれば設定してください。Cocoon用に書いたCSSがSWELLでは適用されない場合があるので、必要に応じて修正します。

項目	追加CSS	カスタム書式
適用範囲	サイト全体（ページ全体のデザイン）	記事エディター内（個別記事や要素）
エディター反映	反映されない	反映される
用途	レイアウト全体の調整	記事ごとのデザイン統一
具体例	ページ背景や余白	見出しやボタンのデザイン