# SEEK Braid デザインシステム ## SEEK Braid デザインシステムのインターフェースプレビュー 職種または都市の検索語を編集して適用し、検索結果がない場合を確認してから、入力欄と適用済みの検索条件を両方クリアします。 ## SEEK Braid デザインシステムの設計リファレンス 現行のBraidコンポーネントとCSSのリファレンスです。サイズ名は選択したテーマに基づいて決まります。未検証のピクセル換算値や、生成されたCSS変数名はここでは創作していません。標準のサンプルではseekJobsを明示的に選択しています。 ### レスポンシブのブレークポイント | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | mobile | 0 | 基本スタイル。 | | tablet | 740px | 最初に適用される広い画面向けの条件。 | | desktop | 992px | デスクトップ向けの条件。 | | wide | 1200px | 幅の広い画面向けの条件。 | ### テーマ変数API | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | vars.space.medium | Theme-scoped CSS expression | そのまま使用できます。算術演算にはcalcが必要です。 | | vars.space.gutter | Theme gutter expression | レイアウトのガター。 | | vars.backgroundColor.body | Theme body background | ページの背景。 | | vars.backgroundColor.surface | Theme surface background | コンテナの背景。 | | vars.backgroundColor.brandAccent | Theme brand action background | すべてに共通する16進カラーコードがあるとは限りません。 | | vars.foregroundColor.neutral | Theme text role | メインコンテンツ。 | | vars.foregroundColor.secondary | Theme secondary role | メタデータ。 | | vars.borderColor.focus | Theme focus role | 視覚的に確認できるフォーカス。 | | vars.borderRadius.standard | Theme radius expression | 標準の形状。 | ### ボックスレイアウトAPI | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | component | div by default | 必要に応じて、意味に沿ったmain、section、formを選択します。 | | padding | Named space, responsive object allowed | 使用例：モバイルmedium／タブレットxlarge。 | | gap | Named spacing values | 隣接する要素間のスペーシング。 | | background="customDark" | Context for custom dark surfaces | 前景色の動作を一致させられます。 | | borderRadius | none / small / standard / large / xlarge / full | テーマに応じて決まる形状。 | ### テキストとフィールドの仕様 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | label / secondaryLabel / tertiaryLabel | Three label levels | 目的、任意の補足情報、入力支援。 | | description | Below-label context | フィールドにフォーカスすると読み上げられます。 | | message + tone | critical / positive / caution / neutral | フィールドの状態を説明します。 | | onClear | Callback required for clear action | 制御対象の値はアプリケーション側でリセットします。 | | clearLabel | Accessible clear-control label | 日本語化します。 | ### ボタンの強調度と動作 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | variant | solid / ghost / soft / transparent | 視覚的な強調。 | | tone | brandAccent / formAccent / critical / neutral | アクションの意味。 | | No explicit tone | Neutral ghost by default | 控えめな標準設定。 | | Explicit tone, no variant | Solid default | 曖昧さを避けるには、両方を指定します。 | | size | standard / small | サポートされているサイズ。 | | loading | Also disables interaction | 実際に処理中の場合に限ります。 | | Ordinary disabled | Not supported | 操作できる状態を保ち、エラーの内容を説明します。 | ### テキストの意味 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | size | large / standard / small / xsmall | テーマの文字サイズ設定。 | | weight | regular / medium / strong | テキストの強調。 | | component="p" | Paragraph element | 文字の見た目と意味は別々に考えます。 | | maxLines | Number | ユーザー生成コンテンツの表示範囲を制限します。 | | tone="secondary" | Metadata emphasis | エラーロールの代わりにはなりません。 | ## SEEK Braid デザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## SEEK Braid デザインシステム：選択したテーマが視覚表現の仕様を決定する ### Provider、リセット、生成される変数が連携します > Braidは、SEEK Groupの複数のテーマに対応しています。Braidの変数APIにはスコープ付きのCSS式が含まれているため、vars.space.mediumなどの名前は安定した参照として使えます。一方、生成されるカスタムプロパティの識別子を手作業で再現する必要はありません。この例では、BraidProviderを通じてseekJobsを選択します。 リセットは、ほかのBraidスタイルより先にインポートする必要があります。アプリケーションを埋め込む場合、styleBody={false}を指定すると、Providerによるホスト側のbodyの背景や余白の変更を防げます。このオプションを指定しても、テーマコンテキストは引き続き必要です。 関連する仕様を確認する ## SEEK Braid デザインシステム：レスポンシブ値には名前付きのテーマスペースを使う ### 実際に使われている4つのブレークポイント条件を維持する 共通のブレークポイントは、モバイルが0、タブレットが740px、デスクトップが992px、ワイドが1200pxです。この例では、レスポンシブプロパティのオブジェクトを使い、タブレットのブレークポイントで余白を変更します。同じ変更のためにCSSメディアクエリを重複して記述する必要はありません。 ここでは、テーマのmediumスペースを推測したピクセル値として説明していません。余白にはBoxとStackを優先して使います。varsは、それらのコンポーネントでは表現できないレイアウトに使う、より低レベルな手段です。値はCSS式なので、乗算にはJavaScript数値演算ではなくcalcを使います。 関連する仕様を確認する ## SEEK Braid デザインシステム：テキストロールは周囲の色コンテキストに対応する ### 階層とセマンティクスは別々に選ぶ Textでは名前付きのサイズとウェイトを指定でき、Headingでは見出しの階層を表現できます。求人の都市名にはsecondaryトーンを使えますが、タイトルには検索結果を識別できるだけの強調を保ちます。段落には、既定の見た目だけを理由にHTML要素を選ぶのではなく、component="p"を指定してTextを段落として表示できます。 Braidは、暗い背景のコンテキストに合わせて前景色のトーンを調整します。元画像やカスタム背景を使う場合は、BoxにcustomDarkコンテキストを指定してその関係を伝えます。手動で色を指定したdivでも、同じコンテキスト動作が得られるとは限りません。 関連する仕様を確認する ## SEEK Braid デザインシステム：トーンは意味、variantは強調度 ### ブランドアクセントは検索アクションに限定する この例では、検索の「求人を検索」にsolidバリアントとbrandAccentを明示的に組み合わせています。「検索をクリア」は、より控えめなghostアクションです。繰り返し実行できるフォームアクションの強調にはformAccentを使えます。criticalは破壊的な結果を伴う操作向けであり、通常のコントロールを目立たせるために使うものではありません。 Braidの既定動作には注意が必要です。neutralボタンは、別途指定がなければghostになります。一方、toneを設定すると、暗黙のvariantはsolidになります。重要なアクションでは両方のプロパティを指定し、意図した階層を明確にします。Actionsが一般的なモバイルでの縦並びと、画面幅が広い場合の横並びに対応します。 関連する仕様を確認する ## SEEK Braid デザインシステム：利用できないボタンより、操作可能なエラー表示を優先する ### 制御対象フィールドの仕様に従う TextFieldのonChangeコールバックには、React入力イベントが渡されます。この例ではevent.target.valueを読み取り、入力中のテキストを保存し、ユーザーが「検索」を実行したときにのみ適用済みの検索条件を更新します。コントロール単体ではアプリケーションの状態をクリアできないため、クリア用のコールバックも渡します。 messageで空の検索語に関するエラーを説明し、criticalトーンで視覚的な状態を示します。descriptionは継続的な補足情報に使います。通常のdisabled Braid Buttonはサポートされていません。訪問者が次の操作を確認できるよう、アクションは実行可能な状態に保ちます。オフラインプレビューでは、無効なフィールドにフォーカスも移動します。 1. 編集中の検索語は下書き状態で管理します。 2. 検索時に、前後の空白を除いた検索語が空でないことを確認します。 3. 失敗時には、役立つ重要なメッセージを表示します。 4. 成功した場合に検索語を適用し、結果が0件の場合も状態を明示します。 関連する仕様を確認する ## SEEK Braid デザインシステム：このサンプルは独自データのみを検索する ### ローカル検索の結果は、募集中の求人を示すものではありません プレビューには、職種、都市、勤務形態のメタデータを含む、架空の求人データが3件用意されています。検索では、大文字と小文字を区別せずに職種名と都市名を照合します。現在掲載中のSEEK求人は取得せず、結果はサンプルとして表示します。 入力中のテキストと適用済みの検索結果を別々に管理することで、検索を実行する前に職種を編集しても現在の結果が自動的に置き換わらないことが明確になります。「検索をクリア」では両方の値をリセットします。一致する結果がない場合はその旨を示し、検索コントロールは引き続き操作できる状態に保ちます。 - 検索条件を適用した後に結果件数を表示します。 - 編集中も、最後に適用した検索語を把握できるようにします。 - サンプルの求人情報に、偽の適用送信処理を追加しないでください。 関連する仕様を確認する ## SEEK Braid デザインシステム：Braidのスタイルを抽出するビルドを使う ### パッケージのインストールは、セットアップの一部にすぎません 公式のセットアップはsku向けに最適化されています。BraidのVanilla Extractスタイルをカスタムバンドラーで使うには、ビルドへの統合が必要です。また、リセットと選択したテーマは、ドキュメントに記載された順序でアプリケーションに読み込む必要があります。提示するコードは、互換性のある既存のskuプロジェクト向けの完全なエントリーポイントです。任意のscriptタグだけでBraidを実行できるという説明ではありません。 Braidは開発時のアサーションと、環境に応じた警告を実行します。本番環境では、ビルド時にアサーションを取り除き、環境を置き換えることが公式のビルドガイドで説明されています。この点は実装ワークフローで考慮してください。このページのオフラインHTMLサンプルは、そのようなパッケージビルドに依存しません。 関連する仕様を確認する ## SEEK Braid デザインシステムのコンポーネント例 ### 完全なスタンドアロンのインタラクティブ見本 ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。これは、Braidの検索構成、階層、ブレークポイントのガイダンスを独自にオフラインで再現したHTMLサンプルであり、SEEKのライブデータやBraidランタイムは使いません。プレビューの色と実際の余白は、アプリケーション側で選択したものです。 ``` Braid sample job search interpretation
PossibilitiesOriginal job-search specimen

Find your next possibility.

Search three original sample roles. These are not live vacancies.

3 sample results

Showing all sample roles

Independent HTML interpretation of Braid’s search composition and responsive guidance. Original content and application palette; no SEEK data, account or application service is connected.

``` コードリファレンス - 検索対象は同梱の架空の求人です。Braid のネイティブなエントリーポイントには、スタイル抽出を行うビルドと選択した seekJobs テーマが必要です。 ### 入力中の検索語、適用済みの検索、明示的なリセット 制御された TextField でローカルの検索語を検証し、Actions で異なるスタイルのボタンを2つまとめ、Card/Stack/Heading/Text でオリジナルの検索結果を表示します。 ``` // Entry module in an existing sku application: // npm install braid-design-system import 'braid-design-system/reset'; // Keep this first. import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import seekJobsTheme from 'braid-design-system/themes/seekJobs'; import {BraidProvider,Box,Stack,Heading,Text,TextField,Button,Actions,Card} from 'braid-design-system'; const jobs=[{id:1,title:'Product designer',city:'Melbourne'},{id:2,title:'Design systems engineer',city:'Sydney'},{id:3,title:'UX researcher',city:'Melbourne'}]; function JobSearch(){ const [draft,setDraft]=useState(''),[query,setQuery]=useState(''),[error,setError]=useState(''); const results=jobs.filter(j=>(j.title+' '+j.city).toLowerCase().includes(query.toLowerCase())); function search(){if(!draft.trim()){setError('Enter a role or city.');return;}setError('');setQuery(draft.trim());} function clear(){setDraft('');setQuery('');setError('');} return Find your next possibility {setDraft(event.target.value);setError('');}} onClear={()=>setDraft('')} clearLabel="Clear role or city" tone={error?'critical':'neutral'} message={error||'Search three original sample roles.'}/> {results.length} sample results {results.map(job=>{job.title}{job.city})} {!results.length&&No sample roles match. Try a different title or city.} These are sample listings, not live vacancies. ; } createRoot(document.getElementById('root')).render(); ``` コードリファレンス - onChange が受け取るのは生の文字列ではなく、入力イベントです。 - 検索語が空でも検索は実行できます。入力する内容を案内します。 - 検索をクリアすると、入力中のテキストと適用済みの検索結果が両方リセットされます。 ## SEEK Braid デザインシステムのエージェント設定 ### 実装の出発点 既存の sku ビルド向けの完全なアプリケーションエントリーポイントです。公式のセットアップで直接サポートされています。カスタムバンドラーには Vanilla Extract の統合が必要です。Reset のインポートは必ず先頭に置いてください。オフラインプレビューでは、ネイティブパッケージのコンパイルは行いません。 ``` // Entry module in an existing sku application: // npm install braid-design-system import 'braid-design-system/reset'; // Keep this first. import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import seekJobsTheme from 'braid-design-system/themes/seekJobs'; import {BraidProvider,Box,Stack,Heading,Text,TextField,Button,Actions,Card} from 'braid-design-system'; const jobs=[{id:1,title:'Product designer',city:'Melbourne'},{id:2,title:'Design systems engineer',city:'Sydney'},{id:3,title:'UX researcher',city:'Melbourne'}]; function JobSearch(){ const [draft,setDraft]=useState(''),[query,setQuery]=useState(''),[error,setError]=useState(''); const results=jobs.filter(j=>(j.title+' '+j.city).toLowerCase().includes(query.toLowerCase())); function search(){if(!draft.trim()){setError('Enter a role or city.');return;}setError('');setQuery(draft.trim());} function clear(){setDraft('');setQuery('');setError('');} return Find your next possibility {setDraft(event.target.value);setError('');}} onClear={()=>setDraft('')} clearLabel="Clear role or city" tone={error?'critical':'neutral'} message={error||'Search three original sample roles.'}/> {results.length} sample results {results.map(job=>{job.title}{job.city})} {!results.length&&No sample roles match. Try a different title or city.} These are sample listings, not live vacancies. ; } createRoot(document.getElementById('root')).render(); ``` ### あなたのプロジェクト向けプロンプト ``` seekJobs テーマを使って Braid の検索画面を構成し、Reset を先頭に置き、TextField のイベント状態を管理して、Actions でボタンをまとめます。単一のメイン検索ボタンには明示的に brandAccent の solid を指定し、リセットにはニュートラルな ghost を使います。空の検索も受け付け、エラーの理由を説明してください。通常の Button を無効化して検証を隠してはいけません。 ``` ## SEEK Braid デザインシステムの情報源と対象範囲 独立した OpenDesign のリファレンスです。求人情報はオリジナルのサンプルで、実際の求人募集や応募送信機能はありません。指定された Braid の変数は、選択したテーマを通じて解決されます。 - セットアップとビルド Reset の順序、sku、Vanilla Extract。 - BraidProvider テーマと埋め込み時の body の挙動。 - 変数 スコープ付きの CSS 式とロール名。 - ブレークポイント 共通のレスポンシブ閾値。 - Box セマンティック要素とレスポンシブなユーティリティ props。 - テキスト 文字サイズ、セマンティクス、コンテキストに応じたトーン。 - Button トーン、バリアント、無効時の挙動。 - TextField ラベル、エラー、クリア操作。 - TextField の props コールバックと制御値の正確な型。 ## SEEK Braid デザインシステム関連リソース ### Segment Evergreen 実際のテーマ値、入力を制御したタグ追加、ルールとのリアルタイム照合、空の状態からの復帰手段、ブラウザー標準の確認ダイアログを備えた Evergreen の参考実装です。 ### Semi Design Semi推奨の基本的なSteps、制御されたInputとSwitch、実際のテーマトークンを使って、順を追ったワークスペース設定を作成してください。また、React 18とReact 19のどちらのパッケージを使うか明示してください。 ### Semrush Intergalactic 最新のセマンティックトークンとチャートトークン、ネイティブの絞り込みコントロール、固定スケールでの比較、選択項目の詳細、再現可能な完全なフィクスチャを備えた Intergalactic ガイドです。 - [実装リファレンス](https://seek-oss.github.io/braid-design-system/components/Button/) - [ソース](https://seek-oss.github.io/braid-design-system/css/breakpoints/) - [ソース](https://seek-oss.github.io/braid-design-system/css/vars/) - [ソース](https://seek-oss.github.io/braid-design-system/components/Box/) - [ソース](https://seek-oss.github.io/braid-design-system/components/TextField/) - [ソース](https://seek-oss.github.io/braid-design-system/components/Button/) - [ソース](https://seek-oss.github.io/braid-design-system/components/Text/) - [関連する仕様を確認する](https://seek-oss.github.io/braid-design-system/components/BraidProvider/) - [関連する仕様を確認する](https://seek-oss.github.io/braid-design-system/css/breakpoints/) - [関連する仕様を確認する](https://seek-oss.github.io/braid-design-system/components/Text/) - [関連する仕様を確認する](https://seek-oss.github.io/braid-design-system/components/Button/) - [関連する仕様を確認する](https://seek-oss.github.io/braid-design-system/components/TextField/) - [関連する仕様を確認する](https://seek-oss.github.io/braid-design-system/components/TextField/props/) - [関連する仕様を確認する](https://github.com/seek-oss/braid-design-system) - [コードリファレンス](https://seek-oss.github.io/braid-design-system/components/Button/) - [コードリファレンス](https://seek-oss.github.io/braid-design-system/components/TextField/props/) - [セットアップとビルド Reset の順序、sku、Vanilla Extract。](https://github.com/seek-oss/braid-design-system) - [BraidProvider テーマと埋め込み時の body の挙動。](https://seek-oss.github.io/braid-design-system/components/BraidProvider/) - [変数 スコープ付きの CSS 式とロール名。](https://seek-oss.github.io/braid-design-system/css/vars/) - [ブレークポイント 共通のレスポンシブ閾値。](https://seek-oss.github.io/braid-design-system/css/breakpoints/) - [Box セマンティック要素とレスポンシブなユーティリティ props。](https://seek-oss.github.io/braid-design-system/components/Box/) - [テキスト 文字サイズ、セマンティクス、コンテキストに応じたトーン。](https://seek-oss.github.io/braid-design-system/components/Text/) - [Button トーン、バリアント、無効時の挙動。](https://seek-oss.github.io/braid-design-system/components/Button/) - [TextField ラベル、エラー、クリア操作。](https://seek-oss.github.io/braid-design-system/components/TextField/) - [TextField の props コールバックと制御値の正確な型。](https://seek-oss.github.io/braid-design-system/components/TextField/props/)