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

2026-03-25 Wed

このブログの土台を徹底的に作り込みました。 何度もやり直していて、ここまで３か月ぐらいかかったかも。 これが最後にと単なるデザインの修正に留まらず、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 との対話を通じて、「こういう風にしたい」という曖昧なイメージを、具体的なコードと堅牢なフォルダ構造に落とし込んでいく過程は非常に効率的でした。