UIデザインのツール

練習方法を紹介したところで何を使ってUIを作っていけば良いのかを紹介します。
UIデザインツールとして必要なものはデザインツールとプロトタイピングツールの２つです。
デザインツールは「Sketch」というツール、
プロトタイピングツールは「Invision」というツールをお勧めします。

１つ１つ見ていきましょう。

Sketchという世界標準ツール

「あれ、フォトショップとかイラストレーターは必要ないの？」「てかそもそもSketchてなに？」
と思われるかも知れません。SketchはUIデザインの領域では世界標準とも言えるデザインソフトウェアです。

Sketch https://www.sketchapp.com/

なぜ世界標準なのか。世界亭なプラットフォームになっているFacebookやGoogleのデザイン部門が無料でUIキット（UIを作る上での素材）を配布しているのですがそのファイル形式がSketch推しです。
・Facebookメッセンジャーキット　http://facebook.design/messengerkit
・マテリアルデザインキット(Google)　https://material.io/guidelines/resources/sticker-sheets-icons.html#

SketchはPCやスマホの画面を作るのに特化したツールで、UIデザインをする上でよく使う動作などが簡単に行えます。
英語で日本語標記の対応はないですが、日本でも多くの人が使っていることもありブログでも本でも使い方について解説しているものはいっぱいあります。
自分は最初はPhotoshopがメインだったのですが、新しいものを試そうと思って使い始めたらもう戻れませんでした。

作るスピードが段違いに違うので迷わずSketchから始めるのをお勧めします。（PhotoshopやIllustratorでもUIデザインはもちろん可能ではあります）
料金は最初に約1万で購入、その後数年単位でライセンスのアップデート（1回約7000円）です。今なら購入後2年間は普通に使えるみたいです（17年6月）。
ちなみにアップデートせずとも、ツール自体は使えます。

さらにソフトウェアの起動スピードですが、Sketchと比べると段違いに遅いです。（多少改善しているとは聞きますが）
作業スピードは作業のモチベーションにも影響するので軽い方を個人的にはお勧めします。

逆にPhotoshopやIllustratorでしかできないことは何か。
Photoshopはその名の通り「写真（画像）加工ソフト」で、もともとカメラマンなど写真を扱う人向けのソフトウェアです。
なので画像の”色調補正（色の調整）””画像の合成”などに強いです。高度な画像を使ったグラフィックには向いてます。
Illustratorはその通り「手書きに近いグラフィック作成ソフト」です。ロゴを作成したり、アイコンを作成したり、イラストを描いたりするときにめっぽう強いです。

ただこの２つともUIデザインでは頻度高く出番になることは少ないです。
ロゴやアイコンを作ることはありますが、Sketchでも不可能では全くありません。僕自身、ロゴやアイコンは得意ではありませんがSketchで作成しています。（ちなみにNewsPicksのアプリで使われているアイコンは全て僕がSketchを使って書いたものです）

あくまで個人的意見ですが、デザインソフトはよほど理由がなければSketchをお勧めします。

（唯一の弱点として、入社するデザインチームがSketchを使っていないということがあります。何が問題かというと、ファイルの受け渡しができないこと。
そうなるとAdobe製品を使うことになると思います。学習コストがかかるかというとそういうことでもなく、多少違いますが、書いている３つのソフトは60-70%は使用方法が似ています。）

プロトタイピングツール

プロトタイピングツールとは、作ったデザインをコードを書かなくても動かせるツールです。例えば、画面のリンクを貼ったり、画面の一部をスクロールしても動かないようにしたりできます。
デザインツールで作ったデザインは基本的には「画像」にしかならず、エンジニアリングがないと動作しないのですが、プロトタイピングツールを使うことで「動作したような動きを表現」することができます。

□Invisionの紹介動画（英語）
https://www.youtube.com/watch?v=0qisGSwZym4

プロトタイピングをいつ使うのか。主に他者に見せるときに使います。この連載だと、面接の際に自分の考えたアイデアをプロトタイプにまとめてプレゼンするのは効果的だと思います。
デザインの現場でいきなりコードを書いて自分たちのアイデアがどのように動作するのかはリスクが高いです。なぜならコードを構築するのには幾分時間がかかるからです。
コードに落とす前にイメージ通りに画面が機能するかをチェックするのがプロトタイプです。なので、コードを書かずに画面遷移などを実現できるプロトタイピングツールは重宝されもはや当たり前になりました。

独学で学ぶフローにおいて登場することはほぼないですが、いざ他の人と仕事をするときや、自分のアイデアを見せるときにはぜひ使って見てください。