ブログ運営のこと – まんぷく.com https://manpuqu.com わからないを、つなげて転がす。 Sun, 17 May 2026 19:17:40 +0000 ja hourly 1 https://wordpress.org/?v=7.0 https://manpuqu.com/wp-content/uploads/2026/05/cropped-manpuqu_icon-32x32.png ブログ運営のこと – まんぷく.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には「地味だけど便利」な機能がたくさんあります。

  1. STEP 1｜レビュー編

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

  2. STEP 2｜SYN Block編

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

  3. STEP 3｜装飾・運用編　》今ここ《

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

目次[閉じる]

テキスト装飾──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）

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

段落デザイン

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

背景色付き段落

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

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

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

三角のあしらい

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

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

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

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

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

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

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

レイアウト制御

デバイス表示切り替え

ブロックごとに「すべて」「PCのみ」「スマホのみ」「非表示」の4種類を、書式ツールから設定できます。特別なCSSを書かなくても、デバイスに応じた表示の出し分けがエディター上で完結します。

4つの設定と使い分け

すべて

PC・スマホどちらでも表示。デフォルトの状態です。

PCのみ

スマホでは非表示になります。横並びの比較図や、幅が必要なレイアウトに。

スマホのみ

PCでは非表示になります。スマホ向けに縦積みのシンプルなリストを別途用意するときに使います。

非表示

全デバイスで非表示。ただし後述の注意点あり。

実際の使い方例

たとえばG検定の比較表を見せたいとき、PCでは横並びのテーブルを表示し、スマホでは同じ内容を縦積みのリストで見せる、という構成が取れます。同じ情報を2種類のブロックで用意して、それぞれに「PCのみ」「スマホのみ」を設定するだけです。

【注意】「非表示」はCSSで見えなくするのとは仕組みが違います。ページのHTMLそのものから除外されるため、Googleには存在しないブロックとして扱われます。抜粋・概要にも出なくなるので、SEOに影響する内容や重要な情報への使用は避けた方が安全です。「一時的に隠したいだけ」なら、非表示ではなくCSSで対応する方が無難です。

ブロック単位の余白調整

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

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

ボタンリンク

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

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

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

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

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

「共通コンテンツ」とは、一度作ったブロックの組み合わせを登録しておき、複数の記事からショートコード一行で呼び出せる機能です。WordPressの「再利用ブロック」に近い発想ですが、Synではより管理しやすい形で実装されています。

使い方の流れ

  1. WP管理画面から「共通コンテンツ」を開く

    Synをインストールすると、管理画面のサイドメニューに「共通コンテンツ」が追加されます。

  2. 新規追加で内容を作る

    通常の記事と同じようにブロックを組んで保存します。アイコンボックス・ブログカード・ステップブロックなど、Synのブロックもそのまま使えます。

  3. 投稿IDを確認してショートコードを貼る

    保存後に表示される投稿IDを使って、呼び出したい記事に を貼るだけ。以降は何も変えなくていいです。

一番の強みは一括更新です。共通コンテンツ側を直せば、そのショートコードを貼っている全記事に即座に反映されます。「シリーズに新記事を追加したので一覧を更新したい」という場面で、この設計の価値が実感できます。記事が増えるほど、効いてきます。

【注意・賢威からの移行者向け】賢威の「共通コンテンツ」とSynの「共通コンテンツ」は非互換です。移行後に旧ショートコードは動かなくなるため、Syn側での登録し直しと、記事内のショートコード付け替えが必要になります。記事数が多い場合は移行前に一覧を整理しておくと楽です。

まとめ──Synを触っていたら、記事の作り方が変わってきた

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

ふきだしのキャラクター登録もこれから。共通コンテンツの整備もこれから。ブロックの使い分けも、まだ試行錯誤しています。

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

使っていて感じるのは、「ブロックを積む」というSynの感覚が、自分の記事の書き方と妙に噛み合うということでした。

ステップで流れを整理する。QAで引っかけポイントを分ける。アイコンボックスで「ここは重要」と役割を分ける。

そうやって記事を組んでいくと、自分の頭の中も整理されるし、あとからNotebookLMに渡したときも流れが崩れにくい。

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で実際にどう使っているかの「用途」もあわせてお伝えします。

  1. STEP 1｜レビュー編

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

  2. STEP 2｜SYN Block編　》今ここ《

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

  3. STEP 3｜装飾・運用編

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

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秒説明】過学習とは「訓練データに合いすぎて、未知データに弱くなった状態」です。

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

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

ふきだし

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

このサイトではキャラクターを登録しています。チャッピー（ChatGPT:構造理解担当）と、クロ（Claude:実装・運用担当）です。

チャッピー

チャッピーです。ステップブロックと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検定の記事やAI系の記事を書いているうちに、少しずつ気になることが出てきました。

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

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

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

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

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

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

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

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

  2. STEP 2｜SYN Block編

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

  3. 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だな」とわかる個性があります。

【10秒説明】

・Cocoonとは、無料でありながら「SEO対策」「サイトの高速化」「モバイルフレンドリー」などに最適化された、ブログを運営する上で必要な機能を多く取り揃えたWordPressテーマ
・SWELLとは、使い心地を追求したブロックエディターとして有名なWordPressテーマ

CocoonとSyn、何が違うのか

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

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

比較項目CocoonSyn Ownd
費用無料有料（買い切り）
情報量・ネット上の事例非常に多いまだ少ない（2025年リリース）
カスタマイズ自由度高い中程度（ノーコード前提）
ブロックエディタとの相性標準的高い（SYN Block専用設計）
学習記事・構造化コンテンツとの相性普通高い
プラグイン削減効果普通高い（目次・ランキング等を内蔵）
SEO機能基本的な設定のみ記事単位の詳細設定が可能

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色だけで意味を固定すると、読者は「色で学習モードを切り替えられる」ようになります。

【10秒説明】認知負荷とは、「頭の処理の重さ」のこと。情報が整理されているほど認知負荷が下がり、読者が内容を理解しやすくなります。

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

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

中編へ進む（SYN Block編）
]]> 【コピペ可】ブログ用プライバシーポリシーのひな形（WordPress対応） https://manpuqu.com/blog-management/privacy-policy-template-wordpress/ Sat, 24 Jan 2026 01:01:14 +0000 https://manpuqu.com/?p=1130 【コピペ可】ブログ用プライバシーポリシーのひな形を配布します(WordPress対応)

ブログを運営していると、「プライバシーポリシー」の作成で手が止まることがあります。

ネット上には雛形が多数ありますが、自分のサイトに合わせて編集する際、何を残して何を削除すべきか判断に迷いがちです。そこでこの記事では、当サイト「満福」で実際に使用しているプライバシーポリシーを、コピペで使える形式で配布します。

このひな形で想定している環境

  • 個人ブログ・小規模サイト
  • WordPress(ブロックエディタ)
  • 広告:Googleアドセンス
  • アフィリエイト:A8.net / Amazonアソシエイト
  • アクセス解析:Googleアナリティクス(GA4)

利用にあたっての注意事項

本ひな形は自由に使用・改変していただけますが、以下の点にご注意ください。

  • ご自身のサイト内容に合わせて、必要に応じて調整してください
  • 本ひな形は法的助言ではありません
  • 最終的な責任はサイト運営者ご本人が負うものとします

以上をご理解いただいた上で、ご活用ください。

プライバシーポリシー(配布用コード)

下記のコードをコピーして、WordPressの「固定ページ」（プライバシーポリシー用ページなど）に貼り付けてお使いください。

このページでは、配布用コードが本文として表示されてしまわないよう、「コードブロック」を使って掲載しています。

実際にご自身のサイトで使用する際は、以下のいずれかの方法で貼り付けてください。

  • ブロックエディタのまま貼り付ける
    コピーしたコードをそのまま貼り付けると、WordPressが自動的に見出し・段落などのブロックに変換します（推奨）。
  • コードエディタに切り替えて貼り付ける
    画面右上の「︙」→「コードエディタ」を選び、HTMLとして一括で貼り付ける方法です。ブロック構造をそのまま反映したい場合に有効ですが、編集に慣れていない場合は注意が必要です。

なお、カスタムHTMLブロックに貼り付けると、本文として表示されてしまう場合がありますので、ご注意ください。

<!-- wp:heading -->
<h2 class="wp-block-heading">個人情報の取り扱いについて</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>当ブログでは、お問い合わせフォームや記事へのコメント投稿の際に、お名前やメールアドレスなどの個人情報をご入力いただく場合がございます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">利用目的</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ご提供いただいた個人情報は、以下の目的においてのみ利用いたします。</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul>
  <li>お問い合わせに対する回答</li>
  <li>必要な情報のご連絡（電子メールなど）</li>
</ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>上記以外の目的で個人情報を使用することはございません。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">広告配信について</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>当ブログでは、第三者配信の広告サービスを利用しています。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">使用している広告サービス</h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul>
  <li>Googleアドセンス</li>
  <li>A8.net</li>
  <li>Amazonアソシエイト・プログラム</li>
</ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>これらの広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するために、Cookie（クッキー）等を使用することがあります。Cookieを使用することで、お客様のコンピュータを識別することが可能になりますが、お客様個人を特定できる情報は含まれておりません。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Cookieの無効化について</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Cookieの使用を望まない場合は、ブラウザの設定からCookieを無効にすることができます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>なお、当サイトでは、必要に応じてユーザーからの同意を取得した上で、広告およびアクセス解析に関するデータ処理を行います。同意の管理は、サイト上に表示される同意メッセージからいつでも変更できます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Amazonアソシエイト・プログラムについて</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>当ブログは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">アクセス解析ツールについて</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>当ブログでは、Googleが提供するアクセス解析ツール「Googleアナリティクス」を使用しています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Googleアナリティクスは、トラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>この機能はCookieを無効にすることで収集を拒否することができます。お使いのブラウザの設定をご確認ください。Googleアナリティクスの利用規約および詳細については、Googleアナリティクス利用規約およびGoogleのプライバシーポリシーをご覧ください。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>また、当サイトでは、欧州経済領域（EEA）等の法令に対応するため、Google が提供する同意管理プラットフォーム（CMP）を使用し、Cookie 等の利用に関する同意を取得しています。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">プライバシーポリシーの変更について</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>当ブログは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直し、その改善に努めます。修正された最新のプライバシーポリシーは常に本ページにて開示されます。</p>
<!-- /wp:paragraph -->

貼り付け先のおすすめ

  • WordPressの「固定ページ」→「プライバシーポリシー」を新規作成
  • 本文に貼り付け（ブロックエディタのまま貼ると自動でブロック化されます）
  • 必要に応じて、広告や解析ツールの利用状況に合わせて文言を調整

この記事が、「どれを使えばいいか分からない」という状態から抜け出すきっかけになれば幸いです。

]]> Googleのアナリティクスとサーチコンソール、何が違うの？ https://manpuqu.com/blog-management/analytics-search-console-difference/ Mon, 12 Jan 2026 04:59:24 +0000 https://manpuqu.com/?p=1080 ― ブログを「お店」に例えると、数字の意味が見えてくる ―

ブログを運営していると、比較的早い段階で「見たほうがいいですよ」と勧められるツールがあります。

  • Google アナリティクス（GA4）
  • Google サーチコンソール（サチコ）

ただ、最初はこんなふうに感じる人も多いのではないでしょうか。

  • どちらも画面に数字がずらっと並んでいて、正直よく分からない
  • 見たほうがいいとは聞くけれど、結局どこを見ればいいの？
  • 数字が低いと、成績表を突きつけられたようで少し落ち込む

実際、僕自身もまったく同じでした。
でも結論から言うと、この2つは「同じものを見ている道具」ではありません。
見ている場所が、そもそも正反対なんです。

難しい操作や設定の話はいったん置いて、この記事では
「何が分かって、何が分からないのか」だけを、
ブログを「お店」に例えながら、できるだけやさしく整理してみます。

これを知ると、無機質に見えていた数字が、
「読者がどんな行動を取ったのか」として見えてくるはずです。

1. サチコとGA4は「見ている方向」が逆

ブログを「お店」に例えると、2つのツールの違いはとてもシンプルです。

サーチコンソールとGA4の違いを、お店の『外』と『中』に例えて整理した図解
  • サーチコンソール（サチコ）＝ お店の「外」を見ている
    お客さんがお店に入ってくる前の世界（検索の世界）
  • アナリティクス（GA4）＝ お店の「中」を見ている
    お店に入ってから、どんな行動をしたか

同じブログのデータを扱っていても、立っている場所が違う。
だから、教えてくれる数字の意味も自然と変わってくるんです。

2. サーチコンソールで分かること（お店の外）

サーチコンソールは、お店の前に立って様子を見ている
「通りの様子を知っている人」のような存在です。

まだお店には入っていないけれど、通りがかった人が、

  • どんな言葉で探していて（検索キーワード）
  • どんな看板を見て（検索結果の表示）
  • 実際にお店に入ってきたか（クリック）

といったことを教えてくれます。

サーチコンソールで分かることの代表例

たとえば、満福では次のような検索クエリが実際に表示されています。

「エブリィ マッドフラップ 取り付け」
→ 泥除けを付けたいけれど、「どこを外して、どう固定するのか」で手が止まっている人。

「エブリィ ピラー 外し方」
→ 配線やドラレコ作業のために、内装を壊さず外す方法を探している人。

「エブリィ クルーズコントロール 後付け」
→ 長距離運転が増えて、「あとから付けられるのか？」を調べている人。

「エブリイ ちょい上げ 乗り心地」
→ 見た目だけでなく、日常使いでの快適さがどう変わるかを気にしている人。

こうした検索クエリを見ると、
読者がどんな場面で、どこで立ち止まっているのかが見えてきます。

さらに、次のようなことも分かります。

  • 表示回数
    検索結果の看板が、どれだけの人の目に触れたか。
  • クリック数
    実際にお店のドアを開けてくれた人数。
  • 平均掲載順位
    検索という商店街の中で、どのあたりに並んでいるかの目安。

サーチコンソールでは分からないこと

ただし、ここが大事なポイントです。
お店に入ったあと、その人が満足したのか、すぐ帰ってしまったのかまでは分かりません。

サーチコンソールが見ているのは、あくまで「来る前」まで。
中の様子を知るには、別の道具が必要になります。

3. アナリティクス（GA4）で分かること（お店の中）

そこで登場するのが、Google アナリティクス（GA4）です。
こちらは、お店の中にいる「店員さん」のような存在です。

ドアが開いた瞬間から、

  • どの記事を読んだか
  • どれくらい腰を据えて読んだか
  • 次にどこへ移動したか

といった行動を記録してくれます。

アナリティクスで分かる代表例

  • 表示回数（Views）
    どの記事がよく見られているか。
  • エンゲージメント
    じっくり読まれたかどうかの目安。
  • 回遊
    「この記事を読んだ人は、次に何を読んだか」という流れ。


※GA4のエンゲージメントは、単なる滞在時間ではなく、
実際に操作や閲覧が行われた時間を重視した指標です。

アナリティクスでは分からないこと

一方で、お店の中からは、
来店前にどんな検索語を使っていたかまでは分かりません。

検索語の世界は、サーチコンソールの担当。
だからこそ、この2つは「外と中」で補い合う関係なんです。

4. よくある誤解：「数字が低い＝ダメな記事」ではない

ここで、僕がブログを運営していて、いちばん大事だなと感じていることをお伝えします。

管理画面の数字を見ると、ついこんなふうに思ってしまうことがあります。

  • アクセスが少ない → 価値がない記事？
  • 滞在が短い → つまらなかった？

でも、そうとは限りません。

表示回数が少ない
それは「テーマがニッチ」なだけかもしれません。
検索してまでたどり着いた「たった一人」に、深く刺さっている可能性もあります。

エンゲージメントが短い
短いからといって、「読まれなかった」「役に立たなかった」とは限りません。

記事の冒頭で判断材料を得て、次の行動に進んだ可能性もあります。
この満福では、短時間で答えにたどり着けたこと自体が、記事の役割を果たしている場面も多いと感じています。


※ここは断定ではなく、「そういう可能性もある」という受け止め方がちょうどいいです。
数字は結果のすべてではなく、行動の痕跡だからです。

数字は、記事の良し悪しを決める通信簿ではありません。
読者がどう動いたかという、ただの「痕跡」です。

5. 2つを組み合わせると見えてくること

「外（サチコ）」と「中（GA）」を合わせると、記事の健康診断ができます。

パターン①：検索も多い × よく読まれている
看板を見て入ってきて、中身にも満足している状態。
これはまさに「看板商品」です。

パターン②：検索は多い × すぐ離れやすい
期待と中身にズレがないか、
タイトルや導入文を軽く見直すヒントになります。

パターン③：検索は少ない × よく読まれている
これは「隠れ家の名店」。
見出しやタイトルに検索されやすい言葉を少し足すと、届く人が増えるかもしれません。


6. 実際に見るべきポイント（初心者はここだけでOK）

最後に、僕が普段どこを見ているかを共有します。
初心者のうちは、これくらいシンプルで十分だと思います。

サーチコンソール（週1回くらい）

  • 検索クエリ
    「こういう場面で困っている人が来ているんだな」と知るだけで十分。
  • クリック率（CTR）
    タイトルが検索意図とズレていないかを軽く確認。

アナリティクス（週1回くらい）

  • エンゲージメント：腰を据えて読まれた記事の目安
  • 回遊：次の記事に進んでくれたか

※毎日見る必要はありません。気になったときで十分です。

ブログ初心者が週に一度確認する、GoogleサーチコンソールとGA4のシンプルなチェックリスト図解

おわりに：数字は「読者の声」の代わり

僕たちは、画面の向こうにいる読者の顔を見ることも、
直接感想を聞くこともできません。

その代わりに、Googleのツールたちが、
「こんな言葉で探している人がいたよ」
「この記事、じっくり読まれていたよ」
と、数字を通して読者の反応を教えてくれています。

アナリティクスもサーチコンソールも、ブログを採点する道具ではありません。
「誰かが、この記事を読んでこう動いた」という存在を感じるための道具です。

そう思えば、無機質に見えていたグラフも、
少しだけ温かみのあるものに見えてくるかもしれません。

この記事が、数字への苦手意識を少しでも軽くできたら嬉しいです。

]]>