プラグイン

カラーピッカー

EmDash CMS 内で編集者向けに視覚的に設定できるカラーピッカー欄ウィジェットを追加します。

• カテゴリー: エディター体験
• ステータス: 利用可能
• バージョン: ベータ版に含む
• 価格: ベータ版に含む

リンクをコピー Claudeで開く ChatGPTで開く

Xで共有 LinkedInで共有 Redditで共有

製品詳細

カテゴリー

エディター体験

ステータス

利用可能

バージョン

ベータ版に含む

Color Picker は編集体験に特化したプラグインで、カラーピッカー欄を追加し、管理者がプレーンテキストに hex を打ち込まずにブランドカラーを視覚的に設定できます。EmDash のプラグインが重い連携だけでなく日々の編集 UX を良くすることも示します。リポジトリの packages/plugins/color を参照してください。

インストール

1. EmDash 管理画面で Color Picker プラグインを有効にします。
2. コンテンツモデルまたはスキーマで、デザイナーが色を選ぶ必要があるフィールド（テーマのアクセント、ボタン色、カテゴリバッジなど）にカラーウィジェットを付けます。
3. 管理 UI をプレビューし、ピッカーが表示され保存時に値が保持されることを確認します。

設定

通常は次を定義します。

• デフォルト色 — 新規エントリ向けのブランドとして安全な出発点。
• 許可する形式 — テーマが解釈する hex、RGB、CSS 変数など。
• コントラストやアクセシビリティのヒント — 既知の背景に対して WCAG コントラストを満たす必要がある場合、フィールド説明に注記を足すチームもあります。

例（概念）: マーケティング用テンプレートが primaryColor と secondaryColor を #2563eb と #64748b として保存し、ビルド時に Astro コンポーネントの CSS 変数から参照する、といった形です。

利用シナリオ

• テーマのカスタマイズ — キャンペーンごとにアクセントを少し変えたいが再デプロイはしたくないマーケサイト。
• デザインシステム — インラインスタイルに散らさず、構造化フィールドにパレットを閉じ込める。
• ホワイトラベル — パートナーが定めたガードレール内で色を選ぶ。

運用上のヒント

• 色がフロントエンドのトークンにどう対応するかを文書化し、エンジニアが重複ハードコードしないようにする。
• 医療ブランドなどで蛍光グリーンを禁止したい場合は保存時に検証する。
• エクスポート時に色フィールドを含め、再インポートでスタイルが失われないようにする。