新規会員登録ページの作成します。

新規ページを作成する

新規ページを作成する場合、ビジュアルエディタからページ一覧を表示し、「Add a new page…」を選択します。

新規会員登録ページを作成するので、名称を「signup」とします。ページ名がURLになります。

「CREATE」をクリックするとページが生成されます。

ページの基本設定とレスポンシブエンジンを適用する

レスポンシブタブに変更し空のキャンバスをダブルクリックしページのレスポンシブエディタを開きます。

ページレイアウトをRowにし、Container alignmentをcenterにします。

ページのサイズについては、全てのページで以下のように設定します。

Width for UI builderについてはビジュアルエディタ上の横幅なので、あまり気にする必要はありません。基本的なPCの横幅程度にしておけば問題ないですが、Preset page widthでFull widthを選択すると1200になりますので、このままにします。

Min widthはスマートフォンの最小サイズ320にしておきます。

画面高さはエレメントの高さに合わせて自動的に調整されるので、Min heightを600くらいにしておけば問題ないです。

UI Builderタブに切り替え、ページをダブルクリップしてプロパティエディタを表示させます。Page titleに設定した値は、ブラウザのタブに表示されます。「新規登録」と入力しておきましょう。

背景色をFlat color、カラーコード#FFFFFF に設定し、スタイルを「Body」として保存しておきます。

エレメントを配置する

画面にページタイトルや新規作成時の入力欄を配置していきますが、なるべくセクションごとにグループにまとめるように心がけましょう。

あとから修正する際や他の開発者が確認する際、わかりやすくなります。

サインアップグループを作成する

最初に、サインアップに利用する要素をまとめるグループを作成します。

Containers > Group を画面に配置します。

Group Signupのlayoutは内部エレメントを縦に並べたいので、Columnにします。Vertical alignmentはcenteredにしておきます。

横幅が固定幅になっているので、スマートフォンで表示したときに画面横幅より少し小さくなるようにMin widthは280px、Max widthは500pxとします。ただし、横幅は最大値まで広がってしまうので、PaddingのLeft、Rightに20pxを設定します。

エレメント間の余白は32pxにしたいのでLayoutの「Apply gap spacing between elements」にチェックを入れ、Row gap(px)を32にします。

Min heightは100pxにしておきます。内部エレメントは100px以上あるので、高さは内部エレメントに合わせて調整されます。

プロパティエディタから、Group SignupのStyleを「Default Group」にしておきます。Edit styleをクリックし、Styleタブに移動すると確認できますが、背景色・ボーダーともに無色のグループです。

※2023年1月以降に本チュートリアルに取り組んだ場合、初期設定として「Default Group」にあたるStyleが存在しないことがあります。その場合は、「Default Group」にあたるStyleを新たに作成してください。

Default Groupは、各種設定を以下の通り登録します。

• Background style：None
• Border style：None
• Roundness：0
• Shadow style：None

ページタイトルを設置する

このグループの内部にページタイトルや入力フォームを設置していきます。

TextエレメントをGroup内部に配置します。Elements treeでGroupの内部に設定されていることを確認しましょう。

Textエレメントの名称と表示テキストを編集します。

フォント：Inter、フォントサイズ：24px、フォントカラー：#000000に設定し、スタイルに「Page Title」という名前をつけて保存しました。

※高さを調整しやすいため、Line Spacing は 1 （文字の高さと行の高さを同じ）にしておくと便利です。

画面上部の「Grid & borders」メニューから「Show element borders」にチェックを入れておくとエレメント同士の位置関係がわかりやすいためおすすめです。

内部のエレメントについては、レスポンシブ対応によって親エレメントに合わせてサイズを設定できます。

例えばtextエレメントのPage TitleをLayoutから横幅100%にします。

こうすると自動的に親エレメントGroup Signupに対して100%の横幅になります。

ユーザー名グループと入力欄を配置する

ユーザー名やメールアドレスなどの入力欄を配置します。この際に、ラベルと入力フォームを一つのグループにまとめておくと、コピーして再利用する時に便利です。

新たにグループをGroup Signup内に配置し、Group Usernameとします。Styleは同じく「Default Group」です。Container layoutをColumnにします。

次に、Group Username内部に入力フォームのラベルと入力フォームを設置します。

TextエレメントをGroup Username内に配置し、名称と表示テキストを「Username」とします。

スタイルをフォント：Inter、フォントサイズ：24px、フォントカラー：#000000に設定し、「Input Label」という名前をつけて保存します。

入力欄はInput forms > InputをGroup Username 内に配置し、名称を「Input Username」に設定します。

Placeholderは Input に値が入っていない時、ユーザーに表示される文字のことで、主に入力する内容の説明やサンプル値を設定します。ここでは「ユーザー名」と入力します。

Content formatはユーザー名を入力するため「Text」にします。Styleは「Standard Input」を選択しておきます。

Layoutタブから、Apply gap spacing between elementsにチェックを入れ、Row gapは16pxにします。

デフォルトのStyleを変更する

アプリケーションの新規作成時に用意されているデフォルトのスタイルを変更するには、Style下の「Edit style」をクリックします。Inputのstyleを編集しましょう。

Stylesタブに遷移し、現在適用されているスタイルを確認・編集できます。

Figmaを参考に、以下のようにStandard InputのStyleを編集します。

Stylesタブから既存のスタイルを変更することにより、すでに同じスタイルが適用されているエレメントのスタイルを一括で変更することが可能です。

レスポンシブエンジンからGroup Usernameに配置した内部エレメント、Username, Input Usernameは横幅100%としておきます。

コピーしてメールアドレス・パスワード入力欄を作成する

メールアドレス、パスワードの入力欄も同じエレメントで構成されているため、先ほど作成したGroup Usernameをコピーして作成すると簡単です。

Group Usernameを選択した状態でコピー&ペーストをしてGroup Usernameエレメントを2回複製します。

コピー後、位置を調整した結果が以下です。

Elements treeに「copy 2」「copy 3」と表示されています。

それぞれのグループの名称とPlaceholder、表示テキストを以下のように変更します。

Input の Content formatを変更する

Inputエレメントには、自動でバリデーションチェック（入力・書式・妥当性の確認）を行うことができるいくつかのContent formatが準備されています。

AddressやUS Phoneはアメリカのフォーマットに基づくため日本語のアプリケーションでは利用できませんが、EmailやPasswordは利用できます。

Input EmailのContent formatを「Email」にします。

こうするとユーザーが入力したメールアドレスに「@」が抜けていたり、全角になっていたりしてEmailとして正しく認識されない場合、エラーを返します。

同様にInput PasswordのContent formatは「Password」を設定します。ユーザーがパスワードを入力した時、文字列ではなく「****」として表示されるようになります。

レスポンシブ対応も同様に設定しましょう。

新規登録ボタンを配置する

今までの手順と同様に、ボタンエレメントを追加し新規登録ボタンをGroup Signup内に配置します。

レスポンシブエンジンからButton LoginについてもGroup Login内部のPage titleと同じように横幅を100%にします。高さは固定で良いので45pxに設定します。

青いボタンは今後も使用するので「Primary button」のスタイルを変更します。

ログインページへのリンクを配置する

LinkエレメントをGroup Signup内に配置し、サイズとスタイルを調整します。

Link Loginのレスポンシブは横幅を文字幅に合わせるため、Fit width to contentにチェックを入れます。横幅は実際のサイズより小さめに設定しておきます。

Destination page（リンク先）はまだページを作成していないため、後ほど設定します。

リンクのスタイルは以下の通り設定します。

全てのエレメントが配置できたところで、 最下部のLinkエレメント下端に合わせてGroup Signupの高さを調整します。

画面がブラウザのウインドウ内に入りきらない場合は、画面右上の「View」メニューを開き、一番下のZoomで％を調整すると全体を表示できます。

Responsiveを確認する

Design > Responsiveをクリックして、横幅を色々と変更して確認します。

320pxで確認すると、Group Loginが画面いっぱいに表示されず、左右に余白ができていることが確認できます。

画像の赤枠部分をドラッグして、横幅を好きなサイズに変更できます。自由に変更して、表示が崩れないか確認しましょう。

プレビューで確認する

エレメントの配置と設定が終わったら、プレビューで確認する癖をつけましょう。

上記のように表示できたら、新規会員登録ページのレイアウトは完成です。

お疲れ様でした。