定期的に更新中!

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

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

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

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

1. パスの編集

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

  1. 対象物を選択
  2. 対象物をダブルクリック

アンカーポイントを複数選択したい場合

Shiftで複数選択可能

アンカーポイントを追加したい場合

  1. 対象物を選択し、対象物をダブルクリック
  2. 線上にカーソルを合わせるとポイントの追加が可能

ハンドルを表示させたい場合

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

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

2. 計算式が使える

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

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

  • 割り算 1200/3
  • 掛け算 400*3
    ※足し算、引き算も可能

3. リピートグリッド

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

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

【XD使い方動画】XDの基本操作動画・PC編

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

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

この動画の良い点

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

オススメのXD解説動画

※ 動画の長さ 24:44

動画から取得できる知識

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

  1. [ 00:50 ] XDの利用シーンや具体的な使い方など
  2. [ 03:55 ]アートボードの概念
  3. [ 04:34 ]ビューポートの設定
  4. [ 05:47 ]図形の作成方法(塗り/線)・図形の合体など
  5. [ 09:36 ]線対象
  6. [ 10:30 ]角丸
  7. [ 11:05 ]図形に画像を反映 ※Photoshopで画像編集可能
  8. [ 12:24 ]パスの編集
  9. [ 14:50 ]計算式が使える
  10. [ 16:00 ]テキストのエリア設定
  11. [ 17:54 ]リピートグリッド(複製機能)
  12. [ 19:40 ]ガイド
  13. [ 21:52 ]まとめ

【XD使い方動画】XDの基本操作動画・SP編

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

この動画の良い点

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

  • ステップガイドPDF(作り方の説明書)
  • 完成形のXD
  • 制作途中で必要となるサンプルXD
  • アセットファイル(画像やテキスト)

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

ワークショップキット

→ ダウンロードサイト(AdobeXD公式)

オススメのXD解説動画

動画から取得できる知識

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

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

【ポイント】

ディレクションで構成案を作る際や、デザイナーがサイトデザインを作る際、サイトに導線や動きを持たせたい時となどに、Adobe XDはとても便利なツールです。プロトタイプは、クライアント提案時にも役立つので、今後の業務で積極的に取り入れていくと良いでしょう。

【まとめ/XD使い方動画】

XDの使い方や基本操作を覚え、時短テクニックなども学んでいけば、業務の効率化・スピード化が図れます。

今後は、そのために必要な情報やXD関連の有益な情報を集めていく予定です。使い方は、文字での説明よりも、動画の方が理解しやすいですし…、実際に使ってみて、分かりやすいと感じた動画を紹介していこうと思います。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA