アプリ開発で参考にしておきたい UI デザインパターンまとめサイトのまとめ

業務や個人でのアプリ開発で、UI デザインを考えるときに参考にできそうなサイトを紹介します。なかなか個性的・奇抜だったり、少し古い UI が混ざってたりしますが、インスピレーションを働かせる良い刺激になります。

tumblr 多めです。

## Behance

> https://www.behance.net/

Adobe のポートフォリオサイトです。
モバイルデザインのみならずファッションやグラフィックデザインなど、様々なコンテンツが登録されています。

このサイトでは **Creative Field** という名前でカテゴリ分けされており、アプリ開発においては [Interaction Design](https://www.behance.net/search?field=51&content=projects&sort=appreciations&time=week) や [Web Design](https://www.behance.net/search?field=102&content=projects&sort=appreciations&time=week) あたりが参考になります。

![behance.net](https://qiita-image-store.s3.amazonaws.com/0/35834/7eb3294d-f776-8831-3c4f-9fb6fdf0055c.png)

## Pinterest

> https://jp.pinterest.com/explore/%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%82%A2%E3%83%97%E3%83%AA-939004043528/

Pinterest にも、参考になる画像がたくさんあります。

![pinterest.com](https://qiita-image-store.s3.amazonaws.com/0/35834/c2b5429e-07e8-42e0-29b4-3e1eb12ec096.png)

## Dribbble

> https://dribbble.com/

Behance と同じ、ポートフォリオサイトです。

![dribbble.com](https://qiita-image-store.s3.amazonaws.com/0/35834/7b71d770-a4aa-3ae4-c9a9-6f051a7336c0.png)


## tumblr : Mobile Design Inspiration

> http://inspirationmobile.tumblr.com/

iPhone, Android 両方あります。MaterialDesign もあります。高解像度の GIF 画像を大きくリスト表示しているので、このサイトを開くときは PC が火を噴かないように注意してください...

![inspirationmobile.tumblr.com](https://qiita-image-store.s3.amazonaws.com/0/35834/12687bf3-288d-8e93-ddb0-3015ac6b2c22.png)

## tumblr : the perfect grid

> http://theperfectgrid.tumblr.com

![theperfectgrid.tumblr.com](https://qiita-image-store.s3.amazonaws.com/0/35834/af060b42-db2d-2c8c-2484-3e02ddf5b139.png)

## tumblr : UXPLORE

> http://uxplore.francescobalducci.com

![uxplore.francescobalducci.com](https://qiita-image-store.s3.amazonaws.com/0/35834/405ed4fb-3731-9801-c665-fc5aca0e9bdd.png)

## tumblr : DESIGN DRIPS

> http://designdrips.com

![designdrips.com](https://qiita-image-store.s3.amazonaws.com/0/35834/1b6f7691-8057-9887-1f36-1580b63c2073.png)

## tumblr : lovely ui

> http://www.lovelyui.com/

iPhone, Android ともにあります。MaterialDesign のパターンもあります。

![lovelyui.com](https://qiita-image-store.s3.amazonaws.com/0/35834/02bcf4ce-71d9-6e2e-d595-d91706881b42.png)

## tumblr : ULTRA UI

> http://ui.theultralinx.com/

iPhone, Android があり、 数は少ないですが Mac, Windows, Web のカテゴリもあったりします。更新はあまりないようです。

![ui.theultralinx.com](https://qiita-image-store.s3.amazonaws.com/0/35834/01d9e1aa-281a-f78b-401f-581f29b35e79.png)

## pttrns

> http://pttrns.com/

`Get ad-free experience, access to full archive and more with Premium!` とサイトに書いてあるとおり Premium アカウントでないと、見ることが可能なものが限られます。

![pttrns.com](https://qiita-image-store.s3.amazonaws.com/0/35834/1d55f196-3fec-551b-08f0-20fecf86d618.png)

## Android Niceties

> http://androidniceties.tumblr.com/

Android に特化してます。実際にあるオサレなアプリごとにまとめられていて、非常に参考になりますが、更新はあまりないようです。

![androidniceties.tumblr.com](https://qiita-image-store.s3.amazonaws.com/0/35834/4891a1e8-204f-50d2-aa9f-a7996084e596.png)

## Inspired UI

> http://inspired-ui.com/

更新が止まっているようで、最新トレンドの参考にはなりにくいでしょう。

![inspired-ui.com](https://qiita-image-store.s3.amazonaws.com/0/35834/2fbe4666-de85-5091-9f3d-e89fa7c00341.png)

## Mobile Patterns

> http://www.mobile-patterns.com/

iPhone, Android の UI デザインパターンがあります。ただ、Android に関しては量が少なく、デザインも少し前のものが多いです。更新が止まっているようで、最新トレンドの参考にはなりにくいでしょう。

![mobile-patterns.com](https://qiita-image-store.s3.amazonaws.com/0/35834/11395768-1a25-b602-9b2e-2aa23b4687f1.png)


## capptivate

> http://capptivate.co/

アニメーションパターンをまとめているサイトです。iPhone のみ。更新が止まっているようで、最新トレンドの参考にはなりにくいでしょう。

![capptivate.co](https://qiita-image-store.s3.amazonaws.com/0/35834/8a86dd69-3923-bdd9-d513-be2d506ec1a1.png)