WP-Search
キーワードコンソール
SEOキーワードツール
この記事では、WordPressの人気テーマ「Cocoon(コクーン)」と「SWELL(スウェル)」の機能を、わかりやすくまとめてご紹介します。
Cocoonは無料テーマ、SWELLは有料テーマですが、どちらも人気テーマなのでどっちがいいか迷う人も多いでしょう。
WordPress(ワードプレス)のデザインテーマを後から移行するのは大変なので、ざっくり機能を比較しておきましょう。
大きな違いは冒頭にまとめました。
なるほど!早速見てみます。
SWELLの口コミ・評判については、以下のレビュー記事をご覧ください。
この記事を最後まで読めば、WordPressの人気テーマ「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 |
料金の違いが一番大きいですが、それ以外にも大きな違いがあります。
どちらも人気テーマですが、やはり使っていると気づく違いがあります。
一番大きな違いを挙げるとしたら、それは「デザイン性」になります。
わかりやすく 4つの例を挙げてみましょう。
まずはトップページのデザインの違いを見てみましょう。
ここでの大きな違いは、目に飛び込んでくるメインビジュアル画像・動画を設定できるかどうかです。
PC表示
Cocoon
SWELL
もちろんCocoonでもSWELLのようにメインビジュアル画像・動画を追加することはできます。
ただし、子テーマなどでCSSカスタマイズが必要になります。
スマホ表示
Cocoon
SWELL
スマホでの表示はこんな感じになります。
Cocoonはブログ型デザインを基本としており、SWELLはサイト型デザインに寄せてあることがわかります。
SWELLのトップデザインは、公式サイトも参考になります。
\ 導入するだけ簡単おしゃれ /
スマホ表示の設定をもう少し深ぼってみましょう。
Cocoonのスマホ表示にも、ハンバーガーメニュー()や検索ボタン()を追加することができます。
スマホ表示
Cocoon
SWELL
ただし、Cocoonではキャッチフレーズ表示が残ります。
CocoonはPCとスマホが同じデザインを基本としており、SWELLはPCとスマホが別デザインに切り替わる前提になっていることがわかります。
今はスマホからのアクセスが多いので、スマホでの見え方は重要です。
トップページだけでなく、投稿記事にもデザインの違いが出ています。
Cocoonは本文中にのみSNSシェアボタンを配置できますが、SWELL
PC表示
Cocoon
SWELL
例えば、noteでは画面下に、Qiitaでは画面左にSNSシェアボタンが固定表示されるデザインになっています。
これは、SEOだけでなくSNSから集客することが重要な位置を占めるように変化しているためです。
シェアボタンが常時表示されていると、TwitterやFacebookに拡散されやすそうです。
スマホ表示では、CocoonもSWELL
スマホ表示
Cocoon
SWELL
SWELLでもCocoonのようなスマホ固定メニューを利用できます。
CocoonでもSWELLのようなスマホ固定ボタンを利用できますが、少し違いがあります。
CocoonをSWELLと同じようなデザイン設定に変更してみます。
スマホ表示
Cocoon
SWELL
ここでの一番大きな違いは、ページトップボタン
PC表示ではサイドバーへの目次の固定表示が増えていますが、SWELLではスマホ表示でも目次に簡単にアクセスできます。
読者が読み飛ばし、拾い読みしやすくなります。
機能比較の前に、デザイン比較をしてしまいましたが、これって重要なんです。
テーマにない機能は、だいたいプラグインを追加すればなんとかなります。
でも、サイト全体のデザインを変えてくれるプラグインは存在しません。
なぜなら、デザインテンプレートを提供するのがテーマの役割だからです。
テーマ設定で実現できないデザインは、CSSカスタマイズが前提になります。
なるほど!機能ばかり比較してました。
サイト全体のデザインではなく、個々の記事のエディターでの装飾機能はプラグインで追加することができます。
テーマにも標準的な装飾機能は搭載されているので、後から検討しても遅くはありません。
もちろんデザイン以外にも、テーマ選定のポイントはあります。
例えば、ページ表示速度(高速化)やSEOなどの最適化です。
これは、ただ単に機能が多ければいいというわけではなく、ある種の「シンプルさ」が必要になります。
ここからは、その観点も含めて、機能比較を見ていってください。
細かい機能比較の前に、メリット・デメリットをざっくり比較しておきましょう。
Cocoonはカスタマイズできる人向け、SWELLは初心者向けです。
ショートコードとは、記事を編集するエディターでさまざまな機能を実現するものです。
例えば、Cocoonで記事一覧を追加したい場合は、以下のようなショートコードを入力します。
Cocoonの記事一覧(ショートコード)
[new_list count=3 cats=3 type=large_thumb_on children=1]
ショートコードは編集中に見た目を確認できないため、設定を間違うとテキストがそのまま表示されることがあります。
ショートコードが変換されずに、テキストがそのまま表示されているブログをよく見かけます。
Cocoonでは、ショートコードを多用することが多いです。
SWELLでは、ブロックエディタ(Gutenberg)完全対応なので、ほとんどのことがブロックで実現できます。
例えば、こんな感じです。
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 |
Cocoon < SWELL
テンプレート
SWELLは他テーマからの乗り換えにも対応しています。
トップページ
SWELLは、メインビジュアルを簡単に設定できます。
機能 | Cocoon | SWELL |
---|---|---|
メインビジュアル画像 | × | ◯ |
メインビジュアル動画 | × | ◯ |
記事スライダー/カルーセル | ◯(カルーセル) | ◯(記事スライダー) |
ピックアップバナー/おすすめカード | ◯(おすすめカード) | ◯(ピックアップバナー) |
通知エリア/お知らせバー | ◯(通知エリア) | ◯(お知らせバー) |
ヘッダー
SWELLは、PC表示とスマホ表示にそれぞれ最適化されています。
また、ヘッダー内にウィジェットを配置できるので、ブログパーツを使ってお問い合わせボタンなどを自由に設置できます。
フッター
フッター周りの設定に大きな違いはありません。
SWELLは、外観カスタマイズ(カスタマイザー)で見た目を確認しながらサイトをデザインできます。
Cocoon < SWELL
SNSシェア
SWELLは、すぐSNSシェアボタンにアクセスできます。(PC)
SNSフォロー
SNSフォローの設定に大きな違いはありません。
固定ボタン/メニュー
SWELLは、スマホでもすぐ目次にアクセスできます。
自動内部リンク
関連記事や人気記事の表示に大きな違いはありません。
機能 | Cocoon | SWELL |
---|---|---|
関連記事 | ◯ | ◯ |
人気記事 | ◯ | ◯ |
カテゴリー別ウィジェット | ◯(ウィジェット設定) | ◯(カテゴリー設定) |
Cocoon ≠ SWELL
記事全体
SWELLも目次開閉できるようになりました。
機能 | Cocoon | SWELL |
---|---|---|
画像内タイトル | × | ◯(コンテンツヘッダー) |
目次表示 | ◯ | ◯ |
目次開閉 | ◯ | ◯ |
外部リンクアイコン | ◯ | × |
アバター画像 | ×(プラグイン対応) | ◯(カスタムアバター) |
ウィジェット
Cocoonはウィジェットの表示設定で、SWELLは制限エリアブロックでカテゴリーごとに表示を切り替えることができます。
カスタム投稿
SWELLは、初めからLP(ランディングページ)機能が備わっています。
機能 | Cocoon | SWELL |
---|---|---|
LP | × | ◯ |
Cocoon ≪ SWELL
装飾ブロック
SWELLは、フルワイドデザインや投稿リスト設置が簡単にできます。
テキストリンクを簡単に設置できるので、記事タイトルを変更してもアンカーテキストのリライトが不要です。
例えば、こんな感じです。
Cocoonは、ふりがな(ルビ)機能が標準搭載されています。
機能 | Cocoon | SWELL |
---|---|---|
ふきだし | ◯ | ◯ |
フルワイド | × | ◯ |
ボックス | ◯(付箋風/白抜き) | ◯(ボックス装飾) |
アイコンボックス | ◯(アイコン/案内) | ◯(ボックス装飾) |
ラベルボックス | ◯(見出し/タブ/ラベル) | ◯(キャプションボックス) |
アコーディオン(トグル) | ◯ | ◯ |
タブ | ◯ | ◯ |
カラム拡張(リッチカラム) | ◯ | ◯ |
ステップ/タイムライン | ◯(タイムライン) | ◯(ステップ) |
FAQ | ◯(構造化データ対応) | ◯(構造化データ対応) |
商品レビュー | × | ◯(構造化データ対応) |
レビュースター | ◯ | ◯ |
バナーリンク | × | ◯ |
ボタン | ◯(コード貼付可) | ◯(コード貼付可) |
インラインボタン | × | ◯ |
外部リンクカード | △(URL入力) | ◯(関連記事) |
内部リンクカード | × | ◯(関連記事) |
テキストリンクカード | × | ◯(関連記事) |
記事一覧 | △(ショートコード) | ◯(投稿リスト) |
RSS拡張 | × | ◯ |
ボックスメニュー | ◯ | ◯ |
説明リスト | × | ◯ |
リスト拡張 | ◯(アイコンリスト) | ◯(リスト拡張) |
見出し拡張 | × | ◯(見出し |
画像拡張 | ×(標準のみ) | ◯(複数デザイン) |
カバー拡張 | × | ◯(全幅可) |
スライダー | × | △(Arkhe Pro Pack |
テーブル(表)拡張 | △(一部機能) | ◯(高機能) |
コードハイライト | ◯ | ◯(Highlighting Code Block) |
ふりがな(ルビ) | ◯ | ×(プラグイン対応) |
SWELLは、こんな感じのテーブルがワンクリックで呼び出せます。
商品A | 商品B | 商品C | |
---|---|---|---|
機能A | 少し古い | 普通 | 最新機能 |
機能B | 非対応 | 制限付き | 使用可 |
性能A | 200[単位] | 500[単位] | 1000[単位] |
性能B | 500[単位] | 1000[単位] | 800[単位] |
デザイン | 普通 | 良い | 微妙 |
価格 | 5,000円 | 10,000円 | 15,000円 |
購入する | 購入する | 購入する |
通常はテーブルの中にボタンを配置できませんが、SWELLではインラインボタンを設置可能です。
Cocoonもテーブルの○×△などの一部機能に対応しました。
ブロック制御
SWELLは、カテゴリーページやタグページ、ウィジェットをブロックエディタで編集できるブログパーツ機能がかなり便利です。
Cocoonは、クラシックエディターのような編集方法は一応可能です。
機能 | Cocoon | SWELL |
---|---|---|
ブロック余白設定 | × | ◯ |
デバイス制限(PC/SPのみ表示) | × | ◯ |
PC/SPだけ改行 | × | ◯ |
ログイン制限(限定コンテンツ) | × | ◯ |
表示期間制限 | × | ◯ |
ページ制限(カテゴリー等) | × | ◯ |
カテゴリーページ編集 | △ | ◯(ブログパーツ) |
タグページ編集 | △ | ◯(ブログパーツ) |
著者ページ編集 | × | ◯(ブログパーツ) |
ウィジェット編集 | × | ◯(ブログパーツ) |
カスタムCSS | ◯ | ◯ |
カスタムJS | ◯ | ◯ |
SWELLフォーラムで著者アーカイブページにもブログパーツを追加できるように要望を出し、採用いただきました。(2022/3/5)
Cocoon > SWELL
記事単位
Cocoonは、記事単位で細かい設定が可能です。
Cocoon < SWELL
計測
SWELLは、テーマ機能だけでボタンクリック率の計測やABテストが可能です。
機能 | Cocoon | SWELL |
---|---|---|
記事一覧PV表示 | ◯ | ◯ |
アクセス解析 | ×(プラグイン対応) | ×(プラグイン対応) |
アナリティクス連携 | ◯ | ◯ |
サーチコンソール連携 | ◯ | ◯ |
タグマネージャー連携 | ◯ | ×(コード貼付) |
ボタンクリック率計測 | × | ◯ |
ボタンABテスト | × | ◯ |
通常ボタンクリック率の計測やABテストを行うには、Google アナリティクスなどで面倒な設定が必要になります。
広告
SWELLは、作成した広告タグのクリック率などの計測が可能です。
Cocoonは、Amazonや楽天などの物販機能が充実してますが、外部プラグインでも実現可能です。
機能 | Cocoon | SWELL |
---|---|---|
アドセンス広告管理 | ◯ | ◯ |
インフィード広告 | ◯ | ◯ |
アフィリエイトタグ管理 | ◯ | ◯ |
アフィリエイトタグ計測 | × | ◯ |
アフィリエイトタグ貼付ボタン化 | ◯(囲みボタン) | ◯ |
アフィリエイトタグ貼付リンク化 | ◯ | × |
物販リンクカード | ◯ | ×(プラグイン対応) |
物販リンクカードを利用する場合は、ECプラグインを導入します。
Cocoon ≒ SWELL
SEO
SEO周りの設定に大きな違いはありません。
機能 | Cocoon | SWELL |
---|---|---|
パンくずリスト | ◯ | ◯ |
メタディスクリプション | ◯ | ◯ |
noindex | ◯ | ◯ |
nofollow | △(記事のみ) | ◯ |
canonical | ◯ | ◯ |
記事構造化データ | ◯(JSON-LD) | ◯(JSON-LD) |
パンくずリスト構造化データ | ◯(JSON-LD) | ◯(JSON-LD) |
FAQ構造化データ | ◯(JSON-LD) | ◯(JSON-LD) |
商品レビュー構造化データ | × | ◯(JSON-LD) |
SEO(検索エンジン最適化)には多くの要因が関わるため、どちらが優れているか単純に結論づけることはできません。
上記のSEO機能自体は、SEOに関わる要素のあくまで一部です。
画像
画像周りの設定に大きな違いはありません。
画像の圧縮や「.webp」化などは、別途プラグインを利用しましょう。
Cocoon < SWELL
高速化
SWELLは、jQueryライブラリの読み込みが必須ではなく、アイコン読み込みも削減することができます。
さらには、外部ファイルを読み込む際もAnalyticsやAdsenseなどのスクリプトの遅延読み込みが可能です。
Cocoonは、ブラウザキャッシュ機能がありますが、外部プラグインやサーバー機能でも実現可能です。
SWELLにスクリプトの遅延読み込み機能が追加されました。(2021/11/28)
機能 | Cocoon | SWELL |
---|---|---|
ブラウザキャッシュ | ◯ | ×(プラグイン対応) |
HTML圧縮/キャッシュ | ×(廃止) | ◯ |
CSS圧縮/キャッシュ | ◯ | ◯(プラグイン不要) |
CSSインライン読み込み | × | ◯ |
必要なCSSのみ読み込み | × | ◯ |
ページキャッシュ | ×(プラグイン対応) | ×(プラグイン対応) |
ページ事前読み込み(Prefetch) | ◯ | ◯ |
記事下コンテンツ遅延読込 | × | ◯ |
画像遅延読込(Lazy Load) | ◯ | ◯ |
JavaScript遅延読み込み | × | ◯ |
jQueryを読み込まない | × | ◯ |
外部アイコンフォントを読み込まない | × | ◯ |
絵文字用スクリプトを読み込まない | × | ◯ |
キャッシュプラグイン(高速化プラグイン)としては、以下のようなものがあります。
高速化(ページ表示速度)はコンテンツ次第なので、数字だけの比較はあまり参考になりません。
Cocoon > SWELL
Web技術
Cocoonは、Webの最新技術に対応していますが、外部プラグインでも実現可能です。
機能 | Cocoon | SWELL |
---|---|---|
AMP | ×(廃止) | ×(プラグイン対応) |
PWA | ×(廃止) | ×(プラグイン対応) |
どちらも技術的な知識がある程度必要になります。よくわからないまま使用しないようにしましょう。
Cocoonは多機能なので、細かい設定が得意ですが、うまく設定しないと高速化やSEOなどが悪化する印象です。
SWELLはシンプルですが、デザイン性に優れ、デフォルトでも高速化やSEOがやりやすいです。
SWELLは有料
SWELLとCocoonとの業務提携が発表されました。
両テーマのユーザーとして、技術協力によるさらなるパワーアップを期待したいと思います。
Cocoonの今後
Cocoonは、エックスサーバー社に事業譲渡されました。(2022/9/7)
今後も無料のまま提供継続され、寄付特典機能も無償公開されるようです。
なお、同日に有料サブスクテーマ「WRITE」がリリースされています。
もしかしたら、Cocoonは最低限のアップデート対応や不具合対処のみとなり、新機能などのメインの開発はWRITEに移るのかもしれません。
SWELLの今後
高速化のプロである「スキルシェア」氏との顧問契約が発表されました。
バージョンアップによって、さらなる高速化が期待できます。
実際のデザイン事例を確認したい場合は、サイト事例集をチェックしてみましょう。
「WP-Search」なら、気になるサイト・ブログのテーマやプラグインをもっと調べることもできます。
WordPressの人気テーマ「Cocoon」と「SWELL
テーマ選びの参考になれば幸いです。
使い勝手が想像できました。
SWELLの購入手順と購入後の設定方法などが少しわかりにくいので、画像付きでまとめました。
SWELL初心者のためのお役立ちリンク集をまとめました。
おすすめのプラグインも載せていますので、参考にしてください。
SWELLの口コミ・評判については、以下のレビュー記事をご覧ください。
\ お得な購入方法 /
\ 人気No1 /
コメント