AdobeXD ワイヤーフレームの作成①
＜ 前回の内容 ＞
目次
[AdobeXD] ワイヤーフレームとは？
ワイヤーフレームとは、Webサイトのレイアウトを簡単な線と枠で表した設計図のことです。
ワイヤーフレームには
・掲載するコンテンツの大まかな配置
・タイトルやサンプル文章
・イメージ画像
などを入れて作成します。
Webサイト制作に関わる人が共通の完成イメージを持てるように、「どこに」「何の」コンテンツが配置されるのか分かりやすく作成することが重要です。
[AdobeXD] ワイヤーフレームの作成①
XDでは思いつきのメモ程度のラフなワイヤーフレームの段階からブラッシュアップして、より完成品に近いものに仕上げる方法でデザインを完成させていくことができます。
画像はサンプルのワイヤーフレーム(上部分)です。
まずはこちらを作成していきます。
ー 作成手順 ー
①アートボードを作成する
【Point】モバイルファースト→小さな画面サイズのWebページから作成します
②テキストツールでタイトル周りの文字を配置する
＜ショートカットキー＞
テキストツール → T
【 Point 】プロパティインスペクター→右側のパネルからフォント・文字サイズ・文字色などを変更できます
③メインビジュアルの配置
【 Point 】画像配置はマスク機能を使用した配置方法が便利です
1. 配置したい画像サイズのシェイプを描きます
＜ショートカットキー＞
長方形ツール → R
2. 配置したい画像をシェイプに向かってドラッグ＆ドロップします
3. 作成したシェイプと同じサイズで画像が配置されました
配置した画像はダブルクリックで選択でき、位置やサイズ調整が可能です
＜NEXT → ワイヤーフレームの作成② メニューバーの作成・リピートグリッド機能＞