XD

: ITツール

XDでニューモーフィズムデザインを作る方法！パターン別4種類の作り方

2022/6/22 XD, ウェブデザイン

「ニューモーフィズム」というデザイン手法をご存知だろうか。明暗2色のドロップシャドウを使い、オブジェクトを、浮き上がらせたり、くぼんでいるように見せる手法だ。 XDを使って、これらのデザインを簡単に再 ...

: ITツール

【XD】テキスト文字の色をグラデーションにする方法【簡単3ステップ】

2022/6/3 XD, ウェブデザイン, 日本一やさしいXDの教科書

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

: ITツール

【XD】自動アニメーションを使いこなすために知っておくべきルール

2022/3/28 Adobe, XD, 日本一やさしいXDの教科書

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

: ITツール Webディレクターの仕事

【XD】デザイン確認用URLは最後に「?fullscreen」を付けてコーディング後の大規模修正を回避せよ

2021/10/13 XD, ウェブサービス, ウェブディレクター, ウェブデザイン

Webサイトの制作をしているなかで、XDでデザインを制作することは、最近ではスタンダードになってきた。私の身の回りでは、Photoshopでの制作よりもXDのほうが多いぐらいだ。さて、そのなかでよく ...

: ITツール

XDでPDFに書き出すと画像が崩れる不具合への対処法

2021/5/6 XD, トラブルシューティング

XDで作成したアートボードをPDFで書き出そうとすると、画像が以下のように崩れる場合がある。この不具合には私も頭を悩ませてきた。同じような問題で困っている人がいたら、この記事が助けになれれば幸いだ。

: Mac

【XD】アニメーション付きスライダーメニューの作り方

2020/6/30 Adobe, Mac, Macアプリ, XD, 日本一やさしいXDの教科書

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

: Mac

【XD】ステート機能の基礎！1つのパーツで状態変化をデザインできる機能

2020/6/25 Mac, Macアプリ, XD, 日本一やさしいXDの教科書

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

: Mac

Adobe公式のXD検定で理解度を確かめて更に深めよう

2020/6/23 Adobe, Mac, Macアプリ, XD, 日本一やさしいXDの教科書

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

: Mac

【XD】フォントをアウトライン化する方法

2020/6/21 Adobe, Macアプリ, XD, ウェブディレクター, ウェブデザイン, ワイヤーフレーム, 日本一やさしいXDの教科書

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

: Mac

【XD】コンポーネントとは？使い方の基本をわかりやすく解説

2020/6/11 Adobe, Mac, Macアプリ, XD, 日本一やさしいXDの教科書

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

: Mac

Adobe Cloudを開いてもソフトのアップデート情報が来てないときの対処法

2020/6/6 Adobe, XD

Adobe 関係のソフトウェアのアップデートは、すべて Adobe Cloud を通してアップデートをする。そこでよくあるトラブルとして、「Adobe Cloud からアップデートできない／最新版の ...

: Mac

【XD】厳選した11個のプラグイン紹介！作業効率が抜群に上がる

2020/6/3 Adobe, XD, ウェブサービス, 日本一やさしいXDの教科書

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

: Mac

【XD】リピートグリッドの基本の使い方と応用テクニック集

2020/5/31 Mac, Macアプリ, XD, 日本一やさしいXDの教科書

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

: Mac

【XD】テキストタイプの変更・サイズ・文字間隔・行間の調整方法を解説

2020/4/16 Mac, Macアプリ, XD, 日本一やさしいXDの教科書

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

: Mac

【XD】アートボード上のレイヤーをパーツ毎で別々に書き出す方法

2020/4/1 Mac, Macアプリ, XD, 日本一やさしいXDの教科書

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

: Mac

【XD】三角や四角を組み合わせて複雑な図形を作る方法！矢印やひし形を作ろう

2020/4/16 Mac, Macアプリ, XD, 日本一やさしいXDの教科書

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

: Mac

【XD】画像を「ぼかす」ふたつの方法！ぼかしレイヤーの作り方

2020/4/16 Adobe, Mac, Macアプリ, XD, 日本一やさしいXDの教科書

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

: Mac

【XD】マスク機能の解説！画像を擬似的にトリミングすることも可能

2020/4/16 Adobe, Mac, Macアプリ, XD, 日本一やさしいXDの教科書

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

: Mac

XDでパディングを設定！テキストの長さに合わせて可変する要素の作り方

2020/4/16 Adobe, Mac, Macアプリ, XD, 日本一やさしいXDの教科書

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

: Mac

XDの画面を解説！各エリアの意味・役割・基本的な使い方

2020/4/15 Mac, Macアプリ, XD, 日本一やさしいXDの教科書

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

S