「フロー」ブロックを挿入する
「フロー」ブロックは、閲覧者に対して、手順を説明するのに効果的なブロックです。
閲覧者に分かりやすいように、表題とシンプルな説明をし、そのイメージを画像などで表現します。
閲覧者に具体的な流れを説明することができるので、
問い合わせからご成約までの流れを説明したり、
あるいは、作業の手順を写真などを使って具体的に説明するなど、活用方法が様々です。
「フロー」ブロックの挿入方法について解説します。
編集画面の左上部の「+」ボタンをクリックし、ブロックを挿入する画面を表示させます。
次に、「検索」部分があるので、ここに「フロー」と入力しブロックを絞り込みます。
すると、「フロー」ブロックのアイコンが表示されます。
「フロー」ブロックのアイコンをクリックし、編集画面に挿入します。
画像：「フロー」ブロックを挿入する画面
下の画像は、「フロー」ブロックが編集画面に挿入されている状態です。
「フロー」ブロックに、「タイトルを入力」や「説明を入力」など、
このブロックの活用方法について説明が表示されています。
「フロー」ブロック内の右側には、「画像を選択」のボタンがあります。
次のフロー（ステップ）に進むための下向き矢印があり、
この下に「フロ」ーブロックを追加して、フロー（ステップ）手順を組み立てていきます。
画像：「フロー」ブロックの各設定部分
「フロー」ブロックの文字を入力する
「フロー」ブロックに文字を入力するのですが、
入力場所は「タイトルを入力」と「説明を入力」の２つで、シンプルなブロックです。
このブロックを使って分かりやすくする内容は、手順を説明するので複雑かもしれません。
そのため、シンプルな「フロー」ブロックで、閲覧者が分かりやすいように設定するのがコツです。
複雑な手順を分かりやすく説明するように心がけてください。
ここでは、新規の受注をする際に、
「①お問い合わせ」があり、
「②ヒアリング」により具体的なお話をお伺いして問題点を抽出し解決方法を提案し、
「③ご提案とお見積り」で実際に行う内容と金額を提示する
という一連を、「フロー」ブロックで説明していく例を解説します。
この場合のステップは３つなので、「フロー」ブロックを３つ挿入します。
最後の「フロー」ブロックの下には下矢印のマークは必要ないので、
右側にある「フロー」ブロックの設定画面の「矢印の表示」部分に
「矢印を表示しない」のボタンをクリックして、下矢印マークを外します。
画像：最後の「フロー」ブロックの設定画面
次に、手順に沿って「フロー」ブロックの「タイトルを入力」の部分に、
「①お問い合わせ」、「②ヒアリング」、「③ご提案とお見積り」を入力して全体のフローを決めます。
手順の数が多数ある場合、まずはタイトルを入力しながら手順を確認しながら進めていくと、
スムーズに作業が進みます。
画像：手順全体を把握するためまずは「タイトルを入力」を埋める
次に、それぞれのタイトルにあった説明文を、「説明を入力」に入力していきます。
この部分で文章の改行をしたい場合は、普通に「Enter」キーを押します。
「段落」ブロックでは「Shift＋Enter」で操作していましたが、この部分が違います。
分かりやすく短い文章で説明するのは難しいですが、ここはセンスが問われると思うので、
他の方がどのような説明をしているか色々と見てください。
ヒントになりそうな文章が必ずあります。
画像：分かりやすく短い文章で説明する
「フロー」ブロックの画像を設定する
「フロー」ブロックの右側にある「画像を選択」部分をクリックします。
すると、「メディアライブラリ」が開き、画像を選択します。
次に、右下にある「選択」ボタンをクリックして、「メディアライブラリ」を開きます。
画像：「画像を選択」ボタンをクリックし「メディアライブラリ」を開く
「メディアライブラリ」を開いたら、挿入したい画像を選択して、
右下にある「選択」ボタンをクリックして、「フロー」ブロックに画像を挿入する。
画像：「メディアライブラリ」から挿入したい画像を選択する画面
同じ操作で、他の「フロー」ブロックに画像を挿入します。
画像：「フロー」ブロックの全てに画像が挿入された
ここで注意したいのが、「フロー」ブロックの場合、
すでに「メディアライブラリ」に保存しているか、「メディアライブラリ」を開いた時点で、
挿入したい画像を「メディアライブラリ」にアップロードするかして、
「フロー」ブロックに挿入する画像を準備します。
「画像」ブロックや「メディアとテキスト」ブロックなどでは、
パソコンのフォルダから画像をブロックに挿入する場合、
保存されている画像をドラッグしてドロップする方法があるのですが、
「フロー」ブロックでこの操作方法が現時点ではできません。
この操作ができる場合は、画像を挿入する部分に「アップロード」というボタンが表示されている場合が
ドラッグしてドロップする方法ができます。
「フロー」ブロックの「説明を入力」の部分は、
他のブロック（例えば「ボタン」ブロックなど）を挿入できません。
問合せフォームにリンクするには、文字を選択して、リンクを貼る方法ができます。
シンプルなブロックですが、その分だけ設定の幅も狭いですが、
手順の整理し分かりやすく表示できます。
最後まで、ご覧いただき、ありがとうございました。