このサイトについて

「すりガラスみたいな」「昭和の喫茶店っぽい」「黒と金で高級な感じ」――
見た目の雰囲気から、そのデザインの名前と、AIに伝えるための指示文がわかる図鑑です。

できること

• 同じ見本で見比べる：すべてのスタイルを、同じ中身の画面（アプリ・Webサイト・ログイン・管理画面）で見比べられます。
• 色とフォントがわかる：スタイルごとの色の組み合わせ（色のコードつき）と、合うフォントの例を載せています。
• AIへの指示文をコピーする：作りたいもの（Webサイト・LP・スマホアプリ・管理画面・資料）を右上で選ぶと、それに合わせた指示文になります。
• 雰囲気診断：「だれに見てもらう？」「どんな印象？」などの質問に答えると、近いスタイルがわかります。
• 並べて見比べ：好きなスタイルを3つまで選んで、横に並べて見比べられます。
• 違いを比べる：グラスモーフィズムとニューモーフィズムのように、まぎらわしいスタイルの違いを表で比べられます。

今の収録数

86 スタイル、比較ページ 12 件（これからも増やしていきます）。

姉妹サイト

画面の「動き」の名前は、UIのなまえ図鑑で調べられます。

ご注意

• スタイルの名前や定義は、人や時代によって少しずつ違います。代表的な呼び方と特徴を載せています。
• 見本は雰囲気を伝えるために作ったもので、本物のサービスの画面ではありません。
• フォント名は例です。使うときは、それぞれのフォントの利用条件を確認してください。