フルーエントデザイン

Fluent Design

Microsoftが作ったデザインのルール。半透明の「アクリル」素材と、控えめな丸みが特徴。

見た目の特徴

• 半透明のアクリル素材
• 控えめな丸み（4〜8px）
• 青のアクセントカラー
• 奥行きを感じる薄い影

色の組み合わせ （押すと色のコードをコピー）

合うフォントの例

Segoe UI（Inter で代用）Noto Sans JP

どこで使われている？

よく見かける場所

Windows 11、Microsoft Office、Teams

使うとよい場面

パソコン向けの業務アプリを、すっきり作りたいとき

避けたい場面

スマホ中心のかわいいアプリ

向いているもの

パソコン向けアプリ、業務ツール

似ている雰囲気と見比べる

AIへの指示文

Webサイト を作るときの指示文です。作るものは右上の「何を作る？」で変えられます。

Webサイトを「フルーエントデザイン（Fluent Design）」のデザインで作ってください。

見た目：Microsoftのフルーエントデザインに沿って、半透明のアクリル素材、控えめな角丸、青のアクセントカラー、薄い影でまとめる。

特徴：半透明のアクリル素材／控えめな丸み（4〜8px）／青のアクセントカラー／奥行きを感じる薄い影

色：背景 #F3F3F3、アクリル #FFFFFFB3、青 #0F6CBD、文字 #1B1B1B、線 #E0E0E0
フォントの例：Segoe UI（Inter で代用）、Noto Sans JP