日本一やさしいXDの教科書

XDの利用用途は広く、デザインソフトとしても十分に活躍できるポテンシャルを秘めている。実際、最近のWebサイトのデザインはXDで制作することが多い。 さて、今日はそんなXDのちょっとしたテクニックをひ ...

XDの「自動アニメーション」はとてもおもしろい。アートボードの Before と After をつなげるだけで、いい感じのアニメーションを自動的につくってくれる。 なんとなくの感覚でつくっても、それな ...

XDを使った、アニメーション付きのスライダーメニューの作り方を紹介しよう。これができるようになると、より本番に近い形でのプロトタイプテストが可能になる。 マスターコンポーネント、ステート機能、マスク機 ...

今回はXDでのUI・ワイヤーフレーム・デザインを制作する上で強力は機能「ステート機能」について解説する。 一つのコンポーネントで、複数の〈状態違いのデザイン〉を表現することができ、プロトタイプのレビュ ...

XDの操作や使い方について、自分の理解度を測れるサイトがある。その名も「Adobe XD 検定」。 Adobe が公式にリリースしているウェブサイトで、一問一答形式のテストを実施できる。 不正解した問 ...

XDでもフォントをアウトライン化することはできる。 アウトライン化したい文字を選択した状態でcommand8を押すだけだ。 どうしよう、この記事で言いたいことが終わってしまった。あとは「アウトラインと ...

XDでページの構成をつくるとき、〈ロゴ〉や〈グローバルナビ〉や〈ボタン〉など、くり返し使われるパーツがある。 これらのパーツを単純にコピーして、それを各ページにペーストしていくと、大きな問題が発生する ...

XDは便利だが〈かゆいところに手が届かない〉といった点がいくつもある。それを補完してくれるのがプラグインだ。 今回は私が日頃愛用しているプラグインをまとめてご紹介する。すべて無料で使えるので、ぜひ活用 ...

作ったオブジェクトと同じものを繰り返すことができる「リピートグリッド」。同じ構成のパーツを何個も作りたいときに便利だ。 今回はリピートグリッド機能について、基本的な使い方のほかに、覚えておくと便利な応 ...

今回は、XDでできるテキストの装飾についてご紹介。 XDでは、テキストの長さに応じてオブジェクトとなる「ポイントテキスト」と、テキストを表示する範囲を指定する「エリア内テキスト」の2種類があるので、そ ...

当ページでは、XDのアートボード上に作成したレイヤーを、個別のパーツとして書き出す方法をご紹介。 例えばデザインしたウェブページの画像パーツを書き出したり、同サイズのバナーを大量に書き出したりするのに ...

XDのオブジェクトに「矢印」というものはありませんが、三角と四角を組み合わせて矢印を "つくる" ことはできます。 今回は、複数のオブジェクトを組み合わせて結合させ、ひとつの図形オブジェクトを作る方法 ...

XDを使って画像に「ぼかし」を入れる方法をご紹介します。 「ぼかし」を入れる方法は2種類あり、「画像自体をぼかす方法」と「ぼかしレイヤーを画像の上に乗せる方法」とがあります。 両方覚えておくとケースに ...

XDで使用している画像について、上下左右をトリミングして（切り取って）、一部だけを残したい。そんなときに使える「マスク」というテクニックをご紹介します。 XDにトリミング機能はありません。「画像を切り ...

例えばウェブサイトでボタンを作るとき、横幅を200pxで指定するのではなく、テキストの長さに応じて長さが変わるようなパーツをつくるケースがあります。 これを「四角」と「テキスト」を組み合わせただけだと ...

XDを触り始めた頃は、画面の中に散りばめられたアイコンの数々の名前や意味、役割などを理解するのに時間が掛かった気がします。 しかし一度理解してしまうと、簡単に使いこなせるだけでなく、自分で応用もできる ...

XDにおけるアートボードの基礎知識についてご紹介します。 ターゲットとなるデバイスにサイズを合わせる方法や、サイズの変更方法、複製や書き出し方など、意外と知らないアートボードのすべてをお伝えします。