AdobeXD プロトタイプ制作<共有>
<前回の内容>
プロトタイプとは?「プロトタイプ」とは試作品のことです。「デザインカンプ」や「モックアップ」などと呼ばれることもあります。XDで制作するプロトタイプは、デザインの他にどこをクリックしたらどのページに飛ぶと ...
AdobeXD ワイヤーフレームの作成⑦
<前回の内容>
最終の一番下部分を作成していきます。
SNSリンクボタンの配置1. 画像を入れるための正方形を描く
【Point】正方形→長方形ツールで、Shiftキーを押しながらドラッグ
AdobeXD ワイヤーフレームの作成⑥
<前回の内容>
最後に、ワイヤーフレーム下部分を作成していきます。こちらがサンプルです。
ー 作成手順 ー
写真入りの記事(2)
今回の写真記事部分は、前回作成した写真記事と要素がほぼ同 ...
AdobeXD ワイヤーフレームの作成⑤
< 前回の内容 >
②写真入りの記事(1)
「開花情報」下部分の写真入りの記事を作成していきます。
ここは今までやってきた作業の繰り返しだけで完成します。
1. メニューバー下のグレー背景を ...
AdobeXD ワイヤーフレームの作成④
< 前回の内容 >
前回までの内容で、ラフなワイヤーフレームの上部分が完成しました。
次はワイヤーフレームの中央部分を作成していきます。こちらがサンプルです。
ー 作成手順 ー
①タイト ...
AdobeXD ワイヤーフレームの作成③
< 前回の内容 >
⑤背景の作成とロックメニューバーの下部分を作成していきます
1. 長方形ツールでグレーの背景部分を作成します(塗り:薄いグレー 線:なし)
2. 背景のオブジェクトを選択し、レイ ...
AdobeXD ワイヤーフレームの作成②
< 前回の内容 >
④メニューバーの作成メイン画像下の6つのメニューバーを作成していきます
1. 長方形ツールとテキストツールを使用し、オブジェクトを作成します
2. リピートグリッド機能を ...
AdobeXD ワイヤーフレームの作成①
< 前回の内容 >
ワイヤーフレームとは?ワイヤーフレームとは、Webサイトのレイアウトを簡単な線と枠で表した設計図のことです。
ワイヤーフレームには
・掲載するコンテンツの大まかな配置
・タ ...
AdobeXD アートボードの編集・表示サイズ変更
< 前回の内容 >
アートボードの編集・アートボードの名前変更
アートボード左上に表示されているタイトルをダブルクリックすると名前変更ができます
・アートボードの複製アートボードを選択し、Ctrl ...
AdobeXD アートボードの作成
AdobeXDは、ワイヤーフレーム・アニメーション・プロトタイプ・共同作業などの機能がすべて統合されたウェブデザインツールです。
XDの基本的な使い方について、初めてデザイン制作ツールに触れる方にも分 ...