前編ではSynを選んだ経緯と、カラーセットの設計思想をお話しました。
中編では、Synの核心であるSYN Block──独自のカスタムブロック群を、実際に動いているサンプルとともに全種類紹介します。
「見た目の説明」で終わらせず、manpuqu.comで実際にどう使っているかの「用途」もあわせてお伝えします。
SYN Blockでできること
SYN Blockは、HTMLやCSSを書かずにエディター上の操作だけでリッチな表現が作れる、Synの独自ブロック群です。現在7種類が用意されています。
ステップブロック（4デザイン）
私はこのブロックを、「流れ・手順・学習プロセス専用のUI」として使うことにしました。G検定の学習記事では「この概念を理解するには、この順番で考える」という流れを見せることが大事です。ステップブロックはまさにそのためのブロックです。
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色との組み合わせで、意味を持った色分けができます。
アイコンの種類や色は右パネルから自由に設定できます。カラーセットの色だけでなく、任意の色を指定することも可能です。
ふきだし
会話形式でコンテンツを展開できるブロックです。「ふきだし管理」であらかじめキャラクターを登録しておくと、記事を書くときにプリセットから呼び出すだけで使えます。
このサイトでは3つのキャラクターを登録しています。チャッピ（構造理解担当）、ジェミ（アイデア担当）、そしてクロ（実装・運用担当）です。
チャッピです。ステップブロックとQAブロックで役割を分けるのは、G検定学習に限らず有効な設計思想です。「流れ」と「確認」を分離することで、読者の認知負荷が下がります。
クロです。ふきだしは「ふきだし管理」に登録してから使うのがポイントです。登録しておけば、どの記事からでも呼び出せますよ。
ブログカード
URLを入力するだけで、アイキャッチ画像・タイトル・概要文がセットになったカード型リンクを生成します。テキストリンクよりクリック率が上がります。
さらに、カードに表示するタイトル・概要文・画像を任意のテキストに書き換えられるのが地味に便利です。元ページのタイトルより、文脈に合った言葉で誘導できます。
目次ブロック
記事内の見出しを自動で拾って目次を生成します。「最小見出し数」「深さ」「拾う最大の見出しサイズ」を右パネルから設定できるので、長い記事では特に重宝します。
実はこの記事の冒頭にも目次ブロックを入れています。「この記事の目次」がそのまま実例です。
後編では、テキスト装飾・リスト・段落デザイン・テーブル・レイアウト制御・ボタン・共通コンテンツ機能を紹介します。
