スタイルガイド

このサンプルスタイルガイドでは、ページや記事の長文編集コンテンツで使用できるWYSIWYG要素を一通り紹介します。網羅的な一覧ではありませんが、必要になる一般的な要素の多くを確認できます。

標準的な段落より目立たせつつ、ページコンテンツとして読ませたい導入文にはclass="intro"を使います。

読みやすさを保ちながら本文より明確に控えめにしたい補足にはclass="small"を使います。

出典メモ、簡潔なクレジット、キャプション、編集上の補足にはclass="citation"を使います。

編集テキスト

編集ページでは、リズムを崩さずに重要性、強調、削除した文言、ハイライトした用語、インラインcode-style labelsを組み合わせられます。

フレーズを目立たせるには<mark>、削除または現行ではないテキストには<del>または<s>、文字どおりのラベル、ファイル名、設定、短い技術的参照には<code>を使います。

短い案内、発売情報、購入時の補足、重要なポリシー情報を示す段落にはclass="callout"を使います。

見出しの階層

見出しで明確な構成を作ります。テンプレートにページのタイトルがない場合に限り、主タイトルには<h1>を使用し、ページのセクションには<h2>と<h3>を使います。

スキンケアの見出しレベル1

ページセクションの見出しレベル2

サブセクションの見出しレベル3

詳細グループの見出しレベル4

簡潔なラベルの見出しレベル5

メタデータの見出しレベル6

インラインセマンティクス

<kbd>はCtrl + Kのようなキーボード操作に、<abbr>はSEOのような略語に、<dfn>は構造化コンテンツのような用語の紹介に使います。

<time>はJune 25, 2026のような日付に、<cite>はThe Align Journalのようなタイトルや出典に、<var>はnのような変数に、<samp>はSaved successfullyのようなサンプル出力に使います。

インライン例には、太字、斜体、下線、取り消し線、_{下付き文字}、^{上付き文字}、商品リンクもあります。

住所

一般的な郵便形式ではなく、連絡先や所在地の詳細には<address>を使います。

旗艦店
123 Example Avenue
New York, NY 10001
所在地を見る

リスト

リストは、十分な文章量を保ちながら、流し読みしやすい案内を提供し、折り返し、リンク、インライン書式を確認できるようにします。

番号付き手順を含む箇条書き

• 商品をよく比較します。 別のおすすめスキンケア商品から始め、用途に最も重要な詳細を確認します。
• 購入までの流れを計画します。リスト項目には、次のような番号付き手順を入れられます：
  1. サイズ、素材、スタイルの要件を確認します。
  2. よくある質問やポリシーページなど、関連情報を確認します。
  3. 適合性、仕上がり、在庫状況のバランスが最も良い選択肢を選びます。
• 簡潔な表現を使いながら、すばやく読んでも各項目が理解できるだけの文脈を含めます。

補足を含む番号付きリスト

1. 明確な段落と関連リンクでページの目的を紹介します。
2. 役立つ詳細で主旨を補足します：
   • 重要な用語は控えめにハイライトします。
   • 文字どおりのラベルやスニペットには<code>を使います。
   • 読者の助けになる箇所にのみ、太字や強調を使います。
3. 行き止まりの断片ではなく、明確な次の考えでセクションを締めくくります。

引用とコールアウト

出典のある文章、推薦文、編集上の抜粋、周囲の本文と視覚的に分ける必要がある記述には、ブロック引用を使います。

最も役立つ商品コンテンツは、実用的な疑問に答えながら、ブランド独自の視点も伝えます。

Align編集チーム

標準的なブロック引用よりも視覚的に強調したい引用には、class="pullquote"を使います。

画像

画像にキャプションが必要な場合はfigureを使います。以下の例では、キャプションを下部と上部に配置する<figure class="embed image">と<figcaption class="caption">を示します。

ホスト型動画

ホスト型MP4コンテンツには標準の<video>要素を使います。周囲のレイアウトで特別な構造が必要な場合を除き、マークアップはシンプルに保ちます。

YouTube iframe

YouTubeから動画を埋め込む場合は、標準のYouTube iframeを使います。

表

表には役立つ見出しと、読者が詳細をすばやく比較できる変化に富んだセル内容を含めます。

スキンケア比較例

特徴	標準オプション	おすすめオプション	メモ
主なリンク	商品1	商品2	表のセル内のリンクは、見つけやすくタップしやすい状態にします。
編集上の適合性	軽い強調を含む短い説明。	複数行にわたって折り返され、最も重要なフレーズに強調テキストを含む長めの説明。	セルの長さに変化をつけ、配置と間隔を確認します。
お手入れ詳細	Spot clean	Professional care recommended	インラインコードは、文字どおりのラベル、お手入れタグ、簡潔な仕様を示せます。
在庫状況	数量限定	オンラインおよび旗艦店で購入できます。	表のセルには、ハイライト、リンク、文章形式の案内を含められます。

定義リスト

用語と説明の組み合わせ、用語集の項目、簡潔な仕様、グループ化したメタデータには<dl>を使います。

導入段落

より印象的な導入段落を作るにはclass="intro"を使います。

キャプション

一貫したキャプションのスタイルが必要なfigureのキャプションにはclass="caption"を使います。

プルクオート

引用をより強い編集上の見せ場として扱う場合はclass="pullquote"を使います。

コードブロック

間隔や改行が重要な長い例には、<code>とともに<pre>を使います。

<section>
  <h2>Care notes for skincare</h2>
  <p class="intro">Begin with a concise overview that helps readers orient themselves.</p>
  <ul>
    <li><strong>Store carefully.</strong> Keep the item clean, dry, and protected between uses.</li>
    <li><em>Review the details.</em> Link to related products or supporting pages where useful.</li>
  </ul>
  <p class="small">Use small text for secondary reminders, not primary instructions.</p>
</section>

トグル

メインページを圧迫せずに任意のコンテンツを表示できるようにするには、<details>と<summary>を使います。

展開コンテンツの例

detailsブロックは、長いポリシー、お手入れ情報、サイズ案内、任意の編集メモなどに便利です。

区切り線とタスクリスト

別の見出しよりテーマの区切りが明確な場合は<hr>を使います。進捗やチェックリスト形式を示す必要があるページでは、タスク形式のコンテンツにチェックボックス入力を使用できます。

---

• 重要な進捗がすでに完了しているチェック済みタスク。
• 補足情報がまだ保留中の未チェックタスク。

各セクションに明確な目的があれば、長文コンテンツでも流し読みしやすく、読みやすく、Align全体で一貫性を保てます。