このページでは、Figmaを使用してページデザインする時の工程を要約して記載
深堀りすると情報量が膨大になるので、基本的な項目だけに絞って記載をしています

はじめに

①デザインの基本情報をおおまかにまとめる

このアプリを使うことで感じられる価値は何か？を考える

イメージするキーワード（与えたい印象）から決めるとスムーズ

配色の参考サイトから決めても良い

font-familyは、さまざまな閲覧環境を想定してできるだけ多くの環境に対応したシステムフォントを選択する

リリース後、ユーザーの利用状況を見ながら利用者の層が安定してきた段階で、フォントを変更ても良い

見出しを見て、「本文を読むか?否か？（離脱率）」が決まるため、大きさや太さを変えて見せてると良い

文章の文字色は、アマゾンやGoogle、Yahoo!、新聞社のオンライン記事においても333333を使用している。黒（000000)がそのまま使用されることは無い

画面に配置する要素の優先度をあらかじめ決めておく

色や写真の力に頼らず、モノクロの状態（漫画のコマ割りと同じ感覚？）で配置バランスを決めると良い

強調したい要素を目立たせる場合
- 目立たせたい要素の周りに広く空間をとってレイアウトする
全体と細部のバランスを取る場合
- どの要素が重要で何が重要でないのか、要素そのものとそれを囲むものを見て、余白を要素周辺から狭めるか？余白を要素周辺から広くするか？を決める

ゼロから作ろうとせずに、「良いな」と思ったパーツを見本にして作ると良い

ただし、明らかにデザインに特徴があるものは不可（著作権の問題）

パーツデザインを構想するときの方法例

あくまで一例かつおおまかな工程で記載をしています

サイズなど細かい部分は、最初の段階では大まかで良い
ヘッダーと同じ色且つ、ページ内で使用している色は避ける
- 理由は、無風流で目に楽しくない画面印象をあたえるため
- 簡単な決め方は、ヘッダーよりも薄い色にする
  - 例）ヘッダー色 #464E2E(カーキ色）、ボトムバー色 #ACB992(うぐいす色）
アイコンを配置していく
- ユーザーの使用頻度が最も高いUIとなることを意識する
  - 押しやすいか？直感的に操作できるか？等
全画面で共通で使用するアイコンとなるアイコンの数は、4~5個が収まりが良い
共通パーツ（コンポーネント）にする

ボトムバーに配置した各アイコンから遷移した画面を順に作成する
各アイコンの機能に沿った内容のパーツとテキストを配置していく
- スマホの画面サイズに対し、過剰な情報量にならないように全体バランスを確認しながら作業を進める
どんなことをユーザーが選択して操作するのか？を意識する
- 直感的に操作できる機能か？
- 操作性がシンプルではないものは「面倒」というマイナス印象を与えてしまう
アイコンサイズは、8の倍数でそろえていくと実装がスムーズ
共通で使用するパーツは、コンポーネント化もこまめにしておく