デザイン・オープンブック

デザインスタイルの名前

グラスモーフィズムやニューモーフィズムなどのデザインスタイルをAIに指定するにはどうすればいいですか? フラット、スキューモーフィズム、ニューモーフィズム、グラスモーフィズム、Liquid Glassなど7つのスタイル名を指定すると、AIが質感・影・透明度を合わせます。

「きれいにして」の代わりにスタイル名を伝えると、AIが質感、影、透明度を自動で合わせてくれます。

名前とプレビュー

プレビューをタップすると止まり、もう一度タップすると再生します。

  1. フラット

    Flat design

    影も質感もなく、単色の面だけで構成する

  2. スキューモーフィズム

    Skeuomorphism

    革・紙・金属など実物の質感を模倣する

  3. ニューモーフィズム

    Neumorphism

    背景と同じ色で、凸凹に盛り上がったような柔らかい影

  4. グラスモーフィズム

    Glassmorphism

    半透明のガラス板越しに背景がぼんやり透ける

  5. Liquid Glass

    Liquid Glass

    AppleがiOS 26から採用した、光を屈折させる水滴のようなガラス素材

  6. ブルータリズム

    Brutalism

    太い枠線、原色、あえて粗い配置

  7. クレイモーフィズム

    Claymorphism

    粘土のように柔らかく丸い立体感

使い方

  • 1画面ではスタイルを1つだけ選びます。ガラスの質感とブルータリズムを混ぜると、どちらも活きません。
  • ガラス系は、透けて見える背景(写真、にじんだ色)がないと効果が出ません。白い背景の上では、ただの灰色の板になります。
  • 半透明の板の上の文字はコントラストが落ちやすくなります。板の不透明度を上げるか、文字を大きくします。
  • ニューモーフィズムはボタンの境界がぼやけて、押せるかどうかが分かりにくくなります。主要ボタンだけは濃い色にします。

コピーして使うプロンプト

ガラス質感の再生画面

音楽アプリの再生画面を、グラスモーフィズム(Glassmorphism)スタイルで作ってください。
- 背景は、アルバムジャケットを大きくぼかして敷いた画像。
- 再生コントロールは半透明のガラス板の上に。背景のぼかし20px、白15%の不透明度。
- 文字と背景のコントラストが4.5:1以上になるよう、板の不透明度を調整してください。
- ほかの要素にはガラス効果を使わないでください。

参考にした投稿: @uxwoodytips

すべてのカード (27)