UI/UXデザインやプロトタイプの作成を直感的にできるAdobe XDとは

Adobe XD(アドビ エックスディー)というソフトをご存知でしょうか。

Adobe XDは、アドビシステムズが販売するwebサイトやモバイルアプリ等のUI/UXデザインに適したソフトです。

デザインといえば、同じアドビシステムズが販売しているIllustrator(イラストレーター)やPhotoShop(フォトショップ)等でデザインをされている方は多いと思います。

もちろんIllustratorやPhotoShopはデザインをする上で欠かせないソフトとなっていますが、もしあなたがこれらのソフトでwebやアプリ等のデザインをしていて、「こんな機能があったらいいな」と思う部分をXDは兼ね備えているかもしれません。

IllustratorやPhotoShopを使いこなすベテランデザイナーさんから、デザインはデザイナーに任せるがワイヤーフレームを作りたいディレクターさん、webやアプリ等のデザインをやってみたいと思っている初心者の方にまでオススメのデザインソフトになっています。

XDが使われる理由とメリット

①ワイヤーフレームが直感的に

ワイヤーフレームとはwebサイトの設計図です。 画像、ボタン、テキスト等、どこに何を配置・掲載するのかを決める、UI/UXデザインの基本の作業となります。

XDでは無料で使えるワイヤーフレームを作るためのパターンやキット等がインターネット上に数多くあります。それらの素材を置き換えたり組み合わせることで、誰でも直感的にワイヤーフレームのデザインが可能です。

またワイヤーフレームが決まれば、それらの素材の色やフォントを変えたり、用意した画像素材等に置き換えるだけで簡単にwebやアプリ等のデザインが完成します。

②リピートグリッド

webデザインをしていて、同じもの(例えば画像・見出し・テキストをグループ化したもの)を何個も複製しないといけないなんてことは日常茶飯事です。Illustratorでその作業をするならコピーアンドペーストを繰り返し、均一に並べるという作業が必要になってきます。

しかしXDならグループ化したコンテンツをドラックするだけで、縦にも横にも好きな数を均一な並びで増やすことが可能です。そして余白の調整も1箇所をドラックするだけで横なら横、縦なら縦の全ての余白に反映されます。この機能でデザインにかかる時間も、画像や文字のサイズ、余白等を修正する作業時間も大幅に短縮できます。

③プロトタイプの作成

複数のページデザインを作り、このボタンを押すとこのページに遷移する等の説明をするとき、遷移図をつくったり、実際にHTMLに書いたりしなくても、XDの中でそれらを組み込むことができます。その方法も簡単で任意のボタン素材をクリックして出てきた矢印を遷移したいページ素材にドラックするだけです。遷移の際のアニメーション等も指定でき、実際のwebページに近い形のプロトタイプを簡単に作成できます。

XDの今後に期待するもの

XDは2016年にリリースされ、Adobeソフトの中でも比較的新しい部類のソフトです。

リリースから度々アップデートを重ね、より使いやすい機能を兼ね備えてはきているものの、まだまだこれからの進化を期待していいソフトだと思います。そこでこれから備えてほしい機能、備わっていくのではないかと思われる機能を挙げてみました。

①HTML CSSの書き出し

現在でもこの機能はプラグイン等を使ってできることはできるのですが、まだまだ実際のコードので使えるレベルとはほど遠いので、こちらがある程度実際に使えるようなコードで書き出せる機能があれば、web制作はかなりスムーズになると思います。

②プロトタイプのレスポンシブ化

プロトタイプのプレビューは基本画像のようなデータで書き出され、ウインドウサイズを変更してもそれに追従して大きさが変化したり、メディアクエリのブレイクポイントのようにタブレットやスマホ用の表示に切り替わることもありません。いまやweb業界は殆どの新規サイトがレスポンシブデザインのため、是非備えてほしい機能の一つですね。

まとめ

Adobe XDの特徴とメリットを簡単にまとめてみましたが、いかがでしたでしょうか?

こんなに直感的に効率よくデザインの作業ができ、今ではクラウド上でチームでのリアルタイム共同編集ができる等、これからさらに様々な現場で使われていくソフトだと思います。

ベテランのデザイナーさんほど、新しいソフトを覚えるのがめんどくさい…と腰が重くなりがちですが、まずは触れてみてその便利さを味わってみてください。驚くほど作業が効率化するはずです。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

求人採用のエントリーはこちら

求人採用/エントリー