AdobeXD ワイヤーフレームの作成⑦
＜前回の内容＞
最終の一番下部分を作成していきます。
SNSリンクボタンの配置
1. 画像を入れるための正方形を描く
【Point】正方形→長方形ツールで、Shiftキーを押しながらドラッグ
＜ショートカットキー＞
長方形ツール → R
2. あらかじめ用意しておいたボタン画像をドラッグで挿入 → 水平方向中央に整列
3. 横線を引く → 線を選択・水平方向中央に整列
【Point】Shiftキーを押しながら水平方向にまっすぐ線を引きます
4. 正方形を描く → あらかじめ用意したSNSマーク画像をドラッグで挿入
5. 画像を選択 → リピートグリッド(４つ作成) → 間隔調整
＜ショートカット＞
リピートグリッド → Ctrl または Command ＋ R
6. リピートグリッド解除 → 画像を入れ替え
＜ショートカット＞
リピートグリッド解除 → Shift ＋ Ctrl または Command ＋ G
7. 4つの画像をグループ化 → 全体を選択 → 水平方向中央に整列 → 全体をグループ化
＜ショートカット＞
グループ化 → Ctrl または Command ＋ G
フッターの配置
フッター部分はアコーディオン（内容が長くなるときに１つのバーのように設置して、クリックすると内容が展開されるもの）でコーデイングする予定で作成します。
1. 長方形を作成(カラー：グレー) → テキストを入力 → 選択・リピートグリッド(4つ作成)
2. 間隔を調整し、位置合わせをする
【Point】画面の一番下なので、最後にアートボードの長さも調整します
これでフッター部分が完成です。
以上で、ラフな段階のワイヤーフレームが完成しました。
次からは、このワイヤーフレームを使ってプロトタイプの制作を進めていきます。