本記事は、アライアンス株式会社のブログテーマにおける組版（タイポグラフィ）の確認用サンプルです。WordPress Gutenberg エディタが標準で提供している主要ブロックをひととおり配置し、見出しの階層、段落間のリズム、引用、リスト、画像、テーブル、コード、ボタン、区切り線などが、フロント側の Astro テンプレートで正しく再現されるかを検証します。長文スクロールの読みやすさ、モバイル時の縦リズム、ブランド配色との整合性も同時にチェックできる構成としました。

なお、この投稿の組版は INFOBAHN 2025 テーマのブログ CSS を参考に、見出しの罫線や左アクセントバーを用いない抑制的な階層表現、左寄せの本文、柔らかな背景ブロック形式の引用を採用しています。あわせて、ブランドカラー（プライマリブルー、アクセントレッド）とフォントスタック（Noto Sans JP / Poppins）はサイト全体の他ページと一貫させています。

1. 見出しと段落

長文記事では、章の切れ目を示す H2 見出しに、他の要素とは明確に異なるリズムを与える必要があります。当テーマでは、H2 の直前に通常段落の約 2.5 倍となる上マージンを設定し、読者に「話題が切り替わる」ことを明示します。一方、罫線や左アクセントバーのような強い装飾は避け、サイズと余白のみで階層を表現することで、上質で落ち着いた紙面の印象を保ちます。

1.1 H3 見出しの使い方

H3 は章の中の節見出しとして用います。H2 ほどの大きな余白は取らず、上下のリズムを保ちながらも段落との関係を近く保ちます。太字・サイズ・字間の差分だけで役割が伝わるよう設計されています。

1.1.1 H4 見出しの使い方

H4 はさらに細かい項目の区切りとして用います。本文と比較してやや大きめのウェイト 700 を適用しつつ、サイズは本文近傍に留めることで、情報の粒度を控えめに分節します。

H5 小見出し

H5 は 16px の固定サイズで、段落内で簡易ラベルとして機能します。

H6 ラベル見出し

H6 は Poppins ベースの英字ラベルとしてカテゴリ表示などに転用できます。全角カタカナでも字間が開いて読みやすい設計です。

2. インライン書式

段落の中では、太字（strong）によって重要語を強調したり、斜体（em）で引用語や専門用語をニュアンス付けしたり、インラインコード で技術的な識別子を示したりできます。内部リンク（about ページ）はプライマリブルーで、下線は CSS グラデーション方式で滑らかにホバー拡張します。外部リンクは こちら（INFOBAHN 参考記事） のように別タブで開きます。ハイライトマーカー（mark）は背景色グラデで強調でき、スモールテキストはキャプション的な補足としても使えます。

上付き文字の例： E = mc²。下付き文字の例： H₂O。打ち消し線の例： 古い情報 → 新しい情報。キーボード入力の例： ⌘ + C でコピーします。

3. リスト

3.1 箇条書きリスト (ul)

• HR 事業（ハピワク／ミキワメ／タイミー）
• 保険事業（法人向け・個人向け）
• Biz Person 関連サービス
  • 企業向け研修プログラム
  • 経営者コミュニティ運営
    • 月例勉強会
    • 四半期交流会
• メタバース就職説明会の企画・運営

3.2 番号付きリスト (ol)

1. 企画立案と要件定義：クライアントのビジネス課題を整理し、施策の仮説を立てます。
2. 設計とプロトタイピング：主要画面や業務フローを可視化し、合意形成を進めます。
3. 実装とテスト：段階的にリリースしながら、現場でのフィードバックを反映します。
4. 運用と継続改善：データに基づき KPI をウォッチし、次の打ち手を設計します。

4. 引用（Blockquote）

引用ブロックは、外部ソースからの言葉を目立たせるために使います。当テーマでは、左罫線型ではなく柔らかな背景ブロック型を採用し、左上に薄いプライマリカラーの引用符を配置しています。

よいデザインとは、可能な限り少ないデザインである。装飾のための装飾は、必ず読者の注意を奪う。必要なのは、コンテンツに奉仕する透明な器としてのレイアウトである。

Dieter Rams — Ten Principles for Good Design より意訳

文字は読まれるためにある。読みやすさが損なわれた瞬間、デザインは本来の役割を失う。

Beatrice Warde

5. 画像とキャプション

画像ブロックは本文幅に収まる通常配置、ワイド配置、フル配置の 3 段階を選べます。キャプションは画像下に小さく控えめに表示されます。

5.1 ギャラリー

6. コード

インラインコードは本文中に const answer = 42; のように表示されます。コードブロックは独立した背景と等幅フォントで、長いコードスニペットも折り返さず横スクロールで閲覧できます。

// src/lib/wp.ts
export async function getPosts({ perPage = 10, page = 1 }: {
  perPage?: number;
  page?: number;
} = {}): Promise<WPPost[]> {
  const url = new URL(`${API_BASE}/posts`);
  url.searchParams.set('per_page', String(perPage));
  url.searchParams.set('page', String(page));
  url.searchParams.set('_embed', 'wp:featuredmedia,wp:term');
  const res = await fetch(url);
  if (!res.ok) throw new Error(`WP fetch failed: ${res.status}`);
  return res.json();
}

Preformatted: 改行とスペースがそのまま保持される
   インデント                も
      このとおり               表示されます。

7. テーブル

事業領域	サービス名	対象	提供形態
HR	ハピワク	高校生・地元企業	SaaS + イベント
HR	ミキワメ	採用担当	SaaS
HR	タイミー	スキマバイト希望者	SaaS
保険	法人向け保険プランニング	中堅・大企業	コンサル
保険	個人向け保険ライフプラン	個人	対面 + オンライン

8. ボタン

ボタンブロックは CTA（Call To Action）として、塗りと輪郭（outline）の 2 種類を用意します。ブランドのプライマリブルーを基調に、ホバーで軽く浮き上がる演出を加えています。

9. 区切り線（Separator）

区切り線は章の中で話題が緩やかに変わるときに使います。標準スタイル・ワイド・ドットの 3 種類があります。

---

↑ 標準スタイル。下はワイドスタイル。

---

↓ ドットスタイル。

---

10. カラム（2 カラムレイアウト）

11. グループとカバー

12. 動画・埋め込み

13. 整形済みテキスト・詩

ひと文字ずつ、息をひそめて
紙の上にことばを置いていく。
朝の光が窓枠を伝い、
黙読の時間がはじまる。

14. 文字配置ユーティリティ

左寄せの段落サンプル。日本語記事の標準配置です。

中央寄せの段落サンプル。見出しリードやキャッチコピーに。

右寄せの段落サンプル。署名や日付に。

まとめ

以上、Gutenberg が標準で提供する主要ブロックをひととおり並べたタイポグラフィ確認用の長文投稿でした。実際の運用では、記事ごとに必要なブロックだけを組み合わせ、読み手にとっての情報構造が自然に立ち上がるように編集してください。装飾はあくまで中身に奉仕するものとして、控えめに、しかし必要な箇所では明確に。これが当ブログの組版ポリシーです。

制作・運用に関するお問い合わせは お問い合わせページ からお気軽にどうぞ。