# Samsung One UI デザインシステム

## Samsung One UI デザインシステムのインターフェースプレビュー

表示モードを切り替え、200%に拡大したテキストを確認し、リセットをキャンセルまたは確定できます。

## Samsung One UI デザインシステムのデザインリファレンス

Samsungが公開しているレイアウトとアクセシビリティのガイダンスを紹介し、オリジナルの CSS 調査で採用した選択は別途明記しています。未公開の配色、フォント、コンポーネント API を創作していません。

### 公開されているレイアウトとアクセシビリティの要件

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Side margins | At least 24dp on left and right | ネイティブレイアウトのリファレンス。dpを黙って CSS px と読み替えないでください。 |
| Viewing and interaction areas | Viewing above; frequently used interaction below | 状況や、すぐに使える操作を意図的に配置します。これはレイアウトの原則であり、画面高に対する固定比率ではありません。 |
| Cutout handling | Adapt placement to camera cutouts and orientation | デバイスの切り欠きに重要なコンテンツを隠さないでください。 |
| Text resizing | Up to 200% without losing content or function | 公開されているアクセシビリティガイダンスです。ブラウザー調査では、明示的な文字サイズ調整機能を使った段落のリフローを紹介しています。 |
| Target separation | Large enough touch areas with space between them | 公開資料では、ここに数値の下限は定められていません。例にある48pxのコントロールは、独自に採用したWeb上の選択です。 |
### 公開されているインタラクションのルール

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Complex gestures | Provide an alternative action | タスクを完了する唯一の方法として、ドラッグやマルチタッチ操作を求めないでください。 |
| Automatic content | Provide control for moving content over 5 seconds | この調査には、自動再生のカルーセルや時間経過で消える表示はありません。 |
| Error recovery | Clear message and focus on the next useful action | 視認できるテキストと、明確な復旧操作を用意してください。 |
| Screen transitions | Feedback and an explicit way back | リセット用ダイアログでは、キャンセルに加え、Escapeキーでも元に戻せます。 |
| Focus blocks | Subdued surfaces for function-focused content | 色の役割に関するガイダンスです。公式のトークンとして数値の配色を創作していません。 |
### オリジナルのブラウザー調査での選択 — Samsungのトークンではありません

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --study-background | #F3F3F6 | この単独のブラウザー上の解釈のために作成した値です。公式のOne UIデザイントークンとして提示するものではありません。 |
| --study-card | #FFFFFF | この単独のブラウザー上の解釈のために作成した値です。公式のOne UIデザイントークンとして提示するものではありません。 |
| --study-text | #17171C | この単独のブラウザー上の解釈のために作成した値です。公式のOne UIデザイントークンとして提示するものではありません。 |
| --study-action | #2557C8 | この単独のブラウザー上の解釈のために作成した値です。公式のOne UIデザイントークンとして提示するものではありません。 |
| Card radius | 24px | この単独のブラウザー上の解釈のために作成した値です。公式のOne UIデザイントークンとして提示するものではありません。 |
| Minimum control height | 48px | この単独のブラウザー上の解釈のために作成した値です。公式のOne UIデザイントークンとして提示するものではありません。 |
| Reading-size options | 100%, 150%, 200% | この単独のブラウザー上の解釈のために作成した値です。公式のOne UIデザイントークンとして提示するものではありません。 |
## Samsung One UI デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Samsung One UI デザインシステム：One UIのデザインガイダンスとブラウザーでの適用範囲

### One UIをプラットフォームのガイダンスとして扱う

> One UIは、スマートフォン、大画面、折りたたみ式デバイスなど、Samsung製デバイスでの操作を定めています。汎用的なWebコンポーネントのパッケージではありません。ここで紹介する例は、文字の表示設定を扱うオリジナルのブラウザー調査です。表示領域と下部の操作領域、明示的な復旧方法を示していますが、Samsungのコンポーネントを実行したり、デバイスの設定を変更したりするものではありません。

### 実装値を正確に記述する

リファレンスでは、公開されている要件と、ブラウザー向けに独自に設定した値を区別しています。ネイティブの24dpマージンは元の単位のまま記録し、プレビューの24pxの余白はWeb向けに意図して読み替えています。青色、グレーの背景面、カードの24pxの角丸は、この調査で独自に設定した値です。この区別により、見た目に違和感のない CSS 変数を、検証済みのSamsungのトークンと誤認するのを防ぎます。

- dpと CSS pxを区別する。

- 独自の配色や角丸の選択は、オリジナルであることを明記する。

- ブラウザーのプレビューをSamsungのシステム設定として説明しない。

## Samsung One UI デザインシステム：表示領域とすぐに使える操作

### 冒頭の領域に役割を持たせる

上部の領域には「文字の表示設定」という見出しと、短い説明文を配置します。その下に設定項目とサンプルの文章をまとめ、各グループの後に適用とリセットの操作を置きます。タイトルを読みやすくしながら、意味のある操作をひとまとまりにする構成です。装飾目的のデバイスフレームの周囲に、無関係なコントロールを散らすことはありません。

### デバイスを装うのではなく、構成を適応させる

このブラウザー調査には、OSのステータスバー、カメラの切り欠き、デバイスの権限はありません。狭い画面でもすべての設定を利用でき、操作列は縦に並べられます。ネイティブ実装では、実際のセーフエリア、切り欠き、画面の向き、折りたたみによる変化も考慮する必要があります。ブラウザーのレスポンシブ表示をスクリーンショットで確認しても、デバイス固有の動作は検証できません。

## Samsung One UI デザインシステム：控えめな背景面と明示的な表示モード

### 背景のブロックで関連コンテンツをまとめる

各設定とサンプルの文章は、控えめな背景のカードに配置します。操作の色はインタラクティブな選択肢を示し、説明文には別の控えめな色の役割を用います。ダーク表示では、明るいインターフェースに暗いオーバーレイを重ねるのではなく、同じ色の役割をダーク用に切り替えます。これらの CSS 色はすべて独自の解釈に基づく値であり、ダウンロードできるソースにもその旨を明記しています。

### 表示モードを変えても設定を維持する

表示モードのチェックボックスが変更するのは、プレビューのテーマだけです。選択済みの文字サイズはリセットされず、Samsungのシステム設定が変わったことも示しません。選択が変わった場合は、以前の適用完了メッセージを消去します。これにより、現在の状態と合わないメッセージが表示されるのを防ぎます。

## Samsung One UI デザインシステム：文字の拡大とリフロー

### 200%の場合を明確に示す

文字サイズのコントロールでは、100、150、200パーセントを選択できます。サンプル段落の文字サイズを変更し、カードの高さは内容に応じて自然に伸びます。テキストが途切れたり、隣接するコントロールと重なったり、固定高の領域をもう一つ設ける必要が生じたりすることはありません。このコントロールはあくまで文字表示のサンプルであり、すべてのブラウザーやOSのフォント設定を変更するものではありません。

### 単語を省略せず、すべて表示する

段落には標準的なテキストと、それに応じて拡大する行間を使用しています。テストした最も狭い幅でも、単語はカード内で折り返され、コンテンツは文書内の順序どおりに利用できます。これはリフローの一例です。本番環境のインターフェースでは、アクセシビリティのネイティブ設定を使い、すべてのラベル、翻訳、実際のユーザーコンテンツについても追加でテストする必要があります。

## Samsung One UI デザインシステムの適用、リセット、ダイアログのフォーカス

### 操作に合った確認メッセージを使う

「このプレビューに適用」を選ぶと、選択した外観と文字サイズが表示されます。メッセージには、デバイスには何も送信されていないことが明記されています。すぐに消えるトーストではなく、読者が結果を確認できるよう、表示が持続するステータスメッセージです。どちらかの設定を変更すると、前の確認メッセージは消去されます。

### リセットを明示的な選択肢にする

「リセット」を選ぶと、「設定を保持」と「リセット」の操作があるブラウザー標準のダイアログが開きます。「キャンセル」を選ぶか Escape キーを押すと、現在の設定が両方とも保持されます。リセットを確定すると、外観はライトに、文字サイズは標準に戻り、ダイアログを開いた操作にフォーカスが戻ります。未指定のハンドラーについて説明するのではなく、状態遷移の全体をソースに記述しています。

## Samsung One UI デザインシステムのブラウザー実装例とネイティブ開発への次のステップ

### 架空の One UI 依存関係なしで実行

HTML の完全なドキュメントには、すべてのスタイル、コンテンツ、JavaScript が含まれています。index.html として保存し、ローカルで配信してください。外部フォントやランタイムへのリクエストはなく、Samsung SDK も必要ありません。ネイティブアプリに移行する際は、実際のプラットフォームコントロール、密度単位、アクセシビリティサービス、設定変更に対応するため、One UI と Android の公式リソースを使用してください。

1. 付属の自己完結型 HTML ドキュメントを保存します。

2. ディレクトリをローカルで配信して、プレビューを開きます。

3. 文字サイズを 200% にし、両方の外観モードをテストします。

4. キャンセル、Escape キー、リセット確定をそれぞれ確認します。

### 不具合が見つかる操作手順をテストする

ダークモードと文字サイズ 200% を選び、適用して確認メッセージをチェックします。リセットを開いてキャンセルし、両方の設定が保持されていることを確認します。Escape キーでも同じ操作を繰り返した後、リセットを確定し、値が初期状態に戻ることとフォーカスが戻ることを確認します。デスクトップとスマートフォンの幅で拡大した段落を確認し、単語やコントロールが切れていないことをチェックします。

## Samsung One UI デザインシステムのコンポーネント例

### index.html — 文字表示設定の完全な実装例

レイアウト全体、ライト／ダークの役割、文字サイズのコントロール、キャンセルしても設定が保持されるリセットダイアログ。

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading preferences study</title><style>
/* Original web-study values, not exported Samsung design tokens. */
:root{--study-background:#f3f3f6;--study-card:#fff;--study-text:#17171c;--study-muted:#5b5b66;--study-action:#2557c8;--study-border:#d9d9e1;--study-text-scale:1}*{box-sizing:border-box}body{margin:0;background:var(--study-background);font-family:Arial,sans-serif;color:var(--study-text)}body.dark{--study-background:#101014;--study-card:#222228;--study-text:#f7f7fb;--study-muted:#bbbbc8;--study-action:#9bbaff;--study-border:#41414c}main{max-width:980px;padding:32px;margin:auto}.context{font-size:13px;line-height:1.6;color:var(--study-muted);max-width:74ch}.phone{max-width:560px;margin:32px auto;background:var(--study-background)}.viewing{padding:40px 24px 32px;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end}.viewing p{font-size:14px;margin:0 0 16px;color:var(--study-muted)}h1{font-size:40px;line-height:1.15;margin:0;letter-spacing:-.025em}h2,.setting-title{font-size:20px;line-height:1.4;margin:0}section.settings{padding:0 24px}.card{border-radius:24px;background:var(--study-card);padding:24px;margin-bottom:16px}.setting{display:flex;gap:24px;justify-content:space-between;align-items:center}.setting p{font-size:14px;line-height:1.5;color:var(--study-muted);margin:8px 0 0}input[type=checkbox]{width:28px;height:28px;accent-color:var(--study-action);flex-shrink:0}label{cursor:pointer}.field{display:grid;gap:12px}select,button{font:inherit}select{width:100%;border:1px solid var(--study-border);border-radius:12px;padding:12px;background:var(--study-card);color:var(--study-text);min-height:48px}.sample{font-size:calc(16px * var(--study-text-scale));line-height:1.55;overflow-wrap:anywhere;margin:16px 0 0}.actions{padding:16px 24px 24px;display:grid;grid-template-columns:1fr 1fr;gap:16px}button{border:0;border-radius:999px;min-height:48px;padding:12px 16px;color:var(--study-action);background:var(--study-card);font-weight:700;cursor:pointer}.primary{background:var(--study-action);color:var(--study-background)}:focus-visible{outline:3px solid var(--study-action);outline-offset:4px}dialog{width:min(440px,calc(100% - 32px));border:0;border-radius:24px;padding:24px;background:var(--study-card);color:var(--study-text)}dialog::backdrop{background:#0008}dialog p{line-height:1.6}dialog .dialog-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}#confirmation{font-size:14px;line-height:1.5;padding:0 24px 16px;color:var(--study-muted)}#confirmation:empty{display:none}@media(max-width:600px){main{padding:16px}.phone{margin:16px auto}.viewing{padding:32px 24px}.card{padding:20px}.actions{grid-template-columns:1fr}.setting{gap:16px}h1{font-size:34px}h2,.setting-title{font-size:18px}}
</style></head><body><main><p class="context">OpenDesign original One UI-inspired web study. This demonstrates viewing and interaction areas, readable settings and explicit recovery. It does not control a Samsung device or run native One UI components.</p><div class="phone"><header class="viewing"><p>Make space to read</p><h1>Reading preferences</h1></header><section class="settings" aria-label="Reading preferences"><div class="card"><label class="setting"><span><strong class="setting-title">Dark appearance</strong><p>Use a darker surface in this preview.</p></span><input type="checkbox" id="dark" aria-label="Dark appearance"></label></div><div class="card"><label class="field" for="size"><strong class="setting-title">Reading size</strong><select id="size"><option value="1">Standard · 100%</option><option value="1.5">Large · 150%</option><option value="2">Extra large · 200%</option></select></label></div><div class="card"><h2>A moment to pause</h2><p class="sample">A clear page gives each idea room to breathe. Keep the words that help the reader decide what to do next.</p></div></section><div class="actions"><button id="reset">Reset preferences</button><button class="primary" id="apply">Apply to this preview</button></div><p id="confirmation" role="status"></p></div><dialog aria-labelledby="reset-title"><h2 id="reset-title">Reset reading preferences?</h2><p>This returns the preview to its light appearance and standard reading size.</p><div class="dialog-actions"><button id="cancel">Keep preferences</button><button id="confirm-reset" class="primary">Reset</button></div></dialog><p class="context">Published references include the 24dp side-margin guidance and text scaling up to 200%. CSS pixels here are an original browser interpretation of the layout; app colors and radii are explicitly original. Reading-size changes affect the sample paragraph so its reflow can be inspected. No preference is saved beyond this page.</p></main><script>
const dark=document.querySelector('#dark'),size=document.querySelector('#size'),confirmation=document.querySelector('#confirmation'),dialog=document.querySelector('dialog');function refresh(){document.body.classList.toggle('dark',dark.checked);document.documentElement.style.setProperty('--study-text-scale',size.value);confirmation.textContent='';}dark.onchange=refresh;size.onchange=refresh;document.querySelector('#apply').onclick=()=>{confirmation.textContent=`Applied to this preview: ${dark.checked?'dark':'light'} appearance, ${Math.round(Number(size.value)*100)}% reading size. Nothing was sent to a device.`};document.querySelector('#reset').onclick=()=>dialog.showModal();document.querySelector('#cancel').onclick=()=>dialog.close();document.querySelector('#confirm-reset').onclick=()=>{dark.checked=false;size.value='1';refresh();dialog.close();confirmation.textContent='Light appearance and standard reading size restored.';};dialog.addEventListener('close',()=>document.querySelector('#reset').focus());
</script></body></html>
```

コードリファレンス

- Study で始まる色と寸法は、独自に設定したウェブ向けの値です。

- 文字サイズの変更はサンプル段落に反映されます。ブラウザーやデバイスの設定は変更されません。

## Samsung One UI デザインシステムのエージェント設定

### 実装の出発点

これはオリジナルのブラウザー実装例を実行します。この例には One UI の npm パッケージも、Samsung のネイティブランタイムもありません。

```
# Save the supplied complete example as index.html.
python3 -m http.server 8000
# Open http://localhost:8000/
```

### あなたのプロジェクト向けプロンプト

```
付属の One UI に着想を得た文字表示の実装例を、独自のブラウザー表現として構築します。表示領域と操作領域、200% でのレスポンシブなテキストのリフロー、明示的な外観の状態、ローカルのみの確認、キャンセルしても設定が保持されるリセット、フォーカスの復帰を維持してください。ネイティブの dp 要件と独自の CSS ピクセル値は分けて扱います。
```

## Samsung One UI デザインシステムの情報源と適用範囲

One UI の原則を独自にブラウザー上で表現した OpenDesign の実装例です。ネイティブの One UI ランタイムではなく、デバイス設定も変更しません。公開されている要件と、独自に設定したウェブ向けの値は参考資料で分けて記載しています。

- One UI の原則 表示、操作、柔軟に適応できる体験。

- グリッドシステム 24dp のマージン、切り欠き、デバイスの利用状況。

- レイアウトとタイポグラフィ 200% のテキスト拡大とターゲットの分離。

- インタラクションとコントロール 操作の回復、代替入力、明示的なナビゲーション。

- カラーシステム 控えめなフォーカス領域と意図的な色の役割。

## Samsung One UI デザインシステムの関連リソース

### SAP Fiori

UI5 Web Componentsを使ってSAP FioriのHorizonテーマを適用します。実際のテーマパラメーター、明示的なコンテンツ密度、セマンティックな値の状態、ローカル検証を備えた購入申請画面の構成を使用します。

### SEEK Braid

テーマごとにスコープされた変数、実際の4つのブレークポイント、文脈に応じたテキスト、トーンの異なるボタン、操作を無効にするのではなく検証内容を説明する制御付きフィールドを使った、独自の求人検索レイアウトを通して Braid を理解しましょう。

### Segment Evergreen

実際のテーマ値、入力を制御したタグ追加、ルールとのリアルタイム照合、空の状態からの復帰手段、ブラウザー標準の確認ダイアログを備えた Evergreen の参考実装です。


- [実装リファレンス](https://developer.samsung.com/one-ui/index.html)
- [ソース](https://developer.samsung.com/one-ui/accessibility/layout-and-typo.html)
- [ソース](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [ソース](https://developer.samsung.com/one-ui/color/system.html)
- [コードリファレンス](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [One UI の原則 表示、操作、柔軟に適応できる体験。](https://developer.samsung.com/one-ui/index.html)
- [グリッドシステム 24dp のマージン、切り欠き、デバイスの利用状況。](https://developer.samsung.com/one-ui/layout/grid.html)
- [レイアウトとタイポグラフィ 200% のテキスト拡大とターゲットの分離。](https://developer.samsung.com/one-ui/accessibility/layout-and-typo.html)
- [インタラクションとコントロール 操作の回復、代替入力、明示的なナビゲーション。](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [カラーシステム 控えめなフォーカス領域と意図的な色の役割。](https://developer.samsung.com/one-ui/color/system.html)