AdobeXD　ワイヤーフレームの作成⑥

2022年9月13日

＜前回の内容＞

AdobeXD　ワイヤーフレームの作成⑤

最後に、ワイヤーフレーム下部分を作成していきます。こちらがサンプルです。

ー　作成手順　ー

写真入りの記事(2)

今回の写真記事部分は、前回作成した写真記事と要素がほぼ同じなので、丸ごとコピーしてから編集します。

1.　背景のロックを解除　→　解除した背景とグループ化された記事全体を選択　→　移動コピー

＜ショートカット＞
ロック・ロック解除　→　Ctrl または Command　＋　L

2.　コピーした背景をロック　→　グループ化解除　→　タイトル打ち換え　→　リピートグリッド解除

＜ショートカット＞　
グループ化解除・リピートグリッド解除　→　Shift　＋　Ctrl　または　Command　＋　G

3.　写真・テキストのグループ化解除　→　写真の入れ替え

4.　テキスト打ち換え・整列　→　下２つ削除

5.　写真とテキストを選択　→　リピートグリッド　→　テキスト打ち換え・追加

＜ショートカット＞
リピートグリッド　→　　Ctrl　または　Command　＋　R

6.　写真・テキスト・テキストエリア整列　→　作成した記事全体を選択・グループ化

＜ショートカット＞
グループ化　→　Ctrl　または　Command　＋　G

写真入り記事(2)が完成しました

＜NEXT　→　ワイヤーフレームの作成⑦　SNSリンクボタンとフッターの配置＞