アプリのUIデザインと配色パターンまとめ（非デザイナー向け）

#はじめに
私は主にiOSアプリのプログラマーなのですが、デザインまで一緒に頼まれる事があります。
デザイナーじゃないので１からデザインをしていくなんて到底無理です。
そんな時にノンデザイナーの方でも良い物を作るために
UIデザインのギャラリーサイトと配色パターンを決める便利なサイトをご紹介致します。
基本他のアプリを<S>真似</S>参考にするといい感じにできちゃうかもしれません。
Web系開発の方も配色パターン等は参考になると思います。


#デザインをする前に
デザインをする前に呼んでおいたほうがいい物
- [ITエンジニアに易しいUI/UXデザイン](http://www.slideshare.net/ksc1213/ituiux-16732374)
- [デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」](http://qiita.com/Yama-to/items/cb7f280b44a14c898418)
- [ノンデザイナーのための配色理論](http://www.slideshare.net/saucerjp/ss-14902681)


#アプリデザイン
##[CAPPTIVATE.co](http://capptivate.co/)
動きのあるカッコいいUIばっかり載っています。
種類別で見ることもできるので便利ですね。
<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/cbe363b8-cd69-3403-35cb-55c9ed1f78fe.png width=400px>



##[Mobile Design Inspiration](http://inspirationmobile.tumblr.com/)
こちらも動きのある超カッコいいUIが揃っています。
<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/c5a66189-0052-13d6-4e0e-c6ea42e2c84d.png width=400px>



##[APP DESIGN](http://www.appdesignserved.co/)
様々なアプリデザインが載っています。
アプリによってUIアニメーションを確認できます。
<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/aea79aec-93be-6c4a-f5fc-bac21b5e5f01.png width=400px>


##[MOBILE MOZAIC](http://www.mobilemozaic.com/)
左のメニューから種類別でUIを検索できるので
ピンポイントのこの機能のデザインを見たいって時に便利です。
<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/88c0460e-56a8-d06a-64fb-dc9ab4875757.png width=400px>


##[Inspired UI](http://inspired-ui.com/)
こちらもカテゴリから種類別でUIを検索できます。
iPhone、iPad、Androidで分けて見ることができます。
<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/60d64df7-e818-79bb-a1b5-f7a76a13a7a3.png width=400px>


##[pttrns](http://pttrns.com/)
こちらも種類別にUIを検索できます。
iOS、Android共に豊富でAppleWatchのUIも載っています。
<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/8f9c0c99-ce07-2d70-df97-c4ebbff7992f.png width=400px>


##[MOBILE PATTERNS](http://www.mobile-patterns.com/)
こちらも種類別にUIを検索できます。
種類も豊富です。
<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/2c78a12c-70c5-3a51-f421-f1a6b7c470d2.png width=400px>


##[AppreciateUI](http://www.appreciateui.com/)
こちらも種類別にUIを検索できます。
アイコンのデザインを見る事ができます。
少し古いUIが多い？
<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/36043303-3264-75a4-1d86-39c80e6ce979.png width=400px>


#配色パターン
##[Adobe Color CC](https://color.adobe.com/ja/)
カラーコード等から配色パターンを自動生成してくれます。
配色パターンも6種類ぐらいから選べて便利です。
<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/e3cafc50-c457-81ab-1a9d-97e504858fd3.png width=400px>
写真をアップしてその写真から配色パターンを生成する事もできます。
<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/ffabb117-7546-dad0-9735-b7327898e0d4.png width=400px>


##[ColorHexa](http://www.colorhexa.com/)
カラーコードから関係する様々な色を表示してくれます。
<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/27a14f8d-8800-27de-c5af-6c53fd08a88a.png width=400px>


##[Paletton](http://paletton.com/)
色を選択すると、配色パターンを自動生成してくれます。
配色の数も１色、２色、３色、４色と設定でき、
生成した配色パターンで実際にWebページのサンプルを表示する事ができます。

<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/eb2b70dd-9493-22de-1a16-e589c3040cd9.png width=400px>


<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/fea772e8-c5fd-4e2b-444c-bc0333e5b678.png width=400px>


##[Paletta](http://paletta.mrk1869.com/)
色を選択すると、調和の取れた色がカラーパレットとして表示されます。
<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/28efd607-e63e-0a6a-e77a-3c8b0dd377a0.png width=400px>


##[NIPPON COLORS](http://nipponcolors.com/)
日本の伝統色が250種類も載っています。
和テイストのアプリ作成時に参考になると思います。
<img src=https://qiita-image-store.s3.amazonaws.com/0/88925/eeb1eb98-e711-eb9e-c627-ad7c9ca1bce2.png width=400px>


#参考にしたサイト
- [デザインの知識がなくても参考になる配色パターン見本サイト12選＋α](http://liginc.co.jp/web/service/other-service/131943)
- [【海外サイト】スマートフォンアプリのデザイン・UI・UXで悩んだときに見る参考サイト](http://unitopi.com/design-app/)
- [アプリ開発で参考にしておきたい UI デザインパターンまとめサイトのまとめ](http://qiita.com/shogo_330/items/3a2293e3549ba698a71c)