MENU

3.3 新規会員登録ページの作成

目次-全章

図3.3.1 新規会員登録ページ例
目次

新規ページを作成する

新規ページを作成する

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

図3.3.2 Add a new page…を選択

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

図3.3.3 「signup」ページの作成

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

ページの基本設定を行う

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

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

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

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

図3.3.4 「signup」の設定
図3.3.4.1「signupの設定」

エレメントを配置する

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

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

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

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

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

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

図3.3.5.1「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
図3.3.5.2 「Default Group」のStyle設定

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

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

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

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

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

図3.3.6 Textの設定

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

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

図3.3.7 「Page Title」の設定

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

図3.3.8 Grid & borders > Show element bordersを選択

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

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

図3.3.9 Textの座標設定

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

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

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

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

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

図3.3.10 「Group Username」の設定

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

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

図3.3.11.1「Username」のStyle
図3.3.11.2「Username」のサイズ・位置

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

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

図3.3.12 「Input Username」の配置

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

Content formatはユーザー名を入力するため「Text」にします。

Styleは「Standard Input」を選択しておきます。

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

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

図3.3.13 Edit styleへ

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

図3.3.14 Stylesタブの画面

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

図3.3.15.1「Standard Input」の設定
図3.3.15.2「Standard Input」の設定

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

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

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

図3.3.16「Username」の設定

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

図3.3.17 「Input Username」の設定

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

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

図3.3.18 「Input Username」の配置

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

図3.3.19 「Input Username」の座標

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

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

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

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

図3.3.20 コピー&ペースト後の画面

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

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

図3.3.21 各名称の変更

Input の Content formatを変更する

Inputエレメントには、自動でバリデーションチェック(入力・書式・妥当性の確認)を行うことができるいくつかのContent formatが準備されています。AddressやUS Phoneはアメリカのフォーマットに基づくため日本語のアプリケーションでは利用できませんが、EmailやPasswordは利用できます。

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

図3.3.22 「Email」へ変更

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

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

図3.3.23 「Password」へ変更

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

今までの手順と同様に、新規登録ボタンをGroup Signup内に配置し、サイズとスタイルを調整します。

図3.3.24.1「Button Signup」のStyle設定
図3.3.24.2「Button Signup」の位置設定

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

図3.3.25 「Primary button」の設定

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

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

図3.3.26.1「Link Login」の設定
図3.3.26.2「Link Login」の位置設定

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

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

図3.3.27 「Blue Link」の設定

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

図3.3.28 「Group Signup」の配置

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

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

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

図3.3.29 「Grid & borders」からZoomのサイズを調整

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

プレビューで確認する

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

図3.3.30 プレビュー画面

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

お疲れ様でした。

【未経験・経験者】システムエンジニア募集中!

当社では現在一緒に働くメンバー募集しています!
正社員でシステムエンジニアとして当社のシステム開発業務に携わってみませんか?
未経験者から経験者まで広く募集しているのでぜひエントリーをお待ちしています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

私たち株式会社ファンリピートは、ITを通じてお客様の課題解決を行うスタートアップベンチャーです。ノーコード・ローコードを用いたDX支援事業を主軸に、スピード感を持ってお客様のご要望にお応えしています。

2019年の創業から、出版業界・広告業界をはじめ、幅広い業界のデジタル施策を支援。財務管理・顧客管理などの基幹・業務システムから、新規Webサービスなど開発前検証フェーズのシステム導入支援まで、ワンストップでサポートを実施しています。この先も本質的なご提案を通じて、お客様の課題を解決し続けます。

コメント

コメントする

目次