スマートフォンのUIの参考サイトまとめ


こんにちは。半澤です。
主にUIやデザインまわりを担当しています。
初回の投稿は、私がよく見ているおすすめのデザイン参考サイトを紹介したいと思います。

アプリUIの参考サイト

Mobile Design Pattern Gallery



あの「モバイルデザインパターン」の元となったサイト。
デザインパターンの参考といえばこれ。
基本的なパターンがカテゴリに分けられていて、基本的なパターンの参考を探したいならまずはコレ。
アンチパターン(≒使うべきではないレイアウト)に対しても明示されています。

pttrns(iOS限定)





画面ごとに細かくキャプチャが取られており、デザインパターンの参考になります。
海外のアプリが中心でありながら、誰もが名前を聞いたことあるような
メジャーなアプリばかりを取り上げていますので、
信頼出来る参考資料として取り扱うことができます。

android app patterns





androidのデザインパターンを集めたサイト。
使い方はpttrnと同様といったところ。

dribble > “UI”で検索





みんなだいすきdribble。
UIで検索すると、世界中のデザイナーが作ったUIの実験なり事例なりを見ることができます。
とはいえ、質感や作りこみをアピールしている投稿が多いので、
デザインパターンの参考というよりは、しつらえの参考として使うことが多いです。

pinterest > “UI”で検索





これも上記と同様、しつらえの参考として。

iOSPRATIONS




これも上記と同様、しつらえの参考として。

公式ドキュメント

日々の参考や、デザインとっかかり、
あるいは創作のテンションを上げるのは上に挙げたようなサイトがおすすめなのですが、
体系的に学ぶのなら、以下の2つはマストです。
ちまちま読むのがおすすめかと思います。
とはいえ、何かサービスやらアプリの本格的な制作の前には一読しておきたいですね。。

iOSヒューマンインターフェイスガイドライン(公式)

https://developer.apple.com/jp/devcenter/ios/library/documentation/Mob… PDFファイルを開く

android design pattern(公式)


※まだ読み途中…

+α スライド

Android Design – AndroidのUI/UXデザイン


Androidのデザインパターンについて、公式ドキュメントを噛み砕いた形で
わかりやすく紹介しているスライドです。

他書籍

以下の2点は手元においておくと便利です。

モバイルデザインパターン― ユーザーインタフェースのためのパターン集

iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン

次回は、個人的にAndroidのデザインパターンに興味があるので、
まとめた上で紹介出来ればなーと思いつつ、
UI周りに関して何がしかご紹介出来ればと思っております。

この記事に対してコメントを書く