作る前にチェック!海外のiPhoneアプリのデザイン集サイト18選

iPhoneを開発・発注する前にチェックしたい【海外のiPhoneアプリのデザイン集サイト】を集めた記事です。デザイナーが投稿したサイトや、アプリのアイコンから探せるサイトなどが揃っています。ぜひデザインの参考にしてみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

スマートフォンの普及に伴って、Webサイトをスマートフォンサイト用に対応するのはもちろんのこと、スマートフォンのアプリのリリースを検討している方も多いのではないでしょうか。

ただし、PCのサイトとアプリではデザインが大きく異なるので、自分で作る際、あるいは発注する際にデザインで迷うことはないでしょうか。

 

そこで、今回はiPhoneアプリのデザイン集サイトをピックアップしてみました。海外サイトだけですが、気になるものを今後の参考にしてみてください。iPhoneアプリをデザインする上で重要な、UI(ユーザーインターフェース)の参考にもなると思います。

 

なお本記事は、TechAcademyのUI/UXデザインオンラインブートキャンプの内容をもとに紹介しています。

 

UI Garage

スクリーンショット 2016-03-11 12.02.35

メッセージ画面やログイン画面など、作りたいものに合わせてタグが用意されているサイトです。

404エラー用のUIなどどのアプリでも対応できるほどカテゴリが豊富です。

全て英語で紹介されていますが、海外のトレンドなどを探るのにも役立ちそうです。

UI Garage

 

UI Patterns

スクリーンショット 2016-03-11 12.06.56

このサイトもUI Garage同様、フォームやカレンダーなど作りたいものに合わせてUIを参考にすることができます。

このサイトの特徴は、Web上でUIを操作できるところです。

選択したUIを表示するだけでなく、実際にスマホで操作しているように自分で動かせるので、よりイメージが湧きやすくなるでしょう。

PCでの閲覧をおすすめします。

UI Patterns

 

[PR] スマホアプリの開発で挫折しない学習方法を動画で公開中

UI Movement

スクリーンショット 2016-03-11 12.23.57

毎日5つ程度iPhoneのUIが紹介されているサイトです。

スマホ上で操作している動きも確認できるので、数は少ないですがよりイメージが湧きやすいでしょう。

また、自分が良いと思ったものに投票することもできます。

UI Movement

 

Pttrns

pttrns
常時2300以上のデザインパターンを備えているプラハ発のプロジェクトサイトです。iOS7対応やiPadなどカテゴリ別にすぐに探すことができます。

ユニーバーサルインターフェイスのテイストで視覚的に訴えるシンプルな特徴のものを揃えています。

Pttrns

 

Design patterns

UIPatterns
細かくカテゴリ分けされているのでニーズに即したデザインへと最短でアプローチ可能なサイトです。

海外デザインの王道を行くようなシンプルでスタイリッシュなラインナップが常にアップデートされています。

Design patterns

 

UX Archive

スクリーンショット 2016-03-11 12.16.02

このサイトでは、すでにリリースされているアプリを画面ごとに切り取ってアーカイブしています。

まだ海外のアプリしか紹介されていませんが、米版SmartNewsなども掲載されており見ているだけでも面白いでしょう。

普段何気なく使っているアプリでも、こうやって作られているのかと新しい見方ができるようになるかもしれませんね。

UX Archive

 

Mobile Patterns

MOBILE PATTERNS

大胆な構図が印象的なデザインが揃っているサイトです。

画面をクリックすると拡大して表示されるので、デザインをチェックしやすいです。

Mobile Patterns

 

APP DESIGN SERVED

APP DESIGN

世界中にあふれる多彩なビジネスジャンルを網羅する最先端のデザインをカテゴリ別に集めているサイトです。

アプリごとに細かな説明も紹介されています。

APP DESIGN SERVED

 

iOSpirations

iOSpirations

コミカルタッチで美しいアプリUIが閲覧できるサイトです。

アプリのアイコンがギャラリーのようになっており、アイコンをクリックすると詳細が閲覧できるようになっています。

iOSpirations

 

Code My UI

スクリーンショット 2016-03-10 17.54.30

このサイトの特徴は、アプリ上の動きを表現してくれるところでしょう。

ボタンを押した時の動き、スクロールしたときの動きなど今まで見たこともないような動きを紹介してくれます。

とてもアイデアに溢れているので、自分のアプリにも採用したくなるはずです。

Code My UI

 

mobile mozaic

Mobilemozaic
iTunesでアプリを検索しているような感覚で、カテゴリ別・デザイン別にアプリを見つけられるサイトです。

ジャンル分けが細かいのでピンポイントの検索が可能です。

mobile mozaic

 

Ultra UI

スクリーンショット 2016-03-11 12.19.06

一つ一つ独立して掲載されているので、全体像を把握するのは難しいですが、参考になるUIは多いでしょう。

また、3年くらい前によく見たアプリのUIから今よく見るUIまで載っているので、トレンドの流れを感じるはずです。

Ultra UI

 

Mobile Awesomeness

Mobile Awesomeness

細かな説明不要でコンセプトが伝わるようなデザインを集めたサイトです。

どちらかというと落ち着いたテイストのアプリが多くまとめられています。

Mobile Awesomeness

 

dribbble

dribble

世界中のデザイナーが作品を投稿するサイトです。iPhoneアプリのデザインも公開されています。

アプリのデザインを動画でアップしていたり、画像データをアップしていることもあるので、探してみてください。

dribbble

 

Behance

スクリーンショット 2016-03-10 17.55.22

Dribbble同様、一般ユーザーが投稿し合います。

Behanceでは、アートやグラフィックデザインに関するものが多いですが、アプリのUIも十分載っています。

ロゴやアイコンも多く掲載されているので、細部にもこだわりたい人にはおすすめです。

Behance

 

lovely ui

lovely ui
フェミニンなデザインを中心に集めたデザイン集サイトです。

女性向けのアプリをデザインする際に参考になりそうです。

lovely ui

 

UI OH MY

スクリーンショット 2016-03-11 12.23.12

InstagramやGoogle Mapsなどすでに使われているアプリの画面遷移図が掲載されています。

また、iPhoneだけでなく、Androidも同時に見ることができます。

UIの種類もカテゴリの種類も多いので、参考にしてみてください。

UI Oh My

 

100 Days UI

スクリーンショット 2016-03-11 12.27.48

UI/UXデザイナーのNechita Paul Flaviusさんという方が100種類のUIを100日間で紹介するというプロジェクトです。

ログイン時の画面やアプリのタイムラインなど種類豊富なUIを紹介してくれています。

どんなパーツを置いているのかもアプリ開発において役立つでしょう。

100days UI

 

いかがでしたか?

同じように、スマートフォンサイトのデザイン集サイトをまとめた記事もあるので、合わせて参考にしてみてください。

[お知らせ]TechAcademyでは初心者でもiPhoneアプリのデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。