スマートフォンサイト・アプリのUIデザインに特化したギャラリー参考サイトまとめ(随時更新)

 2018.05.02  2018.09.04

この記事では、スマートフォン(iPhone/Android)に特化したサイトやアプリのUIデザインを集めたギャラリーサイトをご紹介します。

スマートフォンの利用率は年々増加し、Googleがモバイルファーストインデックスを発表したりと、Webサイトのスマートフォン対策はもはや必須となっています。 スマートフォンの歴史が浅い分、サイトもアプリもまだ試行錯誤的な状況ではあると思いますが、ここでご紹介する参考サイトで日々インプットをして、引き出しを増やしておきたいですね。

気になるデザインを見つけたら、iPad Proのノートアプリでデザインのアイディア帳を作るのもオススメです。以下の記事では、iPad Proのノートアプリを使ったスクラップブックの作り方を説明しています。

国内のサイト

Mobile web design gallery

sps collection

カテゴリーや色ごとに検索できます。ブックマーク機能あり。よく更新されています。

AGT

AGT

画像上でマウスオーバーするとスクロールが始まり、全画面見られるのがありがたいです。詳細ページでも全画面のキャプチャが載ってます。

iPhoneデザインボックス

iPhoneデザインボックス

詳細ページでは、スマートフォンとデスクトップのデザイン画像が同時に確認できます。

Web Design Clip [S]

Web Design Clip [S]

QRコードが付いているので、気になるサイトがスマートフォンですぐに確認できます。

App Screenshot

App Screenshot

この記事の趣旨からはちょっと外れますが、人気のiPhoneアプリの紹介画像を集めたサイトです。アプリのスクリーンショットだけではなく、スクリーンショットを使ったデザインやコピーはASO(App Store最適化)対策の勉強になります。

海外のサイト

UI Garage

UI Garage

デスクトップも含まれていますが、最近のデザインが多いのでトレンドも一緒に確認できます。

Pttrns

pttrns

モバイルに特化したデザインパターンを集めているサイトです。人気度・追加日・タグでソートできます。有料会員になると全アーカイブにアクセスが可能になり、広告削除や検索機能を利用できるようになります。

Inspired UI

Inspired UI

モバイルアプリに特化したUIデザインパターンを集めたサイトです。各カテゴリーとiPhone・iPad・Androidでソートできます。

MOBILE PATTERNS

Mobile Patterns

こちらもモバイルに特化したUIパターン集です。画像をクリックするとモーダルウィンドウで拡大画像が表示され、画面移動がないので素早く確認できます。iPhone・Androidでソート可能。

UpLabs

UpLabs

AndroidとiPhoneで画像を検索できます。日々のインスピレーションに!

Collect UI

Collect UI

様々なUIをページやカテゴリごとに集めたサイトです。デスクトップも含まれていますが、最新のデザインに触れることができます。

lovely UI

lovely UI

Android、iphone、ipadでソートできます。

MOBILE MOZAIC

Mobile Mozaic

iPhoneアプリのデザインを集めたサイトです。サイトやページの種類ごとに検索が可能で、詳細ページではアプリの画像が複数見られます。

Android Niceties

Android Niceties

Androidのアプリのデザインを集めたサイトです。Androidに特化したサイトは珍しいので貴重ですね。

レスポンシブ

レスポンシブデザインで、モバイルとデスクトップのデザインが同時に確認できるサイトをまとめました。

Responsive Web Design JP

Responsive Web Design JP

スマートフォン、タブレット、デスクトップのデザインが一度に確認できます。(日本のサイト)

MediaQueries

MediaQueries

4つの画面での変化が確認できます。昔からある老舗のサイトですね。

Foundation Website Showcase

Foundation Website Showcase

Foundationというフレームワークを使用したサイトのデザインを集めたサイトです。私も以前このフレームワークを試したことがありますが、この記事の執筆時点で260サイト以上紹介されているということは、今でも結構人気があるフレームワークなのかな?

パーツやカテゴリーごとにデザインを集めた参考サイトは以下の記事でまとめました。

上記参考サイトではあまりお目にかかれない「サイトマップ」のデザインパターンは以下の記事でまとめています。サイトマップも似通ったデザインになりがちなので、参考までにどうぞ〜。