ある週末の午後 + Claude Design + Claude Code = 自分だけのスタイルのブログを作る
Claude Design + Claude Code を使ってあなた専用の Jekyll テーマブログを作ろう
https://zhgchg.li/ 2.0!
週末の午後を使って Claude Design で好きなブログのスタイルと機能をデザインし、Claude Code で実装して Jekyll ブログに適用しました。5年間使っていた Chirpy テーマのインターフェースを、自分の理想の個人ブログスタイルに完璧に置き換えました。
技術
-
ブログ構成: Jekyll 静的サイト
-
記事の元ファイル: Markdown ファイル
-
サーバー/ウェブホスティング: GitHub Pages（無料で信頼性あり）
-
エンジニアリング: Claude Code Max（100 USD、5時間の枠を使い切らずに完成）
-
デザイン: Claude Design（ブログページが少ない場合、2時間の枠内で十分です）
費用
-
Claude Code Max $100 USD
-
サーバー／ウェブホスティング：$0 USD
-
Jekyll テーマ：0ドル
-
時間：週末の午後
実現手順
1. ローカルにクリーンな jekyll ブログを作成する
jekyll new blog
2. Theme ページの事例を収集し、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 をリアルタイムで調整したいですか？右下のデバッグツールにはどんな切り替え機能が必要ですか？
-
あとはお好みでご自由に入力してください。
4. Claude Design クッキング…
大体3〜5分で、AIが完全なDesign System（.css）を作成し、react.jsと.htmlで結果を表示します。
ブログの再設計が完了し、Blog Redesign.html に保存しました。
デザインシステム
フォント：Noto Serif TC（宋体）+ Inter + JetBrains Mono
色調：暖かい紙のクリーム色 + 赤陶メインカラー（oklch ウォーム系）
3つの分類軸線：テクノロジー / 旅行 / シェア、すべて実際の中国語サンプルコンテンツを使用
2つの方向性、合計7つのアートボード（ダブルクリックで全画面プレビュー）
方向 A · マガジン風（Magazine）
ホーム — ヘッダーのタイトル + メイン特集 + 3カラムのサブ記事 + 番号付きリスト + ニュースレター
記事ページ — 目次、ドロップキャップ、引用、コードブロック、コメント、関連記事を含む完全な単一記事
カテゴリーページ — 2×2の大きな画像インデックス
タグページ — 視覚的なバー統計 + タグクラウド
アーカイブページ — 年別 + 月別のタイムライン
アバウトページ — 個人紹介 + Nowセクション + 購読
方向 B · モダン出版物（Substack風）
ホーム — 大きなヒーロー画像 + カード型グリッド + サイドバー購読ウォール
Tweaksパネル（右下で開く）でリアルタイム切り替え可能：
タイトルフォント（Noto Serif / 思源宋体）
ワイドレイアウト / 標準レイアウト
メインカラーと紙の色（4セットのプリセット配色含む：赤陶、ダークブルー、墨緑、ワインレッド）
4. Claude Design の結果調整
-
右下の Tweak をクリックしてパラメータを素早く変更し、結果を確認できます
-
ページ右上のアイコンをクリックすると、ウェブページ全体を拡大表示できます。機能があれば、そのまま操作も可能です（モックアップ）。
-
クリックが無効、スクロールできない、ページが正しく表示されず切れてしまう場合は、AIに調整を依頼してください。
可以引き続きAIと対話して、必要な機能を追加したり既存の機能を調整したりできます。例えば、記事の末尾に「buy me a coffee」の寄付リンクやコメント機能を追加したい場合、私はこう伝えます:
結果:
AIと継続的に対話しながら、機能やページデザインを自分好みに仕上げる。
5. Claude Design 完成
デザインに満足したら、右上の「Share」-> 「Download project as .zip」をクリックして、元のデザインファイルをダウンロードしてください:
ダウンロードして解凍後、フォルダを jekyll blog 内に配置してください:
6. Claude Code に Claude Design のデザイン案を実装してもらう
jekyll blog のディレクトリで一度 /init を実行して、AI に Jekyll Blog の構造を認識させてください。
./MyBlogTheme のテーマデザインを私のブログに適用する
7. Claude Code のビルド…
- 初回の構築には約20Kトークンがかかりました（Opus 4.7 / 努力度：中程度）
成果：
bundle exec jekyll serve を実行して、http://127.0.0.1:4000/ を開いて結果を確認します:
同様にAIによる最適化や問題修正を続けていますが、基本的な完成度はすでに非常に高いです！
実現の小さなコツ
-
AI にこう伝えてください：
あなたの Blog は GitHub Pages にデプロイされますまたは XXX。プラットフォームごとに機能が異なる場合があるためです。例えば、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 hydrator & Lazy Load — 記事画像のプレースホルダーと遅延読み込み
-
読書進捗バー
-
クライアントサイドの目次
-
Search：/search.json をビルド時生成 + 純粋な JS substring フィルター（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 ブログテーマを見つけるのは簡単ではありません。トップページは綺麗でも、記事ページの使い勝手が良いとは限らず、一覧ページが良くても完璧なテーマはなかなかありません。有料テーマでも完全に満足するのは難しいです。設定を終えて使い始めてから、必要な機能やページが足りないことに気づき、また探し直すのはとても大変です。
何度も探し回って、最終的にレイアウトがあまり醜くなく、RWD対応でブログ機能が充実したテーマ — Theme Chirpy :
5年間ずっと使い続けており、その間に飽きて他のテーマに変えたいと思うこともありました。しかし、毎回いろいろ探し回った末に結局はTheme Chirpyに戻ってきました。前述の通り、これより見た目が良くて実用的なテーマは見つかりませんでした。
Claude Design + Claude Code の登場まで、私は一気にAIに頼んで自分の望むブログのスタイルと機能ページの実装を設計してもらいました。
Post Mediumから変換したもの by ZMediumToMarkdown.
コメント