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

アプリのUI/UXデザイナーやディレクターを担当している方なら、クライアントにより良い提案をするために「最新のデザイントレンドを知っておきたい」と思っている方がほとんどだと思います。

日本のアプリであればアプリストアのランキングなどでデザインサンプルをチェックすることはできますが、日本にいながら海外のトレンドを知る機会はそう多くありませんよね。

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

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

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

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

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

UI/UXまとめ① User Onboarding

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

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

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

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

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

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

Instagram
Pocket
Snapchat
WhatsApp

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

UI/UXまとめ② First Time Experiences

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

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

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

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

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

➡︎モンスター・ラボの開発事例集はこちらから

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

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

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

UI/UXまとめ③ UX Archive

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

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

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

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

UI/UXまとめ④ pttrns

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

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

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

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

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

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

UI/UXまとめ⑤ Dribbble

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

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

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

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

UI/UXまとめ⑥ Pinterest

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

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

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

UI/UXまとめ⑦ UPlabs

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

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

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

UI/UXまとめ⑧ Behance

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

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

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

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

UI/UXまとめ⑨ Awwwards

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

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

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

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

UI/UXまとめ⑩ Material Design

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

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

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

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

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

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

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

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

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

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

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

Related Post

協業することで行内にアプリ開発の知見を残す 〜地方銀行のデジタルトランスフォーメーション成功事例②〜

お客様インタビュー

独自のキャッシュレス決済サービスで地域振興を目指す鹿児島銀行 〜地方銀行のデジタルトランスフォーメーション成功事例〜

お客様インタビュー

WeChat活用とミニプログラム開発の最新事例セミナーに、モンスター・ラボの成都拠点代表が登壇

イベント