【SWELL】説明リストブロックの使い方ガイド｜具体例付きで解説します

SWELLで説明リストブロックを触ってみたものの、どこにあるのか分かりにくかったり、どんな場面で使えばいいのかイメージしづらかったりして、そのまま放置している人も多いと思います。

読み終わるころには、「ここは説明リストに変えたほうが見やすいな」というポイントが、自分のサイトの中でも自然と見つかるようになるはずです。

SWELLの説明リストとは？まず基本をサクッと確認

説明リスト（dl・dt・dd）の意味と役割

説明リストは、HTMLでは「dl」「dt」「dd」という3つのタグで表現されるパーツです。ざっくり言うと、「項目名とその説明」をセットで並べていくための仕組みだと思ってもらえればOKです。

それぞれのタグのイメージを表でまとめると、こんな感じになります。

タグ・名前	役割のイメージ
dl	説明リスト全体の箱
dt	用語や項目名・ラベル
dd	その説明や補足テキスト

ブログやサイトだと、例えばこんな使い方がしやすいです。

• 用語集の「用語名：意味」をセットで並べる
• サービスの「プラン名：内容」をまとめる
• 商品の「項目名：スペック」を整理する

普通の箇条書きでも書けないことはありませんが、「タイトル」と「説明」をきれいに分けたい場面では、説明リストのほうが読み手にとって親切です。

SWELLの説明リストブロックでできること

SWELLには、「説明リスト（DL）」という専用ブロックが用意されています。これを使えば、HTMLタグを直接触らなくても、ブロックエディター上でdl・dt・ddの構造を簡単に作ることができます。

SWELLの説明リストブロックでできることを、ざっと挙げてみます。

• dtとddのペアを、ボタン操作で追加・削除できる
• 項目名と説明文を別々に入力できるので、情報が整理しやすい
• ddの中に文章だけでなく、画像やボタン、リストなどのブロックも挿入できる
• 用意されたスタイルからデザインを選んで、見た目を簡単に変えられる

私自身、最初は「シンプルなリストの仲間」くらいに思っていましたが、慣れてくると、料金表やサービス紹介などを説明リストだけで完結させることも増えてきました。

他のリストやテーブルとざっくり比較

説明リストブロックは、ふつうのリストブロックやテーブルブロックとは少し役割が違います。どれを選ぶか迷いやすいところなので、向いている場面をざっくり比較しておきます。

ブロック種類	向いている場面
箇条書きリスト	ただの列挙・チェックリスト・短いメモ
番号付きリスト	手順やランキングなど、順番が大事なもの
テーブル（表）	行や列でしっかり比較したい内容
説明リスト	「ラベル：説明」をセットで分かりやすく見せたいとき

感覚としては、「いくつかの項目を一度に横並びで比較したいならテーブル」、「1つ1つの項目について、ちょっと詳しく説明したいなら説明リスト」と覚えておくと、選ぶときに迷いにくくなります。

SWELLで説明リストブロックを挿入する手順

説明リストブロックの出し方（基本操作）

まずは、説明リストブロックそのものを呼び出す手順です。ブロックエディターに慣れていればすぐ覚えられます。

操作	内容
1	投稿や固定ページの本文で「＋」ボタンをクリックする
2	ブロックの一覧から「SWELLブロック」を選ぶ
3	「説明リスト（DL）」をクリックして挿入する
4	dt側に項目名、dd側に説明文を入力する

キーボード操作に慣れている場合は、本文中で「/説明リスト」や「/dl」といったスラッシュコマンドで呼び出す方法もあります。打ち慣れると、マウスでメニューを探すより早く挿入できて便利です。

dtとddを増やす・並び替える・消す

説明リストは、項目がいくつか並んでこそ本領を発揮します。SWELL 説明リストブロックでは、dtとddのセットを増やしたり、順番を変えたり、いらない項目を消したりする操作が簡単にできます。

• ブロックを選択した状態で表示される「＋」ボタンから、項目を追加する
• エディター上で項目をドラッグ＆ドロップして、順番を入れ替える
• 不要になった項目は、その項目を選択して削除する

私の場合は、最初に3〜4項目くらいをざっくり作っておいて、あとから順番を動かしながら整理することが多いです。最初から完璧な順番にしようとすると手が止まりがちなので、「とりあえず全部出してから並べ替える」くらいの気持ちで触ると、ストレスが少なくて済みます。

説明リストのブロックツールバーで触れる基本設定

説明リストブロックを選択すると、上部のツールバーや右側の設定パネルにいくつかの項目が表示されます。ここを少し触るだけでも、見た目の印象がかなり変わります。

• dt・ddそれぞれのテキストに太字や色を設定する
• 説明部分の行間や余白を調整して読みやすくする
• スタイルを切り替えて、線付きや横並びなどのレイアウトに変える

細かいデザインはあとからいくらでも調整できるので、最初は「テキストを入れること」と「スタイルを1つ選んでみること」だけ意識しておけば大丈夫です。

SWELL説明リストのデザイン・スタイルと設定のコツ

スタイル種類と見え方の違い

SWELLの説明リストブロックには、いくつかのスタイルが用意されています。名称や細かな見た目はテーマのバージョンによって少し変わる場合がありますが、代表的なイメージは次のような感じです。

スタイルのイメージ	見え方の特徴	向いている用途
シンプル	dtとddが縦に並んだ素直なレイアウト	用語集・Q&A・設定の補足
左に線	dtの左側に縦線が入り、区切りがはっきりする	項目をスッキリ区切りたいとき
横並び	PCではdtが左、ddが右に並ぶ	料金やスペックをコンパクトに見せたいとき
縦並び表	枠や罫線で表のように見せられる	表形式ほどカッチリさせたくない料金表など

説明文が長くなりそうなときはシンプル系、短い情報を並べたいときは横並び系、とざっくり決めておくとスタイル選びで悩みにくいです。

スマホで読みやすくするための設定ポイント

説明リストは、スマホで読みにくいと一気にストレスになります。PCではきれいに見えていたのに、実際にスマホで確認したら文字が詰まりすぎていた、というのは私も何度か経験しました。

スマホでの読みやすさを意識するときは、次のポイントをチェックしてみてください。

• dtの文字数を短めにして、1〜2行で収まるようにする
• ddの文章は、1文を短く区切ってダラダラさせない
• 行間をデフォルトより少し広めにして、息継ぎしやすくする
• 横並びスタイルがスマホで縦並びになったときの見え方を実機で確認する

特に横並びスタイルは、PCでは「タイトル：説明」で見やすくても、スマホでは縦に折り返されてしまいます。プレビューだけでなく、自分のスマホで実際に開いて、「タイトルと説明が離れすぎていないか」「改行の位置が変になっていないか」をざっくりチェックしておくと安心です。

SWELL説明リストのおすすめ活用アイデア

ブログ記事での活用例（情報整理に強い）

ブログ記事の中には、「説明したいことがいくつかあるけれど、そのまま文章で書くとごちゃっとする」という場面がよくあります。説明リストは、そういった情報を整理して、読み手にとって見やすい形に整えるのが得意です。

代表的な使い方を、もう少し具体的に整理してみます。

用途	説明	ポイント
用語集	記事内に出てくる専門用語と、その意味をまとめる	記事の末尾にまとめて置くと親切
Q&A	質問（dt）と答え（dd）をセットで見せる	「よくある質問」コーナーとして使いやすい
設定の補足	項目名と注意点・ポイントを整理する	スクリーンショットの下に置くと分かりやすい
要点のまとめ	見出しと要約をセットで並べる	記事の最後の復習コーナーにぴったり

個人的には、Q&A形式での利用がかなり気に入っています。dtに「Q.〜」、ddに「A.〜」と入れるだけで、FAQらしい雰囲気が出ますし、読者も「ここに答えがまとまっているんだな」と一目で分かります。

サービスサイト・店舗サイトでの活用アイデア

SWELL 説明リストは、ブログ記事だけでなく、サービス紹介や店舗サイトのページでもかなり役立ちます。料金やメニュー、コース内容など、「項目名と内容」がたくさん出てくるページとは相性が良いです。

業種ごとに、どんな使い方がありそうかをざっとまとめると、こんなイメージになります。

業種・サイト	説明リストの使い方	得られるメリット
コンサル・制作系	プラン名と提供内容・納品物の説明を整理する	プランごとの違いが直感的に伝わる
サロン・美容系	メニュー名と施術の内容や所要時間をセットで見せる	長めの説明でもスッキリまとめられる
教室・スクール	コース名と対象者・学べる内容を整理する	どのコースが自分向きか判断しやすくなる
飲食店	メニュー名と一言コメントやおすすめポイントを書く	画像と組み合わせると訴求力が上がる

テーブルで料金表を作ると、行や列のバランスを考える必要がありますが、説明リストなら「1つの項目ごとに説明していく」形なので、後から内容を足したり削ったりしやすいのもメリットです。

ブログパーツに登録して説明リストを使い回す

「料金表」「よくある質問」「スペックのまとめ」など、何度も使う説明リストは、ブログパーツにしておくと更新がとても楽になります。

• まず1回、説明リストブロックで理想の形を作る
• そのブロックを丸ごとブログパーツとして登録する
• 別の記事で同じブログパーツを呼び出して使う

こうしておけば、例えば料金を変更したいときも、ブログパーツ側を1回修正するだけで、同じ説明リストを使っているすべてのページに反映させることができます。サイトのボリュームが増えてくるほど、この「更新のしやすさ」のありがたみを感じるはずです。

SEOとアクセシビリティの視点から見た説明リストの使い方

dlタグを正しく使うと何がうれしいか

説明リスト（dl）は、「意味のある組み合わせ」を表すタグです。「dt：dd」のセットがしっかり作られていると、機械的にも「これは項目とその説明なんだな」ということが読み取りやすくなります。

きちんと説明リストとして使っておくと、次のような良いことが期待できます。

• 項目と説明の対応関係がHTML上でもはっきりするので、構造が分かりやすい
• スクリーンリーダーが、項目とその説明をペアとして扱いやすくなる
• 何でもdivタグで作るより、「意味に合ったタグを使っている」形になる

SEO的に「説明リストを使ったから順位が一気に上がる」というものではありませんが、意味に合ったタグを選んでいくことは、長い目で見てサイト全体の評価や、ユーザーの体験にとってプラスになります。

見出しとの組み合わせ・やりがちなNG例

説明リストを使い始めると、「H2・H3見出しとの関係がよく分からない」という声をよく聞きます。役割の違いをざっくり整理すると、こんなイメージです。

• H2/H3見出し：ページ全体の章立てや話の流れを示すもの
• 説明リスト：その中で「項目名と説明」を並べて整理するもの

この役割を混ぜてしまうと、読み手も自分も混乱してきます。例えば、次のような使い方はあまりおすすめできません。

• dtの中に長すぎる見出しや文章を詰め込みすぎる
• ページ全体の構造を説明リストだけで作ろうとする

実務的には、次のような組み合わせを意識するとスッキリします。

• H2：章のタイトル（大きなテーマ）
• H3：章の中のトピック（話題）
• 説明リスト：そのトピックの中での「項目と説明」の一覧

つまり、「見出しの中に説明リストを置く」というイメージです。こうしておくと、見出しだけを追いかけても記事の流れが分かり、説明リストを読むと細かい内容がスイスイ頭に入ってくる、というバランスが取りやすくなります。

説明リストでよくあるつまずきと対処法

よくあるつまずき	原因の例	対処のヒント
スマホで読みにくい	dtの文字数が長くて、折り返しが増えすぎている	dtを短めにし、詳しい説明はddに回す
料金表がごちゃごちゃする	1つの説明リストに項目を詰め込みすぎている	プランごと、カテゴリーごとに説明リストを分ける
他のブロックと雰囲気が合わない	色や余白がページ全体のデザインとずれている	サイト全体のカラーや余白に合わせて調整する
どこに使えばいいか分からない	説明リストの役割がぼんやりしている	「ラベルとその説明のセットかどうか」で判断する

迷ったときは、「これは項目名とその説明をセットで見せたい内容か？」と自分に問いかけてみると、説明リストに向いているかどうかが判断しやすくなります。

よくある質問

Q1. 説明リストとテーブル（表）はどう使い分ければいいですか？

A1. 複数のプランや商品のスペックを横並びで比較したいときはテーブルが向いています。一方で、「1つの項目ごとに、少し詳しく説明したい」場合はSWELLの説明リストが使いやすいです。イメージとしては、テーブルは一覧比較、説明リストは項目ごとの深掘り、と考えると分かりやすいと思います。

Q2. SWELL 説明リストだけで料金表を作っても大丈夫ですか？

A2. 説明リストだけで料金表を作ることも十分可能です。例えば、プラン名・対象者・内容・価格といった情報を1つの説明リストの中で整理すれば、1プランずつ丁寧に紹介できます。プラン数が多いときだけ、テーブルと組み合わせることも検討してみてください。

Q3. 記事内でSWELL 説明リストを何度も使うと、しつこい印象になりませんか？

A3. 説明リストばかりになると単調な印象は出てしまうので、通常のリストやテーブル、ステップブロックなどとバランスよく組み合わせるのがおすすめです。ただ、「要点の整理」「料金やメニューの説明」「Q&A」といった役割ごとに使い分ければ、同じページに3〜4箇所程度説明リストがあっても、むしろ情報が見やすくなることが多いです。

まとめ

押さえておきたいポイントを整理します

今日できる最初の一歩としては、自分のブログやサイトの中から「説明が詰まりすぎている場所」を1箇所探してみてください。その部分をSWELL 説明リストに置き換えてみると、情報の伝わり方がどう変わるかを実感しやすいと思います。

一度コツをつかんでしまえば、他の記事やページにもどんどん応用していけます。ぜひ、自分なりの使い方を試しながら、説明リストを良い相棒にしていってください。