# Orange OUDS Web デザインシステム ## Orange OUDS Web デザインシステムのインターフェースプレビュー 各ネイティブドロワーを確認し、選択をローカルに保持して、外観を切り替えます。 ## Orange OUDS Web デザインシステムのデザインリファレンス 固定バージョンの@ouds/web-orangeおよび@ouds/web-common 1.4.0のソースを参照し、オリジナルのレイアウト上の判断は別途明記しています。 ### ライトテーマのセマンティックカラーの役割 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --bs-color-action-enabled | #000 | Orange 1.4プリセットの最初のライトテーマ用宣言です。ダークテーマではdata-bs-themeを通じて専用の値が適用されるため、この表の値をそのまま色として使うわけではありません。 | | --bs-color-action-selected | #f15e00 | Orange 1.4プリセットの最初のライトテーマ用宣言です。ダークテーマではdata-bs-themeを通じて専用の値が適用されるため、この表の値をそのまま色として使うわけではありません。 | | --bs-color-action-hover | rgba(0, 0, 0, 0.68) | Orange 1.4プリセットの最初のライトテーマ用宣言です。ダークテーマではdata-bs-themeを通じて専用の値が適用されるため、この表の値をそのまま色として使うわけではありません。 | | --bs-color-action-pressed | #f15e00 | Orange 1.4プリセットの最初のライトテーマ用宣言です。ダークテーマではdata-bs-themeを通じて専用の値が適用されるため、この表の値をそのまま色として使うわけではありません。 | | --bs-color-bg-primary | #fff | Orange 1.4プリセットの最初のライトテーマ用宣言です。ダークテーマではdata-bs-themeを通じて専用の値が適用されるため、この表の値をそのまま色として使うわけではありません。 | | --bs-color-bg-secondary | #f4f4f4 | Orange 1.4プリセットの最初のライトテーマ用宣言です。ダークテーマではdata-bs-themeを通じて専用の値が適用されるため、この表の値をそのまま色として使うわけではありません。 | | --bs-color-border-default | rgba(0, 0, 0, 0.2) | Orange 1.4プリセットの最初のライトテーマ用宣言です。ダークテーマではdata-bs-themeを通じて専用の値が適用されるため、この表の値をそのまま色として使うわけではありません。 | | --bs-color-always-black | #000 | Orange 1.4プリセットの最初のライトテーマ用宣言です。ダークテーマではdata-bs-themeを通じて専用の値が適用されるため、この表の値をそのまま色として使うわけではありません。 | | --bs-color-always-white | #fff | Orange 1.4プリセットの最初のライトテーマ用宣言です。ダークテーマではdata-bs-themeを通じて専用の値が適用されるため、この表の値をそのまま色として使うわけではありません。 | ### 段階的な余白 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --bs-space-scaled-none | 0px | 実際にエクスポートされる余白のスケールです。オリジナルの比較レイアウトでは、これらの値を使って24pxの間隔を設定しています。 | | --bs-space-scaled-3xsmall | 2px | 実際にエクスポートされる余白のスケールです。オリジナルの比較レイアウトでは、これらの値を使って24pxの間隔を設定しています。 | | --bs-space-scaled-2xsmall | 4px | 実際にエクスポートされる余白のスケールです。オリジナルの比較レイアウトでは、これらの値を使って24pxの間隔を設定しています。 | | --bs-space-scaled-xsmall | 8px | 実際にエクスポートされる余白のスケールです。オリジナルの比較レイアウトでは、これらの値を使って24pxの間隔を設定しています。 | | --bs-space-scaled-small | 12px | 実際にエクスポートされる余白のスケールです。オリジナルの比較レイアウトでは、これらの値を使って24pxの間隔を設定しています。 | | --bs-space-scaled-medium | 16px | 実際にエクスポートされる余白のスケールです。オリジナルの比較レイアウトでは、これらの値を使って24pxの間隔を設定しています。 | | --bs-space-scaled-large | 24px | 実際にエクスポートされる余白のスケールです。オリジナルの比較レイアウトでは、これらの値を使って24pxの間隔を設定しています。 | | --bs-space-scaled-xlarge | 32px | 実際にエクスポートされる余白のスケールです。オリジナルの比較レイアウトでは、これらの値を使って24pxの間隔を設定しています。 | | --bs-space-scaled-2xlarge | 40px | 実際にエクスポートされる余白のスケールです。オリジナルの比較レイアウトでは、これらの値を使って24pxの間隔を設定しています。 | | --bs-space-scaled-3xlarge | 48px | 実際にエクスポートされる余白のスケールです。オリジナルの比較レイアウトでは、これらの値を使って24pxの間隔を設定しています。 | ### タイポグラフィの役割 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --bs-font-sans-serif | "HelvNeueOrange", "Helvetica Neue", Helvetica, "SF Pro", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | 公開されているフォントとタイポグラフィの宣言です。埋め込みの考察では、ブランドフォントのHelvNeueOrangeファイルではなく、Arialをフォールバックフォントとして明示的に指定しています。 | | --bs-font-size-display-large | 2.5rem | 公開されているフォントとタイポグラフィの宣言です。埋め込みの考察では、ブランドフォントのHelvNeueOrangeファイルではなく、Arialをフォールバックフォントとして明示的に指定しています。 | | --bs-font-size-heading-large | 1.5rem | 公開されているフォントとタイポグラフィの宣言です。埋め込みの考察では、ブランドフォントのHelvNeueOrangeファイルではなく、Arialをフォールバックフォントとして明示的に指定しています。 | | --bs-font-size-body-large | 1rem | 公開されているフォントとタイポグラフィの宣言です。埋め込みの考察では、ブランドフォントのHelvNeueOrangeファイルではなく、Arialをフォールバックフォントとして明示的に指定しています。 | | --bs-font-size-body-medium | 0.875rem | 公開されているフォントとタイポグラフィの宣言です。埋め込みの考察では、ブランドフォントのHelvNeueOrangeファイルではなく、Arialをフォールバックフォントとして明示的に指定しています。 | | --bs-font-size-body-small | 0.75rem | 公開されているフォントとタイポグラフィの宣言です。埋め込みの考察では、ブランドフォントのHelvNeueOrangeファイルではなく、Arialをフォールバックフォントとして明示的に指定しています。 | | --bs-font-line-height-body-large | 1.5 | 公開されているフォントとタイポグラフィの宣言です。埋め込みの考察では、ブランドフォントのHelvNeueOrangeファイルではなく、Arialをフォールバックフォントとして明示的に指定しています。 | | --bs-font-line-height-body-medium | 1.4285714286 | 公開されているフォントとタイポグラフィの宣言です。埋め込みの考察では、ブランドフォントのHelvNeueOrangeファイルではなく、Arialをフォールバックフォントとして明示的に指定しています。 | ### Offcanvasの既定値 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --bs-offcanvas-zindex | 1045 | ネイティブコンポーネントのデフォルト設定。元のドロワーでは幅を440pxに上書きし、ネイティブのmax-widthルールでビューポート内に収めています。 | | --bs-offcanvas-width | 400px | ネイティブコンポーネントのデフォルト設定。元のドロワーでは幅を440pxに上書きし、ネイティブのmax-widthルールでビューポート内に収めています。 | | --bs-offcanvas-height | 30vh | ネイティブコンポーネントのデフォルト設定。元のドロワーでは幅を440pxに上書きし、ネイティブのmax-widthルールでビューポート内に収めています。 | | --bs-offcanvas-transition | transform 0.3s ease-in-out | ネイティブコンポーネントのデフォルト設定。元のドロワーでは幅を440pxに上書きし、ネイティブのmax-widthルールでビューポート内に収めています。 | ### ネイティブのドロワーとボタンの仕様 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | Brand action | .btn.btn-brand | 実際のOrangeバリアントです。上流のBootstrap .btn-primaryが同じ意味だと決めつけないでください。 | | Default action | .btn.btn-default | ローカルでの選択と、その選択の解除に使われている実際のセカンダリ／デフォルトスタイルです。 | | Open trigger | data-bs-toggle="offcanvas" / data-bs-target | ネイティブのdata APIを使い、元の各プランボタンから共通のドロワーを開きます。 | | Content event | show.bs.offcanvas / event.relatedTarget | ドロワーの内容を表示する前に、トリガーからクリックされたプランを読み取ります。 | | Close API | oudsWeb.Offcanvas.getInstance(element).hide() | ローカルで選択した後、既存のネイティブインスタンスを閉じます。 | | Theme | data-bs-theme="light" or "dark" | 比較の状態を再構築せずに、実際のテーマ変数を変更します。 | ## Orange OUDS Webデザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## Orange OUDS Webデザインシステム：Orange OUDSのパッケージとテーマ構成 ### 共通パッケージとOrangeパッケージを一緒にインストールする > OUDS Web 1.4.0では、共通の動作とブランドテーマが分離されています。この例では、@ouds/web-commonと@ouds/web-orangeを同じバージョンでインストールします。Orangeパッケージにはコンパイル済みのCSSが含まれ、共通パッケージにはバンドル済みのブラウザーJavaScriptが含まれます。ルートドキュメントでは両方の明示的なパスを読み込むため、パッケージのインストールコマンドだけを示して、スタイルのない静的ページを読者に残すことはありません。 - @ouds/web-orangeにはOrangeテーマのCSSが含まれます。 - @ouds/web-commonには共通のJavaScriptが含まれます。 - この例では、両方のパッケージを1.4.0に固定しています。 ### OUDS独自のコンポーネント仕様として扱う OUDSはBootstrapを基盤にしていますが、その系譜があるからといって、上流のクラスがすべてそのまま置き換えられるわけではありません。このバージョンでは、btn-brand、btn-defaultなど、名前の付いたバリアントを使用します。掲載した比較例では、実際のクラスとネイティブのOffcanvasデータ属性を使っています。移行時はスタイルシートのURLを変えるだけでなく、マークアップとテーマの値の両方を比較してください。 ## Orange OUDS Webデザインシステム：Orange OUDSのセマンティックカラーと文字の役割 ### インストール済みのセマンティック変数を使う 元のカードではcolor-bg-primaryとcolor-border-defaultを使用しています。細いヘッダーのアクセントにはcolor-action-selectedを使い、ライトテーマの宣言では#f15e00に解決されます。ルートのdata-bs-theme属性を通じて、ダークテーマではこれらの役割に別の値が設定されます。そのため、このガイドでは適用範囲とともにライトテーマの値を記録し、実行時に適切な外観が選択されるようにしています。オレンジ色の16進コードを1つ示してデザインシステム全体を説明することはありません。 ### タイポグラフィを明確にする パッケージのフォントスタックでは、HelvNeueOrangeが先頭に指定されています。このローカル埋め込みの例では、未使用のfont-face宣言を取り除き、明示的な代替フォントとしてArialを使用しています。表では、公開されている実際のフォントファミリーと本文の役割も説明しています。コンポーネントCSSを読み込んだからといって、ブランド書体が読み込まれた証拠にはなりません。この書体を採用するプロジェクトでは、フォントアセットを適切に扱う必要があります。 ## Orange OUDS Webデザインシステム：Orange OUDSの比較カードとコンテンツ ### 比較に実際の意思決定の構成を持たせる 3枚のカードには、架空のデータ容量、簡潔な利用説明、詳細確認アクションを表示します。各カードには、プレースホルダーの行を並べたスクリーンショットではなく、必要なテキストをすべて含めています。これらは検討用に作成したオリジナルのコンテンツであり、Orangeの現行商品、料金、契約内容ではありません。また、このデザイン検討では料金を載せないことで、購入可能なプランや決済フローがあるかのような誤解も避けています。 ### 繰り返し表示するカードの基準をそろえる デスクトップでは、3つの等幅グリッド列と縦方向のフレックスカードを使い、詳細確認アクションが下端にそろうようにしています。720pxでは1列になり、高さはコンテンツに応じて変わります。ネイティブのボタンクラスが実際のアクション状態を担い、外側のグリッド、24pxのパディング、コンテンツの順序は、掲載したCSSで確認できるアプリケーション固有の設計判断です。 ## Orange OUDS Webデザインシステム：Orange OUDSのネイティブなOffcanvas構成 ### トリガーに応じてドロワーの内容を設定する 各詳細確認ボタンは同じ#details Offcanvasを指し、小さなdata-planインデックスを持ちます。show.bs.offcanvasイベントで取得できるrelatedTargetを使い、ドロワーが表示される前に、対応する元のタイトル、説明、機能リストを選択します。リストはtextContentと実際のリスト項目から構築し、データとマークアップを分離しています。ドロワーのタイトルはaria-labelledbyで関連付けています。 ### 開閉動作はネイティブの実行環境に任せる data APIが、ドロワーの表示、背景オーバーレイ、Escapeキー、フォーカス動作を処理します。ローカルで選択した後、ハンドラーはoudsWeb.Offcanvas.getInstance(drawer).hide()を使って既存のインスタンスを閉じます。CSSクラスだけを削除して、フォーカストラップや背景オーバーレイを残すことはありません。非同期の閉じる処理もコンポーネント仕様の一部であるため、テストではフォーカスが戻ることを確認する前に、トランジションの完了を待ちます。 ## Orange OUDS Webデザインシステム：Orange OUDSのローカル選択と復帰動作 ### 実際に行われた操作を説明する 「この選択を保持」では、選択された架空のプランだけを保存し、カードの下にその選択を表示します。注文は行われていないことも明示します。新たに選択すると以前の選択が置き換わり、選択を解除するとメッセージが非表示になり、最初の詳細確認ボタンにフォーカスが戻ります。アカウント、カート、決済サービスには何も送信されません。 ### 外観の切り替えと選択状態を分ける ライト／ダーク切り替えでは、ルートのテーマ属性と切り替えアクションのラベルを変更します。現在のローカル選択と3枚のカードの内容は維持します。テーマをテストする際、外観の変更によってユーザーの比較状態が意図せずリセットされないようにすることが重要です。この例では、どちらの外観でもネイティブのCSSを使い、外側の構成だけをアプリケーション側で用意しています。 ## Orange OUDS Webデザインシステム：Orange OUDSのキーボード操作と狭い画面への対応 ### 閉じる操作と詳細確認操作に名前を付ける 各カードのアクションにはプラン名を含め、アイコンのみのネイティブな閉じるボタンには、アクセシブルなラベル「詳細を閉じる」を明示しています。ネイティブ実装でフォーカス管理が機能するよう、ドロワーにはtabindexを設定し、タイトルにもラベルを関連付けています。テストでは「Explore」ドロワーを開いてEscapeキーで閉じ、別のカードに移る前に、フォーカスがトリガーに戻ることを確認します。 ### 実際のビューポート内にドロワーを収める アプリケーションではドロワーの幅を440pxに設定していますが、Offcanvas標準のmax-widthルールにより、狭いビューポート内に収まります。画面幅が小さい場合はカードが縦に並び、外側の余白も縮小します。プランを選択して外観を切り替えた後の状態も含め、初期状態だけでなく、幅280px、390px、タブレット、デスクトップで動作を確認しています。 ## Orange OUDS Web デザインシステム Orange OUDS 完全な静的インテグレーション ### 3ファイルの完全なサンプルを使用する orange-index.htmlをindex.htmlとして保存し、orange.cssとorange-app.jsを同じディレクトリに置きます。指定バージョンの2つのパッケージをインストールし、そのディレクトリを配信してください。HTMLには、ネイティブのアセットパス、すべてのカードコンテンツ、ドロワーの構造、アプリケーションスクリプトが含まれています。このブラウザー上の画面構成を再現するのに、Reactラッパーや不足したひな形、存在しないSDKは必要ありません。 1. 提供された3つのファイルをすべて同じ場所に保存します。 2. 対応するOUDSパッケージを2つともインストールします。 3. フォルダーを配信し、各カードを確認します。 4. Escapeキー、フォーカスの復帰、ローカルデータの消去、両方の外観をテストします。 ### コードとアセットは同じリリースのものを使用する バージョンを変更する場合は、ボタンのバリアント、data API名前空間、イベント名、テーマ変数をまとめて確認してください。異なるリリースのCSSとスクリプトを組み合わせると、操作して不整合が明らかになるまでは正しく見えることがあります。提供したバージョンは具体的な検証済みの参照例であり、今後どのパッケージの組み合わせでも同じように動作することを保証するものではありません。 ## Orange OUDS Web デザインシステムのコンポーネント例 ### orange-index.html 完全なマークアップとネイティブのCSS/JavaScriptインポート。 ``` Bundle comparison study

OUDS WEB / ORIGINAL COMPARISON STUDY

Choose room for your day

Three fictional mobile-data bundles for inspecting Orange-themed cards, buttons and a native detail drawer. These are not commercial offers.

Everyday

8 GB

For messages, maps and occasional listening.

Explore

25 GB

More room for podcasts and a longer journey.

Create

60 GB

A larger sample allowance for sharing on the move.

OUDS Web 1.4.0 native CSS and Offcanvas runtime; original sample content and local selection. Arial fallback is used instead of Orange’s branded typeface.

``` コードリファレンス - orange-index.htmlをindex.htmlとして保存し、残りの2つのファイル名は変更しないでください。 ### orange.css オリジナルのレスポンシブなカード配置と、明示的なフォントフォールバック。 ``` *{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}main{max-width:1080px;margin:auto;padding:32px}header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:4px solid var(--bs-color-action-selected);padding-bottom:24px}h1{font-size:36px;line-height:1.15;margin:12px 0}.scope{font-size:14px;line-height:1.6;max-width:75ch}.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}.plan{display:flex;flex-direction:column;border:1px solid var(--bs-color-border-default);padding:24px;background:var(--bs-color-bg-primary)}.plan h2{font-size:24px}.amount{font-size:40px;font-weight:700;line-height:1.2;margin:24px 0}.plan p{line-height:1.6}.plan .btn{margin-top:auto}.fine{font-size:13px;line-height:1.6;margin-top:24px}.offcanvas{--bs-offcanvas-width:440px}.offcanvas-header,.offcanvas-body{padding:24px}.offcanvas-header{gap:16px}.offcanvas-title{font-size:24px}.offcanvas-body p,.offcanvas-body li{line-height:1.6}.offcanvas-body ul{padding-left:24px}.offcanvas-body li{margin:12px 0}#selected{padding:24px;border:1px solid var(--bs-color-border-default);margin-top:24px}#selected p{margin:0}#selected .btn{margin-top:16px}@media(max-width:720px){main{padding:16px}.plans{grid-template-columns:1fr}.plan{padding:24px}.amount{margin:16px 0}.plan .btn{margin-top:16px}}[hidden]{display:none!important} ``` コードリファレンス - orange-index.htmlをindex.htmlとして保存し、残りの2つのファイル名は変更しないでください。 ### orange-app.js ネイティブのドロワーイベント処理と、ローカルの選択状態・テーマ状態。 ``` const plans=[["Everyday", "8 GB", "For messages, maps and occasional listening.", ["8 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Explore", "25 GB", "More room for podcasts and a longer journey.", ["25 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Create", "60 GB", "A larger sample allowance for sharing on the move.", ["60 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]]];let current=0;const drawer=document.querySelector('#details');drawer.addEventListener('show.bs.offcanvas',event=>{current=Number(event.relatedTarget.dataset.plan);const[name,amount,description,features]=plans[current];document.querySelector('#drawer-title').textContent=name+' · '+amount;document.querySelector('#drawer-description').textContent=description;document.querySelector('#features').replaceChildren(...features.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));});document.querySelector('#choose').addEventListener('click',()=>{document.querySelector('#selected').hidden=false;document.querySelector('#selection-message').textContent=plans[current][0]+' is your local preview choice. No order was placed.';oudsWeb.Offcanvas.getInstance(drawer).hide();});document.querySelector('#clear').addEventListener('click',()=>{document.querySelector('#selected').hidden=true;document.querySelector('[data-plan]').focus()});document.querySelector('#theme').addEventListener('click',e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance'}); ``` コードリファレンス - orange-index.htmlをindex.htmlとして保存し、残りの2つのファイル名は変更しないでください。 ## Orange OUDS Web デザインシステムのエージェント設定 ### 実装の出発点 http://localhost:8000/を開きます。コンパイル済みのネイティブアセットを使用するため、Sassのビルドは不要です。 ``` npm init -y npm install @ouds/web-common@1.4.0 @ouds/web-orange@1.4.0 # Save index.html, orange.css and orange-app.js from the supplied examples. python3 -m http.server 8000 ``` ### あなたのプロジェクト向けプロンプト ``` OUDS Web 1.4の比較スタディを完全な形で実装してください。common/Orangeパッケージを対応させ、実際のbtn-brandとbtn-defaultバリアント、ネイティブのOffcanvasイベントとAPI、ライト／ダークのトークン解決、明示的なArialフォールバックを使用します。バンドルの内容はすべて架空のものとし、選択状態はローカルに限定してください。 ``` ## Orange OUDS Web デザインシステムの情報源と対象範囲 実際のOUDS WebのCSSとOffcanvasランタイムを使用し、オリジナルの架空のOpenDesignバンドルとローカルの選択機能を組み合わせています。Arialのフォールバックを明示しており、商用オファーや注文を示すものではありません。 - インストール commonパッケージとテーマパッケージを対応させた構成。 - Offcanvas ドロワーの構造、イベント、API。 - ボタン OUDS固有のバリアントと状態。 - JavaScript ランタイムの動作とインテグレーションの境界。 ## Orange OUDS Web デザインシステム関連リソース ### Palantir Blueprint Blueprintを使って、密度の高いデータワークスペースを構築します。検証済みのタイポグラフィと意図のトークン、選択可能なデータセットテーブル、レビュー用インスペクター、完全なReactソースを備えています。 ### Pega Bolt BoltのPegaブランドコンテンツシステムを紹介します。流動的なタイポグラフィ、横方向と縦方向で分けた余白、編集者向けリソースページを構成するTwigアコーディオンを取り上げます。 ### Porsche デザインシステム 流動的なスペーシング、CSSのカラースキーム、Porsche Nextのタイポグラフィ、2択のコンフィギュレーターを通じて、Porsche Design System v4を見てみましょう。実際のトークン式と、最新のセグメントコントロールイベントを使用した完全なViteエントリーを掲載しています。 - [実装リファレンス](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [ソース](https://cdn.jsdelivr.net/npm/@ouds/web-orange@1.4.0/dist/css/ouds-web.css) - [ソース](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [コードリファレンス](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/introduction/) - [インストール commonパッケージとテーマパッケージを対応させた構成。](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/download/) - [Offcanvas ドロワーの構造、イベント、API。](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [ボタン OUDS固有のバリアントと状態。](https://web.unified-design-system.orange.com/orange/docs/1.4/components/buttons/) - [JavaScript ランタイムの動作とインテグレーションの境界。](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/javascript/)