このブログのヘッダーカラーを決めるときに、3つの案を比較しました。
最終的にティール（青緑）を選びましたが、「なんとなく良さそう」で決めたわけではありません。 検討した過程を残しておきます。
前提：メインブログとの関係
このブログ（ LIFEWORK Blog Next ）は、メインブログ（ lifework-blog.com ）の姉妹サイトです。
メインブログは濃紺（インディゴ系）のヘッダーを採用しています。 今回の Next.js ブログのヘッダーを決めるにあたって、最初に考えたのは「メインブログと統一するか、差別化するか」という点でした。
完全に統一してしまうと、同じサイトの別ページのように見えてしまいます。 かといって全く無関係な色にすると、同じ運営者のサイトだという雰囲気が出ない。
「姉妹サイトだとわかる程度に揃えつつ、独自の雰囲気を持つ」という方向で検討することにしました。
比較した3案
案1：インディゴ
メインブログと同系色の濃紺です。
統一感は出ますが、パッと見でメインブログと区別がつきにくいという問題がありました。 このブログは Next.js で作られた別サイトであり、内容もメインブログとは目線が違います。 見た目でも差別化した方がブログの個性が伝わると感じ、早い段階で候補から外しました。
案2：スレート
グレーがかった青で、落ち着いた印象の色です。
技術系のサイトでよく使われる配色で、清潔感があります。 ただ、少し没個性的に感じました。「どこかで見たことがある」という印象が強く、このブログの「次につながる何かを探す場所」というキャッチフレーズに合う雰囲気ではないと感じました。
案3：ティール（青緑）
青と緑の中間にある色で、 #0f6e56 を採用しました。
この LIFEWORK Blog Next は、私がいろいろと調べたことや、気づいたこと、感じたことなどを自由に書くブログなのですが、Next という言葉には、「次のブログのアイデアになる」という意味合いも持たせています。 そのブログにおいて、この新緑のような色合いは、「これから成長していく」という前向きな雰囲気が感じられ、私には、このブログにピッタリだと思えました。
ティールを選んだ理由
3案を実際に実装して画面で比べたとき、ティールに決めた理由は2つです。
1つ目は、メインブログとはっきり差別化できること。
インディゴとスレートはどちらも青系で、メインブログの濃紺と近い印象になります。 ティールは青緑という独自の方向性があるため、姉妹サイトでありながら別のサイトだとひと目でわかります。
2つ目は、「 Next 」という名前のイメージに合っていること。
Next.js で作られた新しいサイト、次へつながる場所、という雰囲気にティールの持つ清潔感と前向きさが合っていると感じました。
インディゴやスレートに比べて、少し明るく開けた印象があります。
ダークテーマとの相性
ヘッダーカラーを決めた後、サイト全体をダークテーマに変更しました。
ダークテーマにしたことで、ティールの発色がより際立ちました。 暗い背景にティールの緑が映えて、当初の想定より好みの仕上がりになりました。
ロゴエリアとナビゲーションエリアで色を分けています。
| エリア | カラーコード | 印象 |
|---|---|---|
| ロゴエリア背景 | #1a1d26 | 濃いダーク |
| ロゴ文字 | #4dd4b0 | 明るいティール |
| ナビゲーション背景 | #0f6e56 | 落ち着いたティール |
| ナビゲーション文字 | #b0e8d8 | 薄いティール |
ロゴの文字色（ #4dd4b0 ）はナビゲーションの背景色（ #0f6e56 ）より明るくしています。
2段で構成されるヘッダーの中で、ロゴエリアとナビゲーションエリアがはっきり区別できるようにするためです。
実装の詳細はメインブログに書いています。
