【DailyUI】001：SignUp

作成したもの

架空アプリ（toC向け）の会員登録画面
※WEBのSP、PC2画面

完成Figmaファイル

お題における必要機能/コンポーネント

toB, toCサービス共通

• メールアドレス or 電話番号の入力フィールド

• パスワード入力フィールド

  • サポーティングテキストにてパスワードの設定ルール（◯文字以上）を記載

• パスワード再確認入力フィールド

• プライバシーポリシー、利用規約などへの同意確認テキスト

• ログイン画面への導線

toBサービス特有

• 会社名

• 会社電話番号

• 従業員規模

• 個人事業主 or 法人

• 業種

• 職種

• 役職

toCサービス特有

• 名前　
  ※toBサービスでも必要なものも存在。会社名 or 名前どちらかで登録

• 住所（郵便番号・都道府県・市区町村群・番地・部屋番号）

• メルマガへの登録有無

取り組んだこと、意識したこと

• ヘッダーやフッター、ロゴ、カラーパレット、フォントとサイズ…
  今後共通して使用するものをすべてコンポーネント化/ライブラリ登録するところからスタートさせています。
  ※サービスロゴは過去制作したものを転用しています。

• フォント/マージン/パディングのサイズルールを事前に決めてからデザイン案作成。

• ボタンやテキストフィールドは、Googleのマテリアルデザインキットを使用。カラーやフォントなどを、このサービス特有のルールのものに変更して使用しました。

• すべてオートレイアウトを使用して画面を制作しています。
  （個人的なルールとして、上下の余白はPadding-topを、左右の余白はMargin-Autoを、コンテンツ幅の最小余白はPaddingを使用する想定で余白設定しました。）

• LPやサイトトップと違い、アカウント登録画面はタスクベースの画面であるため、実装のことも考えると簡素な画面で良いかと考えました。
  そのため、PC/SPそれぞれの両画面で大きな差異を出さないようにし、メディアクエリ1つ設定するぐらいで実装出来るような画面を意識して制作しました。

所感、学び

• オートレイアウトを使いこなせるようになるため、パーツを作成する段階からオートレイアウトを使ってみたのですが、最初のうちはどうしても思い通りの挙動をせず、調べたり動画を見たりするのに大きく時間を使ってしまいました。。
  （ただ、調べまくって試しまくった後に想定通りの挙動をしたときの喜び！）

• パーツ作成やオートレイアウトの操作確認にかなり時間を割いてしまったものの、その後の設計はかなりスムーズに進めることが出来ました。（体感、パーツ作成&確認：設計＝9：1ぐらいの時間の使い方をしました）
  そのため、明日以降のDailyUIはもう少し短時間で進められるのではないかと思います‥！

• 画面を組んでいく際は「テキストボックス」「フィールドエリア」…など、実際にHTMLを記述する場合の構造を想像しながらフレーム化/アウトレイアウトを設定しました。
  その際、何故か特定のエリアだけ「右に1px」「左に1px」…など、フレームから若干ずれてしまう事象が発生。（かつ、オートレイアウトを設定しているため、うまくX軸を調整出来ない）
  正直、パッと見は1pxのズレなんてわからないしな…。とも思いましたが、学校の先生が「技術は初学者とプロで大きな差はない。大きく差が出来るのは、小さいところを詰めきれるか否か」と言っていたことを思い出し、どこのエリアでpxがずれているのか確認したり、どうしたらズレを直せるのか調べたりひたすらいじりまくってみたり…と、時間はかかりましたが1pxのズレまで修正しきることが出来ました。（中途半端に放置しなくてよかった！）

次へのアクション

• 細かいですが、PC版のヘッダーが大きすぎてコンテンツよりも目立ってしまっている印象を受けました。そのため、明日以降再度サイズ調整します。（これもコンポーネント化しているので修正が楽だ…嬉しいぜ）

• デザイン4原則のうち、近接をほぼ脳死状態で進めているので、コンテンツの余白設定など明日以降見直してみようと思います。