サイドメニューから「固定ページ」の「固定ページ一覧」をクリックします。

「ご契約の流れ」の「編集」をクリックします。

すでにあるコンテンツは「フロー」と呼ばれるブロックで作成されています。
シンプルなフローで構わないときは、このブロックを利用しても良いでしょう。

今回はオリジナルのフローを作るため、すべて削除します。
編集画面左上のドキュメント概観をクリックします。

一番上の「フロー」をクリックします。

キーボードの「shiftキー」を押しながら、一番下の「レスポンシブスペーサー」をクリックします。
すべてのブロックをまとめて選択できます。

レスポンシブスペーサーの「⋮」から「削除」をクリックします。

リストビューには段落ブロックが現れます。

「×」で閉じます。

「/」（半角スラッシュ）を入力し、「アイコン」と入力します。

「アイコン」ブロックをクリックします。

「配置を変更」から「中央揃え」をクリックします。

アイコンの下部に余白を設定しておきましょう。
あとで配置する見出しブロックとの間隔を空けるためです。

「ブロックの余白」から「下XS」をクリックし、アイコンの下部に余白を設定します。

画面右の設定サイドバーからFont Awesomeのアイコンを設定します。
「アイコン設定」にあるアイコンを選択をクリックします。

Font Awesome アイコンリストをクリックして検索画面を開きます。

「1」と検索すると「1」がヒットするのでクリックしてください。

メモ

「Font Awesome アイコンリスト」をクリックした際に、下記のように検索窓が見当たらない場合は、以下をお試しください。

• ブラウザのタブをリロード（更新）する
• 一旦ブラウザのタブを閉じて「Font Awesome アイコンリスト」のクリックからやり直す

該当コードのコピーをして、「アイコン ( Font Awesome 6 Free )」へ貼り付けてください。

※<i class="fa-solid fa-1"></i>と記載されている部分

以下のように数字「1」のアイコンに変わります。

設置したアイコンブロックを以下のように編集します。

アイコンブロックを選択して、キーボードの「Enter」キーを押します。

カーソルが表示されます。

「/」（半角スラッシュ）を入力し「見出し」をクリックします。

以下のように編集します。

見出し「お問い合わせ」のうしろにカーソルを置き、キーボードの「Enter」キーを押します。カーソルが表示されます。

以下のように編集します。

「お急ぎの場合はお電話にてご連絡ください。」のうしろにカーソルを置き、キーボードの「Enter」キーを押します。カーソルが表示されます。

「/」（半角スラッシュ）を入力し「カラム」をクリックします。

「2カラム：等分」をクリックします。

左のカラムの「+」をクリックし、VKマークのある「ボタン」をクリックします。
※「ボタン」が表示されない場合は、検索窓に「ボタン」と入力して検索してください。

以下のように編集します。

右のカラムに、アイコンと電話番号を組み合わせた以下を作ります。

完成イメージ

まず、右のカラムを選択しましょう。
「お問い合わせフォーム」ボタンの右側（赤枠のところ）をクリックします。

右のカラムにブロックを追加する「+」が表示されます。

メモ

右のカラムにブロックを追加する「+」が表示されないときは、ドキュメント概観をクリックして、リストビューを開きます。カラムの中にある2つめのカラムを選択します。

「+」をクリックして検索窓に「横」と入力し、「横並び」をクリックします。

横並びブロックの左の「+」をクリックしします。
検索窓に「アイコン」と入力し、アイコンをクリックします。

画面右の設定サイドバーからFont Awesomeのアイコンを設定します。
「アイコン設定」にある「アイコンを選択」をクリックします。
表示されているアイコン一覧の中から、スクエア型の電話アイコンをクリックします。

以下のように編集します。

下記の画像を参考に、アイコンの並びをクリックします。
「+」マークが表示されます。

「+」をクリックし、「段落」をクリックします。

電話アイコンの並びにカーソルが表示されます。

以下のように編集します。

横並びブロックの位置を調整しましょう。
調整するには、横並びブロック全体を選択する必要があります。

まず、電話アイコンをクリックします。

次に、横並びのアイコンにマウスポインタを重ねると「横並びを選択」と表示されます。
クリックします。

横並びが選択された状態となります。

以下のように編集します。
電話アイコンと電話番号のまとまりが中央揃えで配置されます。

引き続き、横並びブロックを選択します。

「⋮」から「後に追加（旧：後に挿入）」をクリックします。

電話番号の下にカーソルが表示されます。

以下のように編集します。

いま編集画面にあるブロックをまとめてグループ化し、背景色と余白を設定しましょう。

編集画面左上の「ドキュメント概観」をクリックし、リストビューを開きます。

リストビューで「アイコン」をクリックします。

キーボードの「shiftキー」を押しながら、一番下の「カラム」をクリックし、すべてのブロックをまとめて選択します。

選択した「アイコン」の「⋮」から「グループ化」をクリックします。
これで、グループブロックとして扱えます。

リストビューは「×」で閉じます。

以下のように編集します。パディングはグループ内の余白です。

編集画面右上の保存をクリックして、保存します。

もう一度グループブロックを選択しましょう。
下記の画像を参考にして、背景をクリックすると選択できます。

メモ

「グループ」ブロックの選択が難しい場合は、編集画面左上のドキュメント概観をクリックします。リストビューで「グループ」をクリックすれば、選択できます。

「⋮」から「後に追加」をクリックします。

グループブロックの下にカーソルが表示されます。

「/」（半角スラッシュ）を入力し「アイコン」をクリックします。

以下のように編集します。

画面右の設定サイドバーからFont Awesomeのアイコンを設定します。
「アイコン設定」にあるアイコンを選択をクリックします。

Font Awesome アイコンリストをクリックして検索画面を開きます。

「sort down」と検索すると「sort-down」がヒットするのでクリックしてください。

該当コードのコピーをして、「アイコン ( Font Awesome 6 Free )」へ貼り付けてください。
※<i class="fa-solid fa-sort-down"></i>と記載されている部分

以下のように編集します。

一旦、プレビューで表示を確認してみましょう。
画面右上の表示から「新しいタブでプレビュー」をクリックします。

ブラウザの新規タブでページが表示されます。これで1つめのフローが完成です。
プレビューを表示しているブラウザのタブは閉じてください。

これで1つ目のフローが完成しました。

編集画面右上の保存をクリックして、保存します。

2つ目のフローは、1つ目のフローを複製して作ります。
編集画面左上の「ドキュメント概観」をクリックします。

キーボードの「shiftキー」を押しながら、「グループ」と「アイコン」をクリックします。
ブロックをまとめて選択できます。

「グループ」の「⋮」から「複製」をクリックします。

「×」でリストビューを閉じます。

2つめのフローを編集します。
ボタンと電話番号を設置しているカラムは不要なため、削除します。

まず、左のカラムをクリックして選択します。
下記のように、ボタン「お問い合わせフォーム」の周辺のどこかをクリックすると、左のカラムを選択しやすいでしょう。

次に、カラムのアイコン「カラムを選択」をクリックします。これでカラム全体を選択できます。

「⋮」から「削除」をクリックします。

2つめのフローを複製し、全部で6つのフローを作成します。
編集画面左上の「ドキュメント概観」をクリックします。

キーボードの「shiftキー」を押しながら、上から3つめの「グループ」と4つめの「アイコン」をクリックします。

「グループ」の「⋮」から「複製」をクリックします。

次に、キーボードの「shiftキー」を押しながら、上から2つめの「グループ」と6つめの「アイコン」をクリックして、複製します。

下から2つめの「グループ」をクリックしたまま、一番下の「アイコン」の下部へドラッグアンドドロップします。

線上にカーソルを合わせると＋ボタンが出ます。

以下のように並んでいることを確認し、「×」でリスト表示を閉じます。

• 「グループ」と「アイコン」の組み合わせが5つ並んでいる
• 一番下は「グループ」

各フローを以下のように編集します。

メモ

数字のアイコンは、Font Awesome アイコンリストから「2」～「6」までそれぞれ選び、コピーしたコードを貼り付けてください

プレビューで表示を確認してみましょう。
画面右上の表示から「新しいタブでプレビュー」をクリックします。

ブラウザの新規タブでページが表示されます。
表示を確認後、プレビューを表示しているブラウザのタブを閉じてください。

ブラウザの新規タブでページが表示されます。
表示を確認後、プレビューを表示しているブラウザのタブを閉じてください。

編集画面右上の保存をクリックして、保存します。