AdobeXD ワイヤーフレームの作成④
＜ 前回の内容 ＞
前回までの内容で、ラフなワイヤーフレームの上部分が完成しました。
次はワイヤーフレームの中央部分を作成していきます。こちらがサンプルです。
ー 作成手順 ー
①タイトル配置とテキストエリアの作成
1. タイトルを移動コピーする
【Point】グループ化されているオブジェクトをコピーするときは、ダブルクリックで単独選択してからコピーします
2. グループから独立させて、テキストを打ち換える
【Point】グループ化された中からコピーしたものは同じグループとして扱われるので、レイヤーパネルからグループ外に出して独立させます
3. 線ツールで横線を引く
【Point】Shift キーを押しながらドラッグすると水平・垂直方向に線を引くことができます
4. 日付と文字を入力する グレーの長方形を作成し、その上に文字を載せる
【Point】重なり順によってテキストがオブジェクトの下に隠れてしまうことがあります
テキストを選択し、右クリックの「最前面へ」をクリックすると表に出すことができます
（オブジェクト→重ね順 からでもできます）
＜ショートカット＞
最前面へ → Shift ＋ Ctrl または Command ＋ ]
5. テキストツールで文章を始めたい位置からドラッグし、テキストエリアを作成する
【Point】本文などの長い文章を挿入するときは「テキストエリア」という文章を入れるボックスを設定すると、指定した縦横幅を保持しながら編集することができます
6. 文章を挿入し、整列パネルで位置合わせをする
【Point】カーソルを合わせると出てくるガイドラインで合わせることもできます
7. タイトル以外のオブジェクトを選択・グループ化し、アートボードの中央にくるように整列する
8. リピートグリッド機能を使用し、同じものを下方向にあと２つ作成する
＜ショートカット＞
リピートグリッド→ Ctrl または Command ＋ R
9. テキストを移動コピーし、手順2と同様にグループから独立させてテキストを打ち換える
10. 作成した開花情報全体を選択し、グループ化する
ワイヤーフレーム中央「開花情報」部分が完成しました。
＜NEXT → ワイヤーフレームの作成⑤ 写真入りの記事(1)＞