UIXHERO
#351
視覚デザイン
#351

スキューモーフィズム

スキューモーフィズム

別名・表記:Skeuomorphism

UIXHERO Definition

「現実世界の物質的な特徴」をデジタルインターフェースに模倣するデザイン手法。メタファーを通じて直感的な理解を助けるが、過度な装飾はノイズにもなる。

概要

ギリシャ語の「道具(Skeuos)」と「形(Morphe)」を組み合わせた言葉。現実世界の物質的な質感、形状、挙動を、デジタルインターフェース上で模倣するデザインスタイル。 Appleの初期のiOS(革のテクスチャの手帳、リアルな電卓)が代表例。ユーザーが現実世界の経験(メンタルモデル)をそのまま適用できるため、デジタル機器に不慣れな人でも直感的に操作できる。

UXでの活用

  • スイッチのON/OFF: デジタルのトグルスイッチでも、物理的なスイッチのようにスライドしたり、色が鮮やかに変わったりすることで、現在の状態と操作方法を直感的に伝える。
  • ゴミ箱: ファイルを削除する場所に「ゴミ箱」のアイコンを使い、ドラッグ&ドロップで「捨てる」というメタファーを使うことで、説明書なしで機能を理解させる。
  • カメラアプリのシャッター音: デジタルカメラにはフィルムを巻き上げる音もシャッター幕の音も不要だが、あえて「カシャッ」という音(聴覚的スキューモーフィズム)を鳴らすことで、「撮影できた」という確かなフィードバックを与える。

💡 使いどころ

高齢者向けアプリや、全く新しい概念のツール。現実の物理法則(影、質感、音)を模倣して、使い方のヒントを与える(アフォーダンス)。

⚠️ 注意点・誤用

過度なスキューモーフィズムは、画面の領域を無駄にし、ロード時間を増やす。現在は「フラットデザイン」や「ニューモーフィズム」が主流だが、直感性が必要な部分には依然として有効。

具体例

  • 本棚のように見える電子書籍リーダー
  • アナログ時計のデザインをした目覚ましアプリ
出典・参考文献:
  • Don Norman: The Design of Everyday Things
  • Apple Human Interface Guidelines
  • Alan Cooper: About Face
  • Luke Wroblewski: Mobile First
作成: 2026年1月26日
更新: 2026年2月14日

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

この記事をシェアする
シェア: