アプリデザインの参考になる海外UI/UXデザイン事例まとめサイト10選

本記事では、3つの切り口でアプリのUI/UXをデザインする際に参考にしたい海外Webサイトをご紹介します。

アプリのUI/UXデザイナーやディレクターはもちろん、アプリの企画を担当している方もぜひ参考にしてみてください。

★UI/UXの意味や違いについてはこちら
UX/UIとは? 言葉の意味やUIとUXの違いをわかりやすく解説 UX/UIとは? 言葉の意味やUXとUIの違いをわかりやすく解説

オンボーディングのUXデザインの参考になる海外Webサイト

「オンボーディング」とは、初めてサービスや製品を使うユーザーがヘルプや説明書を読まなくても使っていくうちに操作方法がわかるように設計する手法のことです。

いかに素晴らしいプロダクトであっても、初めて使用するユーザーにストレスを与えてしまい、すぐにアンインストールされてしまっては意味がありません。

オンボーディングのUXデザインで参考にしたいのが、以下の2つのWebサイトです。

アプリデザインまとめ① User Onboarding

海外の有名Webサービスやアプリのオンボーディングを紹介している「User Onboarding」

User Onboarding」は海外のアプリや有名Webサービスのオンボーディングについて紹介しているWebサイト。

オンボーディングを画面単位で切り分けて、参考になる点と改善が必要な点をピックアップしています。

サンプルはスライド形式で表示されます。簡単な英語で解説されているので、英語が苦手な人でも気軽に読むことができます。

オンボーディングが紹介されている主なスマホアプリは以下の通りです。

★オンボーディングが紹介されている主なスマホアプリ

Instagram
Pocket
Snapchat
WhatsApp

オンボーディングのUXデザインの正解は1つではありませんが、海外の専門家の丁寧な指摘を読むことで実践ベースの知識を得ることができるでしょう。

アプリデザインまとめ② First Time Experiences

アプリのサンプル数が豊富な「First Time User Experiences」

First Time User Experiences」は、初めてアプリを利用したときのユーザー体験(UX)を解説したWebサイトです。

前述の「User Onboarding」と異なる点は、アプリ画面をひと通り紹介したあとにまとめて解説していること。参考にすべき長所を「The good bits」、改善したほうがいい短所を「To be improved」と分けてまとめています。

アプリに限定して紹介しており、サンプル数が豊富なのが「First Time User Experiences」の特徴。これから設計しようとしているアプリによく似たサンプルも見つけられるかもしれません。

アプリを探すときはトップページをスクロールするよりも、アーカイブページから探すのがおすすめです。

➡︎デジタルサービスの価値を引き出すUX/UIデザイン

目的に合ったUI/UXデザインを探したいときに参考になる海外Webサイト

これから設計するアプリにマッチしたUI/UXデザインのサンプルを探すとき、膨大な情報のなかから参考例を見つけるのは大変ですよね。

そこで、ここではUI/UXデザインのサンプル探しに役立つWebサイトを紹介します。

アプリデザインまとめ③ UX Archive

アクションごとのアプリ内の導線設計の参考になる「UX Archive」

アプリ内の導線設計をするときに参考にしたいのが「UX Archive」。

Searching、Signing upといったユーザーのアクションごとに、アプリ内の導線を画面単位で紹介しています。

アクション・画面ごとの詳しい解説はありませんが、有名アプリを網羅しているので「あのアプリで〇〇するときってどんな感じだったっけ?」と思ったときに、すぐ確認することができます。

アプリデザインまとめ④ pttrns

画面の目的に沿ったUIを探したいときにおすすめの「pttrns」

ユーザーアクションではなく、その画面の目的に沿ったUIを探したいときにおすすめしたいのが「pttrns」。

iPhoneやiPadのUIパターンがまとめられており、「Find Friends 」「Reecipe」など細かくカテゴリー分け設定されているので欲しい情報がすぐに見つかります。

➡︎デジタルサービスの価値を引き出すUX/UIデザイン

アプリのUIデザインの参考になる海外Webサイト

UIデザインを考えていて、アイデアが煮詰まって進まなくなってしまった…という経験がある人も多いと思います。

ここでは、アイデアの素となるインスピレーションを得たいときに参考にしたいUIデザインまとめサイトを紹介します。

アプリデザインまとめ⑤ Dribbble

UIデザインの定番サイト「Dribbble」

UIデザインの参考になる定番サイトといえば「Dribbble」。

サイト内で「UI」「Mobile」「interaction」のように検索すると、さまざまなデザインのサンプルが表示されます。

眺めているだけでもワクワクするようなデザイン例が多数掲載されているので、日常的にチェックしてアイデアをストックしておきましょう。

アプリデザインまとめ⑥ Pinterest

日本語対応もしているデザインサンプルの定番サイト「Pinterest」

Pinterest」はデザインに関心がある人にはなじみのある定番サイト。Dribble同様に投稿数が多く、参考になるUIデザインのサンプルが多数掲載されています。

日本語にも対応しているので、さまざまなキーワードで検索することができます。ただし、デザインサンプル数があまりにも多いため、検索の利便性が低いという難点も……。お目当てのサンプルが見つかるまで根気よく探してみてください。

アプリデザインまとめ⑦ UPlabs

ビジネスロードマップではKGIに関連性が高い要素を見つけ出せます

UPlabs」は、iOSのUIデザインを紹介しているWebサイト。更新頻度の高さが特徴で、新しいデザインサンプルが毎日追加されています。

日本では見かけないような斬新なデザインのアプリも数多く紹介されており、眺めているだけでも新しいインスピレーションを得ることができるでしょう。ブックマーク推奨のおすすめサイトです。

アプリデザインまとめ⑧ Behance

クリエイター向け無料SNS「Behance」

Behance」はアドビシステムズが運営するクリエイター向けのSNS。ポートフォリオとしても活用できるので、国内外のさまざまな分野のクリエイターに利用されています。

サイト内検索で絞り込めば目的に近いデザインサンプルを探し出すことができます。また、アプリからPCサイトまで幅広く取り扱われているのも特徴です。

海外デザイナーの投稿には斬新なアイデアやコンセプトを取り入れたものが多いので、新しい表現の参考として活用してみてください。

アプリデザインまとめ⑨ Awwwards

Webデザインの最新トレンドをキャッチできる「Awwwards」

Awwwards」は世界中のデザイナーに利用されているホームページをカテゴリ別に掲載したギャラリーサイト。

最大の特徴は投稿されたデザインに対してユーザーによる採点・投票が行われ、順位付けされていること。「デザイン」「クリエイティビティ」「ユーザビリティ」「コンテンツ」といった4つの項目で採点されています。

日次・週次・月次・年次で順位付けが行われており、掲載情報は常に新鮮。グラフィックが優れたサイトはもちろん、斬新な動き・アニメーションを盛り込んだサイトも多数掲載されています。Webデザインの最新トレンドを知るのに最適なサイトです。

アプリデザインまとめ⑩ Material Design

「Material Design」はGoogleが推奨するデザイン手法

Googleが推奨する「Material Design(マテリアルデザイン)」のガイドライン。

マテリアルデザインの特徴は、ITプロダクトにおいてUIデザインの指針となる体系的な手法であること。ガイドラインに則って制作するだけで、世界観とユーザーの操作に一貫性を持たせることができます。特に、ワイヤーフレーム作成時に活用すると便利です。

➡︎デジタルサービスの価値を引き出すUX/UIデザイン

まとめ:海外のデザイントレンドを参考にして、担当アプリのUI/UXデザインに活かそう

海外のデザイントレンドを参考にして、自身が担当するアプリのUI/UXデザインに活かそう

海外のデザイントレンドを参考にして、自身が担当するアプリのUI/UXデザインに活かそう

アプリのUI/UXデザインをするときに参考にしたい海外Webサイトを紹介してきましたがいかがでしたか?

ぜひ今回紹介したサイトを活用してUI/UXデザイン設計のヒントに繋げ、アプリ開発に活かしてみてください。

ただし、デザインサンプルまとめサイトから得られる情報は非常に断片的なもの。単に摸倣するのではなく、実際に自分でアプリをダウンロードしてみて自身のユーザー体験をメモしておくことも重要です。

日頃からアプリを使用しているときに、「操作感が気持ちいいなぁ」「これは使いにくいな」などといった感想をメモに残しておくことで、よりリアルでユーザーに寄り添ったデザインを作ることができるようになるでしょう。

➡︎デジタルサービスの価値を引き出すUX/UIデザイン

アプリ・Webサービスの開発を検討されている方へ

お客様からのアプリやWebサービスの開発に関するお問い合わせ・お見積もりのご依頼を随時受付しております。ご興味のある方は下記のボタンからお気軽にご相談ください。

お問い合わせはこちら