MENU

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

bubbleチュートリアルver1第3.3章 新規会員登録ページの作成

目次-全章

第1章 bubbleについて(bubbleの基礎知識からアカウントの作成、アプリ開発まで)
第2章 かんたんなアプリケーションを作成
第3章 ページレイアウト(UIデザイン)を作成
第4章 データベースの設計
第5章 ユーザー登録、ログインを試してみる
第6章 ユーザーログイン時の処理を実装してみる
第7章 ユーザー情報を更新、削除(退会、解約)できるようにしてみる
第8章 メールアドレス認証を実装してみる
第9章 パスワードの再設定、パスワードリセット機能を実装してみる
第10章 ユーザーがツイートできるようにする
第11章 ユーザーのフォロー機能、タイムライン表示機能をつくってみる
まとめ

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

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

新規ページを作成する

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

図3.3.2 Add a new page…を選択

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

図3.3.3 「signup」ページの作成

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

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

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

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

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

図3.3.4 signupのResponsive例

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」として保存しておきます。

図3.3.5 「signup」の設定

エレメントを配置する

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

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

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

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

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以上あるので、高さは内部エレメントに合わせて調整されます。

図3.3.6 Group Signupの設定

プロパティエディタから、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.7 「Default Group」のStyle設定

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

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

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

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

図3.3.8 Textの設定

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

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

図3.3.9 「Page Title」の設定

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

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

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

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

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

図3.3.11 横幅を設定

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

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

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

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

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

図3.3.12「Username」のStyle

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

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

図3.3.13「Input Username」の配置

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

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

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

図3.3.14「Group Username」のレイアウト設定

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

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

図3.3.15 Edit styleへ

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

図3.3.16 Stylesタブの画面

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

図3.3.17「Standard Input」の設定
図3.3.18「Standard Input」の設定

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

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

図3.3.19 内部エレメントの設定

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

メールアドレス、パスワードの入力欄も同じエレメントで構成されているため、先ほど作成した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「Button Signup」のStyle設定 

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

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

図3.3.25 「Primary button」の設定

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

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

図3.3.26「Link Login」の設定 

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

図3.3.26「Link Login」の位置設定

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

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

図3.3.27 「Blue Link」の設定

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

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

図3.3.28 「View」からZoomのサイズを調整

Responsiveを確認する

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

図3.3.29 Design > Responsiveを選択

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

図3.3.30 左右に余白

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

プレビューで確認する

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

図3.3.31 プレビュー画面

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

お疲れ様でした。

実際に働く社員とカジュアル面談しませんか?

【毎週金曜日開催中】カジュアル面談しませんか?


参加はこちら!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

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

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

コメント

コメントする

目次