WebサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。また、悩んだ・困ったときに見るだけでなく、お気に入りのギャラリーがあればブックマークやフィード登録などして普段から空いた時間に目を通すことでデザインの引き出しも増やせますね。
Calltoidea
細かいコンポーネントからページ全体のレベルまで様々なデザインがまとめられています。
カテゴリーを表すアイコンもわかりやすく参考デザインのキャプチャも大きくて見やすいので、個人的によく見るギャラリーサイトのひとつです。
Collect UI
アクセスしてすぐ目に飛び込んでくる数字にもあるように、沢山のデザインが掲載されています。
サイドに表示されているようにカテゴリーも100種類以上で細かく豊富に用意されており。検索機能もあるので目的のデザインも探しやすいと思います。
Inspiration UI
こちらも細かくタグ付けがされていて、シンプルなデザインでキャプチャも大きいので見やすいギャラリーです。
UIDB.io
基本的に検索して目的のUIを探すという作りになっていて、少なめですがタグ付けもされています。
キャプチャが大きく見やすいのも特長です。
UIBox
こちらも検索して目的のUIを探すという感じになっていますが、タグが用意されているのでそれを利用して探せるようにもなっています。
UI Temple
掲載数は少なめですが、キャプチャも大きく見やすいギャラリーで、カテゴリー分けタイプやカラーなど細かくされています。
Little Big Details
他のUI関連のギャラリーとは少し異なり、全体的に細かい部分をピックアップしている感じのものになります。
とにかく細部までこだわりたいときなど、良いヒントが見つかるかもしれませんね。
PatternTap
掲載数も多く、スタイル別・タイプ別・カラー別・デバイス別というようにカテゴリー（タグ）分けもかなり細かく豊富に用意されています。
UIPatterns.io
そこまで掲載数は多くないですが、レイアウト・ナビゲーション・フォームなどよく利用されるコンポーネントなどはひと通りあります。
Ui Parade
カテゴリー分けもしっかりされていて、キャプチャも大きく見やすいギャラリーです。
また、数は少ないですがアニメーションGIFを用いてアニメーションの動きまで確認できるようにしているデザインもあります。
Dribbbleにアップされていたものから選ばれているのでハイクオリティなものが多いです。
UI Movement
こちらもDribbbleやBehanceにアップされていたものが中心なのでクオリティ高いものが多く、デザイン面だけでなくアニメーションの参考になるものも数多くあります。
UpLabs
大きくAndroid・iOS・Webの3カテゴリーに分けており、様々なタイプのUIが掲載されています。
Pttrns
モバイルサイトやアプリのUIデザインを集めたギャラリーで掲載数もかなり多いですが、カテゴリーやタグで管理されているので目的のUIが探しやすいと思います。
lovely ui
同じくモバイルやアプリのUIデザインに特化したギャラリーで、iPadも用意されています。
Inspired UI
こちらもモバイルやアプリのUIデザインに特化したギャラリーで、パーツだけでなくiPhone・iPad・Androidと各デバイスでもカテゴリー分けされています。
また、キャプチャが大きく見やすいのも特長です。
Use Your Interface
アニメーションの動きを参考にしたいときに便利なギャラリーサイトです。
button、hover、loader、typography、navigationなどタイプ別で探すこともできます。
CAPPTIVATE.co
iOSのアニメーションに特化したギャラリーサイトです。
実際にアニメーションされる動きも見ることができ、キャプチャも大きめなので見やすいです。
UX Archive
こちらはサイト名にもあるように、UIだけでなくUXについて参考になるギャラリーです。
それぞれどのようなフローになっているか、どのようにデザインが変化されていくのかがわかりやすいです。
Code My UI
単純にUIデザインを参考にするだけでなく、気に入ったデザインやアニメーションがあればそれが紹介されていたリンク先で実装するコードを確認したりダウンロードすることができます。
Design Patterns on CodePen
最後はCodePenで投稿されているコンポーネントなどをピックアップしてまとめているページで、CodePenなのでクールなアニメーションやデザインがあれば見た目を参考にするだけでなく、実装コードまでを確認したりすることができます。