
CocoonとSWELLの完全比較ガイド【使ってわかった違い】
この記事では、WordPressの人気テーマ「Cocoon(コクーン)」と「SWELL(スウェル)」の機能を、わかりやすくまとめてご紹介します。
Cocoonは無料テーマ、SWELLは有料テーマですが、どちらも人気テーマなのでどっちがいいか迷う人も多いでしょう。
WordPress(ワードプレス)のデザインテーマを後から移行するのは大変なので、ざっくり機能を比較しておきましょう。
大きな違いは冒頭にまとめました。
なるほど!早速見てみます。
SWELLの口コミ・評判については、以下のレビュー記事をご覧ください。


- CocoonとSWELLのざっくりとした違いがわかる
- CocoonとSWELLの機能単位の詳細な比較がわかる
この記事を最後まで読めば、WordPressの人気テーマ「Cocoon(コクーン)」と「SWELL(スウェル)」の違いがわかります。
ぜひ最後まで進めてみてください。
\ 無料で高機能 /
\ 導入するだけ簡単おしゃれ /
Cocoon と SWELL の製品情報を比較
CocoonとSWELLを比較する前に、販売価格やライセンスなどの製品情報を確認しておきましょう。
| 比較項目 | Cocoon | SWELL |
|---|---|---|
| 公式サイト | https://wp-cocoon.com/ | https://swell-theme.com/ |
| 販売価格 | 無料(寄付特典は終了) | 17,600円(税込) |
| ダウンロード | 公式サイト | 公式サイト |
| 販売形態 | – | 買い切り |
| 複数サイト | 使い回し可能 | 使い回し可能 |
| ライセンス形態 | 100% GPL | 100% GPL |
| サポート | 公式フォーラム | 公式フォーラム |
| 発売時期 | 2018年3月 | 2019年3月 |
| 事業者 | エックスサーバー | 株式会社LOOS |
- GPLとは、WordPress本体でも利用されている再配布可能なOSS(オープンソースソフトウェア)のライセンス形態です。
- Cocoonは、わいひら氏からエックスサーバー社に事業譲渡されました。(2022/9/7)
料金の違いが一番大きいですが、それ以外にも大きな違いがあります。
Cocoon と SWELL の一番の違い


どちらも人気テーマですが、やはり使っていると気づく違いがあります。
一番大きな違いを挙げるとしたら、それは「デザイン性」になります。
わかりやすく 4つの例を挙げてみましょう。
1) トップページのメインビジュアルの比較
まずはトップページのデザインの違いを見てみましょう。
ここでの大きな違いは、目に飛び込んでくるメインビジュアル画像・動画を設定できるかどうかです。
PC表示
もちろんCocoonでもSWELLのようにメインビジュアル画像・動画を追加することはできます。
ただし、子テーマなどでCSSカスタマイズが必要になります。
スマホ表示
スマホでの表示はこんな感じになります。
Cocoonはブログ型デザインを基本としており、SWELLはサイト型デザインに寄せてあることがわかります。
SWELLのトップデザインは、公式サイトも参考になります。
\ 導入するだけ簡単おしゃれ /
2) モバイルヘッダーのデザインの比較
スマホ表示の設定をもう少し深ぼってみましょう。
Cocoonのスマホ表示にも、ハンバーガーメニュー()や検索ボタン()を追加することができます。
スマホ表示
ただし、Cocoonではキャッチフレーズ表示が残ります。
CocoonはPCとスマホが同じデザインを基本としており、SWELLはPCとスマホが別デザインに切り替わる前提になっていることがわかります。
今はスマホからのアクセスが多いので、スマホでの見え方は重要です。
3) 投稿記事の固定SNSシェアボタンの比較
トップページだけでなく、投稿記事にもデザインの違いが出ています。
Cocoonは本文中にのみSNSシェアボタンを配置できますが、SWELL
PC表示
例えば、noteでは画面下に、Qiitaでは画面左にSNSシェアボタンが固定表示されるデザインになっています。
これは、SEOだけでなくSNSから集客することが重要な位置を占めるように変化しているためです。
シェアボタンが常時表示されていると、TwitterやFacebookに拡散されやすそうです。
4) 投稿記事のスマホ固定ボタン/メニューの比較
スマホ表示では、CocoonもSWELL
- 画面下部に複数のボタンを固定メニューとして表示(Cocoonのデフォルト設定)
- 画面右下に個々のボタンを固定ボタンとして表示(SWELLのデフォルト設定)
スマホ表示
Cocoon


SWELL


SWELLでもCocoonのようなスマホ固定メニューを利用できます。
CocoonでもSWELLのようなスマホ固定ボタンを利用できますが、少し違いがあります。
CocoonをSWELLと同じようなデザイン設定に変更してみます。
スマホ表示
Cocoon


SWELL


ここでの一番大きな違いは、ページトップボタン ![]()
![]()
![]()
![]()
PC表示ではサイドバーへの目次の固定表示が増えていますが、SWELLではスマホ表示でも目次に簡単にアクセスできます。
SWELL(PC)


SWELL(SP)


読者が読み飛ばし、拾い読みしやすくなります。
機能はプラグインで追加できても、デザインは追加できない
機能比較の前に、デザイン比較をしてしまいましたが、これって重要なんです。
テーマにない機能は、だいたいプラグインを追加すればなんとかなります。
でも、サイト全体のデザインを変えてくれるプラグインは存在しません。
なぜなら、デザインテンプレートを提供するのがテーマの役割だからです。
テーマ設定で実現できないデザインは、CSSカスタマイズが前提になります。
なるほど!機能ばかり比較してました。


補足)エディターの装飾プラグインはあり
サイト全体のデザインではなく、個々の記事のエディターでの装飾機能はプラグインで追加することができます。
テーマにも標準的な装飾機能は搭載されているので、後から検討しても遅くはありません。
- Useful Blocks(SWELLと同じ開発者)
- Arkhe Blocks
(SWELLと同じ開発者) - Snow Monkey Blocks
補足)高速化やSEOもテーマ選定では重要
もちろんデザイン以外にも、テーマ選定のポイントはあります。
例えば、ページ表示速度(高速化)やSEOなどの最適化です。
これは、ただ単に機能が多ければいいというわけではなく、ある種の「シンプルさ」が必要になります。
ここからは、その観点も含めて、機能比較を見ていってください。
Cocoon と SWELL のざっくり比較
細かい機能比較の前に、メリット・デメリットをざっくり比較しておきましょう。
Cocoonはカスタマイズできる人向け、SWELLは初心者向けです。
- SWELLでも、子テーマや追加CSSなどからCSSカスタマイズは可能です。
ショートコードとブロックの違い
ショートコードとは、記事を編集するエディターでさまざまな機能を実現するものです。
例えば、Cocoonで記事一覧を追加したい場合は、以下のようなショートコードを入力します。
Cocoonの記事一覧(ショートコード)
[new_list count=3 cats=3 type=large_thumb_on children=1]
ショートコードは編集中に見た目を確認できないため、設定を間違うとテキストがそのまま表示されることがあります。
ショートコードが変換されずに、テキストがそのまま表示されているブログをよく見かけます。
Cocoonでは、ショートコードを多用することが多いです。
SWELLでは、ブロックエディタ(Gutenberg)完全対応なので、ほとんどのことがブロックで実現できます。
例えば、こんな感じです。
SWELLの記事一覧(ブロック)
-
WordPressテーマ事例集


OceanWPを使った国内サイト事例集【企業サイト/ブログ】
-
TCDテーマ事例集


TCD ZEROを使ったサイトデザイン事例集【企業サイト/ブログ】(tcd055)
-
TCDテーマ事例集


TCD SERUMを使ったサイトデザイン事例集【企業サイト/ブログ】(tcd096)
-
HP・EC事例集


Wixで作ったホームページ・ネットショップ事例集【企業サイト/ブログデザイン】
-
HP・EC事例集


Jimdo(ジンドゥー)で作ったサイト・ホームページ事例集【企業サイト/ブログデザイン】
-
WP-Search


【国内初調査】WordPressテーマ・プラグイン・レンタルサーバーの市場シェアを発表!【WP-Search】
カード型やサムネイル型、テキスト型などいろいろ選べます。
このサイトのトップページなども見てみてください。
Cocoon と SWELL の機能比較一覧


ここからは、詳しい機能を比較した一覧になります。
機能が多ければいいわけではなく、「シンプルさ」も重要になるため、単純に比較できない点はご留意ください。
メリットだけでなくデメリットもわかるので、コーポレートサイトのテーマ選びなどにも参考になると思います。
個人的に違いが大きいと感じる機能は下線をつけています。
Cocoon と SWELL の機能比較まとめ
最初にざっくりまとめておきます。
| 1) サイトデザイン | Cocoon < SWELL |
| 2) ユーザーアクション | Cocoon < SWELL |
| 3) 共通デザイン | Cocoon ≠ SWELL |
| 4) 記事デザイン | Cocoon ≪ SWELL |
| 5) 記事管理 | Cocoon > SWELL |
| 6) サイト収益化 | Cocoon < SWELL |
| 7) SEO | Cocoon ≒ SWELL |
| 8) 高速化 | Cocoon < SWELL |
| 9) Web技術 | Cocoon > SWELL |
1) サイトデザイン
Cocoon < SWELL
テンプレート
SWELLは他テーマからの乗り換えにも対応しています。
トップページ
SWELLは、メインビジュアルを簡単に設定できます。
| 機能 | Cocoon | SWELL |
|---|---|---|
| メインビジュアル画像 | × | ◯ |
| メインビジュアル動画 | × | ◯ |
| 記事スライダー/カルーセル | ◯(カルーセル) | ◯(記事スライダー) |
| ピックアップバナー/おすすめカード | ◯(おすすめカード) | ◯(ピックアップバナー) |
| 通知エリア/お知らせバー | ◯(通知エリア) | ◯(お知らせバー) |
- Cocoonでも「アピールエリア+CSS」などでメインビジュアルを設定することは一応可能です。
ヘッダー
SWELLは、PC表示とスマホ表示にそれぞれ最適化されています。
また、ヘッダー内にウィジェットを配置できるので、ブログパーツを使ってお問い合わせボタンなどを自由に設置できます。
フッター
フッター周りの設定に大きな違いはありません。
SWELLは、外観カスタマイズ(カスタマイザー)で見た目を確認しながらサイトをデザインできます。




2) ユーザーアクション
Cocoon < SWELL
SNSシェア
SWELLは、すぐSNSシェアボタンにアクセスできます。(PC)
SNSフォロー
SNSフォローの設定に大きな違いはありません。
固定ボタン/メニュー
SWELLは、スマホでもすぐ目次にアクセスできます。
自動内部リンク
関連記事や人気記事の表示に大きな違いはありません。
| 機能 | Cocoon | SWELL |
|---|---|---|
| 関連記事 | ◯ | ◯ |
| 人気記事 | ◯ | ◯ |
| カテゴリー別ウィジェット | ◯(ウィジェット設定) | ◯(カテゴリー設定) |
3) 共通デザイン
Cocoon ≠ SWELL
記事全体
SWELLも目次開閉できるようになりました。
| 機能 | Cocoon | SWELL |
|---|---|---|
| 画像内タイトル | × | ◯(コンテンツヘッダー) |
| 目次表示 | ◯ | ◯ |
| 目次開閉 | ◯ | ◯ |
| 外部リンクアイコン | ◯ | × |
| アバター画像 | ×(プラグイン対応) | ◯(カスタムアバター) |
- アバター画像は、「Gravatar」に登録するか、「One User Avatar」などのプラグインでも可能です。


ウィジェット
Cocoonはウィジェットの表示設定で、SWELLは制限エリアブロックでカテゴリーごとに表示を切り替えることができます。
- カテゴリー切替表示は、「Widget Options」などのプラグインでも可能です。
カスタム投稿
SWELLは、初めからLP(ランディングページ)機能が備わっています。
| 機能 | Cocoon | SWELL |
|---|---|---|
| LP | × | ◯ |
4) 記事デザイン
Cocoon ≪ SWELL
装飾ブロック
SWELLは、フルワイドデザインや投稿リスト設置が簡単にできます。
テキストリンクを簡単に設置できるので、記事タイトルを変更してもアンカーテキストのリライトが不要です。
例えば、こんな感じです。
Cocoonは、ふりがな(ルビ)機能が標準搭載されています。
| 機能 | Cocoon | SWELL |
|---|---|---|
| ふきだし | ◯ | ◯ |
| フルワイド | × | ◯ |
| ボックス | ◯(付箋風/白抜き) | ◯(ボックス装飾) |
| アイコンボックス | ◯(アイコン/案内) | ◯(ボックス装飾) |
| ラベルボックス | ◯(見出し/タブ/ラベル) | ◯(キャプションボックス) |
| アコーディオン(トグル) | ◯ | ◯ |
| タブ | ◯ | ◯ |
| カラム拡張(リッチカラム) | ◯ | ◯ |
| ステップ/タイムライン | ◯(タイムライン) | ◯(ステップ) |
| FAQ | ◯(構造化データ対応) | ◯(構造化データ対応) |
| 商品レビュー | × | ◯(構造化データ対応) |
| レビュースター | ◯ | ◯ |
| バナーリンク | × | ◯ |
| ボタン | ◯(コード貼付可) | ◯(コード貼付可) |
| インラインボタン | × | ◯ |
| 外部リンクカード | △(URL入力) | ◯(関連記事) |
| 内部リンクカード | × | ◯(関連記事) |
| テキストリンクカード | × | ◯(関連記事) |
| 記事一覧 | △(ショートコード) | ◯(投稿リスト) |
| RSS拡張 | × | ◯ |
| ボックスメニュー | ◯ | ◯ |
| 説明リスト | × | ◯ |
| リスト拡張 | ◯(アイコンリスト) | ◯(リスト拡張) |
| 見出し拡張 | × | ◯(見出し |
| 画像拡張 | ×(標準のみ) | ◯(複数デザイン) |
| カバー拡張 | × | ◯(全幅可) |
| スライダー | × | △(Arkhe Pro Pack |
| テーブル(表)拡張 | △(一部機能) | ◯(高機能) |
| コードハイライト | ◯ | ◯(Highlighting Code Block) |
| ふりがな(ルビ) | ◯ | ×(プラグイン対応) |
- SWELLのコードハイライトは、同じ開発者の「Highlighting Code Block」プラグインを導入した前提で比較しています。
- ふりがな(ルビ)は、「WP-Yomigana」などのプラグインでも可能です。
- ブロックエディタの前提で比較しています。
SWELLは、こんな感じのテーブルがワンクリックで呼び出せます。
![]() ![]() 商品A | ![]() ![]() 商品B | ![]() ![]() 商品C | |
|---|---|---|---|
| 機能A | 少し古い | 普通 | 最新機能 |
| 機能B | 非対応 | 制限付き | 使用可 |
| 性能A | 200[単位] | 500[単位] | 1000[単位] |
| 性能B | 500[単位] | 1000[単位] | 800[単位] |
| デザイン | 普通 | 良い | 微妙 |
| 価格 | 5,000円 | 10,000円 | 15,000円 |
| 購入する | 購入する | 購入する |
通常はテーブルの中にボタンを配置できませんが、SWELLではインラインボタンを設置可能です。
Cocoonもテーブルの○×△などの一部機能に対応しました。


ブロックエディタ(Gutenberg)の使い勝手は、SWELLの公式動画が参考になります。
\ 操作画面を動画で確認する /
ブロック制御
SWELLは、カテゴリーページやタグページ、ウィジェットをブロックエディタで編集できるブログパーツ機能がかなり便利です。
Cocoonは、クラシックエディターのような編集方法は一応可能です。
| 機能 | Cocoon | SWELL |
|---|---|---|
| ブロック余白設定 | × | ◯ |
| デバイス制限(PC/SPのみ表示) | × | ◯ |
| PC/SPだけ改行 | × | ◯ |
| ログイン制限(限定コンテンツ) | × | ◯ |
| 表示期間制限 | × | ◯ |
| ページ制限(カテゴリー等) | × | ◯ |
| カテゴリーページ編集 | △ | ◯(ブログパーツ) |
| タグページ編集 | △ | ◯(ブログパーツ) |
| 著者ページ編集 | × | ◯(ブログパーツ) |
| ウィジェット編集 | × | ◯(ブログパーツ) |
| カスタムCSS | ◯ | ◯ |
| カスタムJS | ◯ | ◯ |
5) 記事管理
Cocoon > SWELL
記事単位
Cocoonは、記事単位で細かい設定が可能です。
- リダイレクト機能はプラグインで追加することもできますし、サーバー設定でも可能なことも多いです。
6) サイト収益化
Cocoon < SWELL
計測
SWELLは、テーマ機能だけでボタンクリック率の計測やABテストが可能です。
| 機能 | Cocoon | SWELL |
|---|---|---|
| 記事一覧PV表示 | ◯ | ◯ |
| アクセス解析 | ×(プラグイン対応) | ×(プラグイン対応) |
| アナリティクス連携 | ◯ | ◯ |
| サーチコンソール連携 | ◯ | ◯ |
| タグマネージャー連携 | ◯ | ×(コード貼付) |
| ボタンクリック率計測 | × | ◯ |
| ボタンABテスト | × | ◯ |
通常ボタンクリック率の計測やABテストを行うには、Google アナリティクスなどで面倒な設定が必要になります。
広告
SWELLは、作成した広告タグのクリック率などの計測が可能です。
Cocoonは、Amazonや楽天などの物販機能が充実してますが、外部プラグインでも実現可能です。
| 機能 | Cocoon | SWELL |
|---|---|---|
| アドセンス広告管理 | ◯ | ◯ |
| インフィード広告 | ◯ | ◯ |
| アフィリエイトタグ管理 | ◯ | ◯ |
| アフィリエイトタグ計測 | × | ◯ |
| アフィリエイトタグ貼付ボタン化 | ◯(囲みボタン) | ◯ |
| アフィリエイトタグ貼付リンク化 | ◯ | × |
| 物販リンクカード | ◯ | ×(プラグイン対応) |
物販リンクカードを利用する場合は、ECプラグインを導入します。
7) SEO
Cocoon ≒ SWELL
SEO
SEO周りの設定に大きな違いはありません。
| 機能 | Cocoon | SWELL |
|---|---|---|
| パンくずリスト | ◯ | ◯ |
| メタディスクリプション | ◯ | ◯ |
| noindex | ◯ | ◯ |
| nofollow | △(記事のみ) | ◯ |
| canonical | ◯ | ◯ |
| 記事構造化データ | ◯(JSON-LD) | ◯(JSON-LD) |
| パンくずリスト構造化データ | ◯(JSON-LD) | ◯(JSON-LD) |
| FAQ構造化データ | ◯(JSON-LD) | ◯(JSON-LD) |
| 商品レビュー構造化データ | × | ◯(JSON-LD) |
- SWELLのSEO機能は、同じ開発者の「SEO SIMPLE PACK」プラグインを導入した前提で比較しています。


SEO(検索エンジン最適化)には多くの要因が関わるため、どちらが優れているか単純に結論づけることはできません。
上記のSEO機能自体は、SEOに関わる要素のあくまで一部です。
画像
画像周りの設定に大きな違いはありません。
画像の圧縮や「.webp」化などは、別途プラグインを利用しましょう。




8) 高速化
Cocoon < SWELL
高速化
SWELLは、jQueryライブラリの読み込みが必須ではなく、アイコン読み込みも削減することができます。
さらには、外部ファイルを読み込む際もAnalyticsやAdsenseなどのスクリプトの遅延読み込みが可能です。
Cocoonは、ブラウザキャッシュ機能がありますが、外部プラグインやサーバー機能でも実現可能です。
| 機能 | Cocoon | SWELL |
|---|---|---|
| ブラウザキャッシュ | ◯ | ×(プラグイン対応) |
| HTML圧縮/キャッシュ | ×(廃止) | ◯ |
| CSS圧縮/キャッシュ | ◯ | ◯(プラグイン不要) |
| CSSインライン読み込み | × | ◯ |
| 必要なCSSのみ読み込み | × | ◯ |
| ページキャッシュ | ×(プラグイン対応) | ×(プラグイン対応) |
| ページ事前読み込み(Prefetch) | ◯ | ◯ |
| 記事下コンテンツ遅延読込 | × | ◯ |
| 画像遅延読込(Lazy Load) | ◯ | ◯ |
| JavaScript遅延読み込み | × | ◯ |
| jQueryを読み込まない | × | ◯ |
| 外部アイコンフォントを読み込まない | × | ◯ |
| 絵文字用スクリプトを読み込まない | × | ◯ |
- キャッシュ機能を利用する場合はキャッシュプラグインを導入します。
- CSS圧縮/キャッシュは、キャッシュプラグイン以外にも「Autoptimize」などのプラグインでも可能です。
- ブラウザキャッシュは、エックスサーバー

、シンレンタルサーバー

、ConoHa WING

などのサーバー機能としても提供されていることがあります。
- キャッシュプラグインは初心者向けではありません。よくわからないまま導入しないようにしましょう。
- 画像遅延読込(Lazy Load)は、WordPress本体でも一部対応しています。
- SWELLは、独自アイコンや「Font Awesome」を、外部ファイルを読み込まずに使用することができます。
キャッシュプラグイン(高速化プラグイン)としては、以下のようなものがあります。
高速化(ページ表示速度)はコンテンツ次第なので、数字だけの比較はあまり参考になりません。
- 別のテーマを同じ条件で計測したとしても、有利不利が生まれるためあまり意味がありません。
- あなたのサイト設定や記事コンテンツの作り次第では、数値は全く異なるものになります。


9) Web技術
Cocoon > SWELL
Web技術
Cocoonは、Webの最新技術に対応していますが、外部プラグインでも実現可能です。
| 機能 | Cocoon | SWELL |
|---|---|---|
| AMP | ×(廃止) | ×(プラグイン対応) |
| PWA | ×(廃止) | ×(プラグイン対応) |
どちらも技術的な知識がある程度必要になります。よくわからないまま使用しないようにしましょう。
- AMPは高速化に寄与しますが、ユーザー体験が悪化する場合もあり、ほとんど利用されなくなってきています。
Cocoon と SWELL の総評
Cocoonは多機能なので、細かい設定が得意ですが、うまく設定しないと高速化やSEOなどが悪化する印象です。
SWELLはシンプルですが、デザイン性に優れ、デフォルトでも高速化やSEOがやりやすいです。
SWELLは有料
Cocoon と SWELL の今後
SWELLとCocoonとの業務提携が発表されました。
両テーマのユーザーとして、技術協力によるさらなるパワーアップを期待したいと思います。


Cocoonの今後
Cocoonは、エックスサーバー社に事業譲渡されました。(2022/9/7)
今後も無料のまま提供継続され、寄付特典機能も無償公開されるようです。


なお、同日に有料サブスクテーマ「WRITE」がリリースされています。
もしかしたら、Cocoonは最低限のアップデート対応や不具合対処のみとなり、新機能などのメインの開発はWRITEに移るのかもしれません。


SWELLの今後
高速化のプロである「スキルシェア」氏との顧問契約が発表されました。
バージョンアップによって、さらなる高速化が期待できます。


Cocoon と SWELL のサイト事例
実際のデザイン事例を確認したい場合は、サイト事例集をチェックしてみましょう。
「WP-Search」なら、気になるサイト・ブログのテーマやプラグインをもっと調べることもできます。




この記事のまとめ
WordPressの人気テーマ「Cocoon」と「SWELL
テーマ選びの参考になれば幸いです。
使い勝手が想像できました。
SWELLの購入手順と購入後の設定方法などが少しわかりにくいので、画像付きでまとめました。


SWELL初心者のためのお役立ちリンク集をまとめました。
おすすめのプラグインも載せていますので、参考にしてください。


SWELLの口コミ・評判については、以下のレビュー記事をご覧ください。


\ お得な購入方法 /
\ 人気No1 /













コメント