アプリのUIデザインツールのおすすめから選ぶポイントまで

アプリのUIデザインにツールは必要？

結論から言えば、アプリのUIデザインにツールは必須ではありません。UIデザインは「UIデザインツール」ではなく、これまでのグラフィックソフトや、極端な例ですが表計算ソフトで作成することさえできるからです。

しかしグラフィックソフトなどではなく、UIデザインツールを使ってUIデザインを行うことにメリットが多いのは事実です。UIデザインツールは、WebサイトやスマホアプリなどのUI（ユーザーインターフェース）をデザインするためのツールです。Photoshopなどのグラフィックソフトに比べると、画像編集の機能などは削ぎ落とされており劣る印象がありますが、その分とにかく「UIをデザインする」という面に特化しています。

ワイヤーフレームやプロトタイプを簡単に作ることができたり、ボタンなどのプロジェクト内でよく使うデザインを簡単に使い回すことができたりと、UIデザインにおける便利な機能が満載なのです。UIデザインツールは必須ではありませんが、素早く便利にUIデザインを行いたいのなら、使うことをおすすめします。

アプリUIデザインツールに必要な機能とは

続いてはグラフィックソフトにはない、UIデザインツールをならではの便利機能についてご紹介していきます。

デザイン変更がすべての同種パーツに適用される

まずグラフィックソフトは1枚の絵や写真を完成させるために使うツールですから、アプリやWebサイトのような、同じ大きさと形の写真やイラスト、似たような書式の文字を扱うには不便な部分がありました。たとえば今や主流となった「カードデザイン」は、同じ大きさ、デザインのパーツを何個も並べていますね。

グラフィックソフトを使ってUIデザインをする場合、ひとつカードを作ったら複製し、ちまちまと並べる操作が必要です。また、途中でカードのデザインを変更することになった場合は、複製したすべてのカードを削除して、もう一度やり直すといった作業も発生してしまいます。

しかしUIデザインツールであれば簡単な操作で複製や整列まで行うことができますし、もし途中でデザイン変更することになっても、元となるカードをひとつ編集すれば、すべてのカードにその変更が適応されるのです。アプリは同じデザインパーツを何度も繰り返し使うことが多いため、こういったUIデザイン向けの機能が備えられているのが最大の強みですね。

プロトタイピングツールとしても使える

アプリ開発の場ではプロトタイプが重宝されます。プロトタイプとは、UI/UX、画面遷移、アニメーションの動作などを確認するため、画面デザインを組み合わせて作成したモックアップです。プログラミングを始める前に用意をし、デザイナーの他にエンジニア、テスター、クライアントなど、それぞれが完成形を確認するために使われます。

プロトタイプがあると、チームメンバー間の認識のズレをなくしていくことができる他、フィードバックを行うときにも活用できます。作成したUIデザインを、そのままプロトタイプに落とし込む機能があると、プロトタイプを作る手間が省けるため便利です。

チームメンバーで共有する

デザインから開発までを一人で行うのであれば不要ですが、チームでアプリ開発をするのであれば、インターネットを介した共有機能がほしいところです。Adobe XD、Sketchなど利用人口の多いUIデザインツールには、この共有機能が備わっています。共有機能では、デザインやプロトタイプをただ単に「見る」ことができるだけでなく、コメント機能を使って修正要望を出すことが可能です。

またバージョン管理機能を備えているツールの場合は、修正要望がどのように反映されたかをチェックしたり、見比べたりすることもできます。チーム全体でアプリをブラッシュアップしていくためには、共有機能は不可欠です。

アプリUIデザインツールを選ぶ際のポイント

ではアプリ開発におけるUIデザインツールを選ぶ際、何を基準にすればいいのでしょうか？今回はチームでアプリ開発を行う場合を想定して、選ぶ際のポイントをご紹介していきます。

対応OS

もしチームに複数のデザイナーがいて、Windows派とMac派に分かれているのであれば、対応OSは十分注意すべき問題です。

こちらのTwitterでのアンケートで、Adobe XDについで2位にランクインしているSketch※は、現段階ではWindowsには対応していません。もしWindows派のデザイナーがいる場合、SketchなどのWindows非対応ツールは候補から自動的に外れてしまいます。利用しているパソコンのOSにも十分注意して決めていきましょう。

※【あなたはどのUIデザインツールを使っていますか？】」 / Twitter

チームでの共有・共同編集のしやすさ

プログラミングではよくコンフリクト問題に当たることがありますが、チームにデザイナーが二人以上いる場合は、デザイン面でも起こりうる問題です。このようにデザイナーが複数いるチーム編成の場合、共同編集がしやすいツールを選ぶのが良いでしょう。

現在、リアルタイムで共同編集ができるUIデザインツールは「Figma（フィグマ）」のみです。この共同編集機能が注目を浴びている、新しい部類のツールです。

デザイナーは一人のチームでも、エンジニアやクライアントとも同じデザインを共有するために共有機能は必要です。この場合は共同編集の機会はないでしょうから、クラウド上に保存したデザインやプロトタイプを確認・コメントできる機能を備えたツールを選択するのが良いでしょう。

実機確認のしやすさ

パソコン上でUIデザインを完成させて、いざ実機に写して見たら、なんだかイマイチだなと思ったり、パーツが小さくて操作しにくいなと感じることがあると思います。実機で見た時との印象のズレや、パーツの大きさなどが気になるというのは、必ず起きてくる問題です。そういった問題に素早く対処するためにも、簡単な操作で実機確認ができる機能を備えたツールを選ぶことをおすすめします。

実機確認が簡単にできると、こまめに確認するくせがつき、結果的に修正時間を短くすることができます。完成したあとに「こんなはずじゃなかった……」と思っても、UIデザインツールであれば簡単に修正はできますが、どうせならキリが良い段階でその都度確認していきたいですよね。

アプリUIデザインに最適なツールを紹介

それではここからは、アプリのUIデザインに適したツールを紹介していきます。

Adobe XD

XDは、デザイナーなら誰しも一度は触れたことがあるはずのPhotoshopやIllustratorを制作しているAdobeによるUIデザインツールです。正式版の初リリースは2017年と、Sketchよりも後発です。最大の売りは「リピートグリッド」をプラグインなしで使えること。

多くのアプリでは、同じデザインの要素を繰り返し並べて使います。こういった要素をドラッグ＆ドロップで複製し、要素間のマージンも直感的に操作して変更できるのがリピートグリッドという機能です。グリッドレイアウトの作成が簡単にできるため、多くのデザイナーがリピートグリッドのお世話になることでしょう。これと同様の機能は他のツールでも利用できますが、プラグインなどの拡張機能となっています。

またAdobe製であるため、PhotoshopやIllustratorとの互換性に関しても心配する必要がありません。これまでUIデザインツールを使った事がなかった方も、Photoshopなどに使い慣れているのなら、まずはXDを試してみるのが良いかもしれません。「XDスタータープラン」は無料で使うことができます。仕事用にピッタリな「XDグループ版」は1,980 円/月（1ユーザー）で提供されています。

Sketch

人気のUIデザインツールのひとつであるSketchは、Adobe FireworksというUI作成ソフトウェアの開発終了に伴い注目を浴びました。Adobe製品の開発終了ですから、多くのユーザーが同じAdobeのPhotoshopに移行するかと思われましたが、UIデザインに特化していることや動作の軽さなどに注目が集まり、Sketchを移行先に選ぶ人も多かったのです。たくさんのツールが登場しているUIデザインツールのお手本とも言える存在です。

Sketchはプラグインが豊富で、自分に必要な機能を取捨選択して追加していくことができます。XDのリピートグリッドに似た機能を実装できる「Duplicator」、仮の画像やテキストを自動で流し込んでくれる「Content Generator for Sketch」など、便利なプラグインをインストールすることで、効率よく作業していくことができますよ。ソフトウェアそのものを充実化させてアドオン（プラグイン）の必要性を少なくしようというXDの方針とは真逆の方向性ですね。

ひとつ注意したいのは、Windowsに非対応だということです。Windows愛好家には選択肢として絶対に挙げられないのが難点ですね。Sketchは「.sketch」という独自のファイル形式で保存されますが、こちらはXDやFigmaでも開くことができます。

Figma

Figmaは2016年に正式リリースされた、ブラウザで動かすこともできるWebアプリケーションです。デスクトップアプリケーションも公開されています。OSに依存せずインストールも不要で、ネット環境があればいつでもどこでもUIデザインができるのが嬉しいですね。Figma最大の特徴は、複数名の開発で圧倒的な力を発揮する「リアルタイム同時編集機能」を持つところ。この機能は2020年3月時点ではFigmaのみが有しています。

また、簡易的ではありますがバージョン管理機能も備えており、どれが最新のデザインなのかが分からなくなり混乱するという問題を防ぐことも可能です。外部のコラボレーションツールと連携せずとも、キャンバス内に直接コメントを書くこともできるため、エンジニアやディレクターからのフィードバック対応もスムーズです。

複数名のデザイナーがアサインされているチームや、ペアデザインで進めていきたいプロジェクトでは、このリアルタイム同時編集機能やバージョン管理機能、コメント機能が活きてきます。チームでアプリ開発を進めていくのであれば、UIデザインツールはFigmaを選択するのがおすすめです。

Drama

Dramaはプロトタイピング機能、アニメーション作成機能、UIデザイン機能がひとつのソフトウェアとしてまとめられているツールです。PixelCut社により開発されています。2019年7月にはBetaユーザーを募集していました。FigmaやXDよりも後発で、かなり新しい部類です。

動作がとても軽く、限りなく実機に近いプロトタイピングを素早く作成することが可能。アイディアの創出からフィードバックまでのサイクルをスムーズに行うことができます。Sourcetreeのようなインターフェイスの「History」機能で、バージョン管理ができるのも魅力的です。新しいツールであるため機能が不十分であることは否めませんが、公式のロードマップによれば、今後も機能実装を続けていくとのことです。先の予定には「Code Generation」や「Collaboration」とあります。おそらく「Code Generation」機能では、作成したデザインからJavaやC#、Swift、JaveScriptなどのコードを自動生成できる機能ではないかと考えられます。

Dramaの開発元であるPixelCut社は、ベクターグラフィックからJavaやSwift、 JavaScriptなどのコードを生成するアプリ「PaintCode」を開発しています。これと同等程度の機能を有するのかもしれません。「Collaboration」は、他のツール同様の共有やコメント機能であると考えられます。

後発品となるだけあり、他のツールの良いところを組み合わせた強力な機能となるのか、それとも独自路線で来るのかと、実装される日が楽しみですね。今後の展開に注目していきましょう。2020年3月現在、対応OSはMacのみ。実機確認もiOSのみとなり、Androidでの実機確認ができません。Apple社製品愛好家のためのツールとなっています。

アプリ開発にUIデザインツールを利用してみよう

アプリ開発にUIデザインツールは必須ではありません。Photoshopなど従来のデザイン方法でも十分対応可能です。しかしUIデザインに特化したツールを使うことで、アプリ開発はより効率的になります。デザイナーの作業が楽になるのはもちろん、エンジニアやクライアントとイメージを共有したり、フィードバックをもらったりするのも簡単で分かりやすくなります。

UIデザインツールは単なるデザインツールに留まらず、よりよいアプリを開発するために、全員の意見をより集めやすくするコラボレーションツールとしての機能も備え始めてきています。あなたのチームにピッタリなツールはどれか、この記事を参考に検討してみてくださいね。