実践的!アプリのUIデザイナーが常に手元に用意している役に立つリンク集を紹介

どうも、UIデザイナーのYOSOSHIです。今回は実際にアプリのUIデザイン画面を作成する時に、役に立つリンク集をまとめたいと思います。

スポンサーリンク

はじめに

アプリデザイン、UIデザインの領域に、さまざまな知識が求められます。ある程度把握しておかないと、実際にエンジニアに実装してもらう時色々な問題が起きてしまいます。

例えば、出来上がった画面はそもそも実装できるかどうか。コンポーネント・フォントサイズが適切になっているかどうか。違うデバイスの画面サイズは考慮されているかどうか。配色は見やすいかどうか。

覚えることが多く、全ての知識を脳内にストックしておくのはもちろんいいですが、覚えきれない場合があります。そのため、この記事は手元に参考となるサイトをまとめてみました。いつでも確認できるようにしましょう。

また、デザインする上に最低限の知識も必要ですが、前提としてインプットしておくものは今回の記事では割愛されています(OOUIや、デザインの原則、デザインの心理学など)。

OSのデザインガイドライン

Human Interface Guidelines

https://developer.apple.com/design/human-interface-guidelines/guidelines/overview

Material Design

Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experienc...

私が固定タブにして常に開きっぱなしのサイトです。iOSとAndroid両方のOSガイドラインになります。アプリデザインで超重要で、なくてはならない存在ですね。

このコンポーネントは、実際どのような働きなのか、使い方はどのように推奨されているのか、また、Material Designなら細かくサイズなどのガイドラインもあるので、かなり助かります。

ただ、コンポーネントも両OS合わせると、かなりの量になります。全て覚え切らないので、サイトを手元に用意しておくと、確認したい時は辞書として使うと便利です。

iPhone/iPad/Apple Watch解像度(画面サイズ)早見表

iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita
サイズ 端末      ポイント Retina ピクセル 倍率 デバイス アスペクト比 3.5 iPhoneiPhone 3GiPhone 3GS 320x480 1 320x480 1 320x480 2:3 3....

iOSのアプリデザインでかなり役に立つ記事です。毎年ちゃんと最新情報がアップデートされています。

配色関連

WhoCanUse

WhoCanUse
A tool that brings attention and understanding to how color contrast can affect people with different visual impairments.

色のコントラスト比・アクセシビリティのチェックができるサイトです。

アプリデザインでもWEBデザインでも、色のコントラスト比が大事です。文字色と背景色それぞれ入力すると、見やすいかどうかの確認とアクセシビリティのチェックが両方できます。配色を考える時にチェックツールとして手元に持っておくと便利です。

Adobe Color

Adobeのサービスで、カラーホイール を使用してカラーパレットを生成できます。配色の参考になります。

Color Picker

Color Picker — A handy design tool from Color Supply
Use the color wheel to select a style you like. Then pick a hex code.

同じく、カラーパレットの生成できます。その上、イラストやグラデーションも生成されてざっくりなビジュアルの確認もできます。

アプリ内のビジュアルやイラストなど作る時は便利です。

素材関連

UIデザインを作る時、イラストやアイコンなどの素材を利用する時も多いでしょう。別の記事で無料の素材サイトをまとめましたのでぜひ参考にしてみてください。

2023年最新!UIデザインで役に立つイラスト素材サイトまとめ
アプリデザイン、UIデザインで役に立つイラスト素材サイトをまとめました。現役のUIデザイナーが厳選する素材サイトで、さまざまなUIデザイン制作場面で活用できます。

アプリ画面集

UIデザインを作る時、結局他のアプリの画面を参考にしてみたりすることもかなり多いと思いますので、アプリ画面のまとめサイトも集めました。

Mobbin

Browse iOS Apps | Mobbin - The world’s largest mobile & web app design reference library
Browse and search across hundreds of iOS apps for UI & UX research.

App Fuel

User flows | App Fuel
Supercharge your benchmark with user flows from the best apps. Get app screenshots and our analysis of UX/UI, for free. Made for product designers & indie maker...

UXArchive

UXArchive - Made by Waldo
UXArchive the world's largest library of mobile user flows. Be inspired to design the best user experiences.

files.design

Mobile App Templates, Wireframes, Flowcharts for Sketch, Figma and XD — Design Files

UX-mov

UX-mov | アプリのUIが動画で見れるギャラリーサイト
UX-movは様々なアプリのUIを動画で集めたギャラリーサイトです。

アプリのUIが動画で見れるギャラリーサイトです。

yui.design

yui.design
yui.designはUIデザイナーのためのリファレンスサービスです。実務で参考になるデザインのみを集めました。日頃のUIデザインの参考にしてください。

日本のアプリ画面を集めているサイトです(iOSのみ)。

最後に

いかがでしょうか。今回は私のブックマークリスト内の特によく使うサイトをまとめました。

実際UIデザインを作る時、結局都度都度何かを見て参考にしたり、辞書のようにガイドラインなどを見たりします。もしこの記事が役に立っていれば、ぜひシェアをお願いします。

スポンサーリンク
スポンサーリンク
トップへ戻る