【初心者向け】Adobe  XDの作業効率アップにつながる使い方

こんにちは、Webクリエイターのたかひで（@takahide_web）です。

あなたはこんなお悩みないでしょうか。

・ XDの使い方がいまいちわからない

・ワイヤーフレームやデザインカンプの作成に時間がかかっている

こんなお悩みにお答えします。

私は、AdobeXDでサイトマップやワイヤーフレーム、デザインカンプを作成しており、 XDでの作業効率化に取り組んできました。

以下Twitterでもツイートしています。

それでは、Adobe  XDの作業効率アップにつながる使い方を紹介していきます。

Adobe XDとは

「Design at the speed of thought.（思考の速度でデザインする）」の理念のもとサイトマップやワイヤーフレームの作成からプロトタイプの制作まであらゆるWeb制作の作業に対応できるアプリです。

web制作会社の場合、基本的にディレクターやデザイナー、コーダーの担当者が別れていますが、 XDという一つのツールで制作し、一つのツールでコミュニケーションを取りながら進めることができます。

Adobe XDの公式サイト

https://www.adobe.com/jp/products/xd/learn/get-started/what-is-adobe-xd-used-for.html

XD利用には、スタータープラン（無料版）と有料版があります。クラウドストレージの容量の違いや共有数の制限があるものの、最初のうちはスタータープラン（無料版）で試してみることをおすすめします。

web制作で XDを使う場面

大まかなweb制作のフローは以下の通り。

ご覧の通り、 XDはweb制作のフローの大半で使うツールになるため、 XDの利用効率が上がれば、自ずとweb制作全体の制作期間の短縮につながります。

便利な機能① レイアウトグリッドの設定

レイアウトグリッドを設定することで写真やボタン等の要素の配置がしやすく、位置ズレ防止につながります。

設定方法は以下の通り。

１. トップページでiPhone X, XS, 11 Pro1を選択

2. アートボードを選択

選択すると周りに青線が出てきます。

3. 右下の「グリッド」欄にあるレイアウトにチェックする

列や段間隔を設定。

4. レイアウトの色をお好みに変更。

列の色は初期値だと色が濃く、デザインの邪魔になるのでここでは不透明度10％に変更しています。

5. レイアウトグリッドの完成

便利な機能② よく使うカラーやフォントの登録

よく使うカラーやフォントを登録しておけば、使い回すことができます。

例えば写真を挿入する箇所に以下のようなカラー（#E6DEDE）を多用する場合、カラーの登録をしておくと便利です。

登録したいカラーの要素を選択した上で、カラーの「＋」を選択すると登録することができます。

登録前

登録後（カラー #E6DEDE）

利用する場合は、カラー付けしたい要素を選択後、ワンクリックで登録したカラーを表示できます。

便利な機能③ よく使うコンポーネントを登録

カラーやフォントと同じくよく使う要素を登録することができます。

例えば、以下のボタンを一箇所ではなく、複数箇所で使う場合は、コンポーネントとして登録すると便利です。

登録したい要素を選択後、左側にあるコンポーネントの「＋」の押すと、登録することができます。

登録したコンポーネントに管理しやすいよう名前をつけることも可能です。

登録したコンポーネントを使う場合は、ドラックで表示されます。

便利な機能④ リピートグリッドを使う

リピートグリッドを活用すると選択した要素を繰り返し表示することができます。

例えば以下の要素をコピーして繰り返し使いたい場合、全てコピペして要素を整える必要がありますが、リピートグリッドを活用することで簡単に繰り返すことができます。

繰り返したい要素を全て選択後

右上のリピートグリッドを選択

リピートグリッドを選択すると要素の右側と下側にマークが出るので、ドラッグすることで要素を繰り返して表示することができます。

リピートグリッドによる表示後

今まで全てコピペして位置をずらして整えていました。

リピートグリッドを活用すると本当に便利ですね。

その他　知っておくと便利な機能

• 正方形の作成

長方形選択ツールを押し、「Shiftキー」を押しながらドラッグすると正方形を簡単に作成できます。

• 長方形の縦横比を固定

鍵マークを押すと縦横比を固定することができます。

縦横比が固定されるので幅（W）の数字を変更すると自動で高さ（H）も変更されます。

さいごに

今回は、「【初心者向け】Adobe  XDの作業効率アップにつながる使い方」について紹介しました。

今回の記事があなたの役に立ったら幸いです。

今後も最新の情報を見逃さないために本ブログをブックマークよろしくお願いします