デザインの参考ギャラリー:ツールとアプリ

実在するアプリの画面、Webサイトのデザイン、デザイナーの作品を集めたギャラリーです。まず、何を探しているかを決めましょう。会員登録、決済、空の状態など特定の画面か、業種か、全体的なビジュアルの方向性かによって見るべき場所が変わります。

3件のアプリ出典のある情報

絞り込み

知っておきたいこと: 無料で使える条件はツールやプランによって異なります。カードにそのツール固有の制限が書かれていない場合は、利用枠、透かし、書き出しの条件を公式ページで確認してください。

Awwwards

ウェブ·デザイン・開発
プラン条件を確認

Awwwardsは、受賞したウェブサイトをカテゴリーやテクノロジー別に紹介するウェブデザインのアワード兼インスピレーションギャラリーで、閲覧は無料ですが、Pro会員には作品の投稿やプロフィールの特典があります。

おすすめの理由

デザインの参考ギャラリー

Dribbble

ウェブ·デザイン・開発
プラン条件を確認

Dribbbleは、デザイナーが自分の作品を共有し、トップデザイナーとその作品を見つけることができ、企業がクリエイティブな人材を探すデザインプラットフォームです。

おすすめの理由

デザインの参考ギャラリー

Mobbin

ウェブ·デザイン・開発
無料出力なし

Mobbinは、モバイルアプリとウェブアプリの画面、オンボーディングやチェックアウトといったエンドツーエンドのフロー、インターフェースのパターン、ウェブサイトのセクションを集めたデザインリファレンスのライブラリで、無料アカウントでは利用範囲が限られます。

おすすめの理由

デザインの参考ギャラリー

選び方のポイント

ギャラリーをプラットフォーム(iOS、Android、Web)、画面の種類、操作パターンで絞り込んでみましょう。気に入った例をコレクションに保存し、少なくとも3つの情報源から集めると、一つのスタイルをまねるのではなく共通する解決策が見えてきます。

公開中の実際の製品の画面を載せるギャラリーもあれば、実装されていないコンセプト作品を載せるギャラリーもあります。各例がどちらかを確認しましょう。全アーカイブ、高解像度、Figmaへの書き出しが有料かどうかは公式の料金ページで確かめてください。

ギャラリーのデザインを自分の製品に使えますか?例はアイデアのためのものです。他製品のロゴ、画像、文言、特徴的なデザインをそのまま使うと、著作権や商標の問題につながるおそれがあります。レイアウトや流れのアイデアは、自分のコンテンツとブランドで作り直しましょう。

コンセプトデザインが誤解を招くのはなぜですか?実データ、長い文章、エラー状態、アクセシビリティ要件を考えずに作った画面は、見た目だけは魅力的です。選んだアイデアを自分のコンテンツで、さまざまな画面サイズとダークモードで試しましょう。

文書で確認できる機能を比較

この比較は公開された公式資料に基づきます。実機テストや品質ランキングではありません。不明な機能は確認済みとして扱いません。

文書で確認できる機能を比較
アプリ名AwwwardsウェブDribbbleウェブMobbinウェブ
無料で出力未確認未確認非対応
登録不要未確認未確認非対応
透かしなし未確認未確認未確認
オフライン対応未確認未確認未確認
一括処理未確認未確認未確認
コンテンツの言語未確認未確認未確認
知っておきたいこと / 情報源と確認日

注 1注 2

情報源と確認日
awwwards.comへ移動

注 2注 1

情報源と確認日
dribbble.comへ移動

注 1注 2

情報源と確認日
mobbin.comへ移動

複数のツールに共通する注意点

  1. ツールごとにプランを確認してください。利用枠は機能間で共通とは限りません。
  2. 最新の利用枠と出力条件は公式サイトで確認してください。