h1見出し
このページは、HubSpotのリッチテキストで入力できる見出し、本文、リンク、リスト、テーブルの表示をまとめて確認するためのサンプルです。文章量や要素の組み合わせを変え、余白、折り返し、行間、リンクの見え方を確認できる構成にしています。
短い文章だけでなく、複数行に折り返す文章も用意しています。画面幅が狭い場合や文字サイズが変わった場合にも、読みやすさと要素間の間隔が保たれているかを確認してください。
h2見出し
第2階層の見出しには、ページ内の大きな内容区分を想定した本文を続けています。見出しの直後に十分な長さの文章がある状態で、上下の余白と本文の開始位置を確認します。
h3見出し
第3階層では、ひとつの内容区分をさらに分けた場合の表示を確認します。本文が2行以上になった場合でも、次の見出しとの間隔が詰まりすぎないことを確認します。
h4見出し
第4階層の本文です。短めの文章でも、見出しと本文がひとまとまりとして読み取れることを確認します。
h5見出し
第5階層では、文字サイズが小さくなっても本文との違いが分かること、見出しとして必要な強さが残っていることを確認します。
h6見出し
第6階層の本文です。最も深い階層でも本文と区別でき、前後の要素との余白が自然に見えることを確認します。
本文と各種リンク
本文中に同じサイト内のページへのリンクを配置した例です。リンクの前後に文章が続く場合の文字色、下線、行の高さを確認します。
リンクだけで構成された段落も用意しています。短いリンクが単独で置かれた場合の余白とクリック範囲を確認します。
条件を指定したクエリーパラメータ付きのリンクです。通常のサイト内リンクと同じ見た目で表示されることを確認します。
外部サイトへの通常リンクと、外部サイトを別タブで開くリンクを同じ段落に配置しています。
PDFファイルへのリンク、メールを送るリンク、電話をかけるリンクの表示例です。
ページ内のテーブル例へ移動するリンクです。移動先の見出しとの対応も確認できます。
上の例は長いURLをそのままリンク文字列にしたものです。画面幅を超えず、適切な位置で折り返されることを確認します。
箇条書き
箇条書きでは、短い項目、長い項目、文中リンク、入れ子を組み合わせています。マーカーと本文の位置、複数行になった項目の折り返しを確認します。
標準の箇条書き
標準マーカーを使用した、もっとも基本的な箇条書きです。
-
簡潔な説明だけで構成された項目です。
-
文章が長くなった場合の折り返しを確認するため、複数の文を含めています。2行目以降の開始位置が1行目の本文と揃うことを確認します。
-
はじめて利用する方向けの案内を含む項目です。
-
文章の途中に詳しい説明へのリンクがある項目です。
丸型と四角型の箇条書き
マーカーの種類を変更した場合も、本文位置と項目間の余白が変わらないことを確認します。
-
丸型マーカーの項目です。
-
丸型マーカーで文章が長くなった場合の表示を確認するための項目です。
-
丸型マーカー内のリンクです。
-
四角型マーカーの項目です。
-
四角型マーカーで文章が長くなった場合の表示を確認するための項目です。
-
四角型マーカー内のリンクです。
番号付きリスト
手順や順序を示すことを想定し、標準番号と複数の番号形式を確認します。
-
内容を確認します。
-
必要事項を入力し、入力内容を確認します。
-
送信後に表示される完了画面を確認します。
-
大文字ローマ数字の項目です。
-
二番目の項目です。
-
大文字アルファベットの項目です。
-
二番目の項目です。
-
三番目の項目です。
-
小文字ローマ数字の項目です。
-
二番目の項目です。
-
三番目の項目です。
-
小文字アルファベットの項目です。
-
二番目の項目です。
-
三番目の項目です。
-
小文字ギリシャ文字の項目です。
-
二番目の項目です。
-
三番目の項目です。
入れ子のリスト
親項目の説明に子リストが続く場合と、箇条書きの中に番号付きリストが入る場合を確認します。
テーブル
テーブルでは、見出しセル、通常セル、リンク、長い文章、セル結合、セル内の段落とリストを確認します。横幅が狭い場合の折り返しも確認対象です。
基本のテーブル
列見出しと行見出しを持つ、基本的な三列のテーブルです。
| 項目 | 内容 | 関連情報 |
|---|---|---|
| 受付時間 | 平日の午前9時から午後5時までです。 | サポート案内 |
| 利用方法 | 申込完了後に届く案内を確認し、記載された手順に沿って利用を開始します。 | 利用ガイド |
| 必要書類 | 申込内容によって必要な書類が異なります。事前に一覧をご確認ください。 | 必要書類一覧 |
リンクを含むセルでも、文字の位置やセル内余白が他の行と揃うことを確認します。
セル結合を含むテーブル
縦方向と横方向のセル結合を同じテーブル内で使用した例です。
| 分類 | 項目 | 内容 |
|---|---|---|
| 通常受付 | 受付方法 | ウェブサイトまたは電話で受け付けます。 |
| 確認方法 | 受付状況を確認する | |
| 特別受付 | 対象となる条件と受付期間は、特別受付の案内で確認できます。 | |
結合されたセルを含む場合も、行と列の境界、文章の折り返し、リンクの表示が崩れないことを確認します。
段落とリストを含むテーブル
セル内に複数の段落やリストを入れた、情報量の多いテーブルです。
| 種類 | 表示内容 |
|---|---|
| 複数段落 |
一つ目の段落です。概要や結論を短く記載することを想定しています。 二つ目の段落です。補足説明と関連情報へのリンクを含めています。 |
| 箇条書き |
|
| 番号付きリスト |
|
セル内の段落やリストが、テーブル外の同じ要素と比べて不自然に詰まったり広がったりしないことを確認します。
要素の組み合わせ
最後に、実際の記事や案内ページに近い順序で、見出し、本文、リンク、リスト、テーブルを組み合わせます。
相談会開催のお知らせ
サービスの利用を検討している方向けに、個別相談会を開催します。概要を確認したうえで、希望する日時を選択してください。
会場までの経路はアクセス案内、オンライン参加の方法はオンライン参加案内で確認できます。
相談会の概要
相談内容に応じて担当者が案内します。申込前に、次の項目を確認してください。
-
相談したい内容をあらかじめ整理してください。
-
関連する資料がある場合は当日お持ちください。
-
オンライン参加の場合は、事前に接続確認の方法をご確認ください。
当日の流れ
受付から終了までの基本的な流れです。状況により順序や所要時間が変わる場合があります。
-
受付で申込内容を確認します。
-
担当者が相談内容を伺います。
-
必要な手続きや資料をご案内します。
-
追加の質問がある場合の連絡方法を確認します。
開催日程
各回の定員には限りがあります。空き状況は申込ページで確認してください。
| 開催日 | 時間 | 形式 | 申込 |
|---|---|---|---|
| 10月20日 | 午前10時から午前11時 | 会場 | この回に申し込む |
| 10月22日 | 午後2時から午後3時 | オンライン | この回に申し込む |
| 10月24日 | 午後4時から午後5時 | 会場とオンライン | この回に申し込む |