# HeroUIデザインシステム ## HeroUIデザインシステムのインターフェースプレビュー ネイティブのスライダーで品質を変更し、メタデータの切り替えや外観の変更を行い、ローカルでレシピを適用します。エンコードやアップロードをシミュレートすることはありません。 ## HeroUIデザインシステムのデザインリファレンス HeroUI 3.2.6のデフォルトテーマを、@heroui/styles/dist/themes/default/variables.cssと照合して確認しています。以下のOKLCH値はパッケージに記載された値そのものです。アートワークの色とタイポグラフィはアプリケーション側の選択であり、HeroUIのブランドトークンではありません。 ### セマンティックなサーフェスとコントラスト | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --background | oklch(0.9702 0 0) | ライトテーマのページ背景。ダークテーマではoklch(12% 0.005 285.823)になります。 | | --foreground | var(--eclipse) | ライトテーマの本文色。ダークテーマでは--snowになります。 | | --surface | var(--white) | ライトテーマのカード背景。ダークテーマではoklch(0.2103 0.0059 285.89)になります。 | | --overlay | var(--white) | フローティングレイヤーの背景。ライトテーマで値が同じ場合でも、サーフェスとは異なる役割です。 | | --accent | oklch(0.6204 0.195 253.83) | 選択状態のスイッチ、スライダーの塗りつぶし、プライマリボタン。 | | --accent-foreground | var(--snow) | アクセント色の塗りつぶし上に表示するテキスト。 | | --muted | oklch(0.5517 0.0138 285.94) | セカンダリテキスト。ダークテーマではoklch(70.5% 0.015 286.067)になります。 | | --border | oklch(90% 0.004 286.32) | ライトテーマの境界線。ダークテーマではoklch(28% 0.006 286.033)になります。 | | --focus | var(--accent) | キーボードフォーカスの表示。 | | --field-background | var(--white) | ライトテーマの入力欄のサーフェス。ダークテーマではeclipseの値に従います。 | ### 形状、間隔、状態 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --spacing | 0.25rem | 基本の間隔単位。ルートサイズ16pxの場合は4pxです。 | | --radius | 0.5rem | デフォルトの角丸プリミティブ。ルートサイズ16pxの場合は8pxです。 | | --field-radius | calc(var(--radius) * 1.5) | 入力欄のデフォルトの角丸は12pxです。 | | --border-width | 1px | デフォルトの境界線の太さ。 | | --field-border-width | 0px | デフォルトの入力欄は、アウトラインの境界線に依存しません。 | | --disabled-opacity | 0.5 | 無効状態の表示。コンポーネントにはisDisabledも設定してください。 | | --ring-offset-width | 2px | コントロールとフォーカスリングの間隔。 | | --tooltip-delay | 1500ms | デフォルトパッケージでのツールチップ表示開始までの遅延。 | | --tooltip-close-delay | 500ms | ツールチップが閉じるまでの遅延。 | ### アプリケーションのタイポグラフィとレイアウト | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | body | 16px / 1.5, Arial, Helvetica, sans-serif | プレビュー用に明示的に選択したフォントです。HeroUIで必須とされるフォントではありません。 | | h1 | 32px / 1.15; 28px below 700px | オリジナルのページ見出しのサイズ設定。 | | h2 | 24px / 1.25 | エクスポート設定の見出し。 | | helper text | 13px / inherited 1.5 | 品質の説明とローカルの処理結果。 | | desktop gap | 24px | アートワークと設定の2列グリッド。 | | mobile breakpoint | 700px | オリジナルのレスポンシブルールであり、HeroUIのブレークポイントトークンではありません。 | | card radius | calc(var(--radius) * 3) | 公式プリミティブを使用した、アプリケーション側の24pxのレイアウト構成。 | ### ネイティブコントロールの設定 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | quality range | minValue=10; maxValue=100; step=5 | アプリケーションのエンコーダーレシピで設定する範囲であり、HeroUIのデフォルト値ではありません。 | | Slider | value + onChange | 制御された数値の更新により、出力とレシピが更新されます。 | | Switch | isSelected + onChange | 制御されたブール値により、データの唯一の信頼できる参照元を維持します。 | | Button | onPress | ReactのAriaプレスイベントは、ポインターとキーボードによる操作に対応します。 | ## HeroUIデザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## HeroUIデザインシステム v3とExport Studio ### Reactのコンポーネントとセマンティックなスタイルシート > このサンプルはHeroUI 3.2.6を対象としています。コントロールにはReactのコンポーネントを使用し、React Ariaの動作を基盤としています。ビジュアルレイヤーには@heroui/stylesを使用します。公式クイックスタートではReact 19とTailwind CSS v4が必要です。v3のセットアップでは、このアプリケーションを旧式のHeroUIProviderパターンでラップしません。v2のチュートリアルと、この複合コンポーネントAPIを混在させると、コントロールが表示されない、またはスタイルが正しく適用されないことがあります。 このサンプルは、エクスポートレシピを編集する画面です。左側にアートワーク、右側に品質とメタデータのコントロールを配置しています。イラストはオリジナルのCSSで描画したもので、ライブラリで画像処理を行ったものではありません。レシピを適用すると、選択した設定がローカルのReact状態に保存されます。ファイルサイズやダウンロード結果を捏造して表示することはありません。 関連する仕様を確認する ## HeroUI デザインシステムのセマンティックカラーと表示モード ### キャンバス、サーフェス、フローティングレイヤーを分ける 外側のキャンバスには --background、アートワークと設定カードには --surface、今後追加するポップオーバーやダイアログには --overlay を使います。ライトモードで2つの値がどちらも白になる場合でも、それぞれ異なるセマンティックな役割を持ちます。ダークモードではキャンバスと浮き上がったサーフェスの色が異なります。この例では document.documentElement に dark クラスを切り替えて、すべての子要素でテーマを共有します。 スライダーの塗りと選択中のスイッチにはアクセントの役割を使います。塗りつぶしのアクセントコントロールには --accent-foreground を組み合わせます。カード全体の不透明度を下げるのではなく、補足テキストには --muted を使います。アートワークはコンテンツであり、操作用の装飾ではないため、どちらの表示モードでも独立した暖色系の配色を保ちます。 関連する仕様を確認する ## HeroUI デザインシステムのタイポグラフィとスペーシング ### アプリケーションのスケールを明示する HeroUI のスタイリングは Tailwind のユーティリティと連携しますが、このページでは必須の HeroUI 書体を独自に定めていません。元の CSS では Arial/Helvetica を選び、本文を 16px、行の高さを 1.5 にしています。32px の見出しは狭いレイアウトでは 28px に、設定の見出しは 24px になります。参照表では、これらのアプリケーションでの値とパッケージの変数を区別しています。 公式の --spacing プリミティブは 0.25rem です。この構成では、レシピ内の余白に 16px、カラム間とデスクトップのカード周囲に 24px、デスクトップのキャンバス周囲に 32px を使います。フィールドの角丸は、公式の 8px 角丸プリミティブに基づきます。カードの角丸には意図的にその3倍を使っているため、24px という値はアプリケーション側で導き出した値であり、Card の既定値を示すものではありません。 関連する仕様を確認する ## HeroUI デザインシステム：スライダーを作成する ### 構造と値の管理をまとめる ルートの Slider が value、onChange、minValue、maxValue、step を管理します。Label がアクセシブルな名前を設定します。Slider.Output は同じ値を読み取り、Slider.Track には Slider.Fill と Slider.Thumb を含めます。これらの表示要素を省くと、期待されるトラックやつまみがないまま動作することがあります。この例では、範囲配列ではなく単一の数値を使います。 画質は 5 刻みで 10～100 の範囲に制限されています。これらの制限は、製品固有の判断によるものです。HeroUI 自体の既定値は、step が 1 の 0～100 の範囲です。画質とファイルサイズの間に普遍的で信頼できる関係はないため、ファイルサイズを推測で示すのではなく、補足テキストでトレードオフを説明します。つまみを複数使う場合は、数値の配列を使い、それぞれのつまみに正しいインデックスを指定してください。 1. 画質スライダーにフォーカスを当て、矢印キーで1段階変更します。 2. 表示される値と現在のレシピが一緒に変わることを確認します。 3. レシピを適用してからもう一度スライダーを動かし、編集中の状態と適用済みのスナップショットを区別します。 関連する仕様を確認する ## HeroUI デザインシステム：ブール値の設定を作成する ### スイッチはコントロール部分とコンテンツ部分で構成する メタデータの設定では、Switch の isSelected と onChange を使います。インストール済みの 3.2.6 実装では、Switch.Content が Switch.Control と Label を包み、Switch.Control が Switch.Thumb を含みます。Description はフィールド単位の補足として Switch.Content の隣に配置します。これは、以前の v3 ドキュメントの例とは構造が異なる、インストール済みソースの SwitchField/SwitchButton の構成に沿ったものです。説明文では、青い選択中のトラックに頼らず、ブール値が何を意味するかを伝えます。1つのメタデータ状態を使って、ネイティブコントロールとテキストのレシピの両方を更新します。 このブール値は適用操作と分けて管理します。メタデータを切り替えると、編集中の下書きにすぐ反映されます。「プレビューに適用」を押すと、スナップショットが記録されます。「リセット」では画質を 80 に戻し、メタデータを除外して、スナップショットを消去します。別の下書きに対して、保存状態を示すインジケーターを使い回しません。エンコーダーに接続する場合は、曖昧なフォームのテキストを読み取るのではなく、適用済みのオブジェクトをエンコーダーに渡します。 関連する仕様を確認する ## HeroUI デザインシステム：サーフェスをレスポンシブに構成する ### アートワークはコントロールの背面を飾るものではなく、コンテンツとして扱う デスクトップでは 1.05fr/1fr のグリッドを使い、アートワークに少し広いスペースを確保しながら、設定の読みやすさも保ちます。元の 700px のブレークポイントでは、グリッドが1カラムになり、ヘッダーが縦に並び、アートワークのアスペクト比が 4:5 から 4:3 に変わります。キャプションはアートワークの外側に置き、安定した読み取り面を保ちます。 すべての操作可能なコントロールを、塗りつぶしたセマンティックサーフェス上に配置します。スペースが足りない場合は、ボタンを折り返します。プレビューの高さはコンテンツに合わせ、ビューポートの最小高さには依存しません。ドキュメントを自動サイズ調整される iframe に埋め込む場合に重要な点です。フォームや結果を隠す、固定高さのスクロール領域は使いません。 関連する仕様を確認する ## HeroUI デザインシステム：インタラクション、フォーカス、結果を正確に伝える ### 見た目だけの代用品ではなく、ネイティブの状態を使う Button では、ポインター操作だけに依存する独自イベントではなく onPress を使います。Slider はキーボード操作に対応し、値を読み上げます。Switch は、ネイティブのアクセシビリティ実装を通じてブール値の状態を提供します。独自のレイアウト CSS を使っても、フォーカススタイルは失われません。コンポーネントを無効にするには、不透明度だけに頼らず isDisabled を使います。--disabled-opacity は見た目を表すだけです。 ステータスの段落には role=status を設定します。これにより、キーボードフォーカスを移動させずに、適用済みのスナップショットを読み上げられます。ダークモードへの切り替えボタンは、次に行う操作を説明するラベルに変わります。アートワークには内容を示す領域ラベルを付け、図形は装飾として扱います。このデモでは、再読み込み後も状態が保持されるとは保証しません。 - 画質は、範囲が制限された数値として選択でき、値も表示されます。 - メタデータはブール値であり、ラベルと説明文の両方を用意します。 - 「適用」ではローカルのスナップショットを保存し、「リセット」ではスナップショットを消去して初期の下書きに戻します。 関連する仕様を確認する ## HeroUI デザインシステム：例をインストールして再現する ### スタイルシートの構成を1つ選ぶ Vite の React アプリケーションに、バージョンを固定した HeroUI パッケージと、Vite プラグインを含む Tailwind CSS v4 をインストールします。メインのスタイルシートでは、まず tailwindcss をインポートし、次に @heroui/styles をインポートしてから、元のレイアウト CSS を含めます。React createRoot で App をレンダリングします。この構成に v2 のプロバイダーは必要ありません。セットアップブロックにはエントリーポイントと Vite の設定を示しています。完全な App と CSS は上にあります。 ダウンロード可能な単体の見本では、パッケージに含まれるコンパイル済みの heroui.min.css と esbuild の React バンドルをどちらもインライン化しています。これにより、プレビューで CDN に依存せずに済みます。同じネイティブコントロールを使用した例ですが、コンパイル済みの HeroUI スタイルと Tailwind で生成した HeroUI スタイルを本番アプリで併用するよう指示するものではありません。ルールの重複を避けるため、パイプラインはどちらか一方を選んでください。 関連する仕様を確認する ## HeroUI デザインシステム：エンコーダーを作らずにレシピを拡張する ### 機能の範囲を明確にする 実際の画像変換を追加するには、ファイル入力と、ブラウザーまたはサーバーで動作する実際のエンコーダーを用意し、処理中・失敗・完了の各状態をその処理に連動させます。Slider で選択できるのは値だけで、圧縮機能はありません。実際の出力 blob が作成されるまでは、Apply ボタンを Download ボタンに変更しないでください。レシピを繰り返し変更しても非可逆圧縮が重ならないよう、元の画像は別に保持してください。 アプリのテーマを設定するときは、セマンティックな色のペアをまとめて上書きし、ライトとダークの両方で確認してください。適切でない前景色をそのままにして --accent だけを変更すると、ボタンのコントラストが損なわれることがあります。より細かくカスタマイズする場合は、アクセシブルなコンポーネントの入力要素を見た目だけ似た div に置き換えるのではなく、ドキュメントに記載されたコンポーネントクラスやデータ状態を指定してください。 関連する仕様を確認する ## HeroUI デザインシステムのコンポーネント例 ### エクスポートレシピアプリの全体例 Slider と Switch の複合パーツは、公式のスタイルを継承します。適用済みの設定を別に保持することで、編集中の状態と適用済みの状態を区別できます。 ``` import React,{useState,useEffect} from 'react'; import {Button,Switch,Label,Description,Slider} from '@heroui/react'; import './style.css'; export default function App(){ const[quality,setQuality]=useState(80),[metadata,setMetadata]=useState(false),[dark,setDark]=useState(false),[saved,setSaved]=useState(null); useEffect(()=>{document.documentElement.classList.toggle('dark',dark)},[dark]); return

HeroUI · Export studio

Make room for the image.

Inspect a local export recipe before handing it to an encoder.

FIELD NOTES
COLLECTION 07
Morning in the dunes1600 × 1200 · sample composition

WEBP PRESET

Export settings

The controls update a recipe. They do not encode or upload an image.

Higher quality may preserve fine texture. File size depends on the source image and encoder.

Include source metadata in the recipe.

CURRENT RECIPE

format: webp
quality: {quality}
metadata: {metadata?'keep':'strip'}

{saved?`Preview recipe applied: quality ${saved.quality}, metadata ${saved.metadata?'kept':'stripped'}. No file was generated.`:'Adjust quality with the arrow keys, then apply the recipe.'}

; } ``` コードリファレンス - Slider.Output は制御対象の数値を反映します。 - 表示される構成要素には Switch.Control と Switch.Thumb が必要です。 - onPress はレシピを適用します。画像をエンコードしたとは示しません。 ### 元のレイアウト CSS サーフェスと角丸の指定には HeroUI 変数を使用します。アートワークの色、フォントサイズ、ブレークポイントはアプリ側で明示的に決めています。 ``` *{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--foreground);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5}.export-app{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-bottom:28px}h1{font-size:32px;font-weight:700;letter-spacing:-.035em;line-height:1.15;margin:8px 0 12px}h2{font-size:24px;font-weight:650;line-height:1.25;margin:8px 0 12px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700}.muted,.helper,footer{color:var(--muted)}.muted{margin:0 0 24px}.export-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:24px}.art-panel,.settings{background:var(--surface);border-radius:calc(var(--radius)*3);padding:24px;box-shadow:var(--surface-shadow)}.art{position:relative;aspect-ratio:4/5;background:#f0d8b8;border-radius:calc(var(--radius)*2);overflow:hidden}.sun{width:40%;aspect-ratio:1;background:#bf532f;position:absolute;top:13%;left:30%;border-radius:50%}.hill{position:absolute;width:180%;height:70%;border-radius:50%;transform:rotate(-24deg)}.one{top:50%;left:-60%;background:#c59162}.two{top:66%;left:-10%;background:#69402e}.art span{position:absolute;top:6%;left:8%;font-size:11px;letter-spacing:.2em;color:#563324}.art-caption{display:flex;flex-direction:column;gap:4px;margin-top:16px}.art-caption span{color:var(--muted);font-size:12px}.settings{display:flex;flex-direction:column;gap:16px}.settings .muted{margin-bottom:0}.slider-heading{display:flex;justify-content:space-between;gap:16px}.helper{font-size:13px;margin:0}.recipe{border:var(--border-width) solid var(--border);padding:16px;border-radius:var(--field-radius)}.recipe .eyebrow{margin-top:0}code{font-size:14px}.actions{display:flex;flex-wrap:wrap;gap:8px}.status{font-size:13px;margin:0}footer{font-size:12px;margin-top:20px}@media(max-width:700px){.export-app{padding:16px}header{flex-direction:column}h1{font-size:28px}.export-grid{grid-template-columns:1fr}.art{aspect-ratio:4/3}.art-panel,.settings{padding:20px}} ``` コードリファレンス - 公式スタイルシートの後にこの CSS を読み込んでください。 - html の dark クラスを切り替えると、ドキュメント全体のセマンティックな値が変わります。 ## HeroUI デザインシステムのエージェント設定 ### 実装の出発点 React 19 と HeroUI 3.2.6 でネイティブプレビューを検証済みです。App とレイアウトの CSS は用意済みです。この Vite 設定では、ドキュメントに記載された Tailwind v4 のインポートパイプラインを使用します。オフライン用の見本では、公式のコンパイル済みスタイルシートをインライン化しています。 ``` // In a Vite React 19 project: // npm install @heroui/react@3.2.6 @heroui/styles@3.2.6 tailwindcss@^4 @tailwindcss/vite@^4 // vite.config.js import {defineConfig} from 'vite'; import react from '@vitejs/plugin-react'; import tailwindcss from '@tailwindcss/vite'; export default defineConfig({plugins:[react(),tailwindcss()]}); // globals.css: keep this import order // @import "tailwindcss"; // @import "@heroui/styles"; // Paste the Original layout CSS after these imports. // main.jsx import React from 'react'; import {createRoot} from 'react-dom/client'; import './globals.css'; import App from './App.jsx'; createRoot(document.getElementById('root')).render(); // App.jsx is the complete application above. Remove its './style.css' // import when the same CSS is included in globals.css. ``` ### あなたのプロジェクト向けプロンプト ``` 付属の HeroUI 3.2.6 の App.jsx、スタイルシート、Tailwind 統合を使って、画像エクスポートスタジオを作成してください。Slider の画質設定と Switch のメタデータ設定をエクスポート概要に連動させ、ラベルとともに Switch.Content、Control、Thumb を維持してください。画質またはメタデータを変更したら、保存済みのスナップショットを無効にします。ダーク表示の切り替えでは、スタイルシートと同じドキュメントクラスを変更してください。ローカルのエクスポートレシピを明示的に保存し、画像ファイルが処理またはダウンロードされたかのように示さないでください。 ``` ## HeroUI デザインシステムのソースと対象範囲 HeroUI 3.2.6 のリファレンスです。公式変数と、独自のタイポグラフィ、アートワーク、レイアウトを区別しています。ネイティブプレビューで変更するのはメモリ上の設定のみで、画像のエンコードは行いません。 - クイックスタート React と Tailwind の要件およびインポート順序。 - カラー セマンティックカラーの役割。 - テーマ設定 CSS のテーマカスタマイズ。 - Slider 複合構造と制御対象の数値。 - Switch 真偽値の構成と状態。 - スタイリング コンポーネントのスタイル設定方法。 ## HeroUI デザインシステムの関連リソース ### Ionic Framework 色のロール、iOSとMaterialのスライダーの形状、セグメントとスイッチの実際の動作を確認できる、Ionicのネイティブな読書設定インターフェースです。フォント、文字サイズ、用紙の設定に応じて記事の表示も変わります。 ### Kobalte Kobalteは Solid 向けのヘッドレスコンポーネントを提供します。生値と書式設定済みの値を分けて扱う数値フィールド、構成要素が明確なチェックボックス、押下状態を持つボタンなどがあります。このガイドでは、派生量とリセット可能な材料チェックを備えたレシピの分量調整ツールを通じて、これらのプリミティブと Solid のシグナルをつなぎます。 ### Mantine ネイティブの参加者テーブルとスケジュール用ドロワーを中心に構成した Mantine 9 のリファレンスです。実際のテーマスケールを確認し、useForm を TextInput、Select、Checkbox、DatePickerInput に接続して、ローカルレコードを追加する前に入力検証を試してください。 - [実装リファレンス](https://heroui.com/en/docs/react/components/slider) - [ソース](https://heroui.com/en/docs/react/handbook/colors) - [ソース](https://heroui.com/en/docs/react/handbook/theming) - [ソース](https://heroui.com/en/docs/react/handbook/styling) - [ソース](https://heroui.com/en/docs/react/components/slider) - [関連する仕様を確認する](https://heroui.com/en/docs/react/getting-started/quick-start) - [関連する仕様を確認する](https://heroui.com/en/docs/react/handbook/colors) - [関連する仕様を確認する](https://heroui.com/en/docs/react/handbook/theming) - [関連する仕様を確認する](https://heroui.com/en/docs/react/components/slider) - [関連する仕様を確認する](https://heroui.com/en/docs/react/components/switch) - [関連する仕様を確認する](https://heroui.com/en/docs/react/handbook/styling) - [コードリファレンス](https://heroui.com/en/docs/react/components/slider) - [コードリファレンス](https://heroui.com/en/docs/react/handbook/styling) - [クイックスタート React と Tailwind の要件およびインポート順序。](https://heroui.com/en/docs/react/getting-started/quick-start) - [カラー セマンティックカラーの役割。](https://heroui.com/en/docs/react/handbook/colors) - [テーマ設定 CSS のテーマカスタマイズ。](https://heroui.com/en/docs/react/handbook/theming) - [Slider 複合構造と制御対象の数値。](https://heroui.com/en/docs/react/components/slider) - [Switch 真偽値の構成と状態。](https://heroui.com/en/docs/react/components/switch) - [スタイリング コンポーネントのスタイル設定方法。](https://heroui.com/en/docs/react/handbook/styling)