AIを使ってWebサイトやアプリを作るときに、デザインの参考になりそうなサイトをジャンル別にまとめた覚え書です。

UI関連

Name That UI

Name That UIのトップページ（2026年11月時点）
Name That UIのトップページ（2026年11月時点）

Name That UI は、UI部品（画面上のボタンやメニューなど）の名前を調べられる、英語のサイトです。

「the dark see-through layer behind a popup（ポップアップの後ろにある、暗く透けた層）」のように見た目を言葉で入力すると、「Scrim」という名前が候補に出ます。部品ごとに、実装で使うAPI名や、AIコーディングエージェントへ貼り付けられる指示文も用意されています。

部品の名前が分からず、AIへの指示や調べものに困ったときに役立ちそうです。

参考サイトデザイン

81-web

81-webのトップページ（2026年11月時点）
81-webのトップページ（2026年11月時点）

81-web.com は、日本のWebサイトを集めたデザインギャラリーです。2026年11月時点で5,500件ほどが載っています。

種類、業種、色、フォント、制作会社などで絞り込めます。「この業種で、この色合いのサイト」のように、条件から探したいときに便利そうです。

Web Design Clip

Web Design Clipのトップページ（2026年11月時点）
Web Design Clipのトップページ（2026年11月時点）

Web Design Clip は、Webデザインの参考サイトを集めたリンク集です。2026年11月時点で6,400件ほどが載っています。

日本のサイト、海外のサイト、ランディングページ、スマートフォンに分かれています。各サイトにWordPressやStudioなど制作に使ったツールも書かれているので、作り方の見当をつけるときにも使えそうです。

ちょうどいいWebデザインギャラリー

ちょうどいいWebデザインギャラリーのトップページ（2026年11月時点）
ちょうどいいWebデザインギャラリーのトップページ（2026年11月時点）

ちょうどいいWebデザインギャラリー は、制作者の目線でサイトの良いところを言葉にしているギャラリーです。

各サイトに「ちょうどいいポイント」という解説があります。画像を眺めるだけでなく、どこが良いのかを言葉で確かめられるので、AIへの指示を考えるときのヒントにもなりそうです。

SANKOU!

SANKOU!のトップページ（2026年11月時点）
SANKOU!のトップページ（2026年11月時点）

SANKOU! は、国内のWebサイトやランディングページを集めたギャラリーです。

コーポレートサイトや採用サイトといった種類のほか、Studioなどのノーコードツールで作られたサイトでも探せます。制作者のクレジットも載っています。

アイコン

React Icons

React Iconsのトップページ（2026年11月時点）
React Iconsのトップページ（2026年11月時点）

React Icons は、Reactで作るサイトやアプリに、いろいろなアイコンを入れられるライブラリです。

Font AwesomeやHeroicons、Lucideなど、多くのアイコンセットをまとめて検索できます。使うアイコンだけを読み込む仕組みです。

Lucide

Lucideのトップページ（2026年11月時点）
Lucideのトップページ（2026年11月時点）

Lucide は、コミュニティで作られているアイコン集です。2026年11月時点で2,000個ほどあります。

線のアイコンを同じルールで作っているので、統一感を出しやすそうです。色、大きさ、線の太さも変えられます。

Hugeicons

HugeiconsのDuotone Roundedの一覧（2026年11月時点）
HugeiconsのDuotone Roundedの一覧（2026年11月時点）

Hugeicons は、数の多いアイコン集です。検索欄には60,000個以上と書かれています。

リンク先は、2色使いで角が丸い「Duotone Rounded」の一覧です。このスタイルには「PRO」の印が付いているので、使う前に利用条件を確認しておくと安心です。

Phosphor Icons

Phosphor Iconsのトップページ（2026年11月時点）
Phosphor Iconsのトップページ（2026年11月時点）

Phosphor Icons は、画面のデザインや図、プレゼン資料などに幅広く使えるアイコン集です。

2026年11月時点で9,000個ほどあり、まとめてダウンロードできます。Figmaのプラグインも用意されています。

AIツール

DESIGN.md Generator

DESIGN.md Generatorのトップページ（2026年11月時点）
DESIGN.md Generatorのトップページ（2026年11月時点）

DESIGN.md Generator は、サイトのURLを入れると、色、フォント、部品といったデザインの情報を取り出してくれるツールです。

取り出した内容は DESIGN.md というファイルにまとめて、AIに渡せます。有名なブランドの例もあらかじめ用意されています。他社のデザインをそのまま写すのではなく、方向性の参考にとどめるのがよさそうです。

Refero Styles

Refero Stylesのトップページ（2026年11月時点）
Refero Stylesのトップページ（2026年11月時点）

Refero Styles は、実在のサイトのデザインを、AIが読める DESIGN.md の形で集めたライブラリです。2026年11月時点で2,000件以上あるとされています。

色、文字、余白、部品を見比べて方向性を選び、Claude CodeやCursorなどのAIツールで使えます。