テーマYokko Lab Siteデザイン

フォレストグリーンを基調にした理由 — Yokko Lab パレット観察

ブランドサイトのアクセントカラーになぜ #16a34a を選んだのか、補助色との関係性、そして読み物としての可読性をどう支えているかを観察します。

4 分で読めます
  • palette
  • branding
  • color-theory

Columns では AI・技術・デザイン・マーケティングなど、ひとつのテーマを掘って書いていきます。最初の一本は、書き手のリズムを掴むためにも、自分のサイトのカラー選定をデザイン論考の題材にとりました。

ベースになった色

Yokko Lab のサイトは、白基調にフォレストグリーンを軸にした構成です。#16a34a を選んだ理由は単純で、「自然」「成長」「落ち着き」の 3 つを同時に表現できるからです。

  • Forest GreenAccent
  • Deep PineAccent Hover
  • ConiferOn Accent BG
  • Soft LimeAccent Soft
アクセント系の 4 段階。リンク・ホバー・タグ・アクセント上の濃色をすべてカバーする

メインの #16a34a 1 色だけでサイト全体を支えるのは無理なので、ホバー時に少し沈む #15803d、アクセント背景の上で文字を読ませる #14532d、アクセントを軽く重ねたい時の #22c55e を別途用意しました。これで「強さ」と「やわらかさ」の両端を取れるようになっています。

中性色との関係

ブランド色は際立つほど、隣に置く中性色のチューニングが利いてきます。Yokko Lab の中性色は青みを微妙に避け、わずかに暖色寄りにしてあります。

  • PageBG Primary
  • PaperBG Reading
  • BeigeInline Code
  • CreamCode Block
背景・読書面・コード装飾の 4 色。緑との対比を強めず、紙のような温度感を保つ

#fbfbf8（Paper）は記事ページの背景候補として、#f4f1ea（Beige）はインラインコードの背景として使っています。冷たい灰色を避けることで、フォレストグリーンが浮かずに馴染むようになりました。

文字の階層

文字色は 3 段階に絞っています。

  • PrimaryBody
  • SecondaryLead / Sub
  • FaintDate / Meta
プライマリ・セカンダリ・フェイントの 3 段階。コントラスト比は WCAG AA 以上を確保

特に #4a4a4a は、よくある #525252 よりほんの少しだけ濃く設定しています。長文の本文ではこの 1pt の差で読み疲れが変わります。

まとめ

  • アクセント 1 色だけで運用しようとすると、ホバー・タグ・アクセント上テキストで必ず破綻する。段階を 4 色用意する
  • 中性色は 暖色寄り にすると、緑系アクセントが馴染んで主役の邪魔をしない
  • 文字色の中間値は #4a4a4a あたりが日本語の長文に向いている

次のコラムでは、デザインに限らず AI や技術・マーケティング寄りのテーマも織り交ぜていく予定です。