デザイナーにおすすめ!アイデアを得るUX/UIサイト46選

Webデザインのインスピレーションが欲しいけど、何から始めたらいいかわからない? この記事はこんな人におすすめです

  • 新サイトのクリエイティブソースを探したい
  • デザインの参考や最新のデザイントレンドについてもっと知りたい
  • 単に美しいデザインを見るのが好き

Eagleチームは、以下のような特徴を持つ、デザイナーのお気に入りのデザインウェブサイトをリストアップしています

  • さまざまなスタイルのWebサイトに必要なインスピレーション、カラー、エレメントを見つける
  • 最新のWeb・インターフェースデザインのトレンドや業界の嗜好を知る
  • 受賞作品の見学でデザイン力アップ
  • 有名デザイナーへのインタビューから得たインスピレーション

これらのウェブサイトをチェックし、ブックマークしてください!

続きを読む:

(英語版)


インスピレーションの素材を効率よく整理する方法とは? 


もっとインスピレーションを求める前に、Muzli Inspiration

画像クレジット: Muzli

画像クレジット: Muzli

Muzliはデザイナーのために設計されたブラウザで、毎日最新のデザインニュースを提供します!ブラウザで新しいサブページを開くと、その日の最新のデザインアイデアや業界ニュースが即座に表示されます。

インスタグラムやフェイスブックのデザイン版のようなもので、非常にリッチで多様性に富んでおり、すべてのデザイナーにとって必須のブラウザであり、日々のリソースとなっています。


2. Pinterest

画像クレジット:Pinterest

画像クレジット:Pinterest

Pinterest(ピンタレスト)は、画像、アニメーション、GIF、流れるようなタイポグラフィーのビジュアルを共有するためのソーシャルメディアです。

デザインの世界で働いていて、知らないわけがありません。 ピンを保存して探せば、さまざまなデザインのインスピレーションを得られるだけでなく、インテリアやレシピ、スタイルなどのアイデアも見つかりますよ。

Pinterestの活用法をもっと見る

ムードボード(Mood Board)を作るの14のおすすめツールとコツ(英語版)

デザイン初心者必読!デザインポートフォリオを際立たせる9つのコツ(英語版)


3. Behance

画像クレジット: Behance

画像クレジット: Behance

Behanceは、デザイナーが自分のクリエイティブな作品を発表し、探求するためのアドビのソーシャルメディア・プラットフォームです。

世界中のデザイナーのオリジナル作品、クリエイティブなプロセス、完成されたデザインコンセプトが見つかります。 検索エンジンを使って、高度なカラーカテゴリなどから、より面白い作品を探しましょう!


4. Dribbble

画像クレジット: Dribbble

画像クレジット: Dribbble

Dribbble は、デザインのためのソーシャルネットワーキングプラットフォームであり、デザインコミュニティにおける最大級のポートフォリオであり、仕事探しや人材募集の場でもあります。

いろいろなデザイナーの作品を真似して、デザイン力を高めることもできますが、ここにある作品はコンセプト的なものが多く、あまり実用的ではないので、実用や参考にしたい場合は、もっと判断や修正をする必要がありますね!


5. Panda

画像クレジット: Panda

画像クレジット: Panda

お気に入りのデザインサイトを一箇所に集め、毎日プレビューしたいですか?Pandaは、Muzliと同様に、デザインサイトやデザインコミュニティをまとめ、訪れたサイトをブラウザのホームにカスタマイズし、ブラウザを使うたびに最高のツール、リソース、インスピレーションを発見できるよう支援します。


6. WebDesign Inspirations

画像クレジット:WebDesign Inspirations

画像クレジット:WebDesign Inspirations

WebDesign Inspirationsは、ウェブデザインのインスピレーションやトレンドを発信する場です。

毎日、世界中のウェブデザインが掲載され、フィルターを使って好みに合ったデザインのインスピレーションを見つけることができます。


7.FLYER ARCHIVE JP

画像クレジット:FLYER ARCHIVE JP

画像クレジット:FLYER ARCHIVE JP

FLYER ARCHIVE JPのウェブサイトは、1999年から現在までの美術展、音楽、映画関連のフライヤーを集めたものです。

これらの美しいグラフィックプリントは、このサイトの運営者が過去にグラフィックデザイナーとして活躍した時のコレクションから、年、配色、スタイル、サイズごとに分類されています。

サイトに入ると、当時の画廊に入ったような感覚になりますが、その魅力は今も健在です。


8. Deviant Art

画像クレジット:Deviant Art

画像クレジット:Deviant Art

Deviant Artは、デザイナーがアイデアを交換するためのコミュニティという点で、Behance、Dribbble、Pinterestと似ていますが、ここのスタイルは、多くのベジタリアンが持つ手描きスタイル、コミックブックスタイル、絵画のコンセプトに近いと思います。


9. Inspiration DE

画像クレジット:Inspiration DE

画像クレジット:Inspiration DE

Inspiration DEは、デザイン、写真、ファッション、インテリア、ウェブデザイン、イラストレーションなどのインスピレーションを得るためのプラットフォームでもあります。

検索で探しているキーワードを入力するだけで、適切なコンテンツが見つかります。 左のアイコンをクリックすると、さまざまなインダストリアルデザインのスタイルが表示されます。


10. Designspiration

画像クレジット:Designspiration

画像クレジット:Designspiration

Designspirationは、デザインを共有し、発見できる場所です。

Pinterestと多少似ていますが、より多くのフィルターがあり、最大5つの色を使ってデザインのインスピレーションを検索することができます。


集めたい写真が多くて整理が大変?



ポートフォリオ集、受賞作品

11. awwwards

画像クレジット:awwwards

画像クレジット:awwwards

Awwwardsは、世界最大かつ最も象徴的なウェブデザインとコンペティションのサイトです。 世界中のウェブデザイナーやデベロッパーによるウェブデザインの評価と普及を専門としています。

作品を投稿し、審査やユーザー投票を通過すると、サイト上に作品が掲載されます。 デイリー、ウィークリー、マンスリーの開発者賞、モバイルデバイス賞、佳作など、多彩な賞が用意されています。

経験豊富なデザイナーやプランナー、あるいは若手のエンジニアであっても、毎日このサイトに戻ってきて刺激を受けることができるほど、多くの情報が掲載されているのです。


12. CSS AWARDS

画像クレジット: CSS AWARDS

画像クレジット: CSS AWARDS

CSSアワードは、ウェブデザイナー、スタジオ、デザイン実務者のためのインスピレーションを与えるリポジトリです。

awwwardsと同様に、毎日、毎月、最終候補の候補を照合するのに役立ちます。 また、ウェブサイト上で匿名の投票に参加し、お気に入りのデザインを上位に入れることも可能です。


13. FWA

画像クレジット:FWA

画像クレジット:FWA

FWAは、Awwwardsと同様に、各受賞作品が世界中の著名なデザイナー500人の投票によって選ばれる投票プラットフォームであり、作品の質は非常に高いです。


14. Httpster

画像クレジット:Httpster

画像クレジット:Httpster

Httpsterは、世界中のデザイナーが制作したWebサイトを紹介するインスピレーションの源となるサイトです。

ここでは、ウェブサイトのレイアウト、シンプルなビジネスウェブサイトのプレゼンテーション、ポートフォリオのプレゼンテーションなど、さまざまなものを見つけることができます。


15. FreshDeisgn

画像クレジット: FreshDesign

画像クレジット: FreshDesign

FreshDesign では、デザインスキルを向上させるための手軽なデザイン講座など、素晴らしいウェブサイトやデザイナー向けリソースをご紹介します。


16. UI Jar

画像クレジット:UI Jar

画像クレジット:UI Jar

革新的でアバンギャルドなデザインが好きでも、時にはそれが絵空事で実生活に応用できないことを認めなければならないこともあります。

UI Jarは、Dribbbleサイトから、実際に使えるデザインやスケッチを持つデザイナーやデベロッパーを厳選し、ちょっとしたインスピレーションを注ぐのに役立つ情報をお届けします!


17. Best Website Gallery

画像クレジット: Best Website Gallery

画像クレジット: Best Website Gallery

Best Website Galleyは2008年から今日まで、面白いウェブサイトをブックマークしてきたので、前の時代の面白いウェブサイトを見返したいと思ったときにも、そのウェブサイトを見つけることができます。

カラー、CMS、スタイル、生産フレームでインスピレーションをフィルタリングすることができます。


18. The Best Designs

画像クレジット: The Best Designs

画像クレジット: The Best Designs

シンプルで一般的なWebインターフェースやポートフォリオをお探しなら、こちらがおすすめです。

また、サイト内にはウェブデザイナーを学ぶためのリソースや、おすすめのウェブデザイン書籍も紹介されています。


最近ダウンロードした画像がどこにあるか思い出せないの?Eagle「

画像クレジット:Eagle

画像クレジット:Eagle

画像クレジット:Eagle


UI/UX、Webデザインの参考となるインスピレーション

19. Land-book

画像クレジット: Land-book

画像クレジット: Land-book

Land-bookは、クリエイティブな人々がWebページや製品を作るためのインスピレーションやモチベーションを得るための、興味深いWebサイトを集めたものです。

クリエイティブサイト、ワンクリックサイト、ブログ、オンラインショップなどの整理に特化しています。

UI/UXのリソースをもっと見る

デザイン人脈を広げる!UI/UXデザイナーにおすすめSNSやコミュニティ(英語版)

UI/UXを独学で学ぶための必携のオンラインリソース38選(英語版)


20. SiteSee

圖片來源: SiteSee

圖片來源: SiteSee

SiteSeeは、WebデベロッパーやWebデザイナーのためのモダンなWebサイトギャラリーです。

また、SiteSeeでは、特集ページのデザインを自分のブラウザのサブページにするブラウザ拡張機能を提供しており、サブページを開くたびに作品を楽しむことができます。


21. One Page Love

画像クレジット:One Page Love

画像クレジット:One Page Love

One Page Loveとは、すべてのコンテンツが1ページに集約され、他のサブページが存在しないことを意味します。

美しい1ページのウェブサイト、テンプレート、リソースなどを幅広く紹介しており、ユーザーの注目を集めたいせっかちなユーザーには最適です。


22. Lapa Ninja

画像クレジット:Lapa Ninja

画像クレジット:Lapa Ninja

ホームページのインスピレーションをお探しなら、Lapa Ninjaは様々な業界や分野のホームページをまとめました。

それぞれのホームページはデザイナーによって考案され、実際にオンラインで公開されています。


23. Flowing Page

画像クレジット:Flowing Page

画像クレジット:Flowing Page

Flowing Pageは、ダイナミックなデザインに特化したプラットフォームであるLapa Ninjaの姉妹サイトです。

流れるような3DのWebサイトをデザインしたい場合、ここには多くの参考資料があり、また、ユーザーがどのようにページに入ってきたかという記録も残されています。


24. Little Big Details

画像クレジット:Little Big Details

画像クレジット:Little Big Details

Little Big Detailsは、製品の優れた機能を集めたプラットフォームで、携帯電話やウェブページ、ツールの素晴らしい機能を見ることができます。

自社製品のデザインを最適化したい方は、ぜひこちらでインスピレーションを得てください。


25. NavNav+

画像クレジット: NavNav

画像クレジット: NavNav

ナビゲーションデザインは、Webデザイン、モバイルアプリ開発において非常に重要です… ナビゲーションバーの構造が優れていればいるほど、製品の使い勝手は向上します。

NavNav+は、ナビゲーションデザインの様々な構成要素にインスピレーションを与える、ナビゲーションデザインのコレクションに特化したプラットフォームです。 ユーザーがウェブサイトやアプリケーションをどのように操作しているかを分析する場を提供します。


26. MUUUUU

画像クレジット: Muuuuu.org2

画像クレジット: Muuuuu.org

Muuuuuは、各ブランドサイトのインターフェイスデザインをカテゴリー別に閲覧できるプラットフォームを持つ日本のウェブサイト集です。商業用、非商業用を問わず、最適なリファレンスデザインをここに提供します。

これにより、配色や写真、ビジュアルコンセプトを参考にすることができます。 既存のウェブサイトとの重複を避けるだけでなく、ページ上でブランドイメージを強調する方法を考えることが有効です。


27. Collect UI

画像クレジット:Collect UI

画像クレジット:Collect UI

タイトルの通り、UIコンポーネントを集める専門サイトです。 ログインページ、チェックアウトページ、404ページなど、主要なデザインサイトやdribbbleなどからインターフェイスを集めました。

160種類以上のインターフェイスカテゴリがあり、デザインの旅に役立つことでしょう。

このサイトでは、デザイン力を磨き続けるためのUIチャレンジを毎日行い、さまざまなインターフェイスを英語で学ぶことができます。


28. 4db

画像クレジット:4db2

画像クレジット:4db

シンプルな和のデザインレイアウトをお探しなら、4dbをご利用ください。

フレッシュ系、ヴィネット系、イラスト系など、日本語のWebスタイルが多いので、日本語のWebサイトを参考にしたい方はこちらへどうぞ!


29. siteInspire

画像クレジット:siteInspire

画像クレジット:siteInspire

siteInspireは、その時々のベストなウェブデザインを紹介し、優れたビジュアルとインターフェースデザインの例を提供し、ウェブデザインのためのインスピレーションとなるリソースを提供するサイトです。

ここでは、ギミックや飾り気のない、クリーンでシンプル、かつ直感的な方法でサイトを判断しています。


30. Page Collective

画像クレジット:Page Collective

画像クレジット:Page Collective

Page Collectiveは、インダストリアルで美しいWebインターフェイスを幅広く見つけることができるWebサイト収集プラットフォームで、モバイルインターフェイスのインスピレーションサイト「Screenlane」の姉妹サイトです。


31. CodeDrops

画像クレジット:CodeDrops

画像クレジット:CodeDrops

CodeDropsは、Webデザインのエフェクト、チュートリアル、記事、インスピレーションを、多くのデザイナーによるダイナミックなエフェクトのデモンストレーションとベストプラクティスで提供する素晴らしいコレクションです。。

特に注目したいのは「記事」(article)と「遊び場」(playground)のカテゴリーで、デザイナーがWeb効果を生み出すためのテクニックや新しいアイデア、問題解決や課題への向き合い方を紹介しています。

過去に繰り返された結果を知ることで、自分のデザインで同じ失敗をしないためのヒントを得ることができます。


32. Code My UI

画像クレジット:Code My UI

画像クレジット:Code My UI

HTMLなど、Webサイトの要素に関わるアニメーションリソースをお探しなら、ぜひとも訪れていただきたい場所です。

Code My UIでは、Webデザイン、UIインスピレーション、ダイナミックデザインを組み合わせたさまざまなデモが紹介されており、どれもデザインプロジェクトに取り入れてみたい実践的な例ばかりです。


33. CodePen

画像クレジット: CodePen

画像クレジット: CodePen

CodePenは、世界有数のダイナミックエフェクトのコレクションです。ちょっとしたコードの知識があれば、エディタを開いてリアルタイムにページ上で結果を確認することができます。

フロントエンドデザイナーやWebエンジニアに最適です。


34. CodyHouse

画像クレジット:CodyHouse

画像クレジット:CodyHouse

これまでのプラットフォームサイトと比べると、CodyHouseのリソースはよりベーシックで、モーションエフェクトを始めたばかりの初心者やデザイナーに適しています。

サイト内には多くのアニメーションデモやモーションエレメントがあり、デザインに追加するエフェクトもダウンロードできます。



Webサイトのタイポグラフィを参考にしたいたら、



デザインブログ、業界ニュース、著名デザイナーのインタビュー

35. WebdesignerDepot

画像クレジット:Webdesigner Depot

画像クレジット:Webdesigner Depot

Webdesigner Depotは、Webデザインやインターフェースデザインに関する最も人気のあるブログの1つです。

Webデザインのトレンド、コース、ツール、Tipsなどを論じているので、デザインプロダクトやその使い方について知りたいときは、ここに行けば新しいインスピレーションが得られるはずです!


36. DesignTAXI

画像クレジット: DesignTAXI

画像クレジット: DesignTAXI

デザイナーであれば、DesignTAXIというクリエイティブ業界をリードするリファレンスとニュースネットワークをご存知でしょう。 あらゆるデザインのアイデアを共有し、アート、写真、広告、建築、スタイル、文化、新技術、業界ニュースについて語るサイトです。

クリエイティブなもの、斬新なもの、最新のもの、ここに来れば、あらゆるニーズに対応するものが見つかるはずです。


37. The Great Discontent

画像クレジット:The Great Discontent

画像クレジット:The Great Discontent

インスピレーションを探すのに疲れたら、「The Great Discontent」でデザイン関連のインタビューを多数掲載。 現代を代表するデザイナー、アーティスト、起業家、デザイン実務家の知られざるストーリーを取材し、さまざまなデザイナーやアーティストの出発点とその過程で遭遇した困難について知ることができる番組です。

彼らのキャリアを読んだり、クライアントの鳥に会ったりするうちに、鏡の中に新たなアイデアやインスピレーションを見出すことができるかもしれません。


38. Abuzeedo

画像クレジット: Abduzeedo

画像クレジット: Abduzeedo

Abduzeedoは一人で始めたブログですが、ブログの内容が大きくなるにつれ、今では複数人で運営するオンラインメディアとなり、主にデザイン、写真、ユーザーエクスペリエンスについて共有しています。

ここではデザインのケーススタディや、デザインの失敗を防ぐためのヒントも見つけることができます。


モバイルアプリ:UIデザインの4つの参考

39. Mobbin

画像クレジット: Mobbin

画像クレジット: Mobbin

Mobbinは、iosとAndriod用のモバイルアプリケーションのインターフェースとレイアウトを収集し、整理するための強力なリソースサイトです。 Spotify、Expedia、Githubなど、有名ブランドのモバイルログイン、検索ページ、設定ページ、アプリのインターフェイスなど、何でもござれです。

スマホのインターフェースや部品のデザインに悩んでいる方は、Mobbinを使えばUIやUXの調査にかかる時間を短縮できるので、ぜひブックマークしておきましょう。


40.Mobile Pattern

画像クレジット:Mobile Pattern

画像クレジット:Mobile Pattern

携帯電話のインターフェイスや機能の参考を知りたいなら、まず「モバイルパターン」へ!

有名なアプリのいくつかのバージョンのスクリーンショットがたくさんあるので、往年の歴史的なデータを参考にしたい方はこちらへどうぞ。


41. Lovely UI

画像クレジット:Lovely UI

画像クレジット:Lovely UI

Lovely UIは、iphoneやandriodだけでなく、ipadなど多くのモバイル版からインスピレーションを得たUIエレメントを集めています。


42. Screenlane

画像クレジット:Screenlane

画像クレジット:Screenlane

Screenlaneは、さまざまなカテゴリー、業界グループ、機能要素などを通じて、最新のモバイルインターフェースのインスピレーションを見ることができるモバイルインターフェース収集プラットフォームです。

各モバイルインターフェースでは、利用シーンを想定した短いアニメーションが用意されており、実際にアプリをダウンロードしなくても、どのようにユーザーを誘導しているかを確認することができます。また、PageCollectivePageFlowの姉妹サイトもあり、Web UXなどの情報収集に便利です。


ゲームデザイン・インターフェイスの参考となるインスピレーション

43. Game UI Database

画像クレジット:Game UI Database

画像クレジット:Game UI Database

ゲームデザイナーやエフェクトアーティストに朗報です。 Game UI Databaseでは、様々なゲームのスクリーンショットを見ることができるので、データを整理するために全てのゲームをダウンロードして一つ一つプレイする必要はありません!

上記のように様々なデザインのインスピレーションがある中で、ゲームインターフェースのスクリーンショット、要素、レイアウトなどの完璧なリファレンスインスピレーションを提供するプラットフォームはほとんどないでしょう。

ゲームデザインをもっと見る

【2022 最新情報】ゲームデザイン初心者必読記事20選(英語版)


44.Saji8k

画像クレジット:Saji8k

画像クレジット:Saji8k

SF的な作品をデザインしたいのであれば、Saji8kのウェブサイトは素材や情報を探すのに良い場所だと思います。 さまざまなSFのスクリーンショットやユーザーインターフェースのビデオに加え、ここに掲載されているユーザーインターフェースの中には、映画やゲームのUI、テレビ番組や映画での使用に最適なものもあり、デザインリサーチの時間を大幅に短縮す!


45.logostock

画像クレジット:logostock

画像クレジット:logostock

logostockで国内外のブランドのロゴデザインも多数掲載されています。 業種、色、文字の形、そして何より「フォント」での検索が可能です。

ロゴをデザインする際のヒントが見つかるチュートリアルを多く掲載しています。デザイン参考書リストがきっと役に立つはずです!


46.Logopond

画像クレジット:Logopond

画像クレジット:Logopond

Logopondは、まだ商標になっていないロゴデザインを集めたもので、ユーザーが作者にコンタクトを取り、気に入ったデザインを求めることができるようになっています。

だから、ここにあるデザインは、市販のロゴと重複する心配がなく、安心して見ることができます。 それだけでなく、デザインをアップロードして買い手を探すことも可能です!


面倒くさがらずにデザインインスピレーションを整理して、


Eagleは、デザイナーのために開発された生産性向上ツールで、デザイン資料を簡単かつ迅速に整理する方法を数多く提供しています。 例えば、この記事が役に立ったら、シェアしてください!

こちらもおすすめ

必見!デザインアイデアを引き出しサイトTOP6と整理術4選
デザインアイデアが出てこない?インスピレーションを見つける超効率的な4つのステップ、6 つのおすすめサイト、整理ガイドなどをご紹介します。
完全解説!プロなデザインポートフォリオの作り方と参考サイト
プロのデザインポートフォリオの作り方とは?デザイナーを際立たせるために、作品集作成の9つのコツやおすすめインスピレーションサイトを紹介します。
2022最新!モーショングラフィックスデザインリソース22選
モーショングラフィックのリソースをお探しですか?業界インタビュー、素材や事例など、インスピレーションを与えてくれるサイト22選をご紹介します。
クリエイター必見!無料・著作権フリーの商用BPMサイト37選
映画編集のフリーBGMが見つからない?無料で使える商用サウンドサイト37選と著作権ルールをご紹介。もう音楽素材と音声ファイル管理に悩まない!
デザイナーが愛用!48の無料カラーツールと配色コツ
デザイナーが使いやすい48の無料カラーツール:カラーチケット、色選びのインスピレーション、カラーマッチングなど。生産性を向上させましょう!