このサイトのWordPressテーマを、CocoonからSyn Owndに変えました。
Cocoonは優秀なテーマです。無料で、軽くて、情報も豊富。困ったことがあれば大抵ネットで答えが見つかる。使いやすさでいえば、文句のつけようがないレベルです。
でも、あるとき気になり始めたんです。
「この記事、もっとわかりやすく構造化できないかな」と。
G検定の学習記事を書いていると、どうしても「流れで理解させたい」「引っかけポイントを目立たせたい」「10秒でわかる説明を囲みたい」という場面が出てきます。そのたびにHTMLを書いたり、プラグインを入れたり、CSSをいじったり。なんだか本来やりたいことより、環境整備に時間がかかっている気がしていました。
そんなタイミングで出会ったのが、Syn Owndです。
Syn Owndってどんなテーマ?
Synは、「賢威」で知られる株式会社ウェブライダーのプロデュースのもと、株式会社ハイファイブが制作したWordPressテーマです。2025年にリリースされた、比較的新しいテーマですね。
キャッチコピーは「すぐにつくれて、ちょうどいい」。
最初はちょっと地味なコピーだなと思ったんですが(笑)、使ってみると「ああ、これはそういうことか」と納得しました。過剰な機能もなく、足りない機能もなく、ちょうどいい。そのひとことに尽きます。
Synが標準で持っている機能を挙げると、こんな感じです。
これが全部プラグインなしで動きます。プラグインを減らせるということは、サイトが軽くなるということ。表示速度の改善にもつながります。
デザインの完成度も高くて、CSSをほとんどいじらなくてもプロっぽい仕上がりになります。CocoonやSWELLとは明確に違う、独自のデザインラインを持っていて、「あ、このサイトSynだな」とわかる個性があります。
移行して気づいたこと──「コードを書くテーマ」ではなかった
正直に言うと、Synに移行した直後、少し戸惑いました。
「各ブロックのCSSクラス名を調べておこう」と思ってマニュアルを探したんですが、どこにも書いていない。
ステップブロックのクラス名は? QAブロックの構造は? デモサイトのHTMLを保存して解析して、管理画面のコードエディターで一つひとつ確認して……と、なかなかの遠回りをしました。
でも、その過程でひとつ大事なことに気づきました。
Synは「コードを書くテーマ」ではなく、「構造を積むテーマ」だった。
マニュアルにクラス名が載っていないのは怠慢ではなく、設計思想の反映です。「HTMLを書かなくてもブロックを積むだけでリッチなページが作れる」というのがSynの出発点なので、クラス名を公開する必要がそもそもない。
これに気づいてから、Synとの付き合い方が変わりました。CSSをゴリゴリ書くより、ブロックをどう組み合わせるかを考える方が本筋だったんです。
SynはAI時代のブログと相性が良かった
このサイトでは最近、G検定の学習記事や、AIツールの実録記事をよく書いています。
そういった記事を書きながら感じるのは、「ブロックを積む」というSynの思想が、「知識を構造化する」という自分の書き方と、驚くほど噛み合っているということです。
たとえば、NotebookLMで音声解説を作るとき、記事の構造がそのまま音声の流れになります。ブロック単位で整理された文章は、AIに渡しやすい。図と文章の役割を分離しやすい。知識をモジュール単位で管理できる。
「HTMLを書く」より「構造を積む」という発想は、「知識をどう届けるか」を考える作業と、同じ方向を向いていたんです。
これは移行前には予想していなかった、嬉しい誤算でした。
manpuqu.comのカラーセット設計──色に「意味」を持たせる
Synには「カラーセット」という仕組みがあります。カスタマイザーであらかじめ4色を登録しておくと、各ブロックの色選択に呼び出せる機能です。
最初は「便利な色パレットかな」くらいに思っていたんですが、使いながら考えが変わりました。
色を「装飾」として使うのではなく、「意味」として使う。
たとえばG検定の学習記事では、読者が「この色が来たら、このモードで読む」と感覚的に理解できる状態が理想です。そこで、manpuqu.comでは4色にこんな役割を持たせました。
- カラーセット01(赤):試験重要
- 出題頻度が高い、必ず覚えておきたい内容に使います。黒本で問われやすい用語や定義が対象です。
- カラーセット02(緑):構造理解
- 仕組み、分類、全体像、流れを説明するときに使います。暗記より「なぜそうなるか」を伝えたい箇所です。
- カラーセット03(青):10秒説明
- 「一言で言うと?」の答えを置く場所です。最短定義、読者がすぐ人に説明できるレベルの要約です。
- カラーセット04(オレンジ):間違えやすい点
- ひっかけ、混同しやすい用語、試験で差がつくポイントに使います。「ここは要注意」のサインです。
色の数を増やさないことがポイントです。4色だけで意味を固定すると、読者は「色で学習モードを切り替えられる」ようになります。認知負荷が下がり、結果として記事が読みやすくなります。
次の中編では、Syn独自のブロック機能「SYN Block」を、実際の動作サンプルとともに全種類紹介します。
