SWELLステップブロックの使い方｜手順・流れをわかりやすく表現する方法

SWELLのステップブロックは、手順や流れを番号付きでわかりやすく伝えられる便利なブロックです。
この記事では、基本的な使い方から活用方法まで初心者向けに解説します。

SWELLステップブロックとは？仕組みと特徴をわかりやすく解説

まずは、SWELLステップブロックがどのようなブロックなのかを確認しておきましょう。
手順を順番どおりに見せられるため、設定方法や申し込み手順などの解説記事と相性抜群です。

SWELLステップブロックは、手順や作業の流れを「STEP1」「STEP2」のように順番どおり表示できるブロックです。設定方法や操作手順を見やすく整理したいときに役立ちます。

ステップブロックが活躍する場面

ステップブロックは、順番どおりに進める手順や作業の流れをわかりやすく伝えたいときに便利です。番号が自動で付くため、読者は現在どの手順まで進んでいるのかを把握しやすくなります。

特に、以下のような記事と相性が良いブロックです。

• WordPressの初期設定やカスタマイズ方法
• ブログの始め方や開設手順
• 商品・サービスの申し込み方法
• プラグインやツールの設定方法
• アプリやソフトのインストール手順

手順を1つずつ整理して表示できるため、操作方法を解説する記事や初心者向けのマニュアルを作成するときに活躍します。

SWELLステップブロックの使い方

ステップブロックの挿入手順と、挿入後に行えるカスタマイズ（表示設定）について解説します。
基本設定は親ブロックと子ブロックの2つに分けて紹介します。

それでは順番に見ていきましょう。

❶ ステップブロックの挿入手順

• 投稿（エディター）画面での作業になります。

ステップブロックの挿入手順をご紹介します。

❷ ステップ（親ブロック）の設定

ここでは、ステップ（親ブロック）の設定をご紹介します。

投稿（エディター）画面でステップブロックの領域をクリックして『ステップを選択アイコンまたは親ブロックを選択』をクリックします。
以下のようにステップブロック全体が青枠（赤破線部）で囲まれればOKです。

まずは、投稿（エディター）画面右側に表示される「設定 ＞ ブロック」タブの設定項目を確認していきましょう。

各設定は、投稿（エディター）画面右側の「設定 ＞ ブロック」タブから確認できます。

設定パネルが表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。

編集する「ステップ（親ブロック）」が選択できたら、ブロックタブのスッテップ項目を設定していきます。

詳細設定項目（親ブロック）

❸ ステップ（親ブロック）の主なカスタマイズと表示例

スタイルの切り替えで用意されているステップの表示イメージです。
ステップ（親ブロック）のスタイル「デフォルト・ビック・スモール」3種類の表示例をご覧ください。

ステップ（親ブロック）スタイル（デフォルト）

ステップ（親ブロック）スタイル（ビック）

ステップ（親ブロック）スタイル（スモール）

❹ ステップ項目（子ブロック）の設定

ここでは、ステップ項目（子ブロック）の設定方法を紹介します。

投稿（エディター）画面で、設定したいステップ項目の「領域またはタイトル…」をクリックします。
（項目の選択）
以下の画面のように、「ステップ項目アイコン」にマウスオーバーし、青枠（赤破線部）で囲まれていれば選択できています。

まずは、投稿（エディター）画面右側に表示される「設定 ＞ ブロック」タブの設定項目を確認していきましょう。

各設定は、投稿（エディター）画面右側の「設定 ＞ ブロック」タブから確認できます。

設定パネルが表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。

編集する「ステップ項目（子ブロック）」が選択できたら、ブロックタブのスッテップ項目を設定していきます。

詳細設定項目（子ブロック）

❺ ステップ項目（子ブロック）の主なカスタマイズと表示例

ステップ項目（子ブロック）で「テキスト・番号・色」を変更したサンプルです。
ステップ（親ブロック）スタイル「デフォルト・ビック・スモール」3種類の表示例をご覧ください。

ステップ（親ブロック）スタイル（デフォルト）

ステップ（親ブロック）スタイル（ビック）

ステップ（親ブロック）スタイル（スモール）

SWELLステップブロックを見やすく作るコツ

ステップブロックは、手順を並べるだけでも利用できますが、少し工夫するだけで読者に伝わりやすい記事になります。ここでは、見やすくわかりやすいステップブロックを作るためのポイントを紹介します。

1ステップにつき1つの操作だけを書く

1つのステップに複数の操作を詰め込みすぎると、読者は「何から始めればよいのか」がわかりにくくなります。

「画像をアップロードする」「設定を保存する」のように、1ステップにつき1つの操作を意識すると、順番どおりに進めやすくなります。

ステップタイトルは短くまとめる

ステップタイトルは、一目で内容が伝わる短い文章がおすすめです。

「画像をアップロードする」「テーマを有効化する」など、操作内容を簡潔に表現すると、読者は各ステップの内容をすぐに把握できます。

必要に応じて画像を追加する

操作方法を解説する記事では、文章だけでなく画像もあわせて掲載すると理解しやすくなります。

特にWordPressの設定画面や管理画面を紹介する場合は、操作する場所が一目でわかるスクリーンショットを追加すると、初心者でも迷わず作業を進められます。

手順が完了したことを伝える

最後のステップでは、「設定は以上で完了です」「これでステップブロックの作成は完了です」のように、作業の終了を伝える一文を添えましょう。

読者はどこまで進めればよいのかがわかりやすくなり、安心して次の作業へ進めます。

読者目線で手順を確認する

記事を公開する前に、実際に手順どおり操作してみることも大切です。

説明が不足している箇所や画像を追加したほうがよい部分が見つかることもあります。読者が迷わず最後まで進められるよう、完成後に一度見直してみましょう。

ステップブロックとリストブロックの違い

ステップブロックとリストブロックは、どちらも情報を整理して表示できるブロックですが、用途が異なります。

手順や作業の流れを順番どおりに伝えたい場合はステップブロック、特徴やポイントなど順番に関係なく情報を整理したい場合はリストブロックがおすすめです。

それぞれの違いを以下の表にまとめました。

項目	ステップブロック	リストブロック
向いている用途	手順・作業の流れ	項目の整理・箇条書き
順番	順番どおりに表示	順番を意識しない内容向け
デザイン	STEP形式で見やすい	シンプル
おすすめの記事	設定方法・操作手順	特徴・メリット・注意点

手順をわかりやすく伝えたい記事では、ステップブロックを使用することで読者が現在どの手順まで進んでいるのかを把握しやすくなります。

一方、メリットや注意点、機能一覧などを紹介する場合はリストブロックのほうが読みやすく整理できます。記事の内容に合わせて使い分けることで、より伝わりやすいコンテンツを作成できます。

よくある質問（FAQ）

ステップブロックとリストブロックの違いは何ですか？

ステップブロックは、「STEP1」「STEP2」のように手順を順番どおり表示するためのブロックです。一方、リストブロックは項目を箇条書きで整理するためのブロックで、手順や流れを説明する場合はステップブロックのほうが適しています。

ステップブロックには画像を追加できますか？

はい。ステップ（子）ブロックには、画像・ボタン・リストなど、通常のブロックと同じようにさまざまなブロックを追加できます。画像を組み合わせることで、操作手順をよりわかりやすく伝えられます。

STEPの文字は変更できますか？

はい。「STEP」と表示されるラベルは自由に変更できます。「手順」や「Flow」など記事の内容に合わせた文字へ変更したり、非表示にしたりすることも可能です。

ステップブロックはどのような記事におすすめですか？

WordPressの設定方法やブログの始め方、商品の申し込み方法など、順番どおりに進める内容を解説する記事におすすめです。手順を整理して表示できるため、読者が迷わず作業を進められます。

---

関連記事
ステップブロック以外にも、手順や流れをわかりやすく伝えられるブロックがあります。
用途に合わせて使い分けたい方は、以下の記事もあわせてご覧ください。

正直、迷っている時間が一番もったいないです。

まとめ！SWELLステップブロックの使い方｜手順・流れをわかりやすく表現する方法

SWELLステップブロックは、手順や作業の流れを「STEP1」「STEP2」のように順番どおり表示できる便利なブロックです。WordPressの設定方法やブログの始め方、商品の申し込み手順など、操作をわかりやすく伝えたい記事で活躍します。

また、STEPラベルや開始番号などの設定を活用することで、記事の内容やデザインに合わせた見やすいステップを作成できます。1ステップにつき1つの操作を意識し、必要に応じて画像を組み合わせることで、初心者にも伝わりやすい記事に仕上がります。

ぜひ本記事を参考に、SWELLステップブロックを活用して、読者が迷わず理解できるわかりやすい手順記事を作成してみてください。