XD」や「Sketch」といったUIデザインツールが使われることが多くなっています。これまでデザインの分野ではPhotoShopやIllustlatorといったグラフィックソフトが使われることが多く、Adobe製品一強というような時代が長く続いていました。最近ではUIデザインに使用するソフトに、選択の幅が広がってきています。これからUIデザインを学びたい方も、これまでデザイナーとして活躍してきた方も、どのUIデザインツールを選択するべきか、それとも資料が豊富で慣れ親しんだグラフィックソフトを使い続けるかで悩んでいるのではないでしょうか?今回はUIデザインツールの必要性や導入するメリット、どのような基準で選んでいくべきかなどをご紹介していきます。アプリ開発に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デザインを、そのままプロトタイプに落とし込む機能があると、プロトタイプを作る手間が省けるため便利です。チームメンバーで共有するデザインから開発までを一人で行うのであれば不要ですが、チームでアプリ開発をするのであれば、インターネットを介した共有機能がほしいところです。XD、Sketchなど利用人口の多いUIデザインツールには、この共有機能が備わっています。共有機能では、デザインやプロトタイプをただ単に「見る」ことができるだけでなく、コメント機能を使って修正要望を出すことが可能です。バージョン管理機能を備えているツールの場合は、修正要望がどのように反映されたかをチェックしたり、見比べたりすることもできます。チーム全体でアプリをブラッシュアップしていくためには、共有機能は不可欠です。アプリUIデザインツールを選ぶ際のポイントではアプリ開発におけるUIデザインツールを選ぶ際、何を基準にすればいいのでしょうか?今回はチームでアプリ開発を行う場合を想定して、選ぶ際のポイントをご紹介していきます。対応OSもしチームに複数のデザイナーがいて、Windows派とMac派に分かれているのであれば、対応OSは十分注意すべき問題です。XDについで2位にランクインしているSketch※は、現段階ではWindowsには対応していません。Windows派のデザイナーがいる場合、SketchなどのWindows非対応ツールは候補から自動的に外れてしまいます。利用しているパソコンのOSにも十分注意して決めていきましょう。Twitterチームでの共有・共同編集のしやすさプログラミングではよくコンフリクト問題に当たることがありますが、チームにデザイナーが二人以上いる場合は、デザイン面でも起こりうる問題です。このようにデザイナーが複数いるチーム編成の場合、共同編集がしやすいツールを選ぶのが良いでしょう。現在、リアルタイムで共同編集ができるUIデザインツールは「Figma(フィグマ)」のみです。この共同編集機能が注目を浴びている、新しい部類のツールです。デザイナーは一人のチームでも、エンジニアやクライアントとも同じデザインを共有するために共有機能は必要です。この場合は共同編集の機会はないでしょうから、クラウド上に保存したデザインやプロトタイプを確認・コメントできる機能を備えたツールを選択するのが良いでしょう。実機確認のしやすさパソコン上でUIデザインを完成させて、いざ実機に写して見たら、なんだかイマイチだなと思ったり、パーツが小さくて操作しにくいなと感じることがあると思います。実機で見た時との印象のズレや、パーツの大きさなどが気になるというのは、必ず起きてくる問題です。いった問題に素早く対処するためにも、簡単な操作で実機確認ができる機能を備えたツールを選ぶことをおすすめします。実機確認が簡単にできると、こまめに確認するくせがつき、結果的に修正時間を短くすることができます。完成したあとに「こんなはずじゃなかった......」と思っても、UIデザインツールであれば簡単に修正はできますが、どうせならキリが良い段階でその都度確認していきたいですよね。アプリUIデザインに最適なツールを紹介それではここからは、アプリのUIデザインに適したツールを紹介していきます。XDXDは、デザイナーなら誰しも一度は触れたことがあるはずのPhotoshopやIllustratorを制作しているAdobeによるUIデザインツールです。正式版の初リリースは2017年と、Sketchよりも後発です。最大の売りは「リピートグリッド」をプラグインなしで使えること。多くのアプリでは、同じデザインの要素を繰り返し並べて使います。いった要素をドラッグ&ドロップで複製し、要素間のマージンも直感的に操作して変更できるのがリピートグリッドという機能です。グリッドレイアウトの作成が簡単にできるため、多くのデザイナーがリピートグリッドのお世話になることでしょう。これと同様の機能は他のツールでも利用できますが、プラグインなどの拡張機能となっています。Adobe製であるため、PhotoshopやIllustratorとの互換性に関しても心配する必要がありません。これまでUIデザインツールを使った事がなかった方も、Photoshopなどに使い慣れているのなら、まずはXDを試してみるのが良いかもしれません。「XDスタータープラン」は無料で使うことができます。円/月(1ユーザー)で提供されています。FireworksというUI作成ソフトウェアの開発終了に伴い注目を浴びました。Adobe製品の開発終了ですから、多くのユーザーが同じAdobeのPhotoshopに移行するかと思われましたが、UIデザインに特化していることや動作の軽さなどに注目が集まり、Sketchを移行先に選ぶ人も多かったのです。たくさんのツールが登場しているUIデザインツールのお手本とも言える存在です。Sketchはプラグインが豊富で、自分に必要な機能を取捨選択して追加していくことができます。Sketch」など、便利なプラグインをインストールすることで、効率よく作業していくことができますよ。ソフトウェアそのものを充実化させてアドオン(プラグイン)の必要性を少なくしようというXDの方針とは真逆の方向性ですね。ひとつ注意したいのは、Windowsに非対応だということです。Windows愛好家には選択肢として絶対に挙げられないのが難点ですね。Sketchは「.sketch」という独自のファイル形式で保存されますが、こちらはXDやFigmaでも開くことができます。FigmaFigmaは2016年に正式リリースされた、ブラウザで動かすこともできるWebアプリケーションです。デスクトップアプリケーションも公開されています。OSに依存せずインストールも不要で、ネット環境があればいつでもどこでもUIデザインができるのが嬉しいですね。Figma最大の特徴は、複数名の開発で圧倒的な力を発揮する「リアルタイム同時編集機能」を持つところ。この機能は2020年3月時点ではFigmaのみが有しています。簡易的ではありますがバージョン管理機能も備えており、どれが最新のデザインなのかが分からなくなり混乱するという問題を防ぐことも可能です。外部のコラボレーションツールと連携せずとも、キャンバス内に直接コメントを書くこともできるため、エンジニアやディレクターからのフィードバック対応もスムーズです。複数名のデザイナーがアサインされているチームや、ペアデザインで進めていきたいプロジェクトでは、このリアルタイム同時編集機能やバージョン管理機能、コメント機能が活きてきます。チームでアプリ開発を進めていくのであれば、UIデザインツールはFigmaを選択するのがおすすめです。DramaDramaはプロトタイピング機能、アニメーション作成機能、UIデザイン機能がひとつのソフトウェアとしてまとめられているツールです。PixelCut社により開発されています。2019年7月にはBetaユーザーを募集していました。FigmaやXDよりも後発で、かなり新しい部類です。動作がとても軽く、限りなく実機に近いプロトタイピングを素早く作成することが可能。アイディアの創出からフィードバックまでのサイクルをスムーズに行うことができます。Sourcetreeのようなインターフェイスの「History」機能で、バージョン管理ができるのも魅力的です。新しいツールであるため機能が不十分であることは否めませんが、公式のロードマップによれば、今後も機能実装を続けていくとのことです。Generation」や「Collaboration」とあります。Generation」機能では、作成したデザインからJavaやC#、Swift、JaveScriptなどのコードを自動生成できる機能ではないかと考えられます。JavaScriptなどのコードを生成するアプリ「PaintCode」を開発しています。これと同等程度の機能を有するのかもしれません。「Collaboration」は、他のツール同様の共有やコメント機能であると考えられます。後発品となるだけあり、他のツールの良いところを組み合わせた強力な機能となるのか、それとも独自路線で来るのかと、実装される日が楽しみですね。今後の展開に注目していきましょう。2020年3月現在、対応OSはMacのみ。実機確認もiOSのみとなり、Androidでの実機確認ができません。Apple社製品愛好家のためのツールとなっています。アプリ開発にUIデザインツールを利用してみようアプリ開発にUIデザインツールは必須ではありません。Photoshopなど従来のデザイン方法でも十分対応可能です。UIデザインに特化したツールを使うことで、アプリ開発はより効率的になります。デザイナーの作業が楽になるのはもちろん、エンジニアやクライアントとイメージを共有したり、フィードバックをもらったりするのも簡単で分かりやすくなります。UIデザインツールは単なるデザインツールに留まらず、よりよいアプリを開発するために、全員の意見をより集めやすくするコラボレーションツールとしての機能も備え始めてきています。あなたのチームにピッタリなツールはどれか、この記事を参考に検討してみてくださいね。