こんにちは。
最近はAIでWebサイトやアプリを作る人の「実装はできるけどデザインが微妙」という悩みをよく目にします。 動くものはできたけれど、配色がしっくりこない。 画面に何をどの順番で置けばいいのか分からない。
そういう時は「名前のあるデザインスタイルやパーツ名などを伝える」という方法を本サイトではおすすめしています。
その他の考え方として、既存サイトやアプリを見ていいところを取り入れるというものもありますよね。デザインの参考サイトは昔からあるものでしたが、最近はただデザインを並べるだけでなくAIへの指示にそのまま使えたり、DESIGN.mdにまとめたものも見られるようになりました。
そこで今回は目的別に探しやすいよう5つにカテゴリー分けをした上で40個のサイトを紹介します。これだけあればどれかはあなたの困りごとを解決できると思います。
ぜひ困っていることに近いカテゴリーを選んでお試しください。
| 困っているポイント | おすすめのカテゴリー |
|---|---|
| AIに渡す配色や文字、余白のルール | AIに渡すデザインとスタイル |
| アプリの画面構成や操作の流れ | アプリやWebサービスの画面と操作 |
| 商品やサービスを紹介するページ全体 | LPやWebサイト全体のデザイン |
| メニュー、フッター、動き、フォント | UIパーツや動き、文字 |
| 日本語の文字組みや国内サイトの表現 | 日本のWebデザイン |
AIに渡すデザインとスタイル
「落ち着いた雰囲気にして」と伝えても、思っていた見た目にならない。そういう場合は大抵指示が足りていません。「落ち着いた雰囲気」だけではデザインを絞りきれていないということです。
ではどうすればいいかというと、配色や文字、余白のルールを言語化して伝えるのが良いでしょう。もちろん非デザイナーにとっては難しいので、既存サイトを参考にするのがおすすめです。
さらに最近はデザインルールをAIに伝えるためのDESIGN.mdという形式があります。このカテゴリーには、DESIGN.mdを探したり生成したりするサービスや、見た目の方向性を選ぶ図鑑のようなサービスが含まれます。
01. デザインスタイル図鑑
デザインスタイル図鑑は、僕が制作した図鑑です。 作りたい成果物や与えたい印象、見た目の特徴から、参考にするデザインスタイルを探せます。
実現したいイメージが言語化できなくても、見た目の特徴などからスタイルの名前を調べられます。 「こういう雰囲気にしたい」をAIに伝えやすい言葉に置き換えるツールとして使ってみてください。
02. Inspo
Inspoは、実在するWebサイトの画像やデザイン資料をMCP（AIと外部のツールや資料をつなぐ仕組み）経由でAIから検索・参照できるサービスです。 AIとやり取りしながら作りたい雰囲気に近い参考を探すときに使えます。
業種・雰囲気や配色・画面構成からも絞り込めます。 参考探しをAIとの会話の中で進め、そのまま制作の指示を行いたい人におすすめです。
03. Refero Styles
Refero Stylesでは、実在サービスの配色、書体、余白などを調べ、AIに渡すDESIGN.mdを探すことができます。 見た目の印象を具体的なデザインルールとして伝えたいときの参考になります。
ブランドごとの見た目を、色や書体、部品のルールに分けて確認できるのが特徴です。 画面の配置を探す後述のReferoと使い分けると構成と見た目の両方を言語化できます。
04. ko/design.md
ko/design.mdは、韓国サービスのデザインをまとめたDESIGN.mdのカタログです。 韓国のサービスを参考に、AIへ渡すデザイン資料を選べます。
ライブプレビューと、色などの設定値、DESIGN.mdを切り替えて見られます。 資料の内容がどんな見た目になるかを確認してから、AIに渡すファイルを選べる点が便利です。
05. getdesign.md
getdesign.mdは、実在サイトを分析したDESIGN.mdのカタログです。 配色や文字、余白に加え、その設計意図も含んだ参考資料を探せます。
カタログには自動車や小売、メディアなどソフトウェア以外のブランドの分析も並んでいます。 業種をまたいだ広範囲で配色や文字の表現を探したいときにおすすめです。
06. GetDesignMD
GetDesignMDは、公開URLから配色や書体などを抽出し、DESIGN.mdを生成するツールです。 名前が似ていますが、前のgetdesign.mdが資料を選ぶカタログなのに対しこちらは参考にしたいURLから資料を作るものです。
元サイトのCSSから色や文字サイズ、角丸などを抽出し、使い方のルールもまとめる仕組みです。 スクリーンショットだけでは読み取りにくい情報も抽出できるのがいいですね。
07. Duply
Duplyでは、掲載されたサイトのデザイン分析を選び、DESIGN.mdとしてAIに渡せます。 気に入った見た目を文章で整理された資料から取り入れたいときの選択肢です。
一覧で色の組み合わせを見ながら候補を選べるので配色から方向性を決めたいときに探しやすい構成です。 有料書体については代替書体も記載する方針になっており、自分の制作環境に取り入れやすいサービスになっています。
08. DesignMD Directory
DesignMD Directoryでは、DESIGN.mdの作例やテンプレート、AI向けのデザインスキルを探せます。 どんな内容を資料にまとめればよいか、書き方の参考を見たいときにも使えます。
作例にはNext.jsやTailwindなど実装に使う技術のタグも付いています。 見た目に加えて、自分が使う制作・開発環境に近い資料を選びたいときに役立ちます。
アプリやWebサービスの画面と操作の流れを探す
ログイン画面や設定画面を作るなら、
- どんな情報、どんな操作UI（例：ボタン、フォーム）が並ぶべきか
- ボタンを押した後に何が起こるか
といった設計が必要です。これを理解していると自分のアプリに必要な画面を考えやすくなります。
画面設計の参考集と、動画や画面遷移で操作の流れを確認できる参考集を紹介していきます。
09. Mobbin
Mobbinでは、実在するアプリやWebサービスの画面を探せます。 動画や画面遷移も参照できるので画面の見た目と操作の流れをあわせて確認したいときに使えます。
画面内の文字から検索でき、操作できるプロトタイプで遷移をたどる機能もあります。 特定の文言がある画面を見つけ、その前後の操作まで掘り下げて調べられます。
10. Refero
Referoは、ログイン、検索、課金など、画面の役割やUIパーツから実在サービスの例を探せる参考集です。 作りたい画面の目的が決まっているときに、近い例を探せます。
作りたいものを文章で伝えるResearch modeや、AIから参照するためのMCP連携も用意されています。 画面名やパーツ名がまだ分からない段階でも、実現したいことから探せるのがありがたいですね。
11. Nicelydone
Nicelydoneでは、SaaSの画面や操作の流れ、その中で使われるUIパーツを調べることができます。 パーツ単体だけでなく、画面の中でどう使われているかを見る際にも参考になります。
画面内の文字検索に加え、参考をボードにまとめてチームで共有できます。 業務ツールの改修で「この画面の、この部分を参考にしたい」と相談するための資料作成まで出来るのは特徴的ですね。
12. SaaSFrame
SaaSFrameでは、SaaSの紹介ページから管理画面、アカウント設定、初回利用の案内までを調査することができます。 サービスを知ってもらう場面や使い始めてもらう場面を考えるときに使えます。
Webページや操作画面に加えて、サービスから届くメールの例も扱っています。 登録後の案内など画面の外も含めた利用体験をブラッシュアップしたいときに候補になります。
13. SaaS Interface
SaaS Interfaceは、設定、請求、一覧表など、SaaS内部の画面やUIパーツを探せる参考集です。 管理画面で情報をどう並べるか、操作をどこに置くかを考える際の参考になります。
モーダルや一括操作など実務で使う細かな部品の分類もあります。 たとえば「一覧から複数件を選んで処理する」といった、具体的な操作の設計から探せます。
14. Page Flows
Page Flowsでは、登録、購入、検索などの操作手順を、実サービスの録画と注釈で確認できます。 ユーザーが何を入力し、次にどの画面へ進むかを順番に見たいときに使えます。
Web、iOS、Androidを対象に、目的別の操作フローが整理されています。 同じ登録や購入でも、端末によって入力や確認の手順がどう変わるかを見比べる使い方ができます。
15. VP0
VP0では、AIでiOSアプリを作る際の参考になるアプリのデザイン例を探せます。 作りたいアプリの見た目を具体的にするための参考です。
iOS向けのデザインに対象を絞り、人気順や新着から候補を探せます。 スマホアプリをAIで作る前に狭い画面での情報量やボタン配置のイメージを固める用途に相性がいいでしょう。
16. Gummble
Gummbleでは、iOS、Android、Webの実画面から、初回利用や購入などの流れを比較できます。 同じ目的の操作を複数のサービスがどう組み立てているか見比べたい時に便利です。
アプリの分野、画面のパターンや操作フローの両方から探せる構成です。 iOS、Android、Webをまたいで候補を集めたいときにも参考集を行き来する手間を減らせます。
17. ScreensDesign
ScreensDesignでは、iOSアプリの初回利用の案内や課金画面を動画と画面の流れで確認できます。 利用開始までに何を説明するか、どのタイミングで料金を案内するかを考える際の参考になります。
購入ボタンを押した後まで含む録画を扱っているのが、課金の導線を調べる際のポイントです。 課金を促す画面と、購入後に何が使えるようになるかの案内を続けて確認できます。
18. Banani References
Banani Referencesでは、実アプリの参考画面を探せます。 参考画像をコピーまたはダウンロードしてBananiへ取り込み、変更したい内容を入力してAIで変更案を作る使い方も案内されています。
参考探しから、自分の用途に合わせた画面案の生成へ進める点が特徴です。 Bananiで作った案はFigmaやHTML/CSSへ書き出せるため、比較した案を次の制作工程へ渡せます。
19. Pttrns
Pttrnsは、実際のモバイルアプリの画面から、目的に合うUIパターンを探せる参考集です。 作りたい機能を画面にどう表すか、複数の例を見比べたいときに使えます。
モバイルのUIパターンに対象を絞り、見つけた例をお気に入りや案件別のコレクションに整理できます。 新しい画面を作るたびに見返す、自分用のデータベースを作りたい人にも合います。
LPやWebサイト全体のデザインを探す
商品やサービスの紹介ページでは、最初の見た目に加えて情報を伝える順番も考える必要があります。 何を最初に伝え、どこで詳しく説明し、どこから申し込んでもらうか。 ここではページ全体のデザインや構成を調べられる参考集を紹介します。
LPは、商品やサービスを紹介して申し込みや購入につなげるランディングページのことです。
20. Lapa Ninja
Lapa Ninjaでは、LPのデザインを業種や色、見た目の特徴から探せます。 作りたいページに近い例を見ながらページ全体の構成を考えるときに使えます。
ページ全体のキャプチャに加え、動画や過去のバージョンも扱っています。 下へスクロールしたときの構成やリニューアルによる変化まで調べたいときに便利です。
21. Landingfolio
Landingfolioでは、LP全体に加えて料金ページや登録画面、セクション単位の参考例も探せます。 ページ全体の方向性を決めるときにも、一部分をブラッシュアップしたいときにも使えます。
Tailwind向けの実装用パーツやWebflow向けのテンプレートも用意されています。 デザインの参考と制作に使うパーツをまとめて探したい人におすすめです。
22. SaaS Landing Page
SaaS Landing Pageは、SaaSのLPや機能紹介、料金、よくある質問などの説明ページを探せる参考集です。 サービスの価値や使い方をどう伝えるか考えるときに使えます。
SaaSの販売や説明に使うページに絞っているので、料金の比較表や機能の伝え方を集中的に調べられます。 管理画面を作るなら前述のSaaS Interface、サービスを紹介するページを作るならこちら、と使い分けるとよさそうです。
23. Recent
Recentでは、Webサイトのほか、文字や動き、UIなどのデザイン表現を探せます。 ページ全体の雰囲気に加えて印象に残る表現を取り入れたいときにおすすめです。
SNSでリンクを共有した際に表示される画像やアプリアイコンの作例も並んでいます。 サイトとSNSのシェア画像の雰囲気をそろえたいときにも使えるのは便利ですね。
24. Landbook
Landbookでは、LPやポートフォリオ、ネットショップなどをサイトの種類や見た目の特徴から探せます。 作るサイトに近い事例を見比べながらデザインの方向性を決めたいときに使えます。
サイト全体のほかに、セクションや動き、見出し文を探すカテゴリーもあります。 全体の雰囲気を決めたあとに冒頭の見出しを調整するなど制作の段階に合わせて調べられます。
25. Curated.design
Curated.designでは、公開中のWebサイトを業種やデザインスタイルから探せます。 同じ業種のサイトを比較したり、取り入れたい雰囲気から選んだりできます。
AIサービスや開発ツール、デスクトップアプリなど製品の種類に沿ったカテゴリーもあります。 自分が作るツールに近い事例を集めて機能をどう魅力的に見せるか考えたい人にもおすすめ。
26. Siteinspire
Siteinspireでは、ミニマルデザインや文字中心のスタイルとサイトから参考を探せます。 どんな見た目にしたいか、おおよその方向性が決まっているときに使えます。
スタイルやサイトの種類、題材、制作に使うツールが別々に分類されていて、制作したデザイナーや会社も調べられます。 気に入ったサイトから同じ作り手の別の作品も探せるので好みに合うデザインを集めたいときに便利です。
27. One Page Love
One Page Loveは、1ページサイトやLPの参考集です。 情報をどの順番で見せ、1ページにどうまとめるかを考えるときに使えます。
1ページで完結するサイトが中心なので、読み進める中で説明から申し込みまでどうつなげるかを比較できます。 作品紹介やイベント告知など複数ページに分けずに伝えたいものと相性がいいでしょう。
28. Awwwards
Awwwardsでは、受賞やノミネートされたWebサイトのデザインを調べられます。 スクロールやカーソル操作に反応する演出を探したいときにも使えます。
審査や投票を通じて評価された作品を受賞区分から探せるのが特徴です。 気になる演出を見つけたら、自分のサイトで何を伝えるために使うかも考えてみてください。
29. Dark.design
Dark.designは、ダークテーマのWebデザインを探せる参考集です。 暗い背景で文字や画像、差し色をどう見せるかを比較できます。
暗い配色の事例に絞っているので、ダークテーマにすることが決まっている人におすすめです。 境界線や背景の明るさを変えて情報をどう区切っているかも見比べてみると参考になります。
30. Ecomm.design
Ecomm.designでは、ネットショップのデザインを商品カテゴリーやShopifyなどの制作ツールから探せます。 扱う商品に近い事例を見ながら、商品の見せ方を考えるときに使えます。
採用しているツールの情報も調べられるのでデザインと制作環境をあわせて検討できます。 使うECサービスが決まっている場合に同じ環境で作られたショップを探せるのはありがたいですね。
UIパーツや動き、文字の参考を探す
全体の方向性は決まったけれど、メニューやフッターがしっくりこない。 そんなときは直したいパーツに絞って調べるのがおすすめです。 ここではメニューやフッターのほか、動きやフォントを調べられるサービスを紹介します。
31. Navbar Gallery
Navbar Galleryでは、上部ナビゲーションやサイドバー、メガメニューなどの参考例を探せます。 移動先のページをどう分類し、メニューをどこに置くか考えるときに使えます。
ドロップダウンを開いた状態などメニューの中身まで見られる例もあります。 リンクが多いサイトでの分類や、メニューに説明文や画像を添える方法を調べたいときに便利です。
32. Footer Design
Footer Designは、ページ下部のフッターを文字の大きさやレイアウト、動きの有無から探せる参考集です。 最後に見せたい情報やリンクのまとめ方を考えるときに使えます。
フッター部分を切り出して並べているので、各サイトの最下部まで移動せずに比較できます。 大きな文字で印象を残すデザインとリンクを細かく整理するデザインを見比べたいときにも便利です。
33. Supahero
Supaheroでは、ページ冒頭で大きく見せるヒーローセクションの参考例を探せます。 サイトを開いたときに最初に何を伝えるか、見出しや画像をどう配置するかを考えるときに使えます。
ヒーローセクションに絞っているので、見出しや画像、申し込みボタンの位置関係を見比べやすい構成です。 最初の1画面にどこまで情報を入れるか迷っている人におすすめです。
34. Design Spells
Design Spellsでは、ボタンの反応や画面の切り替えなど、小さな動きや遊び心のあるUIを探せます。 操作したときの反応をブラッシュアップしたいときに使えます。
動きのある作例なので、静止画では分からない反応の速さや変化の順番も確認できます。 アニメーションを取り入れたいときは、実際の動きを再生して見比べるのがおすすめです。
35. Typewolf
Typewolfでは、Webサイトで使われているフォントやその組み合わせを調べられます。 見出しと本文にどんな書体を使うか、文字の雰囲気からデザインを考えたいときに使えます。
使われている書体の名前に加えて、似た書体や組み合わせの候補も調べられます。 「この文字の雰囲気が好き」と思ったところから、自分のサイトで使うフォント選びまで進められるのがいいですね。
日本のWebデザインを探す
日本語のサイトを作るなら、日本語の見出しや本文が入ったデザインも見ておきたいですね。 自分の文章を入れたときの改行や情報量を想像しながら比較してみてください。
ここでは日本のWebデザインを探せるサービスを紹介します。 MUUUUU.ORGとI/O 3000は海外のサイトも扱っています。
36. SANKOU!
SANKOU!では、国内サイトを業種や配色、書体、動きなどから探せます。 作るサイトの用途と取り入れたい見た目の両方から絞り込めます。
日本語フォントやスマホ向けの表現、ノーコードで制作されたサイトなども探せます。 日本語の文字組みを見つつ、自分が使う制作ツールに近い事例を集めたいときにも便利です。
37. MUUUUU.ORG
MUUUUU.ORGでは、国内外のサイトを業種や配色、文字組み、動きなどから探せます。 日本のサイトを見つつ、海外のデザインも取り入れたいときに使えます。
レイアウトや装飾、アニメーションなどの分類が細かく用意されています。 同じ業種のサイトに限らず、取り入れたい表現から幅広く事例を集めたい人におすすめです。
38. I/O 3000
I/O 3000は、国内外のWebサイトを一覧から探せる参考集です。 細かい条件を決める前に、いろいろなサイトを見ながらデザインの方向性を考えるときに使えます。
一覧のサムネイルが大きく、配色や写真、文字のバランスを見比べやすい構成です。 まだ検索する言葉が思い浮かばなくても、画像を見ながら好みのデザインを探せるのがいいですね。
39. 81-web
81-webでは、日本のWebサイトをカテゴリーや色、フォントから探せます。 日本語の文字の雰囲気と配色をあわせて見たいときに使えます。
PCとスマホの表示を切り替えて探せるのも特徴です。 PCで気に入ったデザインをスマホではどう見せているか、両方を確認したいときに便利です。
40. Web Design Clip
Web Design Clipでは、国内を中心に企業サイトや採用サイト、ネットショップなど用途別のWebデザインを探せます。 いま作っているサイトと役割の近い事例を見比べるときに使えます。
国内、海外、LP、スマホ向けのギャラリーが分かれています。 日本の企業サイトを調べたあとにスマホ向けのデザインを見るなど、目的に合わせて切り替えられるのが便利です。
参考にする部分と理由をAIに伝える
参考にしたいサイトが見つかったら、どこが気に入ったのかも言葉にしてみましょう。 「このサイトのようにして」だけでは、配色が好きなのか、情報の並べ方を取り入れたいのかがAIに伝わりません。
僕は、参考にする部分と、選んだ理由を分けて伝えるのがよいと思っています。 例えば、予約サービスの紹介ページを作るなら、こんな感じです。
- 配色：「参考Aの白を中心にした配色を参考にしてください。予約ボタンを見つけやすくしたいので、強い色は主な操作に絞って使いたいです」
- 情報の並べ方：「参考Bの、概要、使い方、料金の順番を参考にしてください。初めて来た人が、何ができるか理解してから申し込める構成にしたいです」
- 文字の雰囲気：「参考Aの、見出しを太く、本文をすっきり見せる雰囲気を参考にしてください。親しみやすさを出しつつ、説明を読みやすくしたいです」
参考A、参考Bには選んだページのURLや資料名を添えて、AIが参照できるかも確認してください。 DESIGN.mdを渡す場合も、どのルールを何のために使いたいかを伝えると指示が具体的になります。
あわせて、誰が使うのか、何を一番伝えたいのか、最後にどんな操作をしてほしいのかも伝えましょう。 作るものの目的が分かると、AIも参考サイトのどの部分を取り入れるか判断しやすくなります。
注意点として、参考サイトを丸ごとコピーしたり、掲載されている画像やロゴ、文章を無断で転用したりするのは避けましょう。 配色や情報の並べ方を参考にしつつ、自分のサイトの内容や目的に合わせて取り入れてください。
まずは今作っているものに近いカテゴリーから、気になるサービスを2〜3個試してみてください。 好みのデザインが見つかったら「どこを参考にしたいか」「なぜそうしたいか」も一緒にAIへ伝えてみましょう。