生成AI Gemini CLI とやったことメモです。

2026-03-25

このブログの土台を徹底的に作り込みました。 何度もやり直していて、ここまで３か月ぐらいかかったかも。 これが最後にと単なるデザインの修正に留まらず、Jekyll の機能を活かした効率的な運用体制を整えたつもり。

1. UI/UX の刷新：温かみのある「付箋」デザイン

「ワンカラムで読みやすく、オレンジを基調とした淡いデザイン」をテーマに、以下の調整を行いました。

  • レスポンシブ・ワンカラム: デスクトップでは読みやすい幅に制限（max-w-3xl）し、中央寄せ。スマートフォンでも最適な余白を確保しました。
  • 付箋風リスト: 記事一覧を白いカード形式にし、左側にアクセントのオレンジ線を配置。ホバー時に少し浮かび上がる演出を加え、クリックしやすさを向上させています。
  • テーマカラーの統一: Tailwind CSS のカスタム設定を導入。primary カラーとしてオレンジを定義し、ヘッダー、リンク、枠線などを一貫したトーンで統一しました。

2. Jekyll アーキテクチャの最適化

メンテナンス性を高めるため、ファイル構造とロジックを整理しました。

  • カテゴリ名の日本語管理: _data/categories.yml を作成。URL用の英語スラッグ（tech）と、表示用の日本語名（技術）をマッピングすることで、クリーンなURLと親しみやすい表示を両立しました。
  • レイアウトの完全分離: 記事（post）とカテゴリ（category）のレイアウトを独立。各ページファイルは Frontmatter を最小限書くだけで、タイトルやURLが自動生成される仕組みに。
  • URLの自動生成: _config.yml を調整し、記事のURLを /:categories/:title/ の形式に固定。ファイル名から日付とタイトルを自動で引き継ぎます。

3. 技術ブログとしての機能強化

読み手にとっても、書き手にとっても嬉しい機能をいくつか追加しました。

  • シンタックスハイライト: Highlight.js（intellij-light テーマ）を導入。コードブロックの背景を極薄のオレンジ、枠線を濃いオレンジにカスタマイズし、サイトの雰囲気に溶け込ませました。
  • SNS 連携 & OGP: 記事末尾に X, Facebook, LINE, URLコピーのボタンを設置。SNS 投稿時に画像や説明文が綺麗に出るよう、OGP メタタグの自動生成にも対応しました。
  • アイキャッチ画像: Frontmatter で image を指定するだけで、タイトル下に角の丸い美しいアイキャッチ画像が表示されるようにしました。

4. 実践：Gemini CLI on Debian のセットアップ

実際に Gemini CLI を Debian 環境で動かすまでの技術メモを執筆。AI と協力して、Node.js の最新版導入手順や認証フローを分かりやすく整理しました。

まとめ

AI との対話を通じて、「こういう風にしたい」という曖昧なイメージを、具体的なコードと堅牢なフォルダ構造に落とし込んでいく過程は非常に効率的でした。

2026-03-26

ブログの利便性とデザインをさらに一歩進めました。

1. タグシステムの構築

これまで「ただの文字列」だったタグを、機能的なインデックスとして活用できるようにしました。

  • タグ一覧ページの新設: 全記事からタグを抽出し、カテゴリ別に整理した /tags/ ページを作成。
  • 記事内リンクの設置: 記事上部のタグをクリックすると、そのタグが含まれる記事一覧へジャンプするようにし、関連トピックを探しやすくしました。

2. 「最新の記事」セクションの追加

記事を読み終えた後に他の記事へ誘導できるよう、末尾に最新5件のリストを配置しました。

  • デザインの統一: トップページと同じ「白いカード ＋ 左側のオレンジ線」を採用。
  • ホバーエフェクト: カードにカーソルを合わせると少し浮き上がる演出を加え、クリックしやすさを高めています。

3. Google Analytics (GA4) の導入

サイトの成長を数字で見守るために、GA4 を設定しました。

  • 部品化による管理: トラッキングコードを _includes に分け、ID は _config.yml で管理。将来のコード変更にも柔軟に対応できるようにしています。

4. リーダビリティ（可読性）の追求

文章がスッと頭に入るよう、見出し（H2, H3）のデザインを徹底的に調整しました。

  • 色のバランス: オレンジ一色にならないよう、境界線に薄いグレーを混ぜて視覚的な「区切り」を明確に。
  • 空間のデザイン: 前の段落との「余白」を多めに取り、話題が切り替わったことを直感的に理解できるようにしました。

まとめ

「情報を探しやすい」「読んでいて疲れない」というブログの基本機能を、AI との対話で一気に形にすることができました。デザインと機能が噛み合っていく過程は非常に心地よいものです。