どうも、UIデザイナーのYOSOSHIです。今回は実際にアプリのUIデザイン画面を作成する時に、役に立つリンク集をまとめたいと思います。
はじめに
アプリデザイン、UIデザインの領域に、さまざまな知識が求められます。ある程度把握しておかないと、実際にエンジニアに実装してもらう時色々な問題が起きてしまいます。
例えば、出来上がった画面はそもそも実装できるかどうか。コンポーネント・フォントサイズが適切になっているかどうか。違うデバイスの画面サイズは考慮されているかどうか。配色は見やすいかどうか。
覚えることが多く、全ての知識を脳内にストックしておくのはもちろんいいですが、覚えきれない場合があります。そのため、この記事は手元に参考となるサイトをまとめてみました。いつでも確認できるようにしましょう。
また、デザインする上に最低限の知識も必要ですが、前提としてインプットしておくものは今回の記事では割愛されています（OOUIや、デザインの原則、デザインの心理学など）。
OSのデザインガイドライン
Human Interface Guidelines
Material Design
私が固定タブにして常に開きっぱなしのサイトです。iOSとAndroid両方のOSガイドラインになります。アプリデザインで超重要で、なくてはならない存在ですね。
このコンポーネントは、実際どのような働きなのか、使い方はどのように推奨されているのか、また、Material Designなら細かくサイズなどのガイドラインもあるので、かなり助かります。
ただ、コンポーネントも両OS合わせると、かなりの量になります。全て覚え切らないので、サイトを手元に用意しておくと、確認したい時は辞書として使うと便利です。
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表
iOSのアプリデザインでかなり役に立つ記事です。毎年ちゃんと最新情報がアップデートされています。
配色関連
WhoCanUse
色のコントラスト比・アクセシビリティのチェックができるサイトです。
アプリデザインでもWEBデザインでも、色のコントラスト比が大事です。文字色と背景色それぞれ入力すると、見やすいかどうかの確認とアクセシビリティのチェックが両方できます。配色を考える時にチェックツールとして手元に持っておくと便利です。
Adobe Color
Adobeのサービスで、カラーホイール を使用してカラーパレットを生成できます。配色の参考になります。
Color Picker
同じく、カラーパレットの生成できます。その上、イラストやグラデーションも生成されてざっくりなビジュアルの確認もできます。
アプリ内のビジュアルやイラストなど作る時は便利です。
素材関連
UIデザインを作る時、イラストやアイコンなどの素材を利用する時も多いでしょう。別の記事で無料の素材サイトをまとめましたのでぜひ参考にしてみてください。
アプリ画面集
UIデザインを作る時、結局他のアプリの画面を参考にしてみたりすることもかなり多いと思いますので、アプリ画面のまとめサイトも集めました。
Mobbin
App Fuel
UXArchive
files.design
UX-mov
アプリのUIが動画で見れるギャラリーサイトです。
yui.design
日本のアプリ画面を集めているサイトです（iOSのみ）。
最後に
いかがでしょうか。今回は私のブックマークリスト内の特によく使うサイトをまとめました。
実際UIデザインを作る時、結局都度都度何かを見て参考にしたり、辞書のようにガイドラインなどを見たりします。もしこの記事が役に立っていれば、ぜひシェアをお願いします。
