# セットアップステップ1画面

ユーザーセントリックなアプリに初めてログインする際、最初の数ステップはユーザープロフィールの作成に関するものが多いです。この機能テンプレートでは、「セットアップステップ1」画面がユーザー固有のプロフィール情報の入力プロセスをユーザーに案内します。

## コンポーネント

### **ヘッダーグループ**

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-bdd7638e8375f69a429d51eb3c6bf09447c5864b%2Fheadergroup.png?alt=media" alt=""><figcaption></figcaption></figure>

ヘッダーグループは、ユーザーが自分のユーザープロフィール作成プロセスのどこにいるかを視覚的に示す方法です。ユーザーであれば、プロセスの進捗状況や次に何が来るかを知りたいと思うでしょう。これはそれを示すシンプルな方法です！

3つのセットアップ画面のそれぞれで、アイコンの色が変わり、ユーザーが現在どのステップにいるかを示します。

⚡ **概要アクション**

* リンクアクション「戻る」は前の画面に戻ります。

### フォームコンポーネント

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-0a7644f7ec58294f60f6aef5720e01ee6f8231bb%2Fuserprofilescreen1.png?alt=media" alt="" width="527"><figcaption></figcaption></figure>

このコンポーネントは、ユーザーに関する情報を収集し、ユーザーコレクション内のプロパティを埋めるためのものです。

ユーザーコレクションから表示できるプロパティは他にもありますが、このフォームはサインアッププロセス中に入力されていない情報を収集します — 例えば、プロフィール画像やバイオです。

⚡ **ボタンアクション**

* ユーザーを更新
* リンクアクションで「セットアップステップ2」画面に移動します。
