01 Porsche デザインシステム インターフェースプレビュー 仕上げとホイールのスタイルを選び、セッションの概要を保持し、インターフェースをライト／ダークモードに切り替えます。
v4のトークンの役割とセグメント選択の動作を独自に解釈した、オフラインのHTML／CSS実装です。ネイティブのPDSランタイム、リモートフォント、公式モデル画像、実際の車両データは使用していません。·
実装リファレンス Porsche Design System v4のドキュメントです。トークンの各ページにはv4.8.0と表示されています。特定バージョンを対象としたリファレンスであり、最新リリースを示すものではありません。オリジナルの仕上げスウォッチはアプリケーションのデータであり、公式のPorsche塗装コードではありません。
名前 / ルール 値 / 設定 用途 spacingStatic2Xs1px固定スペーシングトークン。 spacingStaticXs4px固定スペーシングトークン。 spacingStaticSm8px固定スペーシングトークン。 spacingStaticMd16px固定スペーシングトークン。 spacingStaticLg32px固定スペーシングトークン。 spacingStaticXl48px固定スペーシングトークン。 spacingStatic2Xl80px固定スペーシングトークン。
名前 / ルール 値 / 設定 用途 spacingFluidXsclamp(4px, 0.25vw + 3px, 8px)小さな可変間隔。 spacingFluidSmclamp(8px, 0.5vw + 6px, 16px)コンパクトな可変ギャップ。 spacingFluidMdclamp(16px, 1.25vw + 12px, 36px)ページのパディング例。 spacingFluidLgclamp(32px, 2.75vw + 23px, 76px)セクション間隔。 spacingFluidXlclamp(48px, 3vw + 38px, 96px)大きなスペーシング。 spacingFluid2Xlclamp(80px, 7.5vw + 56px, 200px)構成の主要なスペーシング。
名前 / ルール 値 / 設定 用途 colorCanvaslight-dark(#fff,hsl(225 66.7% 1.2%))ページの背景。 colorSurfacelight-dark(hsl(240 10% 95%),hsl(240 2% 10%))セカンダリーサーフェス。 colorPrimarylight-dark(hsl(225 66.7% 1.2%),hsl(225 100% 99%))主要テキスト。 colorFocuslight-dark(#1A44EA,#1A44EA)キーボードフォーカス。 colorContrastLow / colorContrastLowerDecorative onlyアクセシビリティに適合したテキストの役割ではありません。
名前 / ルール 値 / 設定 用途 fontPorscheNext'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif公式のフォントファミリーとフォールバック。 typescale2Xs.75rem記載されている最小の文字サイズ。 typescaleXs.875rem小さなメタデータ。 typescaleSm1rem本文の基準サイズ。 typescaleMdclamp(1.13rem, 0.21vw + 1.08rem, 1.33rem)流動的な文字サイズ。 typescale2Xlclamp(1.6rem, 1.56vw + 1.29rem, 3.16rem)流動的な大見出し。 leadingNormalcalc(6px + 2.125ex)書体に応じて変化する行の高さ。 fontWeightNormal / Semibold / Bold400 / 600 / 700利用可能なウェイト。
名前 / ルール 値 / 設定 用途 radiusXs / Sm / Md2px / 4px / 6px小さな角丸。 radiusLg8pxコンパクトな操作コントロール。 radiusXl12px標準的な操作コントロール。 radius2Xl16px通知。 radius3Xl24pxタイルやダイアログ風のコンテナ。 radius4Xl32px固定値の中で最大の角丸。 radiusFullcalc(infinity * 1px)単独で使うピル型インジケーター。
名前 / ルール 値 / 設定 用途 breakpointXs480pxと組み合わせて使う数値トークン。 breakpointSm760pxと組み合わせて使う数値トークン。 breakpointMd1000pxと組み合わせて使う数値トークン。 breakpointLg1300pxと組み合わせて使う数値トークン。 breakpointXl1760pxと組み合わせて使う数値トークン。 breakpoint2Xl1920pxと組み合わせて使う数値トークン。
名前 / ルール 値 / 設定 用途 valuestring | number選択中の項目の値。 change eventdetail: { value: string | number }アプリケーションの状態を更新する。 columnsauto or 1–25; responsive values supported項目のグリッドを制御する。 noWrapfalse by defaulttrueにすると、横スクロール可能な1行表示になる。 statenone / error / success検証時のスタイル。 disabledExcludes value from form submission通常の未選択項目とは異なる。
03 Porsche デザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
DESIGN-porsche.md 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
ガイドをダウンロード Porsche デザインシステム v4の基盤を一式として活用する グローバル変数が必須になった バージョン4では、グローバルなCSS変数を使ってコンポーネントのスタイルを構築します。そのため、グローバルスタイルシートの読み込みは、見た目を整えるための任意のリセットではなく、アーキテクチャ上の必須要件です。このスタイルシートには、ノーマライズとPorsche Nextのfont-face定義も含まれています。
このリファレンスでは、v4のコンポーネントとトークンの仕様をまとめて確認できます。テキストフィールドのラッパーやコンポーネントごとのテーマプロパティを使う古い例は、移行ガイドを確認せずにそのまま流用しないでください。ドキュメント自体にバージョンがあるため、恒久的なAPIであると主張するのではなく、対象バージョンを明記しています。
関連する仕様を確認する
Porsche デザインシステム カラースキームで役割ごとのペアを切り替える インターフェースの役割と仕上げのサンプルを分ける キャンバス、サーフェス、主要な前景色のトークンには、light-dark()のペアが設定されています。CSSのcolor-schemeプロパティで、適用する側を選びます。アプリケーションでモードを固定するか、ユーザーの設定に従うかに応じて、light、dark、またはlight darkを指定します。
この例の仕上げ色は、インターフェースの色とは独立したオリジナルのスウォッチです。インターフェースをダークモードに切り替えると、選択した仕上げではなく、その周囲のサーフェスとテキストの色が変わります。コントラストの低い色の役割は装飾用です。必須の選択肢ラベルに使うと、トークンの想定された用途に反します。
関連する仕様を確認する
Porsche デザインシステム 流動的なリズムと固定のコントロール間隔を併用する 余白を広げる場合はclamp式を使う Porscheには固定スケールと流動スケールの両方があります。ネイティブ実装では、ページのパディングに中程度の流動的な値を使い、オプション領域内の間隔には16pxと32pxを使って安定した関係を保っています。流動値に最大値を設定することで、画面が広くなっても余白が際限なく広がるのを防げます。
このサンプルでは、760px未満で横並びのビジュアルとコントロールを縦に積み重ねるレイアウトに切り替えます。760pxはドキュメントに記載されたブレークポイントの1つです。縦に積み重ねる判断はアプリケーションの構成によるものですが、ブレークポイントの値はデザインシステムのリファレンスに基づいています。
関連する仕様を確認する
Porsche デザインシステム タイポグラフィは指定されたフォントに依存する 行の高さの式は汎用的な比率ではない Porsche Nextには、ドキュメントに記載されたフォールバックフォントのスタックと、小さな固定サイズから大きな流動サイズまでの文字スケールがあります。leadingNormalはex単位を使うため、フォントのx-heightに応じて変化し、さらに固定のピクセル値が加算されます。これを任意の1.5という比率に置き換えると、意図されたリズムが変わります。
オフラインの実装では、ライセンスされたフォントを同梱しているかのように見せず、ローカルのフォールバックフォントと読みやすい行の高さを使用しています。ネイティブ実装では、グローバルスタイルシートが実際のフォントを定義します。v4のデザインでは見出しにレギュラーウェイトを使います。階層を表現するために、大きな文字を太くする必要はありません。
関連する仕様を確認する
Porsche デザインシステム コントロールとコンテナでは角丸を使い分ける 12pxと24pxで主要な階層を表す 標準的な操作コントロールの角丸は12px、カードとダイアログの角丸は24pxです。コンパクトなコントロールには8px、通知には16pxを使います。すべての要素に最大の角丸を適用すると、こうした関係が失われます。
オリジナルのプレビューでは、車両のスタディを大きな24pxのサーフェスに配置し、コントロールに12pxの角丸を使っています。車両のシルエットはオリジナルのCSSアートワークであり、Porscheのモデルをレンダリングしたものでも、製品写真でもありません。この構成は、実際に車両を構成できるかのように見せずに、素材セレクターにも応用できます。
関連する仕様を確認する
Porsche デザインシステム セグメントコントロールは選択肢であり、タブバーではない 安定した値と単一の状態管理元を使う 各p-segmented-control-itemにはvalueを指定します。changeイベントはその値をevent.detailで返し、例では概要を再描画する前に値を保存します。グループには表示ラベルを設定し、仕上げの選択肢とホイールの選択肢を区別できるようにします。
v4のAPIでは、列数をレスポンシブに設定でき、任意で折り返しのないスクロール表示にもできます。短い選択肢はすべて同時に表示できます。長いローカライズ済みラベルは、切り詰めるのではなく、折り返すか、意図的にスクロール表示にしてください。無効化されたコントロールはフォームデータから除外されます。このサンプルを実際のフォームに拡張する際は、この点に注意してください。
finishとwheelの値はアプリケーションの状態で一度だけ初期化します。 グループのchangeイベントからdetail.valueを読み取ります。 表示中のスタディとテキストの選択内容を同時に更新します。 編集後は、以前に保存したサマリーをクリアします。 関連する仕様を確認する
Porsche デザインシステム ページ内の選択は、完了した取引ではありません ボタンのtypeを明示する p-buttonのtypeはデフォルトでsubmitです。この例ではtype="button"を設定しています。組み合わせの保存と配色の変更は、ページ内で完結する操作だからです。ナビゲーションには、遷移先を仮定したボタンではなくLinkコンポーネントを使用します。
主操作では、実際に起きたことだけを正確に伝えます。組み合わせは現在のページセッション中に保存されます。再読み込み後も保持される、アカウントに保存される、注文が確定するといった誤解を招く説明はしません。インターフェースの見本として、この動作は意図的に限定されており、それだけで完結しています。
主操作では、現在のローカルな組み合わせを保存します。 副操作では、インターフェースの配色を変更します。 どちらの操作にも、表示ラベルを付けます。 保留中の処理がない場合、ローディングスピナーは表示しません。 関連する仕様を確認する
Porsche デザインシステム コンポーネントを読み込み、初回描画を保護する ローダー、スタイルシート、コンパイラーが連携する Viteの設定で、公式ローダーの部分テンプレートをドキュメントのbodyに挿入します。メインエントリーではグローバルスタイルシートを読み込み、実際のカスタム要素を描画します。スコープ付きの:not(:defined)ルールにより、登録前に選択したコンポーネントタグが一瞬表示されるのを防ぎます。
ドキュメントに記載されたViteの設定では、壊れているとされるポリフィルを避けるため、Lightning CSSのLightDark変換を除外します。この除外は重要です。トークン関数を誤ってコンパイル時に除去すると、コンポーネントのマークアップが正しくてもテーマが壊れることがあります。推奨するプリロードは、ドキュメントに記載されたフォント、アイコン、コンポーネントの部分テンプレートを使って後から追加できます。
関連する仕様を確認する
Porsche デザインシステムのコンポーネント例 完全なスタンドアロンのインタラクティブ見本 ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。v4のトークンの役割とセグメント選択の動作を独自に解釈した、オフラインで動作するHTML/CSSです。ネイティブなPDSランタイム、外部フォント、公式モデル画像、実在の車両データは使用しません。
html コードをコピー
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Original finish study</title><style>:root{color-scheme:light;--canvas:#fff;--surface:hsl(240 10% 95%);--ink:hsl(225 66.7% 1.2%);--line:#c8c8cd;--paint:#b9b6ae}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.5 'Arial Narrow',Arial,sans-serif}body.dark{color-scheme:dark;--canvas:hsl(225 66.7% 1.2%);--surface:hsl(240 2% 10%);--ink:#fcfcff;--line:#515156}button{font:inherit;cursor:pointer}button:focus-visible,input:focus-visible+span{outline:3px solid #1a44ea;outline-offset:4px}header{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:24px 32px;border-bottom:1px solid var(--line)}header b{letter-spacing:3px;font-weight:400}header button{border:1px solid var(--line);color:var(--ink);background:var(--canvas);border-radius:12px;padding:8px 16px}main{max-width:1200px;padding:clamp(16px,1.25vw + 12px,36px);margin:auto}h1{font-size:clamp(1.6rem,1.56vw + 1.29rem,3.16rem);font-weight:400;line-height:1.2;margin:16px 0}.intro{color:var(--ink);opacity:.8;max-width:650px}.layout{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;margin-top:32px}.stage{background:var(--surface);border-radius:24px;display:flex;flex-direction:column;justify-content:center;min-height:360px;overflow:hidden;padding:32px;position:relative}.scene{height:210px;position:relative;width:100%;max-width:520px;margin:auto}.car{height:80px;width:94%;position:absolute;bottom:28px;left:3%;background:var(--paint);border-radius:60% 35% 18% 22% / 75% 65% 25% 35%;box-shadow:inset 0 5px 10px #ffffff70,inset 0 -10px 12px #0003}.roof{position:absolute;bottom:80px;left:25%;width:46%;height:70px;background:var(--paint);border-radius:65% 55% 0 0;transform:skewX(-9deg)}.window{position:absolute;inset:9px 13px 4px;background:linear-gradient(135deg,#202d37,#67737b);border-radius:70% 52% 0 0;border-right:7px solid var(--paint)}.window:after{content:'';position:absolute;left:46%;top:0;height:100%;width:6px;background:var(--paint)}.wheel{position:absolute;bottom:12px;width:69px;height:69px;background:repeating-conic-gradient(#d2d5d8 0deg 13deg,#42464b 13deg 60deg);border:11px solid #191a1d;border-radius:50%;box-shadow:0 0 0 4px #08090a}.wheel.a{left:16%}.wheel.b{right:12%}.aero .wheel{background:radial-gradient(circle,#505860 0 18%,#c6c9cc 20% 65%,#464a4d 68%)}.headlight{position:absolute;right:0;top:18px;width:34px;height:12px;background:#fff9d8;border:2px solid #ffffff80;border-radius:80%;transform:rotate(15deg)}.shadow{height:10px;background:#0002;position:absolute;bottom:7px;width:90%;left:5%;border-radius:50%;filter:blur(5px)}.stage small{font-size:12px;opacity:.7}.panel{padding:8px 0}fieldset{border:0;padding:0;margin:0 0 32px;min-width:0}legend{font-size:18px;margin-bottom:16px}.segments{display:flex;background:var(--surface);padding:4px;border-radius:16px;gap:4px}.segments label{flex:1;min-width:0;position:relative;text-align:center;cursor:pointer}.segments input{position:absolute;opacity:0;width:1px;height:1px}.segments span{display:block;padding:12px 8px;border:1px solid transparent;border-radius:12px}.segments input:checked+span{background:var(--canvas);border-color:var(--ink);box-shadow:0 1px 4px #0002}.swatch{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;border:1px solid #777}.summary{border-top:1px solid var(--line);padding-top:24px;margin:0 0 24px}.summary small{display:block;opacity:.65;margin-bottom:4px}.summary strong{font-weight:400;font-size:20px}.primary{border:0;border-radius:12px;min-height:52px;background:var(--ink);color:var(--canvas);padding:12px 24px;width:100%}.saved{border-left:3px solid var(--ink);padding-left:16px;margin-top:24px}.saved:empty{display:none}footer{font-size:12px;opacity:.7;padding-top:32px}@media(max-width:759px){header{padding:16px}header b{font-size:13px;letter-spacing:1px}.layout{grid-template-columns:1fr;gap:24px}.stage{min-height:270px;padding:16px}.scene{height:210px}.wheel{width:53px;height:53px;border-width:8px;bottom:21px}.car{bottom:38px}.roof{bottom:91px;height:60px}.segments span{padding:12px 5px;font-size:14px}fieldset{margin-bottom:24px}}
</style><header><b>DESIGN STUDY / 01</b><button id="theme" type="button">Dark interface</button></header><main><h1>A different point of view.</h1><p class="intro">Explore two small choices in an original vehicle study. See how a restrained interface keeps the object at the center.</p><div class="layout"><div class="stage"><div class="scene" id="scene" role="img" aria-label="Original vehicle illustration in Chalk with Classic wheels"><div class="shadow"></div><div class="roof"><div class="window"></div></div><div class="car"><div class="headlight"></div></div><div class="wheel a"></div><div class="wheel b"></div></div><small>Original illustration · Not a Porsche model render</small></div><section class="panel" aria-label="Study options"><fieldset><legend>Finish</legend><div class="segments"><label><input type="radio" name="paint" value="chalk" checked><span><i class="swatch" style="background:#b9b6ae"></i>Chalk</span></label><label><input type="radio" name="paint" value="blue"><span><i class="swatch" style="background:#456171"></i>Coastal blue</span></label><label><input type="radio" name="paint" value="red"><span><i class="swatch" style="background:#9f2937"></i>Garnet</span></label></div></fieldset><fieldset><legend>Wheel study</legend><div class="segments"><label><input type="radio" name="wheel" value="Classic" checked><span>Classic</span></label><label><input type="radio" name="wheel" value="Aero"><span>Aero</span></label></div></fieldset><p class="summary" aria-live="polite"><small>YOUR COMBINATION</small><strong id="summary">Chalk · Classic</strong></p><button class="primary" id="save" type="button">Keep this combination</button><p class="saved" id="saved" role="status"></p></section></div><footer>Independent PDS v4 interpretation. Original finish names and illustration; no pricing, vehicle specification, live configuration or order. Choices last only for this page session.</footer></main><script>const colors={chalk:'#b9b6ae',blue:'#456171',red:'#9f2937'},names={chalk:'Chalk',blue:'Coastal blue',red:'Garnet'};function values(){return[document.querySelector('[name=paint]:checked').value,document.querySelector('[name=wheel]:checked').value]}function update(){const[p,w]=values();document.documentElement.style.setProperty('--paint',colors[p]);document.querySelector('#scene').classList.toggle('aero',w==='Aero');document.querySelector('#scene').setAttribute('aria-label',`Original vehicle illustration in ${names[p]} with ${w} wheels`);document.querySelector('#summary').textContent=`${names[p]} · ${w}`;document.querySelector('#saved').textContent=''}document.querySelectorAll('input').forEach(x=>x.addEventListener('change',update));document.querySelector('#save').onclick=()=>{const[p,w]=values();document.querySelector('#saved').textContent=`Kept for this page session: ${names[p]}, ${w}. No order submitted.`};document.querySelector('#theme').onclick=e=>{const dark=document.body.classList.toggle('dark');e.currentTarget.textContent=dark?'Light interface':'Dark interface'};</script></html>
コードリファレンス
finishとwheelの選択に応じて、独自のコンフィギュレーター用イラストが更新されます。Porscheの製品仕様を示すものではありません。ネイティブのセグメントコントロールのイベントは、別のv4の例に記載しています。 2つの選択肢を制御し、セッション中のみサマリーを表示する ネイティブのp-segmented-control要素は、detail.valueを含むchangeイベントを発行します。p-buttonではclickイベントと明示的なtypeを使用します。
typescript コードをコピー
import './style.css';
const paints={chalk:'#b9b6ae',blue:'#456171',red:'#9f2937'};
const names={chalk:'Chalk',blue:'Coastal blue',red:'Garnet'};
type Paint=keyof typeof paints;
let paint:Paint='chalk',wheel='Classic';
document.querySelector<HTMLDivElement>('#app')!.innerHTML=`
<main><h1>Explore an original color study</h1>
<p>This specimen is not a real vehicle configurator or order.</p>
<div class="options">
<p-segmented-control id="paint" label="Finish" value="chalk">
<p-segmented-control-item value="chalk">Chalk</p-segmented-control-item>
<p-segmented-control-item value="blue">Coastal blue</p-segmented-control-item>
<p-segmented-control-item value="red">Garnet</p-segmented-control-item>
</p-segmented-control>
<p-segmented-control id="wheel" label="Wheel study" value="Classic">
<p-segmented-control-item value="Classic">Classic</p-segmented-control-item>
<p-segmented-control-item value="Aero">Aero</p-segmented-control-item>
</p-segmented-control>
</div><div class="preview"><div id="swatch" style="height:120px;border-radius:12px"></div>
<p id="summary" aria-live="polite"></p></div>
<div class="actions"><p-button id="save" type="button">Keep this combination</p-button>
<p-button id="scheme" type="button" variant="secondary">Switch color scheme</p-button></div>
<p id="saved" role="status"></p></main>`;
function render(){document.querySelector<HTMLElement>('#swatch')!.style.background=paints[paint];document.querySelector('#summary')!.textContent=`${names[paint]} · ${wheel} wheel study`;document.querySelector('#saved')!.textContent='';}
document.querySelector('#paint')!.addEventListener('change',e=>{const v=(e as CustomEvent<{value:string}>).detail.value;if(v in paints){paint=v as Paint;render();}});
document.querySelector('#wheel')!.addEventListener('change',e=>{wheel=String((e as CustomEvent<{value:string}>).detail.value);render();});
document.querySelector('#save')!.addEventListener('click',()=>{document.querySelector('#saved')!.textContent=`Kept for this page session: ${names[paint]}, ${wheel}. No order submitted.`;});
document.querySelector('#scheme')!.addEventListener('click',()=>{const root=document.documentElement;root.style.colorScheme=root.style.colorScheme==='dark'?'light':'dark';});
render(); コードリファレンス
どちらかの選択肢を変更すると、以前に保存した組み合わせはクリアされます。 color-schemeプロパティでシステムテーマを制御します。finishのスウォッチはアプリケーション独自のデータです。 この例では、連絡先情報の収集、車両の予約、注文の送信は行いません。 04
Porsche デザインシステム エージェントのセットアップ 実装の出発点 ドキュメントに記載されたグローバルスタイルシートとローダーの部分テンプレートを使用する、バージョン4のネイティブWeb Componentのセットアップです。オフラインプレビューでは外部フォントやパッケージランタイムを使用していません。ここではネイティブパッケージのコンパイルを検証していません。
テキスト サンプルをコピー
# In a new Vite vanilla-ts project:
npm create vite@latest pds-specimen -- --template vanilla-ts
cd pds-specimen
npm install
npm install @porsche-design-system/components-js@4
npm install --save-dev lightningcss
// vite.config.ts
import {defineConfig} from 'vite';
import {Features} from 'lightningcss';
import {getLoaderScript} from '@porsche-design-system/components-js/partials';
export default defineConfig({
plugins:[{name:'pds-loader',transformIndexHtml(html){
return html.replace('</body>',getLoaderScript()+'</body>');
}}],
css:{transformer:'lightningcss',lightningcss:{exclude:Features.LightDark}}
});
/* src/style.css */
@import '@porsche-design-system/components-js';
html { color-scheme: light; }
:is(p-button,p-segmented-control,p-segmented-control-item):not(:defined){visibility:hidden}
main{max-width:60rem;margin:auto;padding:clamp(16px,1.25vw + 12px,36px)}
.options{display:grid;gap:32px}
.preview{padding:32px;border-radius:24px;margin-block:32px;border:1px solid currentColor}
.actions{display:flex;gap:16px;flex-wrap:wrap}
# Replace src/main.ts with the example below, then:
npm run dev あなたのプロジェクト向けプロンプト AI エージェント用プロンプト プロンプトをコピー
バージョン4のPDSコンポジションを構築します。必須のグローバルスタイル、ローダーの部分テンプレート、color-scheme、実際の流動的な余白、12pxのコントロール角丸と24pxのコンテナー角丸を使用してください。独自の2つのサンプル選択肢には、セグメントコントロールのchangeイベントからdetail.valueを取得します。ページ内の操作にはtype=buttonを明示してください。旧式のラッパーAPIを混在させたり、サンプルを実在の車両構成として示したりしないでください。 05
Porsche デザインシステム 出典と対象範囲 PDS v4を対象とした独自のOpenDesignリファレンスです。オリジナルのイラストとfinish名は、Porscheの車両仕様、塗装コード、選択可能なオプションを示すものではありません。取引は行われません。
