| English name | Success Green |
|---|---|
| Katakana | サクセスグリーン |
| HEX | #22C55E |
| RGB | 34, 197, 94 |
| Design Theme | UIシステム＆アラートカラー |
Why is it a trend? (Background and reasons)
近年のWebデザイン、特にSaaSやWebアプリケーションの領域では、ユーザーに操作の結果を明確にフィードバックすることが極めて重要視されています。サクセスグリーンは「成功」「完了」「承認」といったポジティブな状態を直感的に伝えるための共通言語として定着し、多くのUIキットやデザインシステムで標準カラーとして採用されています。
また、アクセシビリティへの関心の高まりも、この色の役割を後押ししています。赤（エラー）や黄色（警告）といった他のアラートカラーとの明確な対比により、色覚に関わらず多くのユーザーがシステムの状態を素早く認識できます。これにより、よりインクルーシブで分かりやすいユーザー体験の構築に貢献しています。
ユーザーエンゲージメントの観点からも、タスク完了時にポジティブな感情を喚起することは非常に効果的です。サクセスグリーンがもたらす達成感や安心感は、ユーザーの満足度を高め、サービスへの信頼と継続利用を促す重要な要素となっています。
The psychological effects of design and UX
「成功」と「完了」の強力なシンボルです。「保存しました」「送信完了」といったメッセージでこの色を使うことで、ユーザーは操作が正しく処理されたことを瞬時に理解し、安心感を得られます。この即時フィードバックは、ユーザーの認知負荷を軽減する上で重要な役割を果たします。
緑色は自然や成長を連想させ、心理的に「安全」「前進」といった肯定的なイメージを与えます。信号機のように、ユーザーに「このまま進んで大丈夫」という許可を与え、次のアクションへスムーズに誘導する効果があります。
特に金融サービスやEコマースなど、信頼性が求められる分野で効果を発揮します。決済完了やデータ保護が有効であることなどを視覚的に示すことで、ユーザーに「このサービスは安全だ」という無意識の信頼を植え付けることができます。
Visibility testing (UI component example)
Practical usage (best practices)
フォーム送信後の成功メッセージや通知（トースト）に最適です。「登録が完了しました」「設定を保存しました」といったテキストと共に表示することで、ユーザーのアクションが成功したことを明確に伝えられます。
SaaSのダッシュボードや管理画面において、タスクの完了ステータスやサーバーの正常稼働を示すインジケーターとして使用します。赤や黄色と並べて使うことで、一覧性が高く、直感的なUIを実現できます。
コンバージョンに直結するCTAボタン（例：「購入を確定する」）に用いることで、ユーザーの最終的なアクションを力強く後押しします。ただし、サイト全体のブランドカラーとの調和を考慮し、他のボタンとの視覚的な優先順位を明確にすることが重要です。
単に色だけでなく、チェックマーク（✓）などのアイコンと組み合わせることで、色覚多様性を持つユーザーにも情報が正確に伝わるようになります。アクセシビリティを高めるための基本的な作法です。
Recommended color scheme suggestions
Charcoal (#36454F)
落ち着いたチャコールをテキストやUI要素に使うことで、サクセスグリーンの鮮やかさが引き立ち、視認性が向上します。モダンで信頼感のある印象を与え、プロフェッショナルなアプリケーションのUIに最適です。
Antique White (#FAEBD7)
温かみのあるオフホワイトを背景にすることで、サクセスグリーンが持つポジティブな印象がより柔らかく、親しみやすくなります。クリーンでミニマルなレイアウトの中で、安心感を効果的に演出できます。
Slate Gray (#708090)
サクセスグリーンを主要な通知色とし、スレートグレーをボタンや背景などのセカンダリカラーとして配置すると、落ち着きと安定感のある配色になります。情報量の多い画面でも、視覚的な階層を整理しやすくなります。
