MENU

3.4 ログインページの作成

目次-全章

図3.4.1 ログインページ完成例
目次

ログインページを作成する

ページをクローンして作成する

新規ページを作成する場合で、既存のページと似たようなレイアウトのページを作成する場合は、既存ページをクローンして編集していくと効率的に構築できます。

ログインページは新規会員登録ページとよく似たレイアウトのため、ページをクローンして作成しましょう。

ビジュアルエディタからページ一覧を表示し、「Add a new page…」をクリックします。

図3.4.2 Add anew page…へ

ポップアップでPage nameを「login」とし、Clone fromに「signup」を選択します。

図3.4.3 Page nameを「login」、Clone fromに「signup」

「CREATE」をクリックするとページが複製されます。 singupと同じ内容が表示されていることが確認できます。ワークフローを設定していた場合は、ワークフローも複製されます。

ページ、エレメントのスタイル等の設定もそのままコピーされます。

図3.4.4 コピーされた「login」ページ

要素を配置する

ページをクローンしたので、不要なエレメントを削除し、必要なエレメントを追加しましょう。

不要なエレメントを削除する

新規登録ページの「username」はログインページに不要なので、Group Usernameを選択した状態で右クリックし、メニューからDeleteをクリックしてエレメントを削除します。

図3.4.5 不要なエレメント削除

必要なエレメントを追加する

新規会員登録ページの「ログインはこちら」というリンクをコピーし、Linkエレメントをもう一つ追加します。

Link Loginを選択した状態で右クリックし、メニューから「Copy」をクリックします。再度右クリックし、メニューから「Paste」をクリックします。

図3.4.6 Copyを選択
図3.4.7 Pasteを選択

エレメントの位置がバラバラになっているので、Figmaを参考に位置を調整します。

図3.4.8 Paste後の状態
図3.4.9 「Link Login」の位置調整

Group Signupの高さも、内部のエレメントの高さに合わせておきます。

各エレメントの名前を変更する

エレメントの名称は変更しなくても問題ありませんが、ワークフロー内で利用する時にわかりづらくなるので、それぞれ以下のように変更しておきます。

図3.4.10 エレメントの名称変更(1/2)
図3.4.11 エレメントの名称変更(2/2)

表示テキストの内容を変更する

ログインページに合わせて、エレメントの表示テキストを変更します。

図3.4.12 Text内容の変更

これでログインページのレイアウトは完成です。

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

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

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

この記事を書いた人

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

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

コメント

コメントする

目次