新規ページを作成する

新規ページを作成する

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

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

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

ページの基本設定を行う

最初に、ページのサイズや背景色などの基本設定をします。基本の設定をしておくと、ページをクローンして新しいページを作成できるため、最初に行っておきましょう。

空のキャンバスをダブルクリックすると、ページのプロパティエディタが開きます。デフォルトでは「横960px 高さ600px」で作成されるため、Figmaを参考に「横幅1521px 高さ1085px」に設定します。

Page titleに設定した値は、ブラウザのタブに表示されます。「新規登録」と入力しておきましょう。

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

エレメントを配置する

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

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

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

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

Containers > Group を画面に配置します。Figmaを参考にサイズを設定しますが、サインアップのグループは無色透明なので、内部のエレメントのサイズに合わせるようにしましょう。のちのちレスポンシブ対応をする際に便利です。

ここではとりあえず W = 500、H = 600 としています。

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

X（横位置）やY（縦位置）は後ほど調整しますので、場所は画面上のどこでも問題ありません。

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

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

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

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

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

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

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

エレメントの高さを調整したあと、X = 0、Y = 0を入力します。エレメントがグループに内包されている場合、親エレメントからの位置を指定することになります。

グループの左上にぴったり配置されたことが確認できます。

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

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

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

Make this element fixed-widthにチェックを入れ、横幅 W = 500px にしておきます（Group Signupと同じ横幅）。

X = 0、Y = 60 とします。

次に、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」を選択しておきます。

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

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

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

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

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

ラベル「Username」と入力欄「Input Username」はそれぞれ以下のサイズ、位置に調整しました。

ラベル「Username」のサイズ・位置

入力欄「Input Username」のサイズ・位置

最後に、Group Usernameの高さを調整します。

内部のエレメントの下端に高さを合わせるために、Group Usernameを選択した状態で、画像の青い四角をクリックし、Input Usernameの下端まで上にドラッグします。

以下のように、Group Usernameの高さを内部のエレメントの高さと同じにしてください。

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

メールアドレス、パスワードの入力欄も同じエレメントで構成されているため、先ほど作成した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内に配置し、サイズとスタイルを調整します。

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

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

今までの手順と同様に、LinkエレメントをGroup Signup内に配置し、サイズとスタイルを調整します。

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

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

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

Group Signupの位置を上下中央にする

最後に、Group Signupの位置を「Arrange」メニューから調整します。

Center horizonrally、Center verticallyをそれぞれ適用すると、Group Signupが画面中央に配置されます。

画面がブラウザのウインドウ内に入りきらない場合は、「Grid & borders」メニューからZoomのサイズを調整すると全体を表示できます。

プレビューで確認する

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

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

お疲れ様でした。