XD使い方動画集｜Adobe XDの基本操作動画のまとめ | Weeeeby

数年前まで、ディレクションの時はPowerPoint、デザイン制作時はPhotoshopを使用していたのですが、昨今ではAdobeXDもしくはsketchを使う制作会社も増えてきました。そこで今回は、現場で本当に役立つAdobe XDの基本操作動画（XDの使い方が分かる動画）をまとめました。

【はじめに】社内勉強会で質問の多かったXD基本操作Best3とは

会社の社内勉強会で講師をしているのですが、XDの使い方も勉強会のネタの１つです。勉強会では、主に新入社員の方へレクチャーするのですが、その勉強会の中で相談や質問が多かった「XDの基本操作Best3」をご紹介したいと思います。

パスが編集できないという相談を多く受けます。
そんな時は、以下の方法でパスの編集や変形が可能になります。

Shiftで複数選択可能

アンカーポイントをダブルクリックするとアンカーの表示が可能

※ハンドルを消したい場合もダブルクリックでOK
※ハンドルとは・・・アンカーポイントから伸びている方向線と方向

コンテンツ幅に対して、計算式をいれて計算するのが面倒という声が多かったのですが、その作業もXDであれば簡単にできてしまう便利機能です。以下の方法で、縦幅・横幅に対して、割り算・掛け算・足し算・引き算ができます。

＜例＞
収めたい幅や高さに対して、均等なボックスを3個作りたい
　　　　
＜対応方法＞
WやHの数字を入力するボックス内に、以下の数式を入れることで計算したサイズで作成することが可能です。

作成したデザインやレイアウトを複製する機能です。
これを使えば繰り返し表示させたいデザインを、簡単に複製することが可能です。

※この機能は奥深いので、応用編などでまた詳しくご紹介します。

XDの使い方（PC）で分かりやすかった動画は「WebデザイナーのためのXDの使い方【基礎編】」です。

この動画は、WEBデザイナーの為のXD使い方動画です。未経験者や初心者でも理解できるよう、簡単なものをピックアップして動画で説明しています。

内容が実践向きで、XD初心者や未経験者にも分かりやすい内容になっています。
※私も社員研修や勉強会の時に、同じような内容を解説しています。

※ 動画の長さ　24:44

動画で得られるXDの基礎知識には、以下がありました。

XDの使い方（SP）で分かりやすかった動画は、「Adobe XD Trail 部屋キャンプ初級編 – アドビ公式」です。
アドビ公式の全4回の動画で、Adobe XDの基本操作を学ぶことができます。

制作で必要となるサンプルファイルが配布されており、制作前の下準備が不要な点が良い点です。具体的には、

などのワークショップキットが無料でダウンロードできるので、とても便利です。

動画で得られるXDの基礎知識には、以下がありました。

［ 04:15 ］―――
デスクトッププレビュー／制作内容の説明
［ 05:23 ］―――
新規作成、アートボード名、ファイル保存（クラウドドキュメント）
※クラウド保存のメリット：データの自動保存、過去のバージョン履歴
［ 06:48 ］―――
ガイド（アートボードの左側・上側）、ツールバー・レイヤーパネル（画面左側）、ロゴの読み込み、配置位置、座標、illustratorからコピペでパスデータとして扱える
［ 10:17 ］―――
– ヘッダーエリア
ハンバーガーメニュー、透明の座布団（タップ領域）、線の先端調整、グループ化、レイヤーパネルのグループへ英字で名前を付ける、検索アイコン、テキスト入力、テキストの設定
［ 16:58 ］―――
– フォトセクション
長方形、角丸、アートボードの選択（余白をダブルクリック、アートボード名をクリック）
– 人気の記事セクション
オブジェクト間の距離を測る（対象物選択＋alt）、ポイントテキスト、エリア内テキスト（ダブルクリック：適切な高さへ揃える）、行間、リピートグリッド、ボタン、フッター、ワイヤーフレームとは
［ 32:23 ～ 36:55］―――
– 質問タイム