週末の午後 + Claude Design + Claude Code = あなたのスタイルのブログを作る
Claude Design + Claude Code を使って、あなた専用の Jekyll テーマブログを作ろう
https://zhgchg.li/ 2.0!
週末の午後を利用して、Claude Design で好みのブログのスタイルと機能を設計し、Claude Code を使って実装し、Jekyll ブログに適用しました。5年間使っていた Chirpy Theme のインターフェースを理想の個人ブログスタイルに完全に置き換えました。
技術
-
ブログ構成: Jekyll 静的サイト
-
記事の元ファイル: Markdown ファイル
-
サーバー／ウェブホスティング: GitHub Pages（無料で信頼性あり）
-
エンジニアリング: Claude Code Max（100 USD、5時間のクレジット 使い切る前に完成しました）
-
デザイン: Claude Design（ブログページが少ないため、2時間の使用時間で十分です）
費用
-
Claude Code Max $100 USD
-
サーバー／ウェブホスティング：$0 USD
-
Jekyll テーマ：0 USD
-
時間：週末の午後
実現手順
1. ローカルにクリーンな Jekyll ブログを作成する
jekyll new blog
2. テーマのページ例を収集して Claude Design にアップロードする
[2026/05/06 アップデート] 2–1 Design Agent スキルでサードパーティのデザインスキルを使いデザインを完成させる
細かい内容はこの記事「 別再從零開始 AI 寫程式：讓 AI Agent 直接幫你搞定 Google Apps Script 串接與開發 」をご参照ください。
2–2 Claude Design
私は現在のブログに直接アクセスし、各ページで右クリックして「名前を付けて保存」を選択します。例えば、Home、Post、Page、PostList、Archives、Tags…
Theme フォルダを作成し、すべてのページと付属ファイルをその中に入れます:
Claude Design にアクセスしてプロジェクトを作成:
Theme ページのサンプルを Claude Design にアップロードし、「Attach codebase」を選択：
先ほど整理した Theme ディレクトリを選択:
選択が完了したら、Prompt を入力して Claude Design にページのデザインを依頼してください:
私のブログを再設計するために、繁体字中国語で私と交流してください。
3. Claude Design を使った再設計
送信後、Claude Design はあなたが望むデザインについて質問します:
-
いくつかのビジュアルバリエーションを見たいですか？AIが複数の案を生成して選べます。
-
どの Tweaks をリアルタイムで調整したいですか？右下の Debug ツールにはどの切り替え機能が必要ですか？
-
あとはお好みでご自由に入力してください。
4. Claude Design クッキング…
約3〜5分で、AIが完全なデザインシステム（.css）を作成し、React.js／HTMLで結果を表示します。
ブログの再設計が完了し、Blog Redesign.html に保存しました。
デザインシステム
フォント：Noto Serif TC（宋体）+ Inter + JetBrains Mono
色調：暖かい紙のクリーム色 + 赤陶のメインカラー（oklch warm 系）
三つの分類軸線：テクノロジー / 旅行 / シェア、すべて実際の中国語のサンプルコンテンツを使用
二つの方向、合計7つのアートボード（ダブルクリックで全画面プレビュー可能）
方向 A · 雑誌風（Magazine）
ホーム — ヘッダーのタイトル + メインレポート + 3カラムのサブ記事 + 番号付きリスト + ニュースレター
記事ページ — 目次付きの完全な単一記事、ドロップキャップ、イントロ、コードブロック、コメント、関連記事
カテゴリページ — 2×2の大きな画像インデックス
タグページ — 視覚化された棒グラフ統計 + タグクラウド
アーカイブページ — 年別 + 月別のタイムライン
アバウトページ — 個人紹介 + Now セクション + 購読
方向 B · モダンパブリケーション（Substack風）
ホーム — 大きなHero画像 + カード型グリッド + サイドバー購読ウォール
Tweaks パネル（右下で開く）でリアルタイム切替可能：
タイトルフォント（Noto Serif / 思源宋体）
ワイドレイアウト / 標準レイアウト
メインカラーと紙の色（4つのプリセット配色：赤陶、ダークブルー、ダークグリーン、ワインレッド）
5. Claude Design 結果の調整
-
右下の Tweak をクリックすると、パラメータを素早く調整して結果を確認できます。
-
ページ右上の拡大ボタンをクリックすると、ウェブページ全体を表示できます。インタラクティブ機能がある場合は、モックアップ上で直接操作も可能です。
-
クリックが無効、スクロールできない、ページが正しく表示されない、または内容が切れている場合は、AIに調整を依頼できます。
AI と引き続き対話し、必要な機能を追加したり既存の機能を調整したりできます。例えば、記事の末尾に buy me a coffee の寄付リンクやコメント欄を追加したい場合、次のように伝えればよいです：
結果:
AIと対話を続けて、機能やページデザインを自分好みに作り上げる。
6. Claude Design 完了
デザインに満足したら、右上の「Share」→「Download project as .zip」をクリックして、元のデザインファイルをダウンロードします:
ダウンロードして解凍後、フォルダを Jekyll Blog のディレクトリに配置します:
7. Claude Code に Claude Design のデザイン案を実装してもらう
Jekyll Blog のディレクトリで一度 /init を実行し、AI にこれが Jekyll Blog の構造であることを認識させてください。
./MyBlogTheme のテーマデザインを私のブログに適用する
8. Claude Code のビルド…
- 初回の構築には約 20K トークン（Opus 4.7 / 努力度：中程度）がかかりました
成果：
bundle exec jekyll serve を実行し、http://127.0.0.1:4000/ を開いて結果を確認します:
引き続き AI による最適化と問題修正を行いますが、基本的な完成度はすでに非常に高いです！
実現の小さなコツ
-
AIに「あなたのブログは GitHub Pages」や他のプラットフォームにデプロイされると伝えてください。プラットフォームごとに機能が異なる場合があります。例えば、GitHub Pages は一部のJekyll Pluginsのみを許可しており、許可リストにないプラグインは公開後に使用できません。
-
AIにこう伝えてください：
優先的に Jekyll ネイティブ、Jekyll プラグイン、無料オープンソースのプロジェクトを使って機能を実装する。 -
AIにこう伝えてください：
ウェブサイト設計では必ずSEO構造とRWDの操作体験を重視してください。 -
AIにこう伝えてください：
既存のテーマを新しいテーマに置き換える。 -
GitHub Pages にデプロイするための CI/CD 用 YAML も AI に書かせることができ、手順も教えてくれます。
-
新しいページデザインを調整したい場合は、Claude Design に戻ってデザインを修正し、調整後に再ダウンロードしてディレクトリに戻すことをお勧めします。Claude Code に直接ビジュアルデザインを依頼するのはあまり得意ではないため推奨しません。
私が使用したパッケージや機能
Jekyll パッケージ:
-
jekyll 4.3 + kramdown (GFM) + kramdown-parser-gfm
-
rouge — コードのシンタックスハイライト
-
jekyll-feed — Atomフィード (/feed.xml)
-
jekyll-sitemap — /sitemap.xml
-
jekyll-paginate-v2 — 記事のページネーション機能
-
jekyll-archives — アーカイブページ
-
jekyll-seo-tag — SEOメタタグ / OG / Twitterカードメタ
-
jekyll-redirect-from — 短縮URLのリダイレクト
CSS / フロントエンドリソース:
-
GLightbox v3（CDN, MIT） — 画像クリックで拡大するライトボックス
-
SCSS：assets/css/main.scss
-
Font Awesome アイコン SVG
JavaScript 機能:
-
ドロワーメニュー（トップバーメニュー / オーバーレイ / ESCキーで閉じる）
-
LQIP ハイドレーター＆レイジーロード — 記事画像のプレースホルダー＆遅延読み込み
-
読書進捗バー
-
クライアントサイドの目次
-
Search：/search.json をビルド時に生成 + 純粋な JS サブストリングフィルター（lunr 不使用）
サードパーティサービス:
- giscus — コメント（GitHub Discussions）
背景
2018年からMediumでプログラムと生活についての記事を書き始め、後に自作ツールのZMediumToMarkdownを開発しました。これはMediumの記事をダウンロードしてMarkdownファイルに変換しバックアップするもので、併せてJekyll + Chirpyテーマで独立したブログサイトを作り、無料のGitHub Pages上にデプロイしています。
Jekyll は便利な静的サイトジェネレーターで、Markdown とテンプレートを HTML に変換し、その HTML ファイルをホスティングサービスにアップロードすることで、コンテンツを公開できます。
-
私も Jekyll を使って自分の Linktree を作りました: https://link.zhgchg.li
-
jekyll new blogでデフォルトのブログプロジェクトを素早く作成できます
Jekyll のデフォルトのブログプロジェクトスタイルは非常にシンプルです:
しかし、満足のいく Jekyll Blog テーマを見つけるのは簡単ではありません。ホームページは綺麗でも、記事内容ページの使い勝手が良いものや、一覧ページが優れているものもあります。有料テーマでも完全に満足できるものはなかなか見つかりません。また、インストールして設定を終えた後に機能やページが足りないことに気づき、また探し直さなければならないこともあり、とても大変です。
何度も探し回った結果、レイアウトが良く、RWD対応でブログ機能が充実したテーマ — Theme Chirpy — を見つけました：
5年間ずっと使い続けており、飽きて乗り換えたい時期もありました。しかし、何度も迷った末に結局はTheme Chirpyに戻ってきました。前述の通り、これ以上見た目も機能も優れたテーマは見つかりませんでした。
Claude Design + Claude Code が登場するまでは、一気にAIに頼んで自分の望むブログのスタイルをデザインし、機能ページを実装することはありませんでした。
Post MediumからZMediumToMarkdownを使って変換しました。
コメント