syn – まんぷく.com https://manpuqu.com わからないを、つなげて転がす。 Sat, 16 May 2026 12:11:31 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://manpuqu.com/wp-content/uploads/2026/05/cropped-manpuqu_icon-32x32.png syn – まんぷく.com https://manpuqu.com 32 32 「ブロックを積む」と「知識を構造化する」は似ている ─ Syn Owndを使って感じたこと https://manpuqu.com/blog-management/syn/syn-content-design/ Sat, 16 May 2026 10:52:18 +0000 https://manpuqu.com/?p=1777

前編・中編に続いて、後編ではテキスト装飾・リスト・段落デザイン・テーブル・レイアウト制御・ボタン・共通コンテンツ機能を紹介します。

SYN Block以外にも、Synには「地味だけど便利」な機能がたくさんあります。

目次[閉じる]

テキスト装飾──Syn独自の書式機能

マーカー（4色）

書式ツールから選べるマーカーは4色。それぞれにクラス名が割り当てられています。

manpuqu.comでは前編で説明したカラーセット設計と連動させて使っています。マーカーの色も「意味を持った色」として使うと、記事全体に統一感が生まれます。

きいろマーカー（is-yellow）　オレンジマーカー（is-orange）　みずいろマーカー（is-sky）　きみどりマーカー（is-green）

たとえばG検定記事では、試験でよく問われる用語にオレンジ、10秒で説明できる定義にみずいろ、といった形で使い分けています。

インラインアイコン・文字色

テキストの途中にアイコンを挿入できます。書式ツールのアイコン一覧から選ぶか、SVGコードを直接貼り付ける方法もあります。

文字色もカラーセットと連動させられます。試験重要のポイントを赤で強調したり、10秒説明の箇所を青にしたり。マーカーとは異なる使い方ができます。

リスト拡張──4種類のデザイン

WordPressの標準リストブロックに、Synが独自のデザインを4種類追加しています。カラーセットとの組み合わせも可能です。

アイコンリスト：

  • 教師あり学習（Supervised Learning）
  • 教師なし学習（Unsupervised Learning）
  • 強化学習（Reinforcement Learning）

ドットリスト：

  • 教師あり学習（Supervised Learning）
  • 教師なし学習（Unsupervised Learning）
  • 強化学習（Reinforcement Learning）

丸番号リスト：

  • 教師あり学習（Supervised Learning）
  • 教師なし学習（Unsupervised Learning）
  • 強化学習（Reinforcement Learning）

三角リスト：

  • 教師あり学習（Supervised Learning）
  • 教師なし学習（Unsupervised Learning）
  • 強化学習（Reinforcement Learning）

チェックリスト的な使い方をしたいときはアイコンリスト、手順の要点整理には丸番号リスト、と使い分けています。

段落デザイン

通常の段落ブロックに、Synが2種類のデザインを追加しています。

背景色付き段落

右パネルの「色」→「背景」から背景色を設定できます。カラーセットの薄い色（ライト色）を使うと、強調しすぎず読みやすい囲みになります。

【構造理解】機械学習は「データからパターンを学ぶ」アプローチです。人間がルールを明示的にプログラムするのではなく、データそのものからルールを発見させます。

【試験重要】ディープラーニングは機械学習の一手法です。「AIの中に機械学習があり、機械学習の中にディープラーニングがある」という包含関係を押さえておきましょう。

三角のあしらい

右パネルの「スタイル」から「三角のあしらい」を選ぶと、段落ブロックの左上に三角のアクセントが付きます。カラーセットと組み合わせると、ブロック全体に色がつきます。

【10秒説明】強化学習とは、エージェントが環境と相互作用しながら「報酬を最大化する行動」を試行錯誤で学ぶ手法です。

【間違えやすい】「学習率が高い＝良い」ではありません。学習率が高すぎると最適解を飛び越えてしまい、収束しなくなります。

テーブル（横スクロール対応）

WordPressの標準テーブルブロックに、Synが「横スクロール」機能を追加しています。右パネルからONにするだけで、スマホでも表がはみ出さず横スクロールで見られるようになります。

G検定では「似た用語の比較」が頻出なので、比較表との相性が抜群です。

手法学習データ目的代表アルゴリズム
教師あり学習ラベルあり分類・回帰線形回帰、SVM、決定木
教師なし学習ラベルなしクラスタリング・次元削減k-means、主成分分析（PCA）
強化学習報酬信号行動の最適化Q学習、DQN

レイアウト制御

デバイス表示切り替え

ブロックごとに「すべて」「PCのみ」「スマホのみ」「非表示」を書式ツールから設定できます。

たとえば、PCでは横並びの説明図を表示して、スマホでは縦積みのシンプルなリストに切り替える、といった使い方ができます。

【注意】「非表示」設定はDOMから完全に除外されます。CSSで隠すのとは異なり、抜粋・概要にも出なくなります。重要な情報への使用は慎重に。

ブロック単位の余白調整

Synの余白設計は「上マージンで統一」です。書式ツールから上マージンをブロック単位で調整できます。

「このブロックの前だけ少し詰めたい」「ここは広めに空けたい」という細かい調整が、CSSを書かずにエディター上でできます。地味ですが、記事の読みやすさに直結する機能です。

ボタンリンク

WordPressのボタンブロックに、Synのメインカラーと角丸設定が自動で反映されます。カスタマイザーで設定したサイトカラーがそのままボタンの色になるので、サイト全体の統一感が保てます。

メインカラーが自動反映されるボタン

記事末の誘導や、関連記事へのCTA（行動喚起）として使いやすいブロックです。

共通コンテンツ機能がかなり便利だった

これ、地味に一番気に入っている機能かもしれません。

「共通コンテンツ」として登録したブロックの組み合わせを、ショートコード一行で複数の記事から呼び出せる機能です。

たとえばmanpuqu.comでは以下を共通化しようとしています。

  • G検定シリーズの記事一覧への導線
  • 「この記事の読み方」（カラーセットの色の意味説明）
  • NotebookLM音声解説への案内
  • 記事末のお問い合わせ誘導

一度作って登録しておけば、あとは の一行で呼び出せます。しかも、共通コンテンツ側を修正すれば全記事に一括反映されます。

「記事末の定型文を全部直したい」という場面が来たとき、この機能の価値を実感するんだろうなと思っています。

【注意・賢威からの移行者向け】賢威の「共通コンテンツ」とSynの「共通コンテンツ」は非互換です。移行時は登録し直しと、ショートコードの付け替えが必要になります。

まとめ──「テーマを変えました」ではなく「知識をどう届けるか」を設計しています

Synに移行して数週間。正直に言うと、まだ全部は使いこなせていません。

ふきだしのキャラクター登録もこれから。共通コンテンツの整備もこれから。カスタムCSSの資産化もこれから。やりたいことはたくさんあります。

でも、移行してよかったとはっきり思っています。

Synを使う中で気づいたのは、「ブロックを積む」というテーマの思想と、「知識を構造化して届ける」という自分の書き方が、同じ方向を向いているということでした。

ステップブロックで流れを見せる。QAブロックで試験対策を落とし込む。アイコンボックスで役割を色分けする。目次で全体像を先に示す。これらは全部、「読者にどう理解してもらうか」を考えた結果です。Synはその設計を、コードを書かずに実現させてくれます。

欠点も正直に書いておきます。

HTMLクラス名がマニュアル非公開
CSSでカスタマイズしたい場合は、自分でDevToolsを使ってクラス名を調べる必要があります。これはノーコード前提の設計思想の裏返しでもあります。
賢威からの移行コスト
クラス名の体系が異なるため、スタイルの引き継ぎはできません。既存記事のカスタムCSSがある場合は修正が必要です。
情報がまだ少ない
2025年リリースの新しいテーマなので、ネット上の事例や解説記事はまだ多くありません。困ったときは公式マニュアルかDevToolsが頼りです。

それでも、今のmanpuqu.comの方向性──AI学習・G検定・WordPress運営を、文系シニア目線で整理する知識ブログ──には、Synがよく合っていると感じています。

今後の展望をざっくり書くと、こんな感じです。

  1. UIパターン化（進行中）

    ステップ・QA・アイコンボックスの使い方を記事ごとに固定し、読者が「色と構造で意味を読める」状態を作る。

  2. 共通コンテンツの整備（これから）

    シリーズ記事の導線・読み方の説明・音声解説への案内などを共通化。記事の入口と出口を統一する。

  3. manpuqu式学習システムへ（目標）

    記事の集合ではなく「manpuqu方式で学ぶ体験」を設計する。G検定・AI・土木AIの記事が同じUI思想でつながっている状態。

「テーマを変えました」で終わるつもりは、最初からありませんでした。

Synというテーマを使いながら、「知識をどう届けるか」を少しずつ設計しています。その過程をこれからも記録していきます。

前編を読む（移行の経緯・カラーセット設計）
]]> SYN Blockを全部見せます ─ Syn Owndの独自ブロックを実例付きで解説 https://manpuqu.com/blog-management/syn/syn-block-showcase/ Sat, 16 May 2026 10:44:36 +0000 https://manpuqu.com/?p=1774

前編ではSynを選んだ経緯と、カラーセットの設計思想をお話しました。

中編では、Synの核心であるSYN Block──独自のカスタムブロック群を、実際に動いているサンプルとともに全種類紹介します。

「見た目の説明」で終わらせず、manpuqu.comで実際にどう使っているかの「用途」もあわせてお伝えします。

目次[閉じる]

SYN Blockでできること

SYN Blockは、HTMLやCSSを書かずにエディター上の操作だけでリッチな表現が作れる、Synの独自ブロック群です。現在7種類が用意されています。

ステップブロック（4デザイン）

私はこのブロックを、「流れ・手順・学習プロセス専用のUI」として使うことにしました。G検定の学習記事では「この概念を理解するには、この順番で考える」という流れを見せることが大事です。ステップブロックはまさにそのためのブロックです。

4つのデザインを、同じ内容で比較できるようにしてみました。

デフォルト

  1. データを集める

    機械学習の出発点。大量のデータを用意することから始まります。データの質と量が、学習の精度を左右します。

  2. モデルを学習させる

    データをモデルに入力し、パラメータを調整しながら「正解に近い出力」を出せるように訓練します。

  3. 評価する

    未知のデータ（テストデータ）で精度を確認。過学習していないか、汎化できているかをチェックします。

  4. 推論する

    学習済みモデルを実際のデータに適用。ここが「使う」フェーズです。

サイドラベル

  1. データを集める

    機械学習の出発点。大量のデータを用意することから始まります。データの質と量が、学習の精度を左右します。

  2. モデルを学習させる

    データをモデルに入力し、パラメータを調整しながら「正解に近い出力」を出せるように訓練します。

  3. 評価する

    未知のデータ（テストデータ）で精度を確認。過学習していないか、汎化できているかをチェックします。

  4. 推論する

    学習済みモデルを実際のデータに適用。ここが「使う」フェーズです。

タイムライン

  1. データを集める

    機械学習の出発点。大量のデータを用意することから始まります。データの質と量が、学習の精度を左右します。

  2. モデルを学習させる

    データをモデルに入力し、パラメータを調整しながら「正解に近い出力」を出せるように訓練します。

  3. 評価する

    未知のデータ（テストデータ）で精度を確認。過学習していないか、汎化できているかをチェックします。

  4. 推論する

    学習済みモデルを実際のデータに適用。ここが「使う」フェーズです。

囲み

  1. データを集める

    機械学習の出発点。大量のデータを用意することから始まります。データの質と量が、学習の精度を左右します。

  2. モデルを学習させる

    データをモデルに入力し、パラメータを調整しながら「正解に近い出力」を出せるように訓練します。

  3. 評価する

    未知のデータ（テストデータ）で精度を確認。過学習していないか、汎化できているかをチェックします。

  4. 推論する

    学習済みモデルを実際のデータに適用。ここが「使う」フェーズです。

同じ内容でもデザインによって印象がかなり変わります。私は記事の文脈に応じて使い分けていますが、manpuqu.comではタイムラインを一番よく使っています。手順の「流れ感」が一番伝わりやすいからです。

QAブロック（4デザイン）

私はこのブロックを、「試験の引っかけ対策専用UI」として使うことにしました。本文で概念を理解させ、QAで「試験ではこう問われる」を落とし込む。役割分離です。

4デザインの比較です。

デフォルト

教師あり学習と教師なし学習の違いは？

正解ラベル（教師データ）の有無です。教師あり学習はラベル付きデータで学習し、教師なし学習はラベルなしデータからパターンを自分で見つけます。

過学習とはどういう状態？

訓練データへの適合度が高すぎて、未知のデータ（テストデータ）に対してうまく機能しない状態です。汎化能力が失われている、と言い換えることもできます。

区切り線

教師あり学習と教師なし学習の違いは？

正解ラベル（教師データ）の有無です。教師あり学習はラベル付きデータで学習し、教師なし学習はラベルなしデータからパターンを自分で見つけます。

過学習とはどういう状態？

訓練データへの適合度が高すぎて、未知のデータ（テストデータ）に対してうまく機能しない状態です。汎化能力が失われている、と言い換えることもできます。

ストライプ

教師あり学習と教師なし学習の違いは？

正解ラベル（教師データ）の有無です。教師あり学習はラベル付きデータで学習し、教師なし学習はラベルなしデータからパターンを自分で見つけます。

過学習とはどういう状態？

訓練データへの適合度が高すぎて、未知のデータ（テストデータ）に対してうまく機能しない状態です。汎化能力が失われている、と言い換えることもできます。

囲み

教師あり学習と教師なし学習の違いは？

正解ラベル（教師データ）の有無です。教師あり学習はラベル付きデータで学習し、教師なし学習はラベルなしデータからパターンを自分で見つけます。

過学習とはどういう状態？

訓練データへの適合度が高すぎて、未知のデータ（テストデータ）に対してうまく機能しない状態です。汎化能力が失われている、と言い換えることもできます。

QAブロックには構造化データ（JSON-LD）の出力機能もついています。右パネルからONにするだけで、GoogleのリッチリザルトにQ&Aを表示させる施策が打てます。SEOを意識した記事には積極的に使いたい機能です。

説明リスト（dl）

用語と説明をセットで並べるブロックです。私は「用語整理専用UI」として使っています。G検定では似た用語が多いので、定義を並べて整理するのに重宝しています。

デフォルトと囲みラインの2デザインがあります。

精度（Accuracy）
全予測のうち、正解した割合。正例・負例どちらも含む。
適合率（Precision）
「正と予測したもの」のうち、本当に正だった割合。FPを減らしたいときに重視。
再現率（Recall）
「本当に正のもの」のうち、正と予測できた割合。FNを減らしたいときに重視。

囲みラインにカラーセットを組み合わせると、視覚的な強調度が増します。

精度（Accuracy）
全予測のうち、正解した割合。正例・負例どちらも含む。
適合率（Precision）
「正と予測したもの」のうち、本当に正だった割合。FPを減らしたいときに重視。
再現率（Recall）
「本当に正のもの」のうち、正と予測できた割合。FNを減らしたいときに重視。

アイコンボックス

アイコン付きのテキストボックスです。私は「重要ポイント・注意点の視覚化」に使っています。カラーセット4色との組み合わせで、意味を持った色分けができます。

【試験重要】F値はPrecisionとRecallの調和平均です。どちらかが極端に低いと、F値も低くなります。

【構造理解】教師あり学習・教師なし学習・強化学習は、「何を手がかりに学ぶか」で分類されます。

【10秒説明】過学習とは「訓練データに合いすぎて、未知データに弱くなった状態」です。

【間違えやすい】適合率と再現率はトレードオフの関係。一方を上げると、もう一方が下がりやすい。

アイコンの種類や色は右パネルから自由に設定できます。カラーセットの色だけでなく、任意の色を指定することも可能です。

ふきだし

会話形式でコンテンツを展開できるブロックです。「ふきだし管理」であらかじめキャラクターを登録しておくと、記事を書くときにプリセットから呼び出すだけで使えます。

このサイトでは3つのキャラクターを登録しています。チャッピ（構造理解担当）、ジェミ（アイデア担当）、そしてクロ（実装・運用担当）です。

チャッピ

チャッピです。ステップブロックとQAブロックで役割を分けるのは、G検定学習に限らず有効な設計思想です。「流れ」と「確認」を分離することで、読者の認知負荷が下がります。

クロ

クロです。ふきだしは「ふきだし管理」に登録してから使うのがポイントです。登録しておけば、どの記事からでも呼び出せますよ。

ブログカード

URLを入力するだけで、アイキャッチ画像・タイトル・概要文がセットになったカード型リンクを生成します。テキストリンクよりクリック率が上がります。

さらに、カードに表示するタイトル・概要文・画像を任意のテキストに書き換えられるのが地味に便利です。元ページのタイトルより、文脈に合った言葉で誘導できます。

目次ブロック

記事内の見出しを自動で拾って目次を生成します。「最小見出し数」「深さ」「拾う最大の見出しサイズ」を右パネルから設定できるので、長い記事では特に重宝します。

実はこの記事の冒頭にも目次ブロックを入れています。「この記事の目次」がそのまま実例です。

後編では、テキスト装飾・リスト・段落デザイン・テーブル・レイアウト制御・ボタン・共通コンテンツ機能を紹介します。

後編へ進む（装飾・レイアウト・まとめ編）
]]> 「ちょうどいい機能」で ブログ運営が快適に。 WordPress テーマ Syn Ownd をレビュー https://manpuqu.com/blog-management/syn/cocoon-to-syn/ Sat, 16 May 2026 10:35:25 +0000 https://manpuqu.com/?p=1769

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

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

でも、あるとき気になり始めたんです。

「この記事、もっとわかりやすく構造化できないかな」と。

G検定の学習記事を書いていると、どうしても「流れで理解させたい」「引っかけポイントを目立たせたい」「10秒でわかる説明を囲みたい」という場面が出てきます。そのたびにHTMLを書いたり、プラグインを入れたり、CSSをいじったり。なんだか本来やりたいことより、環境整備に時間がかかっている気がしていました。

そんなタイミングで出会ったのが、Syn Owndです。

目次[閉じる]

Syn Owndってどんなテーマ？

Synは、「賢威」で知られる株式会社ウェブライダーのプロデュースのもと、株式会社ハイファイブが制作したWordPressテーマです。2025年にリリースされた、比較的新しいテーマですね。

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

最初はちょっと地味なコピーだなと思ったんですが（笑）、使ってみると「ああ、これはそういうことか」と納得しました。過剰な機能もなく、足りない機能もなく、ちょうどいい。そのひとことに尽きます。

Synが標準で持っている機能を挙げると、こんな感じです。

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

これが全部プラグインなしで動きます。プラグインを減らせるということは、サイトが軽くなるということ。表示速度の改善にもつながります。

デザインの完成度も高くて、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」を、実際の動作サンプルとともに全種類紹介します。

中編へ進む（SYN Block編）
]]>