SWELLのステップブロックの使い方｜わかりやすい手順の作り方

2026年10月25日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

設定方法などの手順を説明するときに、「順番がわかりにくい」と言われたことはありませんか。私も以前は番号付きリストで手順を書いていましたが、読者が今どの手順にいるのか見失いやすい記事になっていました。

この記事では、SWELLの「ステップ」ブロックの使い方を初心者向けにわかりやすく解説します。このブログでも毎回使っている機能なので、読みながら進めれば、誰でも迷わず作業できる手順説明を作れるようになります。

※これからSWELLを導入する方へ：SWELLは買い切り型のWordPressテーマで、追加費用の心配がありません。この記事を見ながら進めれば、初心者でも迷わずおしゃれなブログを作れます。

➡️【公式】SWELLの公式サイトはこちら

デザインに悩む時間を減らして、記事作りに集中できます。

ニャフィ

手順をわかりやすく説明するのって難しいにゃ…

たいがブログ

文章だけだと、順番が伝わりにくいですよね。

ニャフィ

ステップブロックって、どう書けばいいのかにゃ？

たいがブログ

このステップブロックを使って、5つの手順で解説しますね。

SWELLのステップブロックとは

ステップブロックは、手順を番号付きで縦に並べられるSWELLの装飾ブロックです。番号・タイトル・説明がセットで表示されるので、読者は順番どおりに作業を進められます。

筆者はAFFINGER6を使っていたころ、手順の装飾をタグで作っていて手間がかかりました。SWELLのステップブロックはブロックを追加するだけで完成形が見えるので、手順記事を書くのがぐっと楽になりました。

手順を番号付きでわかりやすく並べられる

ステップブロックは、各手順に番号が自動で付くので、順番を入れ替えても番号を直す必要がありません。手順の区切りがはっきり見えるため、読者が迷いにくくなります。

番号付きリストとの違い

WordPress標準の番号付きリストは、短い項目を並べるのには便利です。ただ、手順ごとに詳しい説明を添えたいなら、ステップブロックのほうが圧倒的に見やすくなります。

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

ステップブロックは、ブロックを追加してタイトルと説明を入力するだけで作れます。ただし、1つのステップに何を書くかで、わかりやすさが大きく変わります。

筆者は以前、1つのステップに2〜3個の作業を詰め込んでしまい、読者から「どこまでやればいいかわからない」と言われました。1ステップには1つの作業だけを書くのが鉄則です。

1つのステップには1つの作業だけを書く

「開く」「入力する」「保存する」のように、1つのステップに1つの作業を書くと、読者は確実に進められます。作業が多いときは、ステップを分けて数を増やしましょう。

タイトルは動詞で終わらせる

ステップのタイトルは、「〜を開く」「〜を入力する」のように動詞で終わらせるのがコツです。何をすればいいかがタイトルだけで伝わるので、読者が作業しやすくなります。

STEP

ステップブロックを追加する

記事の編集画面で「＋」ボタンを押し、「ステップ」と検索して追加します。追加すると、最初のステップが1つ入った状態で表示されます。

STEP

ステップのタイトルを入力する

番号の横にあるタイトル部分に、その手順でやることを入力します。動詞で終わる短い言葉にすると、ひと目で作業内容が伝わります。

STEP

説明文を入力する

タイトルの下に、具体的な操作方法や注意点を書きます。中には画像やキャプションボックスも入れられるので、画面の説明にも使えます。

STEP

ステップを追加する

ブロックの追加ボタンから、次のステップを増やします。3〜5ステップにまとめると、読者が最後まで集中して読みやすくなります。

STEP

ラベルとデザインを調整する

右側の設定パネルで、番号のデザインやラベルの文字を変更できます。「STEP」を「手順」に変えるなど、記事の雰囲気に合わせてみましょう。

ステップブロックをもっと見やすくするコツ

ステップブロックは、ひと工夫するだけでさらにわかりやすい手順説明になります。ここでは、読者がつまずかずに作業を終えられるためのコツを紹介します。

筆者は各ステップに操作画面のスクリーンショットを入れるようにしてから、読者からの「どこを押せばいいの？」という質問が目に見えて減りました。文章だけで伝えにくい部分は、画像で見せるのがいちばん確実です。

スクリーンショットで画面を見せる

Windowsなら標準の「Snipping Tool」、Macなら「shift＋command＋4」で画面の一部を撮影できます。押す場所に赤い枠や矢印を付けると、さらにわかりやすくなります。

手順の前に「準備するもの」を伝える

ステップブロックの前に、キャプションボックスで必要なものをまとめておくと親切です。読者は準備を整えてから作業を始められるので、途中で手が止まりにくくなります。

わかりやすい手順説明のチェックポイント

1ステップに1つの作業だけを書いている
タイトルが動詞で終わっている
押す場所がスクリーンショットでわかる
ステップの数は3〜5個にまとめている

よくある質問

ステップの順番は入れ替えられますか？: 入れ替えられます。ステップを選んで上下の矢印で移動すれば、番号も自動で振り直されます。手作業で番号を直す必要はありません。
ステップはいくつまで作るのがいいですか？: 3〜5個程度がおすすめです。手順が多くなる場合は、見出しで区切ってステップブロックを分けると、読者が途中で迷いにくくなります。
ステップの中に画像やボックスを入れられますか？: 入れられます。説明部分には画像・キャプションボックス・SWELLボタンなども追加できるので、詳しい手順説明にも対応できます。
番号付きリストからステップブロックに変えたいです。: 自動で変換する機能はないため、ステップブロックを追加して内容を移す形になります。アクセスの多い手順記事から順に置き換えるのがおすすめです。