Component Gallery

UI Style

スキューモーフィズム（Skeuomorphism）

革、金属、紙など現実の素材や物体の手触りをUIに持ち込む、具象的なスタイルです。

革や金属のような質感とノブで、現実物の比喩を表します。

30秒でわかる要点

革、金属、紙など現実の素材や物体の手触りをUIに持ち込む、具象的なスタイルです。

視覚的特徴

  • ・現実素材の比喩
  • ・強い立体感
  • ・装飾密度の高さ

メリット

  • ・操作対象を直感的に伝えやすい
  • ・高級感や実在感を演出できる
  • ・記憶に残りやすい

デメリット

  • ・実装コストが高い
  • ・情報密度が下がりやすい
  • ・古く見える場合がある

向いている用途

  • ・楽器アプリ
  • ・ゲームUI
  • ・高級感を出したい操作パネル

避けた方がよい用途

  • ・頻繁に使う業務アプリ
  • ・アクセシビリティ優先の公共UI

関連コンポーネント

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

関連画面

商品詳細画面（Product Detail Screen）商品詳細画面は、商品の価値、仕様、価格、在庫、購入導線を判断しやすくまとめる画面です。
設定画面（Settings Screen）設定画面は、ユーザーが通知、アカウント、表示、権限などの振る舞いを確認・変更する画面です。

関連デザインシステム

Apple Human Interface GuidelinesAppleプラットフォーム向けの体験設計、操作、アクセシビリティ、コンポーネント指針をまとめた公式ガイドライン。

AI実装プロンプト

React + Tailwind CSS

React + Tailwind CSSでスキューモーフィズム風の操作パネルを作成してください。革や金属を連想する色、強いハイライト、内側の影、丸いノブを使ってください。

運営・更新・参照元

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

参照元

FAQ

スキューモーフィズムは今でも使えますか？

用途を絞れば使えます。毎日使う業務画面より、楽器、ゲーム、高級感のある単機能UIなどで効果が出やすいです。