ブログのデザインをSolarized Dark風に変更した話

ブログのデザインをSolarized Dark風に変更した話

作成日:
更新日:
デザインSolarizedTailwind CSSダークテーマ

「このブログ、なんか眩しいな...」

自分で作ったブログなのに、夜中に見ると目が痛い。白背景が眩しすぎる。

エディタではずっとSolarized Darkを使ってて、目に優しいのは分かってる。だったら、ブログも同じテーマにすればいいじゃん。

というわけで、ブログのデザインをSolarized Dark風に全面リニューアルしました。

結果：めちゃくちゃ読みやすくなった。

Solarized Darkとは

Solarizedは、2011年にEthan Schoonoverが開発したカラースキームです。

なぜSolarizedは特別なのか

普通のダークテーマは、「黒背景に白文字」みたいな感じで、コントラストが強すぎて目が疲れます。

Solarizedは違います。

科学的に計算された、目に優しい16色のパレット。

  • 低コントラスト: 目に優しい
  • 色の一貫性: すべての色が調和している
  • 可読性: 長時間見ても疲れない

エディタやターミナルで圧倒的な人気を誇るのは、この「目への優しさ」があるから。

Solarized Darkのカラーパレット

背景色（濃）: #002b36
背景色（薄）: #073642
テキスト（暗）: #586e75
テキスト（明）: #839496
テキスト（強調）: #93a1a1
テキスト（最強調）: #eee8d5

アクセントカラー:
- Yellow: #b58900
- Orange: #cb4b16
- Red: #dc322f
- Magenta: #d33682
- Violet: #6c71c4
- Blue: #268bd2
- Cyan: #2aa198
- Green: #859900

この16色だけで、すべてを表現します。

なぜSolarized Darkにしたのか

1. エディタとの統一感

Neovimで毎日コードを書いてるんですが、カラースキームはSolarized Dark。

エディタ：Solarized Dark（目に優しい） → ブラウザでブログ確認（白背景で眩しい） → またエディタ（目が慣れるまで時間がかかる）

この切り替えがストレスでした。

統一すれば、目への負担が減る。

2. 夜中の作業が多い

ブログを書くのは、だいたい夜。22時以降が多い。

白背景だと、部屋が暗いのに画面が明るくて、目が痛い。

ダークテーマなら、部屋の明るさとマッチして快適。

3. 長文が読みやすい

技術ブログって、長文になりがちです。このブログも、1記事3000〜5000文字とか普通。

白背景だと、長時間読むのがしんどい。

Solarized Darkの低コントラストなら、長文でも疲れない。

4. コードブロックが映える

技術ブログなので、コードブロックが多い。

def hello_world():
    print("Hello, Solarized!")

Solarizedのシンタックスハイライトは、めちゃくちゃ綺麗。

エディタで見慣れた色なので、コードが読みやすい。

実装：Tailwind CSSでSolarizedを再現

このブログはTailwind CSSで作ってるので、カスタムカラーを追加します。

カラーパレットの定義

tailwind.config.tsにSolarizedの色を定義：

// tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  theme: {
    extend: {
      colors: {
        // Solarized Dark
        solarized: {
          base03: '#002b36', // 背景（最も濃い）
          base02: '#073642', // 背景ハイライト
          base01: '#586e75', // コメント
          base00: '#657b83', // テキスト（薄）
          base0: '#839496',  // テキスト（標準）
          base1: '#93a1a1',  // 強調
          base2: '#eee8d5',  // 背景（Light用）
          base3: '#fdf6e3',  // 背景（Light用、最も明るい）
          yellow: '#b58900',
          orange: '#cb4b16',
          red: '#dc322f',
          magenta: '#d33682',
          violet: '#6c71c4',
          blue: '#268bd2',
          cyan: '#2aa198',
          green: '#859900',
        },
      },
    },
  },
};

export default config;

これで、bg-solarized-base03とかtext-solarized-blueみたいに使えます。

基本レイアウトの変更

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body className="bg-solarized-base03 text-solarized-base0">
        <Header />
        <main className="min-h-screen">
          {children}
        </main>
        <Footer />
      </body>
    </html>
  );
}

背景をbase03（濃い青灰色）、テキストをbase0（明るい灰色）に。

これだけで、もうSolarizedの雰囲気が出ます。

記事コンテンツのスタイリング

// components/PostContent.tsx
export default function PostContent({ content }) {
  return (
    <article className="
      prose prose-invert
      prose-headings:text-solarized-base1
      prose-a:text-solarized-blue
      prose-strong:text-solarized-orange
      prose-code:text-solarized-cyan
      max-w-4xl mx-auto
    ">
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </article>
  );
}

Tailwindのproseクラスを使いつつ、Solarizedの色をオーバーライド。

  • 見出し: base1（強調色）
  • リンク: blue（Solarizedのブルー）
  • 太字: orange（目立つけど派手すぎない）
  • インラインコード: cyan（エディタでよく使う色）

コードブロックのシンタックスハイライト

これが一番こだわったポイント。

Markdownのコードブロックに、Solarized Darkのシンタックスハイライトを適用します。

rehype-highlightとhighlight.jsのSolarized Darkテーマを使用：

// contentlayer.config.ts
import { defineDocumentType, makeSource } from 'contentlayer/source-files';
import rehypeHighlight from 'rehype-highlight';

export default makeSource({
  contentDirPath: 'content/posts',
  documentTypes: [Post],
  markdown: {
    rehypePlugins: [
      [rehypeHighlight, { theme: 'solarized-dark' }],
    ],
  },
});

CSSで追加のスタイリング：

/* globals.css */
@import 'highlight.js/styles/solarized-dark.css';

/* カスタマイズ */
.hljs {
  background: theme('colors.solarized.base02');
  color: theme('colors.solarized.base0');
  padding: 1rem;
  border-radius: 0.5rem;
}

これで、エディタと同じ見た目に！

ホバー効果とインタラクション

リンクのホバー効果も、Solarizedらしく：

<a className="
  text-solarized-blue
  hover:text-solarized-cyan
  underline underline-offset-4
  transition-colors duration-200
">
  リンクテキスト
</a>

青から水色に変わる、控えめなアニメーション。

こだわったポイント

1. コントラストのバランス

Solarizedの魅力は「低コントラスト」ですが、低すぎると読みにくい。

何度も調整して、ちょうどいいバランスを見つけました。

  • 本文: base0（標準）
  • 見出し: base1（少し明るい）
  • 重要な部分: base2（さらに明るい）

段階的にコントラストを変えることで、階層が分かりやすくなります。

2. アクセントカラーの使い分け

Solarizedには8つのアクセントカラーがあります。

使い分けのルール：

Blue (#268bd2)    → リンク
Cyan (#2aa198)    → インラインコード
Orange (#cb4b16)  → 太字、重要な情報
Green (#859900)   → 成功メッセージ
Yellow (#b58900)  → 警告
Red (#dc322f)     → エラー、削除
Magenta (#d33682) → 引用
Violet (#6c71c4)  → コードのキーワード

色に意味を持たせることで、直感的に理解できるUIに。

3. 読みやすさ最優先

デザインよりも、読みやすさを最優先。

  • 行間を広めに（leading-relaxed）
  • 段落の余白も広めに
  • 最大幅を制限（max-w-4xl）
  • フォントサイズは大きめ（text-lg）

長文を読むことを想定した設計です。

4. カードデザインの調整

記事一覧のカードも、Solarizedに合わせて調整：

<div className="
  bg-solarized-base02
  border border-solarized-base01
  rounded-lg p-6
  hover:border-solarized-blue
  transition-all duration-300
">
  <h2 className="text-solarized-base1 text-xl font-bold">
    {post.title}
  </h2>
  <p className="text-solarized-base0 mt-2">
    {post.description}
  </p>
  <div className="text-solarized-base01 text-sm mt-4">
    {post.date}
  </div>
</div>

背景をbase02（少し明るい）にすることで、base03の背景から浮き上がる。

ホバーするとボーダーが青くなって、クリックできることが分かる。

Before / After 比較

Before（白背景時代）

背景: #ffffff（白）
テキスト: #000000（黒）
リンク: #0000ff（ブルー）

問題点:
- 夜中に見ると眩しい
- 長時間読むと目が疲れる
- エディタとの切り替えで目がチカチカ

After（Solarized Dark）

背景: #002b36（深い青灰色）
テキスト: #839496（明るい灰色）
リンク: #268bd2（Solarizedブルー）

改善点:
- 目に優しい
- 長時間読んでも疲れない
- エディタとの統一感
- コードブロックが映える

実際に使ってみた感想

良かった点

1. 目の疲れが激減

夜中に2時間くらいブログ書いても、全然疲れない。

以前は1時間で目がしょぼしょぼしてたのが嘘みたい。

2. 執筆のモチベーションアップ

自分で作ったブログのデザインが気に入ると、記事を書くのが楽しくなります。

「早く公開して、このデザインで見てもらいたい！」って思える。

3. エディタとの切り替えがスムーズ

Neovimでコード書く → ブラウザでプレビュー → またNeovim

この切り替えが、目に優しくなりました。色の統一感があるので、違和感がない。

4. コードが読みやすい

シンタックスハイライトが、エディタと同じ色。

記事の中のコードが、めちゃくちゃ読みやすくなりました。

イマイチな点

1. 明るい場所では見にくい

日中、明るい場所でブログを見ると、ちょっと見にくい。

ダークテーマの宿命ですね。

解決策: ライトモードも実装する（予定）

2. スクリーンショットの色が変

記事に貼るスクリーンショットが、白背景だと浮く。

今後は、スクリーンショットもダークテーマで統一していく予定。

3. カラフルな画像が少し沈む

写真やカラフルな図を貼ると、背景が暗いので少し沈んで見える。

これは、画像の周りに薄い枠をつけることで解決。

技術的に学んだこと

Tailwind CSSのカスタマイズは簡単

カスタムカラーを追加するだけで、すぐに使えるようになる。

colors: {
  solarized: { ... }
}

これだけ。

CSS変数とか、SCSSとか、複雑な設定は不要。

proseクラスの柔軟性

Tailwindのproseクラスは、かなり柔軟にカスタマイズできます。

prose-headings:text-solarized-base1
prose-a:text-solarized-blue

こんな感じで、要素ごとに色を変えられる。便利すぎ。

色の選定は何度も試す必要がある

「これでいいだろう」と思っても、実際に記事を書いてみると微妙だったりする。

何度も調整して、しっくりくる色を見つけました。

今後の予定

1. ライトモードの実装

「夜はダーク、昼はライト」って切り替えられるようにしたい。

Solarized Lightも、同じパレットで作れます。

// ダークモード切り替え
const [theme, setTheme] = useState<'dark' | 'light'>('dark');

システム設定に合わせて、自動切り替えも実装予定。

2. テーマセレクター

Solarized以外のテーマも選べるようにしたい。

  • Solarized Dark
  • Solarized Light
  • Dracula
  • Nord

ユーザーが好きなテーマを選べたら最高。

3. アクセシビリティの改善

ダークテーマは目に優しいけど、人によっては見にくいかもしれない。

  • コントラスト比の確認
  • キーボードナビゲーションの改善
  • スクリーンリーダー対応

誰にとっても読みやすいブログを目指します。

4. アニメーションの追加

ページ遷移や、スクロールに合わせたアニメーションを追加したい。

Solarizedの落ち着いた色に合う、控えめなアニメーション。

// フェードイン
<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}
>
  {content}
</motion.div>

Framer Motionを使って、滑らかな動きを実装予定。

まとめ：Solarizedにして大正解

ブログのデザインをSolarized Darkに変更して、本当に良かったです。

変更して良かった理由：

  1. 目の疲れが激減: 長時間の執筆も快適
  2. エディタとの統一感: 切り替えがスムーズ
  3. 読みやすさ向上: 低コントラストが心地よい
  4. コードが映える: シンタックスハイライトが綺麗
  5. 執筆モチベーションアップ: 気に入ったデザインで書くのが楽しい

こんな人におすすめ：

  • ダークテーマが好きな人: Solarizedは最高
  • エディタでSolarizedを使ってる人: 統一感が最高
  • 夜中に作業する人: 目に優しい
  • 技術ブログを運営してる人: コードブロックが綺麗

実装の難易度：

  • 簡単さ: ★★★★☆（Tailwindなら簡単）
  • 時間: 2-3時間（カラー調整含む）
  • 効果: ★★★★★（劇的に読みやすくなる）

Solarizedは、単なる「カッコいいダークテーマ」じゃありません。

科学的に計算された、目に優しいカラースキームです。

技術ブログを運営してる人には、本当におすすめ。一度使ったら、もう戻れませんよ。

参考リンク:

次回は、ライトモードの実装について書く予定です。お楽しみに！