28
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

dots.女子部Advent Calendar 2016

Day 2

スマホアプリのギャラリーサイト5選

Posted at

スマホアプリのUIを作る時に参考になるギャラリーサイトの中でも特に良いと思ったサイトを集めてみました。

Pttrns

スクリーンショット 2016-11-27 14.15.12.png

iPhone, iPad, Apple Watch, Androidの4つに対応しているという時点で素晴らしいのですが、掲載量、カテゴリの充実性という点でも優れています。左メニューでプラットフォームとカテゴリ(画面の種類)を選択し、右メニューで並び替えやタグでの絞り込みをすることができます。

スクショにオンマウスをするとアプリ名、付いているタグ、カテゴリーが表示されます。クリックするとそのアプリの他のスクショを見ることができます(左上にアプリ名、アイコンが表示されています)。

スクリーンショット 2016-11-27 14.23.12.png

スクリーンショット 2016-11-27 14.35.21.png

また、画面左上のDESIGN RESOURCESというタブをクリックすると、デザインに関する記事を閲覧することができます。

スクリーンショット 2016-11-27 14.42.36.png

Mobile Patterns

スクリーンショット 2016-11-27 14.47.26.png

こちらもカテゴリ(画面の種類)ごとにたくさんのスクショが存在するサイトです。プラットフォームはiOS, Androidがあります。スクショをクリックすると拡大表示されます。

見た感じ、かなり古いスクショも存在しているようです(おそらくiOS6時代と思われるスクショもありました)。

MobileMozaic

スクリーンショット 2016-11-27 15.17.14.png

iPhone専用のギャラリーサイトです。カテゴリ(アプリの種類)で絞込ができます。アプリごとにスクショを見ることが出来て良いです。アプリ使用中の画面画像だけでなく、AppStoreに掲載している画像も載っているようです。

スクリーンショット 2016-11-27 15.14.58.png

CAPPTIVATE.co

スクリーンショット 2016-11-27 15.23.33.png

iPhoneアプリでアニメーションに困ったら参考にすると良いサイトです。マウスオーバーするとアニメーションが始まります。右上のプルダウンでパターン(画面の種類)、コンポーネントで絞り込むことができます。

UX Archive

スクリーンショット 2016-11-27 16.05.45.png

単純にiPhoneアプリのスクショが見られるというのではなく、ある行動に沿って見ることができます。画面左上のTasks、Appsから選択すると以下のような画面になります。

スクリーンショット 2016-11-27 16.12.00.png

上記の場合は「購入」という行動に対して各アプリがどのように設計しているのかをスクショを通じて知ることができるようになっています。導線に迷った時はぜひ参考にしたいサイトです。

28
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?