STYLE PROFILE

スキューモーフィズム

Skeuomorphism

現実の道具の形や質感を画面に引き継ぎ、身近な物のように見せるデザイン表現。

見本はこの図鑑のためにAIで生成した画像です。

スキューモーフィズムの代表配色例

色コードと役割をまとめてコピーできます。

背景（`#E7DFCB`）とのコントラスト比
色	役割	比	文字に使う目安
`#302E28`	文字と構造	10.22:1	本文の文字にも使える
`#9D7247`	主色	3.20:1	大きな文字や図形なら使える
`#B9C0BD`	強調色	1.39:1	文字には向かない

比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です（達成基準1.4.3・1.4.11）。

スキューモーフィズムのプロンプト例

スキューモーフィズムでデザインしてください。実際の道具や容器に似せた形、物理的な素材を思わせる質感、陰影やグラデーションによる立体感を取り入れてください。

スキューモーフィズムの主な視覚的特徴

実際の道具や容器に似せた形
ごみ箱、フォルダ、書類、フロッピーディスクのように、事務用品の見た目をまねたアイコンを使います。見慣れた形にすることで、初期の利用者にも道具の目的が直感的に伝わりました。
物理的な素材を思わせる質感
メモアプリの革の装丁のように、実物の素材の質感を画面に描き込みます。物理的な道具の見た目と感覚を、できるだけ忠実に再現しようとする表現です。
陰影やグラデーションによる立体感
写実的な影やグラデーションを重ねて、部品を立体的に見せます。影を付けたくぼみも、画面に奥行きを感じさせるための工夫です。

スキューモーフィズムが向いている成果物

- ダッシュボード
利用者が知っている道具や計器の形と質感で状態を表し、物理的な操作との対応がある画面を理解しやすくできる。
- 商品・サービス紹介ページ（LP）
道具の形を説明や操作部へ一貫して取り込み、実物との関係があるサービスを紹介できる。

スキューモーフィズムとは

スキューモーフィズムは、現実の物の要素をデジタルの画面に取り入れ、新しい画面に親しみを感じさせるデザインの手法です。もとになった語「スキューモーフ」は、別の素材で作られた似た道具のデザインをまねた物や特徴を指します。プラスチックのデザイン博物館の展示（2014〜15年）は、プラスチックで陶磁器やガラス、上質な金属をまねるデザインを取り上げました。

UXデザインでは、この語は2つの意味で使われます。1つは、画面の部品を現実の物に似せて学びやすくする工夫で、ごみ箱、フォルダ、書類、フロッピーディスクのアイコンがその例です。2024年のNN/gの記事は、その多くがまだ使われているとしています。もう1つは視覚的な流行で、写実的な質感や影、グラデーションで立体的に見せる装飾的な画面を指します。

流行としては2010年代初めに最盛期を迎えました。iBooksやKindleといった電子書籍のアプリは本棚のような画面になり、メモアプリには革の装丁や破れたページが描かれました。スキューモーフィズムと写実は長くアップルのデザインの特徴で、同社のトップページは2013年ごろまでフラットデザインの流れに加わりませんでした。

なじみのない画面を親しみやすくできる一方、この流行は画面の煩雑さや読み込みの遅さも招きました。その限界への反動としてフラットデザインが広まり、のちに控えめな立体感を取り戻したニューモーフィズムが現れました。

見分けるときは、次の点を確かめてみてください。