読者に「手順」や「流れ」をわかりやすく伝えたい！
という方のために、AFFINGER（アフィンガー）の「ステップ」機能をご紹介します。
AFFINGERには、
- 見出しブロックの「ステップ」スタイル
- クラシックブロックの「ステップ」パーツ
この2パターンのステップ機能が存在します。
これらの機能を使えば、読者に「手順」や「流れ」をわかりやすく伝えることができるのですが、使い方にはコツが必要です。
それではAFFINGERの「ステップ」機能の使い方と、効率的な使い方を詳しく解説していきます
AFFINGERの「ステップ」機能とは？
AFFINGERの「ステップ」機能は、手順や流れを段階的に表示できる便利な機能です。
例えば、「3つのステップで成功する方法」や「商品の使い方を説明する手順」など、読者が理解しやすい形で情報を整理できます。
主な特徴
- 視覚的にわかりやすいデザイン：
段階的な手順を画像やテキストを使って魅力的に表示可能。 - 多用途：
レシピ記事やチュートリアル、商品説明などに幅広く対応。 - 初心者でも簡単に使える：
AFFINGER内で簡単に設定でき、プログラミングの知識は不要。
AFFINGERのステップ機能を活用すると、記事の見た目がスッキリして、読者が読みやすくなります。
単にテキストがズラッと並んでいるだけだと、途中で「分かりにくいな」と思われて離脱されることが多いですが、この機能を使えば、内容が段階ごとに整理されて表示されるので、自然と読み進めやすくなります。
特に、手順やノウハウを説明する際には非常に便利です。
実際にAFFINGERのステップ機能を使ったらこんな感じ
冒頭でも伝えましたが、AFFINGERにはステップが2パターン用意されています。
- 見出しブロックの「ステップ」スタイルを使用する
- クラシックブロックの「ステップ」パーツを使用する
それぞれのイメージは以下のようになります。
1.見出しブロックの「ステップ」スタイルを使用した例
商品を選択してカートに追加する
欲しい商品を選び、「カートに追加」ボタンをクリックしてください。複数の商品を選ぶことも可能です。
お客様情報を入力する
お名前や住所、メールアドレスなどをフォームに入力します。入力内容を確認して「次へ進む」をクリックしてください。
支払いを完了する
クレジットカードや銀行振込など、お好きな支払い方法を選択してください。決済が完了すれば、注文内容の確認メールが届きます。
2.クラシックブロックの「ステップ」パーツを使用した例
step
1学習目的を明確にする
まず、プログラミングを学ぶ目的をはっきりさせましょう。
「就職のため」「趣味でアプリを作りたい」など、自分の目標を紙に書き出すことでモチベーションが高まります。
step
2入門教材を選ぶ
初心者向けの書籍やオンライン講座（例: ProgateやUdemy）を活用しましょう。
おすすめは「JavaScriptの基礎」や「Pythonで始めるプログラミング」です。
step
3実際にコードを書いてみる
教材を進めるだけでなく、実際に簡単なコードを書いてみることが重要です。
Webブラウザで動く「Hello, World!」を出力するところから始めてみましょう。
このように、画像やテキストを活用することで、手順や流れを直感的かつ分かりやすく伝えられるのが、AFFINGERのステップ機能の魅力です。
AFFINGERのステップ機能の設定方法
実際にステップ機能をどのように設定するかを詳しく解説します。
ステップの構成
先ほど紹介した例２パターンのステップの構成は以下になります。
見出しブロックのステップ「見出し＋グループ」。
クラシックブロックのほうのステップの構成は「ステップのショートコード＋グループ」です。
ステップ作成手順
見出しを挿入する
まずはじめに、見出しブロックを挿入します。
ブロック挿入ツールを開き［見出し］を選択。
スタイルを［ステップ］に変更する
挿入した見出しを選択した状態で、スタイルタブを開き［ステップ］を選びます。
テキストをグループ化する
見出し下のテキストを選択した状態で［オプション（︙）をクリックし［グループ化］を選択。
グループブロックを選択した状態にする
テキストのどこかを選択した状態で下の［グループ］をクリック。
するとグループブロックが選択された状態になります。
ライン（左）を選択する
グループブロックの「スタイル」タブを開き［ライン（左）］をクリック。
するとテキストの左側に次のステップ見出しにつながるラインが表示されます。
左ラインを変更する方法
左ラインは以下5パターンに変更可能です。
なし、基本、太め、点線、点線（太め）
＜パターン変更方法＞
グループブロックを選択した状態で「設定」タブが選択されているのを確認。
枠線（プリセット）をクリックすると、ドロップダウンメニューが開くので、使いたい線の種類を選択する。
左ラインの色や太さを変更する方法
左ラインの色や太さを自由に変更することができます。
＜左ライン変更手順＞
グループを選択した状態で、グループブロックのスタイルタブを開く。
下へスクロールすると「枠線」の設定項目があります。
ここの「枠線色とスタイルピッカー」で色を変更できます。
右のバーを右にスライドすれば、枠線の太さを変更できます（調節数字を入力してもOK）。
