SWELLステップブロックの使い方｜分かりやすい手順説明で読者満足度UP

あなたはブログで手順説明をする際、

と感じたことはありませんか？

SWELLステップブロックを使えば、視覚的に分かりやすい手順説明が簡単に作成できます。

この記事では、SWELLを3年間使い続けている経験をもとに、ステップブロックの基本的な使い方から詳細なカスタム設定、応用的な活用例まで画像付きで詳しく解説します。

この記事を読んで実践すれば、読者に分かりやすい手順説明のコンテンツが作成できるようになりますよ。

それではさっそく始めましょう。

まだSWELLを購入していないなら、以下の記事を参考にSWELLを導入しましょう。

SWELLステップブロックとは

SWELLステップブロックには次のような特徴があります。

それぞれを詳しく解説します。

手順説明に特化したSWELL独自ブロック

SWELLステップブロックは、作業手順やサービスの流れを順序立てて説明するために開発された専用ブロックです。

通常のリストとは違い、各ステップが視覚的につながって表示されます。

例えば「購入画面表示→商品購入→支払完了」のような流れを、番号付きのボックスで表現できます。

これにより、読者は一目で手順全体を理解し「今どこの段階にいて次に何をすべきか」を瞬時に判断できるようになります。

3つのスタイルから選択可能な柔軟性

ステップブロックには「デフォルト」「ビッグ」「スモール」の3つのデザインパターンが用意されています。

記事の内容や目的に応じてスタイルを使い分けることで、読者にとって分かりやすい見せ方を選択できます。

読者満足と作業効率化を同時に達成できる

ステップブロックを使うことで、読者の理解度が大幅に向上します。

従来の箇条書きと比べて、各手順の関係性が明確になるためです。

また、コンテンツ制作時間の短縮にもつながります。

毎回デザインを調整する必要がなく、ブロックを追加するだけで統一感のある表示が可能だからです。

結果として、読者満足度の向上と作業効率化の両方を同時に達成できます。

SWELLステップブロックの基本的な使い方

まずは、SWELLステップブロックの使い方を見ていきましょう。

この4ステップで、基本的なステップブロックが完成します。

SWELLステップブロックのカスタム設定

ステップブロックは、親ブロック（全体設定）と子ブロック（個別設定）の2つのレベルでカスタマイズできます。

親ブロックのカスタム設定5つ

まずは親ブロックの設定から見ていきましょう。

親ブロックの設定は、すべてのステップに一括で適用されます。

設定画面を表示してみましょう。

画面下にある階層ナビゲーションの「ステップ」をクリックしてください。

画面右上の「親ブロックを選択」をクリックしてもOK!

すると、ステッブロックの親ブロックを選択できます。

サイドバーから親ブロックのカスタム設定を進めていきましょう。

スタイル設定

ステップブロックには「デフォルト」「ビッグ」「スモール」の3つのスタイルが用意されています。

デフォルトは最も汎用的で、ビッグは重要な手順を強調したい場合に適しています。

スモールはコンパクトなので、スッキリ見せたい時に便利です。

「STEP」の文字設定

各ステップに表示される「STEP」という文字を、お好みの文字に変更できます。

例えば「手順」「工程」「ポイント」などに変更可能です。

この欄に何も入力しなければ番号のみの表示になります。

商品紹介では「STEP」、レシピ記事では「工程」といったように、コンテンツの性質に合わせて調整しましょう。

始まりの番号設定

設定は「始まりの番号」欄に希望の数字を入力するだけです。

ステップの開始番号を1以外の数字から始めることができます。

例えば前の章からの続きとして「5」から開始したり、「0」から始めることも可能です。

途中で補足説明を挟んだ後に手順を再開したい場合に便利な機能です。

ステップ番号の形設定

デフォルトとスモールスタイルのみ、ステップ番号の形状を「円形」または「四角形」から選択できます。

円形は親しみやすく柔らかい印象を与え、四角形はフォーマルで整然とした印象になります。

コンテンツの雰囲気や読者層に合わせて選択しましょう。

ステップ番号の並び設定

ビッグスタイルのみで利用できる設定で、「STEP」の文字と番号を縦並びか横並びかを選択できます。

縦並びは上下に配置され縦に長くなります。一方、横並びは左右に配置され縦に短くなります。

記事のレイアウトや他の要素との バランスを考慮して決めましょう。

タイトルのHTML設定

各ステップのタイトルを見出しタグ（h2～h6）に設定することで、目次に表示させることができます。

「div」を選ぶと見出し化はされません。

以下の例ではすべてのスタイルで見出しタグをh3に設定しました。

子ブロックのカスタム設定4つ

続いて、子ブロックのカスタム設定を見ていきましょう。

子ブロックでは、選択した1つのステップだけに個別の設定を適用できます。特定のステップを強調したい場合に活用できます。

子ブロックの設定画面を表示してみましょう。

個別に設定したいステップをクリックし、画面下にある階層ナビゲーションの「ステップ項目」をクリックしてください。

すると、ステッブロックの子ブロックを選択できます。

サイドバーから子ブロックのカスタム設定ができるようになります。

「STEP」部分のテキスト上書き設定

親ブロックで設定した「STEP」の文字を、特定のステップだけ別の文字に変更できます。

例えば最後のステップだけ「完了」に変更したり、重要なステップを「重要」に変更することが可能です。

以下の例では、全スタイルとも2番目のステップを「重要」に、3番目のステップを「完了」に変更しています。

また、「テキストを非表示にする」にチェックを入れれば、文字自体を消すこともできます。

番号部分のテキスト上書き設定

親ブロックでは数字しか選べませんが、子ブロックでは特定のステップの番号を、数字以外の文字に変更できます。

漢数字の「一、二、三」やローマ数字、記号なども設定可能です。

「番号を非表示にする」にチェックを入れると番号が消え、文字のみの表示になります。

シェイプの塗りつぶし設定

スモールスタイル限定の機能ですが、ステップ番号のシェイプを塗りつぶしできます。

シェイプとはステップの先頭に表示される「〇」のことをいいます。

「塗りつぶす」「塗りつぶさない」を交互に選ぶこともできます。

ステップ番号のカラー設定

各ステップの番号部分の色を個別に変更できます。

サイトのメインカラー以外にも、自由に色を選択可能です。

例えば注意が必要なステップを赤色にしたり、完了ステップを緑色にするといった使い方ができます。

以下の例では、デフォルト、ビッグ、スモールともに、最初を青、２番目を赤、３番目を緑にしました。

SWELLステップブロックの3つの活用例

ステップブロックの基本的な使い方を覚えたら、応用的な活用方法を試してみましょう。

これらを活用すれば、読者により分かりやすいコンテンツが作成できますよ。

画像ブロックを挿入する

ステップブロック内には、テキスト以外にも様々なブロックを挿入できます。

特に画像ブロックで実際の画面を示すのがおすすめです。

 手順説明は文章だけではわかりにくいため、実際の画像を使うことで、視覚的に理解しやすくなるからです。

ステップブロックに画像を挿入する方法は以下の通りです。

ステップを横並びにする

リッチカラムブロックと組み合わせることで、ステップを横並びにできます。

リッチカラムで「横スクロールで表示する」をONにすれば、スマートフォンでも見やすい横スクロール表示になるんですね。

縦に長くなりがちなステップを横スクロール表示すれば、記事を短くできるので読者の離脱を防ぐこともできますよ。

ステップを横並びにする手順は以下の通りです。

なお、リッチカラムについては以下の記事で詳しく解説していますので参考にしてください。

ステップブロックをグループ化する

ステップブロックをグループ化すると、外枠に実線や点線などのボーダーが適用できます。

また、方眼やストライプといったスタイルを適用することも可能です。

ボーダーやスタイルを組み合わせることでステップ群が視覚的に区切られ、見やすい手順説明となりおすすめです。

グループ化の手順は以下の通りです。

SWELLステップで分かりやすい手順説明を作成しよう

今回は、SWELLステップブロックの基本的な仕組みから使い方、活用術まで解説しました。

本記事の内容は以下のとおりです。

SWELLステップブロックは、読者にとって分かりやすい手順説明を作成できる便利な機能です。

3つのスタイルから選択でき、豊富なカスタマイズオプションで自由度の高いデザインが可能になります。

「読者に対して分かりやすく手順説明をしたい！」という方は、今回紹介した方法を参考にステップブロックを活用してみてください。

本ブログではWindowsテーマにSWELLを使用しています。

あなたも、ステップブロックが本当に便利なSWELLにしませんか？

今回は以上です。

最後までお読みいただきありがとうございました。