概要
3日目の続き。
画面遷移図を作成
1. Adobe XDの準備
- Adobe XDをインストール（7日間無料体験版あり）
- スターターキット基礎編＆中級編で基本的な操作方法を学習
2. アートボードの下準備
- 新規作成でiPhone13サイズのアートボードを作成
- Apple Design ResourcesからXD用のデザインテンプレートをダウンロード
- デザインテンプレートからiPhone13サイズのセーフエリアをコピー
- 作成したアートボードにセーフエリアを貼り付け
3. プラグインをインストール
- Flowkit（アートボード同士を矢印で繋いだりして関係性をわかりやすくする）
- Icons 4 Design（いろんなアイコンを使用できる）
4. 画面遷移図を作成
- 自分が作りたいポートフォリオと似ているWebサービスを真似しながら、各ページのデザインを作成
- 最低限の機能に関わる部分のみ作成
- 各ページのURLや、そもそもページ遷移が必要かどうかも考えておく
XDのポイント
- 最初にセーフエリアを把握するのが大事（普通はスマホのカメラ部分などによってディスプレイの上下が隠れるので、最初に考慮しておく）
- ヘッダーやフッターなどの位置を固定する方法を知っておく
- 重ね順の変更方法を知っておく
- ボタンやヘッダーなどは最初にコンポーネント化して使い回す