Rotate your phone

YOSHISUGA My Portfolio

Blog

Adobe XD 使ってみた

こんにちは。菅沼です。adobe xdが以前から気になっていたので、練習がてらに使ってみました。 とにかく便利だったので、使ったことのない方向けにレビューさせていただきます。

adobe xdを無料で使ってみる

adobe XDって何?

以下、公式サイトからの引用です。

本物のようなルック&フィールのデザインでストーリーを語ろう。ワイヤーフレーム、アニメーション、プロトタイプ、共同作業などの機能がすべてひとつのUI/UXデザインツールに統合されています。

adobe XD 公式サイト

webサイトのデザインカンプ作成やUI/UXデザインの作成に特化したツールです。もともとwebサイトのデザインツールといえばphotoshopやillustratorが有名ですが、XDが登場してから、この分野ではこちらがメインストリームになりつつあるように感じます。私のようにデザインの勉強をしてこなかった人でも、簡単に操作可能でとても便利なツールです。AdobeのCreative Cloudに加入していたり、Adobe IDがあれば、だれでも無料で試してみることができます。

実際使ってみて

XDは大きく分けて「デザイン作成」「プロトタイプ作成」「共有、コメント」3つのことが可能です。

デザイン作成

photoshopやillustratorより操作が分かりやすく、リピートグリッドやアセット機能などを使うとほかのツールよりも効率的に早く作業できると思います。デザイン作成ではパスの描写、クリッピングマスク、テキストの挿入などを網羅しています。画像の挿入ではphotoshopと連携して明るさを調節したり画像の修正が可能です。他のツールのはない以下の機能がXDの特徴です。

<リピートグリッド>
要素の繰り返しがドラッグひとつでできる機能。web制作をしていると同じ要素が連続して並ぶのはよくある場面だと思います。そういった場合に非常に使える神機能です。

デザインを一つだけ作成し、リピートグリッドをONにして増やしたい方向にドラッグするだけで要素を無限に繰り返すことができます。要素間のマージンも簡単に上下左右調整できるので手間もかかりません。完成したらリピートグリッドを解除すれば、全て独立した要素にすることができ、文字色を変えたりそれぞれのデザインの編集もできます。『上の例では8個の要素」

<アセット・コンポーネント>
オブジェクトのカラー、文字スタイルなどを一元的に管理できる機能です。webサイトでよく使い回すフッター、ヘッダー、グローバルナビゲーションなどのまとまった要素もコンポーネント として登録しておけばすぐに再利用可能です。コンポーネントにはマスターとコピー(インスタンス)の概念があり複数ページにわたって同じコンポーネント を配置した場合、マスターを編集すれば他のインスタンスにも同期されデザインが反映されます。インスタンスのみデザインを変更した場合はそのページのインスタンスのみ、デザインの変更がオーバーライドされるのでとても便利です。マスターとインスタンスは左上の四角い枠のようなものが塗り潰されているかいないかで判別できます。また、通常のオブジェクトとコンポーネントは枠の色で(緑がコンポーネントで青が通常のオブジェクト)で判別できます。

プロトタイプ作成

XDではデザインだけでなくプロトタイプの作成も可能です。プロトタイプ モードにしてアートボード 間を線で繋ぐだけで簡単にリンクが作成できます。ただ遷移するだけでなく、自動アニメーションなどを使えば実際のサイトのような挙動にすることができます。

<ステート機能>
コンポーネントにはステートという概念があります。ステートとは状態という意味でコンポーネントに複数の状態を持たせることができる機能です。これをインタラクションによって切り替えることができます。インタラクションには様々なトリガーが用意されていてタップ、ホバー、ドラッグなどがあります。ステート機能を使えばアートボード間で見せていた変化もコンポーネント単位で切り替えることができます。

上では四角形とボタンをコンポーネントにしてステートを二つ設定し、プロトタイプモードにしてお互いのステートにインタラクションを設定、トリガーをタップ、アクションの種類を自動アニメーション、移動先をお互いのステートにしています。他にもイージングやデュレーションも設定できるので実際のサイトにあるようなアニメーションが実現可能です。

共有機能

XDの共有機能を使えばチームやクライアントとやりとりをスムーズに行うことができます。

IllustratorやPhotoshopを利用する方ならご存知かもしれませんが、今までクライアントに共有する方法はかなり面倒でした。書き出して画像で見せたり、PDFファイルを出力して見せたりなど、手間がかかる方法ばかりでした。XDで作成されたデザインカンプはXDのソフト内から発行できるURLで共有可能で、共有時にはパスワードを設定することが可能です。また共有したプロトタイプを確認するページでは、コメントを残す掲示板のような機能があるため、どこになんの修正をしてほしいかがすぐに共有できます。この共有機能を使えば面倒な確認のやりとりがスムーズになり、作業効率がアップします。

XDのデメリットは?

扱いやすいXDですが、あくまでワイヤーフレームの作成ツールです。photoshopのように写真や画像の調整、細かいデザインはできません。そのため、メインビジュアルや、バナー制作などにはあまり向かないと思われます。今後のアップデートで機能が追加されればさらに使いやすくなるかもしれません。

とにかく便利なXD

今回はXDのできることをご紹介させていただきました。アップデートを重ねるにつれてかなり使えるツールへと進化しています。今後もアップデートがあると思いますので、神機能の追加に期待しています。まだ使ったことのない方は是非XDを利用して効率的にデザインをしてみてはいかがでしょうか?最後に私が作成したプロトタイプの共有リンクはこちらになりますのでよろしければご覧ください。

adobe xdを使ってみる

Blog一覧へ戻る