こんにちは。うみです！
DESIGN REFERENCE · 17 SITES色、余白、文字、画面の流れ。
参考を見る場所が変わると、
気づくことも変わります。
2026年10月1日確認 · 日本語のサイト紹介とうみの見方
AIでつくるときも、自分で考えるときも、参考は完成形をまねるためだけのものではありません。何を大きく見せたのか。なぜ、この色が落ち着いて見えるのか。画像の中にある選択をひとつ見つけるだけでも、自分の言葉は少し具体的になります。
このガイドでは、カルーセルで紹介した6サイトをもう少し詳しく読み、そのあとに17サイトを目的別にまとめました。気になる映像や画面から、自由に見てみてください。
気になる場所だけでも大丈夫です。17サイトの一覧へ ↓
探すときは「何を見たいか」をひとつ決めると、違いを比べやすくなります。
Savee / 構図・余白
画像やレイアウトなどのビジュアルを見つけ、保存してボードに整理できるサービスです。公式サイトでは、画像での検索、共有ボード、ブラウザー拡張なども紹介されています。
たくさんの作品を一度に見られると、ひとつの完成形よりも「似たものの中で、何が違うか」を比べやすくなります。同じポスターでも、文字の大きさや余白の広さで、最初に目が向く場所は変わります。
私は、最初に目に入った部分と、その次に見た部分を分けて考えると、構図を読みやすいと思います。「おしゃれ」で止めずに、目線の順番をひとつ言葉にしてみたいです。
Fonts In Use / 文字・タイポグラフィ
実際の制作物で使われた書体を記録する、独立したタイポグラフィのアーカイブです。事例ごとに書体名、用途、分野などが整理されていて、ポスターからWeb、パッケージまで見比べられます。
文字は、書体だけで印象が決まるものではありません。大きさ、太さ、行間、周りの写真との関係まで含めて見ると、同じ書体が違う表情になる理由が見えてきます。実例と名前がつながるところが、このサイトの特徴です。
私は、タイトルと小さな説明が、どれくらい違う大きさで置かれているかを見たいです。海外の書体をそのまま使うのではなく、日本語でも読みやすい大きさや間隔に置き換えることが大切だと思います。
Cosmos / 色・素材・雰囲気
写真、アート、グラフィックなどのビジュアルを探索し、コレクションとして整理できるサービスです。現在の公式サイトには、色や画像の類似性で探す機能、画像の作者や出典を確認する機能も紹介されています。
「静かな感じ」「少し懐かしい」など、言葉だけでは伝わりにくい雰囲気を、複数の画像で見られるのが魅力です。色だけでなく、光、素材、撮影距離なども、全体の印象をつくっています。
私は、好きな画像を集めたあとに、その共通点をひとつだけ選ぶのがよいと思います。「淡いピンク」なのか「やわらかい光」なのか。理由が具体的になると、自分のデザインにも持ち帰りやすくなります。
DIELINE / パッケージ・ブランド
パッケージデザインの事例や、関連するニュース・特集を紹介するメディアです。商品写真だけでなく、ブランドや制作の背景を説明する記事があり、箱、ボトル、ラベルなどをまとめて見られます。
ブランドは、ひとつのロゴだけで成立するわけではありません。色、書体、写真、形が、違う商品や場面でも繰り返されることで、同じブランドだと感じられます。パッケージは、そのつながりを見つけやすい対象です。
私は、いちばん目立つロゴより先に「何が繰り返されているか」を見たいです。色なのか、文字の位置なのか。ひとつの作品の美しさと、シリーズとしてのまとまりは、分けて見ても面白いと思います。
Mockupworld / モックアップ・見せ方
Web上の無料モックアップを選んで紹介するディレクトリです。ポスター、箱、書籍、端末などのカテゴリーから、仕上がりを見せるための素材を探せます。ファイル形式や利用条件は、配布元ごとに異なります。
デザインを実際に置かれる場面に近づけると、平らな画像だけでは見えなかった大きさや距離感がわかります。一方で、きれいな背景が作品をよく見せていることもあります。見せ方と、中身の読みやすさは分けて考えたいところです。
私は、画面いっぱいの見本だけでなく、少し離れた見え方も比べたいです。素材を選ぶときは、必要な編集ソフト、ライセンス、商用利用の条件を配布元で確認しておくと安心です。
Mobbin / アプリ・Web UI
実際のアプリやWebの画面、UI要素、操作の流れを集めたデザイン資料のライブラリーです。公式サイトでは、画面の検索に加え、フローを動画やプロトタイプで見る方法も紹介されています。
UIは、ひとつの画面が整っているだけでは十分とは限りません。前の画面から何を引き継ぎ、次の画面で何ができるのか。そのつながりを見ることで、見た目だけではわからない設計の考え方を読み取れます。
私は、ボタンの形だけでなく、押したあとの行き先を見たいです。どこにいるか、次に何ができるかがわかる画面には、派手さとは別のよさがあると思います。表示できる範囲は利用プランによって変わります。
紹介した6サイトに、さらに11サイトを加えた一覧です。リンクはコピーして保存できます。
写真、アート、グラフィックなどのビジュアルを探索し、コレクションとして整理できるサービスです。現在の公式サイトには、色や画像の類似性で探す機能、画像の作者や出典を確認する機能も紹介されています。
私は、好きな画像を集めたあとに、その共通点をひとつだけ選ぶのがよいと思います。「淡いピンク」なのか「やわらかい光」なのか。理由が具体的になると、自分のデザインにも持ち帰りやすくなります。
画像、文章、Webページなどを「チャンネル」にまとめ、つながりからアイデアを広げる場所です。
完成した画像だけでなく、どんな言葉や資料が隣に置かれているかを見たいときに。考えのつながりも参考になります。
デザインや写真などの参考を探し、色からもイメージを絞り込めるサービスです。
好きな色が決まっているときに、その色がどんな割合で使われているかを見比べると、配色の印象を考えやすくなります。
画像やレイアウトなどのビジュアルを見つけ、保存してボードに整理できるサービスです。公式サイトでは、画像での検索、共有ボード、ブラウザー拡張なども紹介されています。
私は、最初に目に入った部分と、その次に見た部分を分けて考えると、構図を読みやすいと思います。「おしゃれ」で止めずに、目線の順番をひとつ言葉にしてみたいです。
クリエイターが制作プロジェクトを公開する、Adobeのポートフォリオプラットフォームです。
一枚の完成画像より、同じプロジェクトの複数の場面を続けて見ると、デザイン全体のルールを読みやすいと思います。
実際の制作物で使われた書体を記録する、独立したタイポグラフィのアーカイブです。事例ごとに書体名、用途、分野などが整理されていて、ポスターからWeb、パッケージまで見比べられます。
私は、タイトルと小さな説明が、どれくらい違う大きさで置かれているかを見たいです。海外の書体をそのまま使うのではなく、日本語でも読みやすい大きさや間隔に置き換えることが大切だと思います。
Webサイトの書体の使用例、書体情報や組み合わせなどを紹介するタイポグラフィのサイトです。
タイトルと本文をどう組み合わせているかを見る候補です。英字の印象と、日本語の読みやすさは別に確認したいです。
Indian Type Foundryによるフォントサービスです。書体と組み合わせを探せて、プレビューの文字も変えられます。
見本の英単語だけで決めず、使いたい文字で確かめたいです。対応文字と、書体ごとのライセンスも確認しましょう。
実際のアプリやWebの画面、UI要素、操作の流れを集めたデザイン資料のライブラリーです。公式サイトでは、画面の検索に加え、フローを動画やプロトタイプで見る方法も紹介されています。
私は、ボタンの形だけでなく、押したあとの行き先を見たいです。どこにいるか、次に何ができるかがわかる画面には、派手さとは別のよさがあると思います。表示できる範囲は利用プランによって変わります。
実際のWeb・iOS製品の画面やフローを整理するデザイン資料のサービスです。現在はリサーチ機能も紹介されています。
同じ種類のページを並べて見る候補です。共通する要素と、その製品らしい違いを分けて見ると面白いと思います。
Webサイトのデザインを選んで紹介するギャラリーです。ページの種類やセクションなどから参考を探せます。
最初の画面だけでなく、見出しと説明の関係を見る候補です。画像が大きい理由、文字が短い理由も考えてみたいです。
Webデザインを紹介・評価するプラットフォームです。受賞作や応募作品、制作チームをたどれます。
新しい表現に出会いたいときの候補です。印象的な演出と、読む人が迷わないことの両方を見たいと思います。
パッケージデザインの事例や、関連するニュース・特集を紹介するメディアです。商品写真だけでなく、ブランドや制作の背景を説明する記事があり、箱、ボトル、ラベルなどをまとめて見られます。
私は、いちばん目立つロゴより先に「何が繰り返されているか」を見たいです。色なのか、文字の位置なのか。ひとつの作品の美しさと、シリーズとしてのまとまりは、分けて見ても面白いと思います。
ブランディング、パッケージ、グラフィックデザインを、記事や批評とともに紹介するメディアです。
画像を見るだけで終わらず、デザインがどう説明されているかを読みたいときに。記事の意見は、ひとつの見方として比べたいです。
UnderConsiderationによる、企業やブランドのビジュアルアイデンティティを扱うメディアです。
ロゴやブランドがどう変わったかを見る候補です。見た目の好みだけでなく、変えた理由も気になります。記事には会員向けの内容もあります。
Web上の無料モックアップを選んで紹介するディレクトリです。ポスター、箱、書籍、端末などのカテゴリーから、仕上がりを見せるための素材を探せます。ファイル形式や利用条件は、配布元ごとに異なります。
私は、画面いっぱいの見本だけでなく、少し離れた見え方も比べたいです。素材を選ぶときは、必要な編集ソフト、ライセンス、商用利用の条件を配布元で確認しておくと安心です。
デバイス、印刷物、パッケージなどのモックアップやデザイン素材を提供するサービスです。
影、素材、背景による見え方の違いを比べる候補です。無料・有料の範囲や、個別の利用条件は公式ページで確認しましょう。
UMI’S NOTE参考をたくさん集めても、好きな理由が曖昧なままだと、次のデザインを考えにくいことがあります。私は「淡い色が好き」より、「淡いベースに強い色がひとつあるのが好き」というくらい、少し具体的な言葉にしてみたいです。
同じ作品を見ても、持ち帰るヒントは人によって違います。色、余白、文字、画面のつながり。まずは、気になったものをひとつだけ。そこから自分らしいデザインを考えていけたらと思います。
難しそうなAIを、もっと身近に。
また一緒に、少しずつ整えていきましょう。
画面と動画は各公式サイトをもとにした紹介用の抜粋です。Savee・Mobbinは公式サイトのデモ、他4本は実際の画面キャプチャを編集しています。掲載された作品・映像の権利は各権利者に帰属します。各サイトの機能、閲覧範囲、料金、素材の利用条件は変わる場合があるため、公式案内をご確認ください。「うみの見方」は編集上の意見です。