「ちょうどいい機能」で ブログ運営が快適に。 WordPress テーマ Syn Ownd をレビュー

このサイトのWordPressテーマを、「Cocoon」から「Syn Ownd」に変えました。

最初は、単純に以前使っていた「権威」の販売が終了し、その後継品として販売されるテーマだから「使ってみよう」と思っただけだったんです。

Cocoonは本当に優秀なテーマです。無料で、軽くて、情報も豊富。困ったことがあれば、大抵ネットで答えが見つかる。使いやすさでいえば、文句のつけようがないレベルだと思っています。

でも、G検定の記事やAI系の記事を書いているうちに、少しずつ気になることが出てきました。

「この記事、もっと流れで理解しやすくできないかな」
「試験で間違えやすいポイントを、もっと自然に目立たせられないかな」
「NotebookLMに記事を渡したとき、記事の構造がもっと伝わりやすくならないかな」

そんなことを考えながら、CSSの泥沼に深夜まではまったり、プラグインを増やしては競合でつまづいたりしていたら、いつのまにか記事を書くよりもWPをいじっている時間が多くなり、途中から「なんか違うな」と思い始めました。

私が本当にやりたいことは、「コードやプラグインをいじること」じゃなくて、「自分の体験を、他の人にも伝わるように整理して届けること」なのでは…。

そんなモヤモヤを抜け出せないかという思いもあって「Syn ownd」に手を出してみました。

そしたら、自分が欲しいと思っていた装飾や機能がそろっているので、WPをいじるより、記事を書くことに自然と専念できる。

そんなところが、自分にはとてもしっくりきました。

1. STEP

   STEP 1｜レビュー編　》今ココ《

   テーマ全体の導入、CocoonからSynへ移行した理由、カラーセット設計について書いています。

2. STEP

   STEP 2｜SYN Block編

   独自ブロック7種類の実例と、学習記事での使い分けを紹介します。
   中編を読む →

3. STEP

   STEP 3｜装飾・運用編

   テキスト装飾、リスト、表、共通コンテンツなど、知識を届けるための細かな運用を整理します。
   後編を読む →

Syn Owndってどんなテーマ？

Synは、「賢威」で知られる株式会社ウェブライダーのプロデュースのもと、成果につながるマーケティング設計が得意な名古屋のウェブサイト制作会社、株式会社ハイファイブが制作したWordPressテーマです。

2025年にリリースされた、比較的新しいテーマです。

2026年5月時点では、ウェブライダーがから販売されていたWPテンプレート「権威」の購入者に対して、「権威」の後継テンプレートとして、Syn Ownedが提供されているようです。

Syn Ownedのキャッチコピーは「すぐにつくれて、ちょうどいい」。

これ、最初はやたら謙虚なコピーだなと思ったんですが（笑）

実際に使ってみると「ああ、これはそういうことか」と納得しました。過剰な機能もなく、足りない機能もなく、ちょうどいい。そのひとことに尽きます。

WPの標準的なテンプレートを基準として、Synが標準で持っている機能を挙げると、こんな感じです。

• 目次の自動生成（追従型にも対応）
• PVランキング（4デザインから選択）
• ブログカード（URLを入れるだけでカード生成）
• ふきだし管理（キャラクター登録→使い回し）
• 共通コンテンツ（定型ブロックを複数記事で使い回し）
• SEO設定（ディスクリプション・canonical・noindex を記事ごとに設定）
• 構造化データ（パンくずリスト・QAブロック対応）
• SNSシェアボタン（X・Facebook・はてな・LINE・URLコピー）

これが全部サードパーティー製のプラグインなしで動きます。

プラグインを減らせるということは、サイトが軽くなるということ。

それは、サイト表示速度の改善にもつながります。

デザインの完成度も高くて、CSSをいじらなくても、よくある無料テンプレートくさくないプロっぽい仕上がりになります。

CocoonやSWELLとは明確に違う、独自のデザインラインを持っていて、「あ、このサイトSynだな」とわかる個性があります。

CocoonとSyn、何が違うのか

WPテンプレートの移行を考えたとき、一番気になるのは「Cocoonと何が違うのか」という点だと思います。

自分もそこが気になったので、正直ベースで比較するとこんな感じです。

Cocoonが劣っているわけではまったくありません。無料で使えて情報も豊富、これは大きな強みです。

ただ、「ブロックを積んで知識を届ける」という設計に特化したいなら、Synの方が向いていると感じました。

移行して気づいたこと──「コードを書くテーマ」ではなかった

正直に言うと、Synに移行した直後、少し戸惑いました。

HTML手打ち世代の悪い癖で「各ブロックのCSSクラス名を調べておこう」と思ってマニュアルを探したんですが、どこにも書いていない。

ステップブロックのクラス名は？　QAブロックの構造は？　デモサイトのHTMLを保存して解析して、管理画面のコードエディターで一つひとつ確認して……と、なかなかの遠回りをしました。

でも、その作業の中でひとつ大事なことに気づきました。

Synは「コードを書くテーマ」ではなく、「構造を積むテーマ」だった。

マニュアルにクラス名が載っていないのも、最初は不親切に感じました。

でも触っているうちに、「HTMLを書かなくても、ブロックを積むだけでページを組める」というのが、Synの基本思想なんだろうなと思うようになりました。

これに気づいてから、Synとの付き合い方が変わりました。

Synで「構造を積んだ記事」が、AIとかみ合った

このサイトでは最近、G検定の学習記事や、AIツールの実録記事をよく書いています。

そういった記事を書きながら感じるのは、「ブロックを積む」というSynの思想が、「知識を構造化する」という自分の書き方と、驚くほど噛み合っているということです。

たとえばNotebookLMで音声解説を作るとき、記事の構造がそのまま音声の流れになります。

• ここはステップ
• ここは10秒説明
• ここは間違えやすい点

みたいに、記事の役割がブロック単位で整理されているので、NotebookLM側でも話の流れが崩れにくいんです。

図と文章の役割も分けやすいので、「画像は記憶フック」「音声で詳細解説」という形にも持っていきやすい。

触っているうちに、「HTMLを書く」より「構造を積む」というSynの考え方が、自分のやりたいこととかなり近かったんだなと感じるようになりました。

これは移行前には予想していなかった、嬉しい誤算でした。

manpuqu.comのカラーセット設計──色に「意味」を持たせる

Synには「カラーセット」という仕組みがあります。カスタマイザーであらかじめ4色を登録しておくと、各ブロックの色選択に呼び出せる機能です。

最初は「便利な色パレットかな」くらいに思っていたんですが、使いながら考えが変わりました。

色を「装飾」として使うのではなく、「意味」として使う。

たとえばG検定の学習記事では、読者が「この色が来たら、このモードで読む」と感覚的に理解できる状態が理想です。そこで、manpuqu.comでは4色にこんな役割を持たせました。

カラーセット01（赤）：試験重要

出題頻度が高い、必ず覚えておきたい内容に使います。黒本で問われやすい用語や定義が対象です。

カラーセット02（緑）：構造理解

仕組み、分類、全体像、流れを説明するときに使います。暗記より「なぜそうなるか」を伝えたい箇所です。

カラーセット03（青）：10秒説明

「一言で言うと？」の答えを置く場所です。最短定義、読者がすぐ人に説明できるレベルの要約です。

カラーセット04（オレンジ）：間違えやすい点

ひっかけ、混同しやすい用語、試験で差がつくポイントに使います。「ここは要注意」のサインです。

色の数を増やさないことがポイントです。4色だけで意味を固定すると、読者は「色で学習モードを切り替えられる」ようになります。

認知負荷が下がり、結果として記事が読みやすくなります。

次の中編では、Syn独自のブロック機能「SYN Block」を、実際の動作サンプルとともに全種類紹介します。