新機能の概要

リッチエディタに、「色のプリセットのみを表示し、カラーピッカーを非表示にする」新しい色設定機能を追加しました。この機能により、コンテンツ作成時の色選択をより統制し、サイト全体のデザイン統一とアクセシビリティの向上を実現できます。
これまでのリッチエディタでは、自由にカラーピッカーから色を選択できましたが、今回の機能追加により、事前に設定した色のプリセットからのみ色を選択できるようになりました。

主な特徴

1. 簡単なオン・オフ切り替え

• APIスキーマ設定画面でスイッチをONにするだけで機能を有効化
• ［色のプリセットのみを表示し、カラーピッカーを非表示にする］のスイッチで直感的に操作

2. 強固な色制限機能

• プリセット以外の色でのテキスト入力・ペーストを防止
• 書き込み系のAPI（POST, PUT, PATCH）でも制限が適用

3. 柔軟な色プリセット設定（従来から存在する機能です）

• 最大10色まで色プリセットを登録可能
• カラーピッカーで自由に色を選択してプリセットに追加
• 不要なプリセットは個別に削除可能

参考：リッチエディタで文字色を設定できるようになりました | microCMSブログ

この機能が解決する課題

デザイン統一の課題

従来は、コンテンツ作成者が自由に色を選択できるため、以下のような問題がありました：

• ブランドカラーからの逸脱：企業のブランドガイドラインで定められた色以外が使用される
• 統一感の欠如：記事ごと、作成者ごとに異なる色が使用され、サイト全体の統一感が損なわれる
• 視認性の問題：背景色とのコントラストが低い色が選択され、読みにくいコンテンツが作成される

アクセシビリティの課題

• 色のコントラスト不足：WCAG（Web Content Accessibility Guidelines）に準拠しない色の組み合わせ
• 視覚的な混乱：過度に鮮やかな色や、意味のない色の使い分けによる読み手の混乱

設定方法

1. 色のプリセットを設定する

APIスキーマの編集画面で、リッチエディタフィールドの設定を開きます。

• ［＋ 追加する］ボタンをクリックして色を追加
• カラーピッカーで任意の色を選択
• 必要な色をすべて追加（最大10色）

2. カラーピッカーを非表示にする

［色のプリセットのみを表示し、カラーピッカーを非表示にする］スイッチをONにします。
これで、コンテンツ作成時に設定した色のプリセットからのみ色選択が可能になります。

実際の使用例

リッチエディタにて「設定方法」で指定した色のみを選択して文章に適用できます。

Before（従来）

コンテンツ作成者が自由に色を選択できるため、記事ごとに異なる色が使用され、サイト全体の統一感が損なわれる状況がありました。

After（新機能適用後）

事前に設定された色のプリセットからのみ選択できるため、どのコンテンツ作成者が執筆しても統一されたデザインを維持できます。

注意事項

• 色のプリセットを設定後にスイッチをONにする場合、最低1色のプリセットが必要です
• 既存コンテンツでプリセット以外の色が使用されている場合、その色はそのまま表示されますが編集時には制限が適用されます
• この設定はAPIスキーマごとに個別に適用されます

microCMSでは、コンテンツ作成の効率性を保ちながら、デザイン品質とアクセシビリティを向上させる機能を今後も提供してまいります。ぜひ新しい色のプリセット機能をお試しください。