スキューモーフィズムは何をしますか？

「画面上のコントロールは、ユーザーがすでに知っている物理的なオブジェクトのように見え、動作するときに学習しやすい。」

実物を模倣したインターフェース：革、リネン、木材、フェルト、ガラス、ブラシメタル。上部からの照明でグラデーションと重ねられたシャドウを表現。1980年代のデスクトップアイコンに起源を持ち、iOS 1～6でピークを迎え、2013年のiOS 7で置き換えられました。

期間： 2007–2013 · 時代： タッチスクリーン · 分野： グラフィック＆UIデザイン · 別名： スキューモーフィックUI、iOS 6スタイル、実物インターフェース

このスキルを読み込むタイミング

以下のキーワードをユーザーが要求したときに読み込んでください：「スキューモーフィック」「スキューモーフィズム」「iOS 6」「リアルなテクスチャ」「革のテクスチャ」「触覚インターフェース」「リアルなボタン」「光沢ボタン」「木材とリネン」「レトロiOS」「ページカール」「ステッチ入り革」。

適している用途：音楽・オーディオアプリ、メモ・日記アプリ、卓上・盤上ゲーム、ノベルティ・懐かしさを感じさせるサイト、初めてスマートフォンを使うユーザー向けオンボーディング。

以下の場合は使用しないでください：

プロダクトがデータ密度が高く、装飾のピクセルがすべて読み取りスペースを奪う場合。
ブランドが抽象的、ミニマル、またはソフトウェアネイティブである必要がある場合。
デザインが様々な密度にスケーリングする必要があり、5層のシャドウがフレームレートに影響する低電力デバイスで動作する場合。

システム指示

スキューモーフィズムでUIやグラフィックレイアウトを生成する際には、必ず以下の手順に従ってください：

各コントロールを、トグルスイッチ、メモ帳、本棚、ダイヤルなど、既知の用途を持つ実物に基づいてモデル化し、元の形状の10%以内の比率を維持します。
すべての表面を上部からの単一光源（90度）で照らし、ハイライトが上端に、シャドウが下方向に落ちるようにします。
3～5層の重なりで奥行きを構築します：1pxの明るい上部ハイライト、2～4グラデーションの本体、1pxの暗い下端、内側シャドウ、外側ドロップシャドウ。
大きな表面には、128～256px、4～12%の不透明度の繰り返しビットマップテクスチャ（リネン、革、紙、木目、フェルト）を適用します。
すべてのボタンに、上部から下部にかけて8～15%の明度差のグラデーションを適用し、ボタンが押されている間はグラデーションを反転させます。
各マテリアルパネルに、ステッチ、エンボス、またはデボスのディテールを1つ追加し、1pxの内側ハイライトと1pxの外側シャドウを付けます。
動きで現実世界を反映：ページカール、フリップトランジション、スプリング式スイッチは、模倣するオブジェクトの物理法則に従います。

ガードレール

以下の各行はスタイルを破ります。出力を返す前に、リストと照らし合わせてチェックしてください。

絶対にしないこと： コントロールにグラデーションやシャドウのないフラットなソリッドフィル。
絶対にしないこと： コンポーネント間で光源の方向が変わること。
絶対にしないこと： 継ぎ目が見えたり、64px未満の繰り返し周期のテクスチャ。
絶対にしないこと： 機能に合わない素材のメタファー（例：木製の計算機）。
絶対にしないこと： 塗りつぶしのない極細1pxアウトラインアイコン。
絶対にしないこと： ぼかし半径0px、広がりなしのシャドウ。
絶対にしないこと： 表面テクスチャのない純白の背景。

ベクタープロファイル

軸	スコア	1の意味	5の意味
装飾性	`■■■■□` 4/5	純粋なミニマル	マキシマリスト
立体感	`■■■■□` 4/5	厳密に2D	フル3D／空間的
グリッドの厳格さ	`■■■□□` 3/5	混沌／有機的	厳密な数学的グリッド
スキューモーフィックなリアリズム	`■■■■■` 5/5	抽象的なデジタル	フォトリアリスティックな素材
タイポグラフィの表現力	`■■■□□` 3/5	ニュートラル／不可視	実験的／イラスト的

これらのスコアを維持してください。リクエストによって軸が2ポイント以上動いた場合、スタイルを逸脱しています。「系統フォールバック」に進んでください。

空間とグリッドのロジック

グリッドの仕組み： iPhoneでは320×480ptのキャンバス、後に320×568pt。44ptの最小タッチターゲット。コンテンツは全幅のグループ行または10～20ptのマージンを持つ棚に配置。
余白の比率： 表面の20～35%は空のまま。テクスチャとフレームが残りを埋めるため。スペーシングスケールは4、10、20、44pt。
配置ルール： コントロールはオブジェクトメタファーのフレーム内に配置（例：テーブルの行、本棚の本、ノートのページ）。テキストはボタン内で中央揃え、行では左揃え。
コンテナの形状： 角丸四角形（半径5～10px）、グループ化されたテーブルセル（外側の角に10pxの半径）、44pxの高さのバー（1pxのベベル）。

タイポグラフィ

分類： ヒューマニストサンセリフ · スラブセリフ · スクリプト
トラッキング： 表示サイズは0em～0.01em。本文は0。ボタンラベルは+0.02em。
行間： 表示サイズ1.1。本文1.3～1.4。テーブル行は44pxの高さに17pxの1行。
階層ルール：
- ボタンとタイトルラベルには太字（700）、本文テキストには標準（400）を使用。
- タイトルと行には17px、セカンダリラベルには14px、キャプションには12pxを設定。
- 1pxのテキストシャドウ（暗いテキストの下に不透明度60%の白、または明るいテキストの上に不透明度60%の黒）を追加し、テキストが表面に刻印されているように見せます。
- オブジェクトに縛られた画面では、タイトルテキストに異なるフェースを使用します（例：本棚にはスラブ、メモ帳にはスクリプト）。

フォントペアリング

表示用	本文用	備考
Roboto Slab	Open Sans	オブジェクトラベルにスラブ、テキストにヒューマニスト。iOS 6メモのMarker FeltとHelveticaの組み合わせに近い。
Arvo	Lato	革と木のパネルにスラブ、読みやすいコントロールに丸みのあるサンセリフ。
Caveat	Source Sans 3	メモ帳や日記のメタファーに手書き風、UIテキストにニュートラルなサンセリフ。

色と照明

パレット構成： 3～5色のマテリアルカラー。表面の60%を支配的なマテリアルが占め、表面の10～15%に光沢のある青のアクセントをプライマリコントロールに使用。
コントラストルール： マテリアル表面のテキストは少なくとも4.5:1を維持。革の茶色やフェルトの緑の上の明るいテキストは約8:1、光沢のある青の上のテキストは4.5:1を達成。
表面処理： 写真のようなテクスチャ、50%のハードスプリットによる線形グラデーションで光沢を表現、3～6%の不透明度のノイズ。ガラスは上半分に30%の白ハイライトを使用。
光と影： 上部からの単一光源。ハイライトは上端に不透明度40～70%の白、シャドウは下方向に不透明度25～50%の黒、オフセット1～3px。

パレット

名前	Hex	役割
リネン	`#D8D4CC`	背景テクスチャベース
革の茶色	`#6B4A2F`	パネル表面
ガラスの青	`#2F7BE0`	プライマリコントロールグラデーション
クロム	`#C9CDD3`	メタルバーとベゼル
フェルトの緑	`#1E5B3A`	テーブル表面
スタンプインク	`#2B2118`	明るい素材上のテキスト

素材感とテクスチャ

表面シミュレーション： 本物の素材：ステッチ入り革、リネン、紙、木材、フェルト、ブラシアルミニウム、ガラス、クロム。
ボーダールール： 1pxの暗い外側エッジ（黒40～60%）、1pxの白い内側ハイライト（不透明度40～60%）、革の端から4px内側に破線の1pxステッチ。
ぼかしと標高： ボタンには0 1px 2px（黒40%）、パネルには0 4px 10px（黒50%）のドロップシャドウ。ウェルにはinset 0 1px 3px（黒50%）の内側シャドウ。標高は3レベルを使用。

装飾とアイコン

アイコン： 57×57px、半径12pxの光沢のある塗りつぶしアイコン。高さの50%にわたる上部光沢ハイライト、1pxのベベル、下部に反映されたシャドウ。
イラスト： 照明を伴うレンダリングされたオブジェクトイラスト（本棚、マイク、フィルムリール、テープデッキなど）。3/4上面図から描画。
装飾要素： ステッチ・ページカール・木の棚・破れた紙の端・光沢ハイライト・クロムベゼル・アイコンの下の反射

モーションとインタラクティビティ

画面上で生まれたか： はい
トランジション物理： オブジェクトの物理法則：ページは400～600msでカール・フリップ。スイッチは20msのスプリングセトルでスライド。棚は慣性と8pxのエッジバウンスでスクロール。
イージング： cubic-bezier(0.42, 0, 0.58, 1)
持続時間（ms）： 350
ホバーとアクティブ： 押された状態ではボタンのグラデーションが反転し、外側のシャドウが削除されるため、ボタンが表面に1～2px押し込まれたように見えます。タッチデバイスにはホバーはありません。

コードとトークンの基本

ルート要素に data-style="skeuomorphism" を設定し、トークンを貼り付けてください。ファイル tokens.css には同じトークンと一連のリファレンスルールが含まれています。

[data-style="skeuomorphism"] {
  --color-bg: #D8D4CC;
  --color-surface: #6B4A2F;
  --color-text: #2B2118;
  --color-muted: #6E6659;
  --color-primary: #2F7BE0;
  --color-accent: #C9A24B;
  --color-border: rgba(0, 0, 0, 0.5);
  --font-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
  --border-radius: 8px;
  --border-width: 1px;
  --shadow-elevation: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 3px rgba(0, 0, 0, 0.35);
  --backdrop-filter: none;
  --space-unit: 4px;
  --ease: cubic-bezier(0.42, 0, 0.58, 1);
  --duration: 350ms;
  --gradient-control: linear-gradient(to bottom, #6FA8F5 0%, #2F7BE0 50%, #1F5FC0 50%, #2C78DC 100%);
  --gradient-bar: linear-gradient(to bottom, #E2E5EA 0%, #C9CDD3 50%, #B6BBC3 100%);
  --text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  --touch-target: 44px;
  --color-on-bg: #2B2118;
  --color-on-surface: #D8D4CC;
  --color-on-primary: #000000;
  --color-on-accent: #2B2118;
  --color-muted-on-bg: #5F574E;
  --color-muted-on-surface: #CDC6BC;
  --color-link: #2B2118;
  --color-link-on-surface: #D8D4CC;
  --display-weight: 700;
  --subhead-weight: 700;
  --body-weight: 400;
  --strong-weight: 700;
  --label-weight: 700;
  --display-tracking: 0em;
  --display-leading: 1.1;
  --display-case: none;
  --body-leading: 1.55;
  --body-size: 16px;
  --icon-stroke: 2;
}

Tailwindパターン：

要素	クラス
ページ	`min-h-screen bg-[#D8D4CC] bg-[url('/textures/linen.png')] font-sans text-[#2B2118] [text-shadow:0_1px_0_rgba(255,255,255,0.6)]`
見出し	`font-serif text-[17px] font-bold leading-tight [text-shadow:0_1px_0_rgba(255,255,255,0.6)]`
パネル	`rounded-lg border border-black/50 bg-[#6B4A2F] bg-[url('/textures/leather.png')] p-5 shadow-[0_4px_10px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.3)]`
ボタン	`h-11 rounded-lg border border-[#1B4F9E] bg-gradient-to-b from-[#6FA8F5] via-[#2F7BE0] to-[#1F5FC0] px-5 text-sm font-bold text-white shadow-[0_1px_2px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.5)] active:from-[#1F5FC0] active:to-[#6FA8F5] [text-shadow:0_-1px_0_rgba(0,0,0,0.5)]`
入力	`h-11 rounded-md border border-black/40 bg-white px-3 text-[17px] shadow-[inset_0_1px_3px_rgba(0,0,0,0.35)]`

ビジュアルパック

このスタイルの画像とアイコンはファイルです。そのまま使用するか、仕様として読み取り、同じ言語で独自のものを描画してください。

ファイル	内容
`pack/hero.svg`	ヒーロープレート、800×600。スタイルのビジュアル言語による抽象的な画像。
`pack/pattern.svg`	パターンタイル、80×80。両方向に繰り返します。
`pack/icons.svg`	アイコンスプライト：home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders。

アイコン： 塗りつぶし、24pxフィールド上でストローク2、ラウンドキャップ、ラウンドジョイン、コンテナ：角丸。使用方法：<svg class="icon"><use href="pack/icons.svg#home"/></svg>。アイコンはcurrentColorを取ります。
アイコンファミリー： スプライトはPhosphor IconsによるPhosphor（Fill）を切り取ったもの、ライセンスMIT。理由：実物の完全なシルエット。コンテナが素材と光を提供します。デモ用のオープンソースの代替品です。製品の場合は、ブランドのアイコンライブラリを使用し、以下のルールでファミリーを選択してください。
表示タイプ： ウェイト700、トラッキング0em、行間1.1、ケース：なし。
ウェイト： 表示700、サブ見出し700、本文400、テキスト内の太字700、ラベルとボタン700。スタイルは2つのウェイト（400、700）のみを使用し、それ以外は使用しません。表示は本文よりも300重いです。アクセントはウェイトです。重い単語がアクセントとなるため、ウェイト間の段差が明確です。
本文タイプ： 16px、行間1.55。
ページ： ヒーロー分割、左揃え、標準密度、アクセント傾き0°。
テキストの色： --color-textはメインの読み取りフィールドのみに使用。各フィールドでは、--color-on-bg、--color-on-surface、--color-on-primary、--color-on-accentを使用してください。

アイコンパックの選び方

アイコンパックは画像用の書体です。テキストフェースと同じように注意して選択してください。これらのルールはオープンソースセットとライセンスライブラリの両方に適用されます。

ストロークがステムと一致する。 アイコンを本文テキストの隣にテキストサイズで配置します。アイコンの線と文字のステムは同じ太さです。
終端と角は半径トークンに従う。 バットキャップとマイタージョインは半径ゼロに。ラウンドキャップとラウンドジョインは柔らかい半径に。
塗りつぶしモードは時代の技術に従う。 印刷時代はソリッドフォルムを切り取る。奥行きのあるスクリーン時代はフォルムを塗りつぶし、陰影を付ける。現在の製品インターフェースはアウトラインを描く。
メタファーはスタイルより新しくない。 各画像はその時代が知っていたオブジェクトです。後の時代のメタファーを持つアイコンは時代を破ります。
一つのファミリー、一つのグリッド。 すべてのアイコンは一つのファミリーと一つのバリアントから、一つのフィールドに描画されます。一つの表面にファミリーを混ぜないでください。
ファミリーは製品をカバーする。 コミットする前に、製品が必要とする各コンセプトをリストアップしてください。そのうちの一つのアイコンがないファミリーは間違ったファミリーです。
色はトークン。 アイコンはcurrentColorを取ります。2つ目の色調はファイルではなくトークンから来ます。
ライセンスが使用を許可する。 セットのライセンスを読んでください。ライセンスが求める場合、クレジットを記載してください。ブランドのある製品は、ライセンスされたライブラリを使用し、同じルールをファミリー選択に適用してください。

系統フォールバック

ユーザーがバリエーションを要求した場合、即興で作成しないでください。ここに示された隣接スタイルに向かってブレンドし、そのスキルを読み込んでください。

ユーザーがよりフラットを求めた場合：flat-design（フラットデザイン）に向かってください。すべてのグラデーション、テクスチャ、シャドウを削除し、ソリッドフィルを設定し、色と5ptのスペーシングマージンを維持します。
ユーザーがよりグラデーションまたはより光沢を求めた場合：y2k（Y2Kスタイル）に向かってください。グラデーションのコントラストを70%に上げ、クロムのハイライトを追加し、アイコンにグロー効果を付け、明るいターコイズとピンクのアクセントを導入します。
ユーザーがより立体的で没入感のあるものを求めた場合：neubrutalism（ネオブルータリズム）に向かってください。テクスチャをドロップし、インクのような黒枠を厚くし、大胆な原色ブロックに置き換え、歪んだタイポグラフィを追加します。
ユーザーがよりリアルな3Dを求めた場合：glassmorphism（グラスモーフィズム）に向かってください。半透明のガラスパネルを採用し、大きなぼかしで奥行きを表現し、ネオンやパステルのグラデーションを使用し、重なり合ったレイヤーで3D空間をシミュレートします。

リファレンス

ウィキペディア：スキューモーフィズム
iPod TouchでiOS 6がどのように見えたか
IOS 6の人間味のあるインターフェース（Wayback Machineによるアーカイブ）

スキューモーフィズム