CocoonからSWELLへ移行した手順と注意点

無料テーマのCocoonから有料テーマのSWELLへ乗り換えようか迷っていて、「移行作業ってどれくらい大変なんだろう」「記事の装飾とか全部やり直しになるのかな」と不安になっていませんか？

この記事は、私が実際にこのブログ(javeo.jp)を CocoonからSWELLへ移行した体験記と手順ガイドです、やった順番に沿ってまとめていきます

結論から言うと、移行そのものは思っていたよりずっとスムーズでした、記事本文の装飾は乗り換えサポートプラグインがほぼ吸収してくれて、大きく詰まる場面はほとんどなかったです

ただ、ひとつだけ「あ、これは自分で作り直すのか」となった山場があって、それが トップページのカスタマイズとサイドメニュー(サイドバー)でした、このあたりは後半でじっくり書きます

ちなみに移行作業の一部では Claude Code Desktop(ローカルのファイルやデータをAIに操作してもらえるツール)を使ってラクをしました、そのあたりの活用例も具体的に紹介していきます

Claudeってそもそも何という方は、Claudeの使い方を初心者向けに解説した記事から入ると全体像がつかみやすいですよ

なぜCocoonからSWELLへ移行したのか

まずは技術的な話の前に、そもそもなぜ乗り換えたのかという素直な動機から書いておきます

ブログに本腰を入れる心機一転

いちばん大きい理由は、ブログ活動に改めて本腰を入れて取り組もうと思ったことです

これまでもCocoonでぼちぼち書いてはいたんですが、せっかく腰を据えてやるなら、見た目から気分を変えたいなと思ったんですよね、形から入るタイプです

SWELLのほうが「本格的」に感じた

もうひとつは、単純な好みの問題です、SWELLのデザインや雰囲気のほうが「本格的」に感じたんですよね

Cocoonはとても優秀な無料テーマで、機能面でも全然不満はなかったです、ただ並べて見たときに、SWELLのほうが「ちゃんとしたメディアっぽい」空気が出るなと感じました

このへんは完全に主観なので、「Cocoonのほうが好き」という方もたくさんいると思います、私の場合はSWELLの見た目に惹かれた、という話です

技術的なメリットを並べて理屈で決めたというより、気分とデザインの好みで踏み切ったのが正直なところです

SWELLってどんなテーマ？価格とお得な買い方

移行手順に入る前に、SWELLがどんなテーマで、いくらするのかを整理しておきます、まだ購入していない方はここが気になりますよね

SWELLの特徴をざっくり

SWELLは国産の有料WordPressテーマで、ブロックエディタ(Gutenberg)との相性がよく、コードを書かなくても見た目を整えやすいのが特徴です

特に気に入っているのは次のようなところです

• ブロックエディタで装飾が完結する:ボタンやマーカー、ボックスなどが標準で用意されている
• デザインの統一感が出しやすい:設定をいじるだけで全体の雰囲気がまとまる
• 表示速度への配慮:高速化系の設定がテーマ側に組み込まれている
• 利用者が多い:情報が探しやすく、困ったときに記事が見つかりやすい

逆に「無料がいい」「カスタマイズを自分で全部コントロールしたい」という方にはCocoonのほうが向いていると思います、このへんは好みと運営方針しだいです

価格は17,600円の買い切り(複数サイト使い回しOK)

気になる価格ですが、SWELLは 通常17,600円(税込)の買い切り型です

月額のサブスクではなく、一度買えばずっと使えるタイプで、しかも 複数サイトで使い回しOKです、ブログを増やしても追加料金がかからないのは地味にうれしいポイントですね

「有料テーマってちょっと高いな」と感じる金額ではありますが、一度きりの出費で複数サイトに使えると考えると、長く運営するつもりなら元は取りやすいんじゃないかなと思います

エックスサーバー経由なら5%オフの16,720円で買える

ここでひとつ、私と同じでレンタルサーバーにエックスサーバーを使っている方に向けたお得情報です、エックスサーバーなら、サーバーの管理画面経由でSWELLを買うと割引が効きます

具体的には、通常17,600円のところ5%オフの16,720円で買えます、差額は880円とそんなに大きい額じゃないですが、せっかく使える特典なら活用しておきたいですね

仕組みとしては、エックスサーバーが有料テーマの優待販売をやっていて、SWELLもその対象に入っている、という流れですね、私もエックスサーバーユーザーなので、この優待価格で購入しました

買い方の手順はこんな感じです

1. エックスサーバーのアカウント(Xserverアカウント)にログイン
2. 左側メニューから 「WordPressテーマ」を開く
3. 「有料WordPressテーマの購入はこちら」から一覧を表示
4. SWELLを選んで決済(ここで優待価格が適用される)

ちなみに すでにエックスサーバーを契約している既存ユーザーでも、この割引はちゃんと使えます、新規契約じゃないと駄目、ということはないので安心してください

SWELL公式サイトから買っても通常価格(17,600円)なので、エックスサーバーを使っているなら管理画面経由のほうがお得、というのを覚えておくといいと思います

移行前にやっておきたい準備(バックアップは必須)

ここから実際の移行手順です、まずは移行前の準備から、ここをサボると後で泣くので、面倒でもひと手間かけておくのがおすすめです

バックアップだけは取っておく(ファイル+データベース両方)

テーマ移行で 最優先でやるべきはバックアップです、何かあったとき元に戻せる状態を作っておくのが、すべての保険になります

多少雑でもいいや、というスタンスでも、ここだけは妥協しないほうがいいです、私も「他は雑でいいけどバックアップは取る」と決めて進めました

バックアップは ファイル(wp-content等)とデータベース(MySQL)の両方が必要です、片方だけだと完全には戻せません

取り方は主に次のパターンです

1. レンタルサーバーの自動バックアップ機能を確認しておく(エックスサーバーなどは標準装備)
2. All-in-One WP MigrationやUpdraftPlusなどのプラグインで手動バックアップ
3. FTP+phpMyAdminで自力エクスポート(中級者向け)

個人的には、サーバー側の自動バックアップがある状態で、念のためプラグインでも「移行直前のスナップショット」を取っておくと安心感が違うのでおすすめです

いま使っている装飾とプラグインを把握しておく

もうひとつの準備が、現状の把握です、Cocoonで何を使っているかをざっと棚卸ししておくと、移行後に「どこが崩れたか」がわかりやすくなります

特にチェックしておきたいのは次のあたりです

• Cocoon独自の装飾クラス(マーカーや赤字強調など)を記事でどれくらい使っているか
• 導入済みプラグインの一覧(Cocoon依存のものがあるか)
• メタディスクリプションを記事ごとに設定しているか(後述の盲点に直結)
• トップページとサイドバーの構成(これが最大の山場)

このへんを先に押さえておくと、移行後に慌てずに済みます、私もここを整理しておいたおかげで、何を作り直せばいいかの見通しが立てやすかったです

この記事の作業はClaude Code Desktopにも手伝ってもらった

少し先取りすると、私はこの移行作業の一部を Claude Code Desktopに手伝ってもらいました

Claude Code Desktopは、自分のパソコンのファイルや、設定したデータにAIがアクセスして作業してくれるツールです、ターミナル(黒い画面)でコマンドを打たなくても、お願いベースで動いてくれます

今回でいうと、記事のメタディスクリプションをまとめて退避したり、テーマやプラグインの状態を機械的に確認したりという地味だけど手間のかかる作業を任せました、ここがどう効いたかは、このあと該当する場面で具体的に書いていきます

「自分はそんなツール使ってないよ」という方も、手作業でやれば同じことはできるので大丈夫です、AIに任せると一瞬だった、という体験談として読んでもらえればと思います

乗り換えサポートプラグインを入れる

準備ができたら、いよいよSWELL導入に進みます、その前に 乗り換えサポートプラグインを入れるのがコツです

「【SWELL】乗り換えサポート from Cocoon」とは

SWELLは公式で 「【SWELL】乗り換えサポート from Cocoon」という専用プラグインを用意してくれています、導入の流れはSWELL公式の乗り換えガイドにもまとまっているので、合わせて目を通しておくと安心ですよ

これが何をしてくれるかというと、Cocoon時代に使っていた装飾を、SWELLでもなるべく崩れないように表示してくれる仕組みです

CocoonとSWELLは装飾の中身(CSSクラスなど)が別物なので、本来なら単純にテーマを切り替えただけだと、マーカーやボックスが効かなくなってガタガタになります

そこをこのプラグインが間に立って吸収してくれるので、過去記事を一気に手直ししなくても、ある程度きれいなまま表示されるというわけです、これはかなりありがたい存在でした

SWELLマイページから入手して有効化

このプラグインは SWELL購入者向けのマイページからダウンロードできます

手順としてはこんな流れです

1. SWELLのマイページにログインして、乗り換えサポートプラグイン(Cocoon用)のzipをダウンロード
2. WordPress管理画面 → プラグイン → 新規追加 → プラグインのアップロード
3. ダウンロードしたzipを選んでインストール
4. 有効化する

ポイントは テーマを切り替える前に、このプラグインを先に有効化しておくことです、先に入れておくと、テーマ切替の瞬間から装飾の引き継ぎが効いてくれます

SEO SIMPLE PACKを入れる(メタ管理用)

もうひとつ、テーマを切り替える前に入れておきたいプラグインがあります、それが SEO SIMPLE PACKです

SWELL本体にはメタディスクリプション機能がない

ここがCocoonとの大きな違いなんですが、SWELL本体には、記事ごとのメタディスクリプションを設定する機能が入っていません

メタディスクリプションというのは、検索結果でタイトルの下に表示される、記事の説明文のことです、SEO的にも、クリック率的にもけっこう大事なやつですね

Cocoonはこれをテーマ側の機能として持っていたので、記事編集画面でサクッと設定できていました、ところがSWELLにはその機能がないので、別のプラグインで補う必要があるというわけです

SWELL作者も推奨するSEO SIMPLE PACK

そこで定番になっているのが SEO SIMPLE PACK という無料プラグインです、実はこれ、SWELLと同じ作者さんが作っているプラグインで、相性がいいことで知られています

メタディスクリプションやOGP(SNSでシェアしたときに出る画像や説明)の設定をまとめて管理できる、シンプルで使いやすいプラグインです

入れ方は普通のプラグインと同じです

1. WordPress管理画面 → プラグイン → 新規追加
2. 検索窓に 「SEO SIMPLE PACK」と入力
3. 今すぐインストール → 有効化

このプラグインを入れておくことが、次に説明する メタディスクリプションの引き継ぎ問題の前提になります、ここまでが準備の総仕上げという感じですね

SWELLを有効化してテーマを切り替える

プラグインの準備が整ったら、いよいよ SWELLを有効化してテーマを切り替えます

親テーマと子テーマの両方をインストール

SWELLには 親テーマ(SWELL本体)と子テーマ(SWELL CHILD)の2つがあります、どちらもSWELLのマイページからダウンロードできます

子テーマというのは、カスタマイズ用に用意された、親テーマを土台にする薄いテーマのことです、自分でCSSなどを追記したいとき、子テーマ側に書いておくと、親テーマのアップデートで上書きされずに済みます

手順はこんな感じです

1. 管理画面 → 外観 → テーマ → 新規追加 → テーマのアップロード
2. まず 親テーマ(SWELL本体)のzipをアップロードしてインストール(この時点では有効化しない)
3. 続けて 子テーマ(SWELL CHILD)のzipもアップロードしてインストール
4. 最後に 子テーマ(SWELL CHILD)を有効化する

原則として 有効化するのは子テーマのほうです、親テーマは土台として入れておくだけ、実際に表に立てるのは子テーマ、と覚えておくとわかりやすいです

切り替えた瞬間に過去記事の装飾は引き継がれる

子テーマを有効化した瞬間が、いわゆるテーマ切替のタイミングです、ここでサイトの見た目がガラッとSWELLに変わります

ドキドキの瞬間なんですが、先に乗り換えサポートプラグインを入れておいたおかげで、過去記事の本文はそこまで大きく崩れませんでした、マーカーやボックスもそれなりに表示されていて、ひと安心という感じでした

もちろん細かく見れば「ここはちょっと違うな」という箇所はあります、ただ パッと見で「全記事ぶっ壊れた」みたいな悲惨な状態にはならないので、乗り換えプラグインの効果は大きいです

ちなみにCocoon時代のマーカーや赤字強調のクラス(marker-underやbold-redなど)は、SWELLでは本来効きません、これも乗り換えプラグインが見た目を吸収してくれている、という理解でOKです

新しく書く記事はSWELL標準の装飾で書いていけばいいので、過去記事は当面そのまま、新規記事からSWELL流にという方針で問題なかったです

メタディスクリプションは乗り換えで引き継がれない(盲点)

ここが今回いちばん「知っておいてよかった」と思った 盲点です、テーマを切り替えたあとに気づくと地味にショックを受けるやつなので、先に共有しておきます

乗り換えプラグインは「装飾」は引き継ぐが「メタ」は引き継がない

さっき書いた乗り換えサポートプラグイン、記事の装飾はしっかり引き継いでくれます、ところが メタディスクリプションは引き継いでくれません

どういうことかというと、Cocoon時代に記事ごとに設定していたメタディスクリプションは、Cocoon独自の場所に保存されています、SEO SIMPLE PACKはその場所を読みにいかないので、切り替えた直後はメタディスクリプションが全部空っぽになるんです

「装飾は引き継いでくれたから、メタもいけるだろう」と油断していると、ここで足をすくわれます、私のブログでも、放っておけば 過去に設定したメタディスクリプションが全記事で消えた状態になるところでした

メタディスクリプションは検索結果の説明文に使われるので、空っぽのまま放置するとSEO的にもったいないです、ここは別途、自分で移行作業をする必要があると覚えておいてください

手動でやるなら「切替前の退避」が肝心

対策の考え方はシンプルで、テーマを切り替える前に、Cocoonに入っているメタディスクリプションを退避(コピー)しておくことです

退避しておけば、SEO SIMPLE PACKを入れたあとに、その退避データを記事ごとに貼り戻していけば復元できます、流れにすると次のとおりです

1. 切替前:各記事のメタディスクリプションをメモやファイルに退避しておく
2. 切替後:SEO SIMPLE PACKを有効化する
3. 復元:退避したメタディスクリプションを、記事ごとにSEO SIMPLE PACKの欄へ貼り戻す

記事数が少なければ手作業でも十分ですが、数十記事あると1記事ずつコピペするのはなかなかの手間です、ここで私は Claude Code Desktopに手伝ってもらいました

Claude Code Desktopで一括退避・一括書き戻しした話

私のブログには記事が79本あって、そのうち 47本にメタディスクリプションが設定されていました、これを1本ずつ手でコピペするのは、考えただけでうんざりする作業ですよね

そこでClaude Code Desktopに、全記事のメタディスクリプションを一括で吸い出すスクリプトを書いてもらって、まとめて退避しました、79記事から47件を吸い出すのが、ほぼ一瞬で終わりました

テーマをSWELLに切り替えてSEO SIMPLE PACKを入れたあとは、逆向きの作業をお願いしました、退避しておいた47件を、SEO SIMPLE PACK側へまとめて書き戻してもらった形です、これも手作業なら何時間もかかるところが、あっという間でした

もうひとつ地味に効いたのが、作業のたびに現状を機械的に確認できたことです

テーマやプラグインの状態も、Claude Code Desktopに頼めば いまアクティブなテーマと有効なプラグインをその場で確認できます、頭の中のイメージと実際の状態にちょっとした違いがあっても、その場で見て揃えられるので、迷わず進められました

メタの書き戻しも、現在の状態をきちんと確認したうえで進められたので、スムーズに対応できました、いつでも実際の状態を見られる安心感のなかで作業できたのは大きかったです

このあたりは、Claudeに細かいファイルやデータの作業を任せる感覚が掴めてくると、いろんな場面で応用が効きます、興味があればClaude Codeの拡張機構を解説した記事ものぞいてみてください

ちなみに、こういうツールに自分のサイトのデータを触らせるときは、セキュリティ面の基本も押さえておくと安心です、そのあたりはClaude Code Desktopの初心者向けセキュリティガイドにまとめているので、合わせて目を通しておくのがおすすめですよ

【山場】トップページとサイドメニューは作り直しが必要

さて、ここが今回の移行で いちばんの山場でした、データの移行はスムーズだったのに、ここだけは「自分で組み直すしかないのか」となった部分です

記事本文は引き継げても「サイトの見た目の核」は別物

ここまで書いてきたとおり、記事の本文やメタディスクリプションといった「データ」は、わりとすんなり移行できました、装飾は乗り換えプラグイン、メタは退避と書き戻しでなんとかなります

ところが、トップページのカスタマイズと、サイドメニュー(サイドバー)は、乗り換えでは引き継がれません

これはなぜかというと、トップページの構成やサイドバーの中身は、テーマごとに仕組みがまったく違うからです、Cocoonの設定の置き場所と、SWELLの設定の置き場所は別物なので、自動では移せません

言い換えると、「サイトの見た目の核」になる部分ほど、テーマ依存が強くて手動になるということです、ここは事前に知っておかないと、切り替えた直後に「あれ、トップがのっぺりしてる」と焦ると思います

トップページのカスタマイズはSWELL流に組み直す

Cocoonでは、トップページの構成を Cocoon設定やカスタマイザーで組んでいた方が多いと思います、ヘッダーのスライダーやおすすめ記事の並びなどですね

SWELLでは、これらを SWELL側の仕組みで一から組み直すことになります、具体的には次のようなところを設定し直す感じです

• メインビジュアル(トップ上部の大きな画像やスライダー)
• 記事一覧の表示形式(カード型・リスト型などのレイアウト)
• ピックアップ記事やカテゴリの見せ方
• トップ独自のセクション(SWELLはブロックでトップを組むこともできる)

面倒に聞こえるかもしれませんが、SWELLはこのあたりの設定がわかりやすく整理されているので、触っているうちに「なるほどここか」と掴めてきます、むしろ 移行を機にトップを見直すいい機会になりました

私の場合は、Cocoon時代の構成にこだわらず、SWELLらしい見せ方に思い切って作り替えたほうがしっくりきました、せっかく心機一転で乗り換えたので、ここは楽しみながらいじるのがおすすめです

サイドバー(ウィジェット)も並べ直しになる

サイドメニュー、つまりサイドバーのウィジェットも同じく作り直しです

ウィジェットというのは、サイドバーやフッターに置く「部品」のことです、プロフィール、人気記事、カテゴリ一覧、検索窓みたいなやつですね

テーマが変わると、ウィジェットを置ける場所(ウィジェットエリア)の構成も変わるので、どこに何を置くかを並べ直す必要が出てきます、設定場所は管理画面の 外観 → ウィジェット です

やることを整理すると、こんな感じです

1. 管理画面 → 外観 → ウィジェットを開く
2. SWELLのサイドバー用エリアに、表示したい部品(ウィジェット)を追加していく
3. プロフィール・人気記事・カテゴリなど、よく置く部品を並べ直す
4. パソコン表示・スマホ表示の両方で、崩れていないか確認

ここでの教訓をまとめると、記事本文やメタといった「データ」は移行できても、トップとサイドバーという「サイトの骨格」は手で組み直すということです

逆にここさえ覚悟しておけば、移行作業全体の見通しはぐっと立てやすくなります、私も「データはなんとかなる、骨格は作り直す」と切り分けて考えたら、気持ちがラクになりました

表示確認とキャッシュ削除を忘れずに

ひととおり組み直したら、最後に 表示確認とキャッシュ削除をやります、ここを飛ばすと「直したはずなのに反映されない」とハマるので、地味だけど大事な締めの作業です

キャッシュが残っていると古い表示のまま見える

WordPressではキャッシュ系のプラグイン(WP Fastest CacheやWP Super Cacheなど)を入れている方が多いと思います、ページを高速表示するために、作ったページを一時保存しておく仕組みですね

このキャッシュがクセモノで、テーマを切り替えたりメタを書き戻したりしても、キャッシュを消さないと古い表示のまま見えることがあります

実際、私もメタディスクリプションを書き戻したあとに確認したら、一部のページが古いまま(空のまま)表示されていて、一瞬「あれ、書き戻し失敗した？」と焦りました、原因は単にキャッシュが残っていただけでした

なので テーマ切替やメタ変更のあとは、キャッシュをいったん全部削除するのを習慣にしておくのがおすすめです、キャッシュ系プラグインの設定画面に「キャッシュを削除」みたいなボタンがあるはずなので、それを押すだけです

確認したいチェックポイント

キャッシュを消したら、ログアウト状態(または別ブラウザ)で実際の見え方をチェックします、確認したいのは次のあたりです

• トップページが組み直したとおりに表示されているか
• サイドバーのウィジェットが意図どおり並んでいるか
• アクセスの多い記事から優先的に、本文の装飾が崩れていないか
• メタディスクリプションが記事ごとに反映されているか(ソース表示で確認できる)
• スマホ表示でも崩れていないか

全記事を一気に完璧にしようとすると疲れるので、アクセスの多い記事から順に、気になるところだけ直していくくらいの気楽さで十分だと思います

乗り換えプラグインが吸収してくれている部分は、無理に今すぐ手直ししなくてもOKです、徐々にSWELL流の装飾に置き換えていけば、それでいいんじゃないかなと思います

まとめ:移行してよかった、これから書いていく

CocoonからSWELLへの移行をひととおりやってみて、移行してよかったというのが率直な感想です

この記事のポイントをおさらいすると、次のとおりです

• SWELLは通常17,600円の買い切り、エックスサーバー経由なら 5%オフの16,720円でお得に買える
• 移行前にバックアップ(ファイル+データベース)だけは取っておく
• 切替前に乗り換えサポートプラグインとSEO SIMPLE PACKを入れておく
• 装飾は乗り換えプラグインが吸収、ただし メタディスクリプションは引き継がれないので別途退避・書き戻し
• 最大の山場は トップページとサイドバー、ここは手で組み直す
• 仕上げにキャッシュ削除と表示確認を忘れずに

全体を通して感じたのは、「データの移行はスムーズ、サイトの骨格は作り直し」という切り分けさえできていれば、そこまで身構えなくていい作業だな、ということでした

メタディスクリプションの一括退避や状態確認をClaude Code Desktopに任せられたのも、地味だけど大きかったです、手作業だと心が折れそうな部分を丸ごとお願いできたので、移行のハードルがだいぶ下がりました

Claudeにこういう作業を任せる感覚をもっと知りたい方は、Claudeの使い方を初心者向けに解説した記事やClaude Codeの拡張機構を解説した記事から入ると、できることの幅が見えてくると思います

新しいテーマで気分も新たになったので、ここから改めて記事をどんどん書いていこうと思います、同じようにCocoonからSWELLへの移行を考えている方の、背中を少し押せていたらうれしいです