Webデザイナーや、UIデザイナーを目指してUIデザインの勉強を始める人の数が増えてきているように感じますが、最近では色々なツールが登場していてどのツールを選べばいいのか分からないという悩みも増えているような気がします。
今回は、”これから” UIデザインの勉強を始める人に向けて、どのUIデザインツールを選べばいいのかをご紹介したいと思います。
INDEX
UIデザインツールとは？
UIデザインツールとは、Webサイトやスマホアプリなど、デジタルプロダクトのユーザーインターフェース（UI）をデザインするためのツールです。
PhotoshopやIllustratorなどの高機能デザインツールに比べて複雑な機能を削ぎ落としている分、動作が軽快であったり、UIデザインに特化した機能が強化されていたりします。
最近では、プロトタイプ作成が標準機能として提供されているなど、モックアップが簡単に作れるというのものUIデザインツールを利用する大きなメリットの1つです。
どのUIデザインツールを使えばいいの？
最近ではたくさんのUIデザインツールが登場していて、数年前と比べると選択肢の数は確実に増えてきています。これからUIデザインの勉強を始めるという方は、どのツールを選べばいいのか悩むことも多いかもしれません。
もちろん、どのUIデザインツールからスタートしても間違いという訳ではありませんが、初心者に合ったツールを選ぶことでその先の学習や業務をスムーズに行えるはずです。
そのため、初めから自分に合うUIデザインツールを探すのではなく、ツールの使い方をある程度理解して、UIデザインはどのようにして作られているのかが分かってきたタイミングで、自分に合ったUIデザインツールを探し始めるという順番がおすすめです。
最初はAdobe XDから始めるのがおすすめ
Adobe XDは、PhotoshopやIllustratorなど様々なデザイン制作・編集ツールを手掛けるAdobeによって提供されているUI/UXデザインツールです。
なぜXDが初心者の方におすすめできるかというと、下記のような理由からです。
- 無料で使うことができる
- UIデザインツールの基本機能がすべて揃っている
- 使っている人の数が多い
- 他のAdobe製ツールとの連携が強力
- 機能がかなり強化されてきた
- アップデートが頻繁に行われている
デザイナーであれば多くの人が登録している「Creative Cloudコンプリートプラン」に登録している人は追加費用無しで利用することができたり、無料で利用できるスタータープランが用意されているなど、Adobe XDは多くの人にとって利用しやすい環境にあるため、利用者数がが多いという点がおすすめする理由の1つです。
XDは比較的後発のUIデザインツールなので、少し前まで機能が不足していたり、業務で使っている人の数があまり多くないなど、懸念点もありましたが、2019年現在ではUIデザインツールのトップを争うツールとなるまでに進化し、業務でも当たり前のようにXDが使われるようになっています。
周りの人が使っているツールも参考にしよう
もし、周りに同じくUIデザインの勉強をしている人や、チームのメンバーがいる場合は、その人たちと同じツールを選ぶのもおすすめです。
仲間と同じツールを使うことによって、困った時に相談することができたり、便利な使い方を共有し合えばデザインツールのスキルも同時に向上していきます。
お互いにデザインファイルを共有すれば、レイヤー管理や命名規則、コンポーネントの使い方を学ぶことができるというのもメリットの1つです。
慣れてきたらSketchを使ってみるのがおすすめ
Adobe XDはUIデザインツールという括りではありますが、どちらかというとプロトタイプを作るためのツールという側面が強く、「UIデザイン制作」という視点で見るとSketchの方が優れているポイントがいくつかあります。
- コンポーネントの管理が行いやすい
- オーバーライド機能でコンポーネントを使う時も便利
- プラグインの種類がXDよりも豊富
- 公開されているデザイン素材の種類が豊富
- 連携しているサービスが多い
ただし、無料プランでずっと使えるXDに対して、Sketchを利用するためには年99ドルの有料プランに登録する必要があります。
- 年99ドルの有料プランへの登録が必須
- Windowsに対応していない（Macのみ）
XDも仕事で使用する場合は無料プランで使用し続けることは難しいと思うので、XDの有料プランへの移行を検討するタイミングで、Sketchに乗り換えるかどうかを検討するのがいいかもしれません。
ちなみに、どちらかというと海外での支持が強いツールというイメージがあり、ドキュメントやチュートリアルも英語で書かれているものが多めです。
XDの活用方法
ここからは、XDを使ってUIデザインを制作する上でぜひ身に付けておきたい活用方法についてご紹介したいと思います。
UIキットを使う
UIキットとは、画面デザインやレイアウト、さらにパーツごとのデザインなどが集まったデザイン集のようなものです。UIキットのパーツを使ってオリジナルデザインを制作しやすくなるだけでなく、レイヤーの管理方法や名前の付け方など、管理しやすいUIデザインファイルの作り方など、UIキットから学べることはたくさんあります。
また、UIキットのデザインを見ながら隣で0からデザインを真似して作ってみると、マージンや余白の取り方、要素の揃え方などデザインの基本を学ぶこともできますね。
プラグインを使う
XDはプラグインを使って機能を追加したり、拡張したりすることができます。XDの使い方がある程度分かるようになってきたら、プラグインを使って自分の好みに合わせてカスタマイズしてみましょう。
例えば、ダミーテキストやダミーイメージを生成したり、レイヤーを一括でリネームしたり、Googleスプレッドシートのデータをインポートすることができるようになるなど、プラグインによって使い方の幅が大きく広がります。
デザインツールは手段でしか無い
デザインツール戦国時代などと言われたりもしてますが、結局ツールは手段でしかありません。優れたデザインは基本的にどのツールでも作成することができますし、逆にツールを変えたからといってデザインのレベルが急に高くなるということも無いでしょう。
そのため、ある程度デザインのスキルを身に付けるまではあまりツールにこだわる必要は無いと思います。デザインスキルが身についてきたら、それぞれのツールの特徴や長所短所が見えてくるようになり、その時には正しくご自身に合ったデザインツールを選ぶことができるでしょう。
