Component Gallery

UI Style

ニューモーフィズム（Neumorphism）

背景と同系色の要素に内外の影を付け、押し出しやへこみを表現する柔らかい立体スタイルです。

同色の面と内外シャドウで、浮き出しとへこみを表します。

30秒でわかる要点

背景と同系色の要素に内外の影を付け、押し出しやへこみを表現する柔らかい立体スタイルです。

視覚的特徴

  • ・背景同色の面
  • ・内外シャドウ
  • ・低コントラストな立体感

メリット

  • ・上品で触れたくなる質感が出る
  • ・統一感を出しやすい
  • ・余白のあるUIに合う

デメリット

  • ・低コントラストになりやすい
  • ・アクセシビリティに注意が必要
  • ・情報量が多い画面に弱い

向いている用途

  • ・スマートホームUI
  • ・音楽プレイヤー
  • ・設定パネル

避けた方がよい用途

  • ・公共UI
  • ・フォームが多い業務画面
  • ・視認性が最優先の画面

関連コンポーネント

ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。
トグルスイッチ（Switch）トグルスイッチ（Switch）は、ON/OFFの2状態をトグル操作で切り替えるコンポーネント。設定画面の機能有効化・無効化に広く使われる。
スライダー（Slider）スライダー（Slider）は、トラックとサムで数値や範囲をスライド操作で入力するコンポーネント。価格フィルターや音量調整などに使用される。
カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。
テキスト入力（Input）テキスト入力（Input）は、ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。

関連画面

設定画面（Settings Screen）設定画面は、ユーザーが通知、アカウント、表示、権限などの振る舞いを確認・変更する画面です。
プロフィール画面（Profile Screen）プロフィール画面は、ユーザーの基本情報、自己紹介、公開状態、編集導線をまとめて確認・更新する画面です。

AI実装プロンプト

React + Tailwind CSS

React + Tailwind CSSでニューモーフィズムのコントロールパネルを作成してください。背景同色、内外シャドウ、押下状態、十分なラベルコントラストを含めてください。

運営・更新・参照元

最終更新日
2026-07-20
レビュー状態
未レビュー

参照元

FAQ

ニューモーフィズムで一番注意することは何ですか？

コントラストです。見た目の柔らかさを優先しすぎると、ボタンや入力欄の境界が分かりにくくなります。