SWELLステップブロックの使い方｜画像を用いた手順説明に適した便利機能！

「作業の手順や購入の流れを順番通りに説明したい…」

「ステップブロックの設定や活用方法は？」

「ステップを横並びで表示させるには？」

この記事では、そんな方に向けて、SWELLでステップブロックの使い方を解説します。

ステップブロックとは…手順を時系列で説明できるSWELL専用カスタムブロック

この記事を読めば、あなたも簡単に

• 画像を用いた手順説明のコンテンツを作成できる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、作業の手順や購入の流れを分かりやすく説明できています。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

SWELLステップブロックでできること2選

SWELLのステップブロックでは以下のようなことができます。

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

ステップをおしゃれにデザインできる

SWELLのステップブロックは「スタイル」「形」「色」を選べ、以下のようなデザインにカスタマイズできます。

豊富なカスタマイズ性から、サイトの雰囲気やユーザーに与えたい印象を考慮して選べます。

「STEP」の文字と番号を上書きできる

SWELLのステップブロックでは、「STEP」の文字と番号を上書きできます。

ひらがなやカタカナ、漢字、数字、ローマ字、記号など自由に設定することができますよ。

SWELLステップブロックの使い方とカスタム設定10つ

SWELLのステップブロックの使い方はSWELL公式サイトでもまとめられているが、本記事ではより詳しく紹介します。

公式サイト：【SWELL専用ブロック】ステップブロックの使い方

ちなみに、ステップブロックは以下2つの方法からも呼び出せます。

自分の好きな方法で呼び出しましょう。

ステップブロックで設定可能な項目は10つあります。

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

3種類からスタイルを選ぶ

まずは親ブロックで設定できる項目から説明していきます。

SWELLでは、ステップブロックのスタイルを以下の3種類から選べます。

1記事内で使うステップブロックのスタイルを1つに絞れば、統一感のある記事に仕上がりますよ。

「STEP」の文字を変更する

ステップブロックの「STEP」の文字を自由に変更できます。

「STEP」の文字を以下のように変えてみました。

基本、デフォルトのままで良さそうです。

始まりの番号を決める

ステップの始まりを何番からにするか自由に変更できます。

始まりの番号を以下のように変えてみました。

最初の番号を自由に決められるのは便利ですね。

ステップ番号の形を選ぶ

ステップブロックのスタイル「デフォルト」「スモール」を選んだ場合のみ、ステップ番号の形を以下の2種類から選べます。

「円形」だと柔らかく穏やかな印象、「四角形」だと真面目で緊張感のある印象を与えますよ。

ステップ番号の並びを選ぶ

ステップブロックのスタイル「ビッグ」を選んだ場合のみ、ステップ番号の並びを以下の2種類から選べます。

ご覧のとおり、タイトルとテキストの位置が並びによって若干異なりますね。

好みの問題ですが、個人的には縦に短いコンパクトな横並びがおすすめです。

タイトルのHTMLタグを設定する

SWELLのステップブロックでは、ステップのタイトルをHTMLタグ(見出し)にすることができます。

見出し化すれば、ステップのタイトルを目次に反映させることができますよ。

ユーザーと検索エンジンに内容を分かりやすく伝えることができるので、ユーザーの利便性UP、かつSEO効果も期待できるでしょう。

「STEP」部分のテキストを上書きする

ここからは子ブロックで設定できる項目を説明していきます。

SWELLのステップブロックでは、ステップ項目ごとで「STEP」部分のテキストを上書きすることができます。

例えば、以下のように「STEP」部分のテキストを上書きしてみました。

親ブロックの設定項目「「STEP」の文字」ではSTEPの文字を変えるとすべてのSTEPに反映されるが、

子ブロックでは選択したステップ項目のテキストだけを変えることができます。

「STEP」部分のテキストを消したい場合は、「テキストを非表示にする」に✔しましょう。

番号部分のテキストを上書きする

SWELLのステップブロックでは、ステップ項目ごとで番号部分のテキストを上書きすることができます。

以下のように番号部分のテキストを上書きしてみました。

親ブロックの設定項目「始まりの番号を決める」では数字しか選べなかったが、

子ブロックでは選択したステップ項目の番号をひらがなや漢字、記号など自由に設定できます。

番号部分のテキストを消したい場合は、「番号を非表示にする」に✔しましょう。

シェイプを塗りつぶすか決める

ステップブロックのスタイル「スモール」を選んだ場合のみ、ステップ項目ごとでシェイプを塗りつぶすことができます。

シェイプを塗りつぶした場合と塗りつぶさない場合の違いは、以下のとおりです。

シェイプの塗りつぶしを交互に行うとオシャレになりますね。

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

ステップ項目ごとでステップ番号のカラーを設定することもできます。

サイトの統一感を出すために、メインカラーと同じ色にすることをおすすめですよ。

使用したい色がなかったり、好きな色を指定して使いたい場合は、カラーピッカーで調べたカラーコードを入力しましょう。

カラーピッカーとは…画面上に表示された色を選択することで、その色を文字色や背景色に使うことができる機能のこと

カラーコードとは…色を数字やアルファベットなど文字の羅列で表した符号のこと

_{＼クリックで開く／}

【実体験】SWELLステップブロックのおすすめな活用例2つを紹介

当ブログで使用しているSWELLのステップブロックのおすすめな活用方法を2つ紹介します。

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

画像を用いて手順説明する

SWELLのステップブロックは、以下のようにテキストだけではなく画像も用いて手順説明できます。

テキストだけだと理解できない場合もありますが、画像と併用すれば理解度がより深くなり、ユーザーの利便性も上がりますよ。

_{＼クリックで開く／}

ステップを横並びに表示させる

SWELLのステップブロックとリッチカラムブロックを組み合わせて使えば、手順説明を横並びに表示させることができます。

通常通りにステップブロックを使えば縦に長くなりがちですが、横並びに表示させることで既知の情報をかんたんにスキップでき、ユーザーの利便性も上がりますよ。

_{＼クリックで開く／}

リッチカラムブロックの使い方をより詳しく知りたい場合は、下の記事を参考にしてください。

SWELLステップブロックまとめ

今回は、SWELLでステップブロックの使い方を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。