CocoonとSWELLの完全比較ガイド【使ってわかった違いをレビュー】

この記事では、WordPressの人気テーマ「Cocoon(コクーン)」と「SWELL(スウェル)」の機能を、わかりやすくまとめてご紹介します。

Cocoonは無料(寄付)テーマ、SWELL有料テーマですが、どちらも人気テーマなのでどっちがいいか迷う人も多いでしょう。

WordPress(ワードプレス)のデザインテーマを後から移行するのは大変なので、ざっくり機能を比較しておきましょう。

suya

大きな違いは冒頭にまとめました。

なるほどくん

なるほど!早速見てみます。

この記事でできること
  • CocoonSWELLざっくりとした違いがわかる
  • CocoonSWELL機能単位の詳細な比較がわかる
この記事を書いた人

suya

  • 前職は大手IT企業
  • マーケターエンジニアの両方を経験
  • 月1億円のWeb売上
  • セキュリティの専門家(国家資格
  • 前職は大手IT企業
  • マーケターエンジニア
  • 月1億円のWeb売上
  • セキュリティ国家資格

この記事を最後まで読めば、WordPressの人気テーマ「Cocoon(コクーン)」と「SWELL(スウェル)」の違いがわかります。

ぜひ最後まで進めてみてください。

目次

Cocoon と SWELL の一番の違い

どちらも人気テーマですが、やはり使っていると気づく違いがあります。

一番大きな違いを挙げるとしたら、それは「デザイン性」になります。

suya

わかりやすく 4つの例を挙げてみましょう。

1) トップページのメインビジュアルの比較

まずはトップページのデザインの違いを見てみましょう。

ここでの大きな違いは、目に飛び込んでくるメインビジュアル画像・動画を設定できるかどうかです。

PC表示

Cocoon

WordPressテーマ「Cocoon(コクーン)」のトップページPCデザイン(デフォルト)
メインビジュアルなし

SWELL

WordPressテーマ「SWELL(スウェル)」のトップページPCデザイン(デフォルト)
メインビジュアルあり

もちろんCocoonでもSWELLのようにメインビジュアル画像・動画を追加することはできます。

ただし、子テーマなどでCSSカスタマイズが必要になります。

スマホ表示

Cocoon

WordPressテーマ「Cocoon(コクーン)」のトップページSPデザイン(デフォルト)
メインビジュアルなし

SWELL

WordPressテーマ「SWELL(スウェル)」のトップページSPデザイン(デフォルト)
メインビジュアルあり

スマホでの表示はこんな感じになります。

Cocoonブログ型デザインを基本としており、SWELLサイト型デザインに寄せてあることがわかります。

suya

SWELLのトップデザインは、公式サイトも参考になります。

\ 導入するだけ簡単おしゃれ /

2) モバイルヘッダーのデザインの比較

スマホ表示の設定をもう少し深ぼってみましょう。

Cocoonのスマホ表示にも、ハンバーガーメニュー()や検索ボタン()を追加することができます。

スマホ表示

Cocoon

WordPressテーマ「Cocoon(コクーン)」のトップページSPデザイン(デフォルト2)
キャッチフレーズあり

SWELL

WordPressテーマ「SWELL(スウェル)」のトップページSPデザイン(デフォルト)
キャッチフレーズなし

ただし、Cocoonではキャッチフレーズ表示が残ります。

CocoonPCとスマホが同じデザインを基本としており、SWELLPCとスマホが別デザインに切り替わる前提になっていることがわかります。

suya

今はスマホからのアクセスが多いので、スマホでの見え方は重要です。

3) 投稿記事の固定SNSシェアボタンの比較

トップページだけでなく、投稿記事にもデザインの違いが出ています。

Cocoonは本文中にのみSNSシェアボタンを配置できますが、SWELLは画面左側に固定表示させることもできます。

PC表示

Cocoon

WordPressテーマ「Cocoon(コクーン)」の投稿記事PCデザイン(デフォルト)
SNSシェアボタンは本文中のみ(記事上、記事下)

SWELL

WordPressテーマ「SWELL(スウェル)」の投稿記事PCデザイン(デフォルト)
SNSシェアボタンを固定表示も可能(画面左)

例えば、noteでは画面下に、Qiitaでは画面左にSNSシェアボタンが固定表示されるデザインになっています。

これは、SEOだけでなくSNSから集客することが重要な位置を占めるように変化しているためです。

suya

シェアボタンが常時表示されていると、TwitterやFacebookに拡散されやすそうです。

4) 投稿記事のスマホ固定ボタン/メニューの比較

スマホ表示では、CocoonSWELLもフッター固定のボタンとメニューが 2パターン利用できます。

  • 画面下部に複数のボタンを固定メニューとして表示(Cocoonのデフォルト設定)
  • 画面右下に個々のボタンを固定ボタンとして表示(SWELLのデフォルト設定)

スマホ表示

Cocoon

WordPressテーマ「Cocoon(コクーン)」の投稿記事SPデザイン(デフォルト)
スマホ固定メニュー(画面下部)

SWELL

WordPressテーマ「SWELL(スウェル)」の投稿記事SPデザイン(デフォルト)
スマホ固定ボタン(画面右下)

SWELLでもCocoonのようなスマホ固定メニューを利用できます。

CocoonでもSWELLのようなスマホ固定ボタンを利用できますが、少し違いがあります。

CocoonSWELLと同じようなデザイン設定に変更してみます。

スマホ表示

Cocoon

WordPressテーマ「Cocoon(コクーン)」の投稿記事SPデザイン(デフォルト)
ページトップボタン(画面右下)

SWELL

WordPressテーマ「SWELL(スウェル)」の投稿記事SPデザイン(デフォルト)
ページトップボタン+目次ボタン(画面右下)

ここでの一番大きな違いは、ページトップボタン WordPressテーマ「SWELL(スウェル)」のページトップボタン の他に、目次ボタン WordPressテーマ「SWELL(スウェル)」の目次ボタン が設定できるかどうかです。

PCではサイドバーへの目次の固定表示が増えていますが、SWELLではスマホでも目次に簡単にアクセスできます。

SWELL(PC)

WordPressテーマ「SWELL(スウェル)」の投稿記事PCデザイン(目次追尾)
目次サイドバー追尾(PC表示)

SWELL(SP)

WordPressテーマ「SWELL(スウェル)」の投稿記事SPデザイン(目次ポップアップ)
目次ポップアップ(スマホ表示)
suya

読者が読み飛ばし、拾い読みしやすくなります。

機能はプラグインで追加できても、デザインは追加できない

機能比較の前に、デザイン比較をしてしまいましたが、これって重要なんです。

テーマにない機能は、だいたいプラグインを追加すればなんとかなります。

でも、サイト全体のデザインを変えてくれるプラグインは存在しません

なぜなら、デザインテンプレートを提供するのがテーマの役割だからです。

suya

テーマ設定で実現できないデザインは、CSSカスタマイズが前提になります。

なるほどくん

なるほど!機能ばかり比較してました。

補足)エディターの装飾プラグインはあり

サイト全体のデザインではなく、個々の記事のエディターでの装飾機能はプラグインで追加することができます。

テーマにも標準的な装飾機能は搭載されているので、後から検討しても遅くはありません。

装飾プラグインの例
  • Useful Blocks(SWELLと同じ開発元)
  • Arkhe Blocks(SWELLと同じ開発元)
  • Snow Monkey Blocks
  • SIMPLE BLOG DESIGN

補足)高速化やSEOもテーマ選定では重要

もちろんデザイン以外にも、テーマ選定のポイントはあります。

例えば、ページ表示速度(高速化)SEOなどの最適化です。

これは、ただ単に機能が多ければいいというわけではなく、ある種の「シンプルさ」が必要になります。

ここからは、その観点も含めて、機能比較を見ていってください。

Cocoon と SWELL のざっくり比較

細かい機能比較の前に、メリット・デメリットをざっくり比較しておきましょう。

Cocoon
SWELL
  • 導入しただけではおしゃれにならない
  • CSSカスタマイズを推奨
  • ブログ型デザインが基本
  • ショートコードを多用
  • カスタマイズ情報が多い
  • 導入しただけでもおしゃれになる
  • CSSなしでもデザイン可能
  • サイト型デザインも簡単
  • ショートコードなしも可能
  • カスタマイズ情報は増加途上
suya

Cocoonはカスタマイズできる人向け、SWELLは初心者向けです。

  • SWELLでも、子テーマや追加CSSなどからCSSカスタマイズは可能です。

ショートコードとブロックの違い

ショートコードとは、記事を編集するエディターでさまざまな機能を実現するものです。

例えば、Cocoonで記事一覧を追加したい場合は、以下のようなショートコードを入力します。

Cocoonの記事一覧(ショートコード)

[new_list count=3 cats=3 type=large_thumb_on children=1]

ショートコードは編集中に見た目を確認できないため、設定を間違うとテキストがそのまま表示されることがあります。

suya

ショートコードが変換されずに、テキストがそのまま表示されているブログをよく見かけます。

Cocoonでは、ショートコードを多用することが多いです。

SWELLでは、ブロックエディタ(Gutenberg)完全対応なので、ほとんどのことがブロックで実現できます。

例えば、こんな感じです。

SWELLの記事一覧(ブロック)

カード型やサムネイル型、テキスト型などいろいろ選べます。

suya

このサイトのトップページなども見てみてください。

Cocoon と SWELL の機能比較一覧

ここからは、詳しい機能を比較した一覧になります。

機能が多ければいいわけではなく、「シンプルさ」も重要になるため、単純に比較できない点はご留意ください。

メリットだけでなくデメリットもわかるので、コーポレートサイトのテーマ選びなどにも参考になると思います。

suya

個人的に違いが大きいと感じる機能は下線をつけています。

Cocoon と SWELL の機能比較まとめ

最初にざっくりまとめておきます。

1) サイトデザインCocoon SWELL
2) ユーザーアクションCocoon SWELL
3) 共通デザインCocoon ≠ SWELL
4) 記事デザインCocoon SWELL
5) 記事管理Cocoon SWELL
6) サイト解析Cocoon SWELL
7) サイト収益化Cocoon SWELL
8) 画像Cocoon = SWELL
9) SEOCocoon = SWELL
10) 高速化Cocoon SWELL
11) Web技術Cocoon SWELL

1) サイトデザイン

Cocoon < SWELL

テンプレート

SWELLは他テーマからの乗り換えにも対応しています。

機能CocoonSWELL
サイト着せ替え◯(スキン)◯(デモデータ)
テーマ乗り換え×◯(プラグイン)

トップページ

SWELLは、メインビジュアルを簡単に設定できます。

機能CocoonSWELL
メインビジュアル画像・動画×
カルーセル/記事スライダー◯(カルーセル)◯(記事スライダー)
おすすめカード/ピックアップバナー◯(おすすめカード)◯(ピックアップバナー)
通知エリア/お知らせバー◯(通知エリア)◯(お知らせバー)
  • Cocoonでも「アピールエリア+CSS」などでメインビジュアルを設定することは一応可能です。

ヘッダー

SWELLは、PC表示とスマホ表示にそれぞれ最適化されています。

機能CocoonSWELL
ヘッダーロゴ配置
ヘッダーバー(PCのみ)×
モバイルヘッダー(PC以外)
ヘッダー固定メニュー追従

フッター

フッター周りの設定に大きな違いはありません。

機能CocoonSWELL
フッターメニュー
フッターウィジェット
コピーライトテキスト
フッター固定メニュー追従(PC以外)

2) ユーザーアクション

Cocoon < SWELL

SNSシェア

SWELLは、すぐSNSシェアボタンにアクセスできます。(PC)

機能CocoonSWELL
記事上下に配置◯(投稿・固定ページ)(投稿のみ)
記事左に固定配置(PCのみ)×

SNSフォロー

SNSフォローの設定に大きな違いはありません。

機能CocoonSWELL
記事下に配置
ウィジェットで配置
いいねエリア

固定ボタン

SWELLは、スマホでもすぐ目次にアクセスできます。

機能CocoonSWELL
ページトップボタン WordPressテーマ「SWELL(スウェル)」のページトップボタン
目次ボタン WordPressテーマ「SWELL(スウェル)」の目次ボタン×

3) 共通デザイン

Cocoon ≠ SWELL

記事全体

SWELLはタイトルデザインを変更できますが、Cocoonと違って目次開閉ができません。

機能CocoonSWELL
画像上タイトル×◯(コンテンツヘッダー)
目次表示
目次開閉×
目次サイドバー固定追従
外部リンクアイコン×

カスタム投稿

SWELLは、初めからLP(ランディングページ)機能が備わっています。

機能CocoonSWELL
LP×

4) 記事デザイン

Cocoon ≪ SWELL

装飾ブロック

SWELLは、フルワイドデザインや投稿リスト設置が簡単にできます。

テキスト型のブログカードも簡単に設置できるので、記事タイトルを変更してもアンカーテキストのリライトが不要です。

例えば、こんな感じです。

Cocoonは、ふりがな(ルビ)機能が標準搭載されています。

機能CocoonSWELL
ふきだし
フルワイド×
アイコン/案内ボックス◯(アイコン/案内)◯(ボックス装飾)
付箋風/白抜きボックス◯(付箋風/白抜き)◯(ボックス装飾)
見出し/タブ/ラベルボックス◯(見出し/タブ/ラベル)◯(キャプションボックス)
アコーディオン(トグル)
タブ×
カラム拡張(リッチカラム)
ステップ/タイムライン◯(タイムライン)◯(ステップ)
FAQ◯(寄付特典)
簡易バナーリンク作成×
装飾ボタン
ブログカードテキスト表示×◯(関連記事)
投稿リスト(記事一覧)(ショートコード)◯(投稿リスト)
説明リスト×
アイコンリスト(リスト拡張)◯(アイコンリスト)◯(リスト拡張)
見出し拡張×◯(セクション用)
画像拡張×(標準のみ)◯(複数デザイン)
テーブル(表)拡張×(標準のみ)◯(複数デザイン)
ふりがな(ルビ)×
  • ふりがな(ルビ)機能はプラグインで追加することもできます。

ブロックエディタ(Gutenberg)の使い勝手は、SWELLの公式動画が参考になります。

\ 操作画面を動画で確認する /

ブロック制御

SWELLは、ブロックの表示/非表示を自動で切り替えることができます。

機能CocoonSWELL
デバイス制限(PC/SP)×
ログイン制限×
期間制限×

5) 記事管理

Cocoon > SWELL

記事単位

Cocoonは、記事単位で細かい設定が可能です。

機能CocoonSWELL
リダイレクト×(プラグイン対応)
アーカイブ(記事一覧)除外×
RSS除外×
  • リダイレクト機能はプラグインで追加することもできます。

6) サイト解析

Cocoon < SWELL

計測

SWELLは、テーマ機能だけでボタンクリック率の計測やABテストが可能です。

機能CocoonSWELL
記事一覧PV表示
アナリティクス連携
タグマネージャー連携◯(高度な設定で貼付)
サーチコンソール連携
ボタンクリック率計測×
ボタンABテスト×

通常ボタンクリック率の計測やABテストを行うには、Google アナリティクスなどで面倒な設定が必要になります。

7) サイト収益化

Cocoon < SWELL

広告

SWELLは、作成した広告タグのクリック率などの計測が可能です。

Cocoonは、Amazonや楽天などの物販機能が充実してますが、外部プラグインでも実現可能です。

機能CocoonSWELL
広告タグ作成
広告タグ計測×
広告コード貼付ボタン化◯(囲みボタン)
広告コード貼付リンク化◯(寄付特典)×
物販リンクカード×(プラグイン対応)

SWELLで物販リンクカードを利用する場合は、ECプラグインを導入します。

  • Rinker(リンカー)
  • Pochipp(ポチップ)

8) 画像

Cocoon = SWELL

画像

画像周りの設定に大きな違いはありません。

機能CocoonSWELL
NO IMAGE画像
OGP画像
Twitter画像サイズ

画像の圧縮や「.webp」化などは、別途プラグインを利用しましょう。

  • EWWW Image Optimizer
  • ShortPixel
  • WebP Express

9) SEO

Cocoon = SWELL

SEO

SEO周りの設定に大きな違いはありません。

機能CocoonSWELL
パンくずリスト
メタディスクリプション
noindex/nofollow
canonical
JSON-LD(構造化データ)
  • SWELLのSEO機能は、同じ開発元の「SEO SIMPLE PACK」プラグインを導入した前提で比較しています。

SEO(検索エンジン最適化)には多くの要因が関わるため、どちらが優れているか単純に結論づけることはできません。

  • 上記のSEO機能自体は、かなり一般的なものです。
  • SEO機能の有無よりも、よいユーザー体験を生み出すコンテンツやデザインのほうが重要です。

10) 高速化

Cocoon < SWELL

高速化

SWELLは、アイコン読み込みを削減することができます。

Cocoonは、キャッシュ機能が充実してますが、外部プラグインでも実現可能です。

機能CocoonSWELL
データベースキャッシュ◯?
ブラウザキャッシュ×(プラグイン対応)
ページ圧縮(縮小化)×(プラグイン対応)
ページ事前読み込み
画像遅延読込(Lazy Load)
サーバー内部アイコン×
  • SWELLでキャッシュ機能を利用する場合は、「WP Rocket」「WP Super Cache」「WP Fastest Cache」「W3 Total Cache」「Litespeed Cache」などのプラグインを導入します。
  • キャッシュ機能自体は初心者向けではありません。よくわからないままONにしないようにしましょう。
  • 「Font Awesome」などの外部アイコンを読み込む場合、ページ表示速度に影響を及ぼします。

高速化(ページ表示速度)はコンテンツ次第なので、数字だけの比較はあまり参考になりません

  • 別のテーマを同じ条件で計測したとしても、有利不利が生まれるためあまり意味がありません。
  • あなたのサイト設定や記事コンテンツの作り次第では、数値は全く異なるものになります。

11) Web技術

Cocoon > SWELL

Web技術

Cocoonは、Webの最新技術に対応していますが、外部プラグインでも実現可能です。

機能CocoonSWELL
AMP×(プラグイン対応)
PWA×(プラグイン対応)

どちらも技術的な知識がある程度必要になります。よくわからないままONにしないようにしましょう。

  • AMPは、高速化に寄与しますが、ユーザー体験が悪化する場合もあり、あまり利用されなくなってきています。
  • AMPPWAも、プラグインで対応することができます。

Cocoon と SWELL の総評

Cocoonは多機能なので、細かい設定が得意ですが、うまく設定しないと高速化SEOなどが悪化する印象です。

SWELLはシンプルですが、デザイン性に優れ、デフォルトでも高速化SEOがやりやすいです。

Cocoon
SWELL
  • デザインはカスタマイズを推奨
  • 多様な記事設定
  • クラシックエディタにも対応
  • 多機能(設定項目が多い)
  • 比較的上級者向け
  • 設定だけでデザインできる
  • 多様な装飾ブロック
  • ブロックエディタに最適化
  • シンプル(デフォルトでもOK)
  • 比較的初心者向け
suya

SWELL有料ですが、カスタマイズや最適化にかける時間や労力を減らすことができます。

Cocoon と SWELL の今後

SWELLCocoonとの業務提携が発表されました。

両テーマのユーザーとして、技術協力によるさらなるパワーアップを期待したいと思います。

Cocoonの今後

Cocoonは、寄付特典機能が追加されました。

今後、一部の機能は無料では使えず、寄付者に限定される可能性があります。

SWELLの今後

高速化のプロである「スキルシェア」氏との顧問契約が発表されました。

バージョンアップによって、さらなる高速化が期待できます。

この記事のまとめ

WordPressの人気テーマ「Cocoon(コクーン)」と「SWELL(スウェル)」の機能比較を見てきました。

テーマ選びの参考になれば幸いです。

なるほどくん

使い勝手が想像できました。

導入するだけでおしゃれ(スタイリッシュ)なデザインになる「SWELL(スウェル)」を、あなたのサイト(ブログ)に導入しましょう。

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

\ おしゃれで簡単 /

\ 購入から導入まで /

\ 記事テンプレート付き /

アクセスや収益をUPさせるノウハウ紹介

実際の経験を元に、効果のあった施策をまとめました。

よかったら見ていってください。

ドメインパワーUPでSEOに効く被リンク獲得リスト

被リンクというと、ブラックなやり方を想像される方が多いかもしれません。

しかし、多くのサイトを分析してみると、みんな使っている登録サイトが存在することがわかりました。

ドメインパワーがSEOに重要な地位を占める現状では、自然なホワイトリンクの獲得戦略が欠かせません。

実際に既存サイトでも大きな効果を上げることができたので、ここでご紹介したいと思います。

リンクフリー
URLをコピーする
URLをコピーしました!

コメント

コメントする

目次
閉じる