Webサイトやアプリケーションの制作ではかかせないUIデザインツール。様々な機能があり、制作時間を短くしてくれる便利なツールです。
ツールの名前は知っていても、「違いがよくわからないから選びにくい」とお困りではありませんか？この記事では、おすすめのUIデザインツールの機能や特徴を解説しています。
「そもそもUIデザインツールって何？」という方でも大丈夫！わかりやすく解説していきますので、ぜひ参考にしてみてください。
UIデザインツールは下記の3つ以外にもたくさんありますが、今回は日本で使われている代表的なツールをピックアップしました。それぞれのツールがどんな人におすすめか、簡単にご紹介します。
Adobe製品をすでに利用している人、日本語対応のツールを利用したい人
複数人で、リアルタイムにデザイン作業をおこないたい人
Mac OSを利用している人、豊富なデザイン素材やプラグインを使いたい人
それぞれのツールの詳細は後半で解説していますので、気になる方は目次からジャンプしてみてくださいね。
UIデザインとは何かを簡単に説明すると、Webサイトやアプリを利用しているユーザーに「見やすくて、使いやすい！」と感じてもらえるような設計(デザイン)のことです。
例えば、使い方を調べなくても感覚的に操作できるアプリがありますよね。そのようなアプリやWebサイトは、UIデザインが優れていると言えます。
UIデザインの設計は画像のような手書きでも問題ありません。しかし、修正や共有をするには不便でとても時間がかかってしまいます。そのような手間を一気に省いてくれるのが、UIデザインツールです。
デザインのしやすさはもちろん、スマホで同時に確認できる機能や簡単に外部の人とデータを共有できる機能が付いていて、制作時間を大幅に短縮できます。
これからご紹介するUIデザインツールは基本的な機能面で言うとどれも忖度がなく、どれも素晴らしいツールです。それぞれの大きな特徴と対応環境、料金や注意点をまとめました。
参考：Adobe XD
Adobe XDは、すでにAdobe製品を使ったことがあるならとても扱いやすいツールです。日本語表記に対応していますので、初心者でも使いやすいツールです。FigmaやSketchは英語表記のみの対応ですので、英語が苦手な方でも安心して使えますよ。
【対応環境】
インストール版：Windows・Mac
スマホアプリ版：Android・iOS
【料金】
スタータープラン（個人用）：無料
単体プラン（小規模グループ向け）：月額1,180円（税別）
コンプリートプラン（その他のAdobe製品も利用可能）：月額5,680円（税別）
【注意点】 Adobe XDでは2021年1月現在、外部リンクを挿入する機能はないようです。Figmaでは外部リンクを挿入可能です。
参考：Figma
Figmaの一番の強みは、リアルタイムで共同編集ができることです。複数人で制作する場合には、とても重宝する機能です。ブラウザ版も用意されているので、ダウンロード不要で利用できます。URLさえ共有すれば、どんなデバイスからでも閲覧・編集が可能です。
【対応環境】
インストール版：Windows・Mac
ブラウザ版、スマホアプリ版：Android・iOS
【料金】
スタータープラン：無料
プロフェッショナルプラン：月額15ドル、または月額12ドル(年間契約)
オーガナイゼーションプラン：月額45ドル
【注意点】
Figmaで作成したデータはクラウド上で保存されますが、ローカルデータに書き出すことも可能です。書き出されたデータは『.fig』というFigma独自の拡張子で保存されます。
『.fig』のファイルはFigmaのみでしか開けませんが、フリープランのアカウントでもファイルの開封が可能です。他のデザインツールとの互換性はありませんので注意しましょう。
参考：Sketch
Sketchは、UIデザインツールの先駆けとなった存在でもありますので、検索をすれば解説サイトや動画をたくさん見つけられるところが嬉しいポイントです。初心者でも使いやすいデザイン素材やプラグインがたくさん用意されていますよ。
【対応環境】
インストール版：MacOS
ブラウザ版、スマホアプリ版：iOS
【料金】
個人向け：99ドル（一回払い）
チーム向け：月額9ドル、または年間99ドル(※無料トライアルあり)
【注意点】
MacOSのみに対応しているので、Windowsユーザーがチームにいる場合は注意しましょう。また、日本語表記に対応していませんので機能などはすべて英語表記になってしまいますが、比較的わかりやすいデザインです。チュートリアル動画も用意されています。
＼一流デザイナーのスキルが身に付く／
おすすめのUIデザインツールについて解説しました。もしツールに迷っているなら、無料で使えるAdobe XDやFigmaから利用してみるのがおすすめです。慣れてきたら、特徴に合わせてツールを使い分けてみるのも良いでしょう。
独学では難しい…と感じたらぜひCodeCampへ！まずは無料体験でプログラミングの面白さを体感してみてくださいね。
