UIデザインツール。たくさんあるけど『Adobe XD』がやっぱり最強だと思う。

今回はWEBデザイナーが利用するUIデザインツールAdobe XDを紹介させていただきます。

近年では様々なUIデザインツールが登場していますが、いくつかのツールを一通りサッとなでるように触った筆者の感覚ではAdobe XDが最も使い勝手が良いと感じました。因みに筆者が試したUIデザインツールは以下になります。

  • Adobe XD
  • Sketch
  • Figma
  • Studio
  • Adobe Illustrator
  • Adobe Photoshop

Adobe XDの紹介をする前に、それ以外のツールを使った感想をちょっとずつだけ書いておきたいと思います。

Adobe XD以外のUIデザインツール

Sketch

Sketch 公式サイト

UX/UIデザインツールの先駆けともいえるツールです。ユーザーへ広く浸透しているので、素材キットやプラグインなども充実しています。一つ大きな欠点を挙げるとすれば、Windowsで利用できないという点です。デスクトップOSの利用比率を見てもwindowsユーザーが8割を越える中、Macだけでしか利用できないのは致命的な欠点と言わざるを得ないでしょう。今まではUI/UXデザインはSketchという選択が一般的だったのでMacをわざわざ用意するという人も多かったかもしれませんが、最近ではMac、Windowsのどちらでも使える優秀なUI/UXデザインツールがたくさん登場したため、ユーザーの離脱は避けられないでしょう。

Figma

Figma 公式サイト

Figmaのすごいところは複数人で同時に作業ができるところです。GoogleDriveの共有ファイルを触っているように複数人で一つのプロジェクトをリアルタイムに行うことができます。動作もサクサク動くし機能も充実しています。欠点を上げるとすれば、日本ではまだ使っている人が少ないところと英語表記のところです。チュートリアルなども英語表記のものばかりなので使い方を覚えるのに一苦労しそうです。しかし日本での普及が一般化してくれば一番使い勝手が良いツールになるかも。Window、Mac対応です。

Studio

Studio 公式サイト

ツールのデザイン性などはシンプルでカッコ良いです。動作の仕様が従来のデザインツールのようにドラッグ&ドロップで配置していくのではなく、コーディングをしているかのようにmarginやpaddingで位置調節を行ったりするので最初は少し違和感があるかもしれません。せっかくコーディングのようなデザイン構築をするのだから、デザインが完成した時は自動的にHTMLとCSSが出来上がってたりするのかと思ったのですがまだその機能はないみたいです。しかしもうすぐ自動的にHTMLとCSSが生成されるようになるという噂も耳にしており、そうなれば最強のツールになる可能性も秘めています。ちなみに日本製で日本語対応もバッチリです。Windows、Mac対応。

Adobe Illustrator
Adobe Photoshop

Illustrator 公式サイト

Photoshop 公式サイト

イラストレーターとフォトショップは既にご存知の方が多いと思いますが、レイアウトのイメージを作成するのは非常に強力な機能がたくさんあり、デザインの自由度はかなり高いです。しかしレスポンシブデザインやホバーエフェクトなど単体のレイアウトだけでは表現しきれない部分が多いWEBサイトを作る場合などは、これらだけではクライアントに伝えきれないことも多いのではないかと思います。

Adobe XDの特徴

Adobe XD

Adobe製品の中でWEBサイトのUI/UXをデザインをするために生まれたツールがAdobe XDです。

近年のWEBサイトではアニメーションやレスポンシブデザインなど一目ではわからない細かなエフェクトがUIを高めるポイントになっていますが、紙やPDFでは伝えきれない細かなWEBデザインをリアルに表現できるAdobe XDがクライアントにリアルなWEBサイトデザインを共有することを実現します。

しかしながら、それだけの機能であれば冒頭で紹介した『Sketch』、『Figma』、『Studio』などのツールでもWEBサイトのイメージをリアルに表現することは可能です。ここからはさらにAdobe XDならではの機能を紹介していきます。

Adobe XDのここがスゴイ!

リピートグリッド

Adobe XDを使い始めて最も衝撃を受けた機能がリピートグリッドという機能です。簡単にどのような機能か説明しますと、あるエレメントに対してハンドル操作を行うことで縦方向と横方向に繰り返しのデザインを施すことができる機能です。

Adobe XD リピートグリッドの動作デモ

なんとこのリピートグリッド機能、ただ単にエレメントを綺麗に複製してくれるだけの機能ではないんです。リピートされたエレメントに対して画像を一括してドラッグ&ドロップすることで全てのエレメントに順番通り画像を挿入させることもできるのです。

Adobe XD リピートグリッドの動作デモ

さらにさらに、これだけではありません。なんとtxtファイルに入ったテキストファイルもドラッグ&ドロップすることで一括に文字を挿入することができてしまうのです。テキストファイルの改行ごとに次のエレメントへ移ります。

Adobe XD リピートグリッドの動作デモ

このリピートグリッドという機能はめちゃくちゃ便利です。これだけで作業効率がグッと上がります。Adobe XDを利用される際は早々にリピートグリッドの使い方をマスターされることをオススメします。

シンボル

リピートグリッドに加えてシンボルという機能も非常に便利です。シンボルはWEBサイトのヘッダー、フッター、サイドバーのようにどのページでも一定の場所に固定して配置される項目を作る時に利用される機能で、全てのページのシンボルを一括で変更することができます。つまりヘッダーの一部分だけを変更しようとする場合、全てのページのヘッダーを変更させるのではなく一つのヘッダーを変更させるだけで全てのページのヘッダーが変更されるようになるのです。

Adobe XD リピートグリッドの動作デモ

わかりやすいチュートリアル

Adobe製品全てに言えることですが、学習コストが高めのツールである分チュートリアルが充実しています。丁寧に動画で解説してくれるチュートリアルが多く非常にわかりやすいです。

またAdobe XDにおいてはIllustratorやPhotoshopなどのツールに比べるとはるかに学習コストが低いと言えるでしょう。チュートリアルを1時間ほど見て直感的に操作をすれば、使い始めたその日からそれなりにWEBサイトのデザインを作ることができてしまうと思います。

Adobe XD チュートリアル

Adobe XD ショートカットキー 一覧PDF

まとめ

今回はUI/UXデザインツールの『Adobe XD』を紹介させていただきましたがいかがでしたでしょうか?

冒頭に挙げました他のツールもかなり優秀ですが、2018年4月現在の機能で考えればAdobe XDが最も優れているのではないかと思います。また筆者はまだ利用していないのですが、InVision Studioという新しいツールも2018年1月からリリースされたようです。こちらも恐らく強力なツールの雰囲気がプンプンしておりますので、さらにUI/UXデザインツールのシェア争奪戦は激しくなってくるでしょう。

選択肢が増えると私たちデザイナーにとっては有難いことなのですが、どれを使えばいいか頭を悩まされる部分でもあります。色々なツールにアンテナを貼っておいて自分が制作しようとしているデザインに最も適しているモノはどれか見定めるようにしておきましょう。