AIと一緒にブログをおしゃれに！ 若邪手帖EmDash版・デザイン奮闘記

AIとおしゃべりしながらブログを作る実験、第2回です。

前回はEmDashをWindowsにインストールして、Codexと接続。AIに記事を下書き保存してもらうところまで成功しました。

さて、ブログは動くようになったけれど、見た目はまだ初期テンプレート。

せっかくなら、自分の好きな世界観にしたい！

というわけで、今回はちゃっぴぃ（ChatGPT）をアートディレクターに、Codexを制作担当に迎えて、ブログのデザインに挑戦しました。

コンセプトは「小さな雑誌」と「月夜の書斎」

まずは、どんなブログにしたいかをちゃっぴぃと相談。

提案されたのは、明るい植物系、幻想的な書斎系、そして写真を主役にした雑誌系の3案。

私が選んだのは、

「小さな雑誌」をベースに、「月夜の書斎」の幻想的な雰囲気を少し混ぜる。

明るくて読みやすいけれど、ほんの少し夢のある世界。

配色は、ミルク色の背景、セージグリーン、薄紫、杏色、そして夜を思わせる濃い紫。

月や星は控えめに。かわいすぎず、大人っぽく。

方向性が決まったところで、Codexにデザイン改修をお願いしました。

最初は夜の書斎になりすぎた！？

CodexがCSSを変更して、さっそくブラウザで確認。

すると、画面は深い紫色。

見出しは明朝体になり、なんだか文学的で素敵。

でも……。

あれ？ ちょっと夜が強すぎない？

私たちが目指していたのは、明るい雑誌が主役で、月夜の雰囲気はほんの少し。

そこでライトモードに切り替えてみると、生成りの背景に濃い紫の文字、セージグリーンのアクセントが登場！

これこれ、この雰囲気！

昼はカフェ、夜は月明かりの書斎。

同じブログで、そんな二つの表情を楽しめるようになりました。

あれ、本文が消えた？

記事ページを眺めていると、今度は本文が表示されていないように見えました。

タイトルと抜粋の下に、いきなりコメント欄。

これは大変！

Codexに調べてもらおうかと思っていたら……。

眺めていたら直りました。

えっ、そんなことある？（笑）

開発中の再読み込みや表示更新のタイミングだったのかもしれません。

とりあえず、本文は無事。

何でもすぐに修正するのではなく、少し待って確認することも大切だと学びました。

ブログの名前は、やっぱり「若邪手帖」

次はサイト名。

初期設定の「My Blog」をどうするか考えました。

新しいAIブログとして別の名前にする案もありましたが、今回はWordPress版との比較実験。

だから、名前は同じにすることに。

若邪手帖 — Ruoye Note —

サイト名とキャッチフレーズを設定すると、ようやく自分のブログらしくなってきました。

でも、トップページを開くと「No posts yet」。

記事が消えた！？

……と思ったら、ちゃんと残っていました。

日本語を標準言語に変更したことや、記事が下書きだったことが関係していたようです。

日本語の記事をローカル環境で公開すると、無事にトップページへ表示されました。

カードが大きすぎる！ 今度は小さすぎる！

トップページに記事が表示されたのはいいけれど、最初の記事カードはかなり大きめ。

写真が主役というより、ほとんどページの主役です。

そこでCodexに、PCでは3列、タブレットでは2列、スマホでは1列になる雑誌風のレイアウトをお願いしました。

すると今度は、カードが左端にちょこん。

小さすぎるーー！（笑）

さらに幅を調整してもらいましたが、まだ細く見える気がする。

そこでブラウザの表示倍率を確認。

100％に戻してみると……。

あれ、ちょうどいいかも。

デザインを調整するときは、ブラウザの倍率も大切なんですね。

危うく、CSSを何度も直し続けるところでした。

ちょっぴり幻想的なカフェをアイキャッチに

記事カードが整ったら、次はアイキャッチ画像。

今回の希望は、

「ちょっぴり幻想的なカフェ」

ちゃっぴぃに画像を作ってもらいました。

ノートや本、カフェの飲み物、花や小さな月の飾り。

日常の中に、ほんの少し魔法が混ざっているような一枚です。

EmDashの記事編集画面からFeatured Imageに設定すると、トップページのカードにも画像が表示されました。

おおっ、一気にブログらしい！

画像が入るだけで、記事一覧の雰囲気がずいぶん変わります。

英語のフッターも日本語に

見た目が整ってくると、今度は細かいところが気になり始めました。

「Latest posts」「ABOUT」「CONNECT」「RSS feed」など、初期テンプレートの英語が残っています。

そこでCodexに日本語化をお願い。

「新着記事」「この手帖について」「リンク」「RSSで購読」へ。

フッターの紹介文も、若邪手帖らしい内容に整えました。

「推しを愛で、中国語を学び、AIと遊ぶ。そんな毎日の発見や制作の記録を、のんびり綴っています。」

これ、今の私のブログにぴったりかもしれません。

ヘッダーのSearchも「検索」に変更し、Adminボタンは通常の公開用表示では目立たないように調整。

少しずつ、テンプレートから自分のブログへ変わっていきました。

AIが作る。でも、決めるのは私

今回、いちばん面白かったのは、コードを自分で書かなくても、見た目について相談しながらブログを育てられたこと。

ちゃっぴぃと「もう少し明るく」「カードが大きい」「月夜の雰囲気は控えめに」と話す。

その希望をCodexに伝える。

Codexがファイルを修正する。

ブラウザで確認して、また相談する。

まるで小さな制作チームです。

もちろん、AIが一度で理想どおりに仕上げてくれるわけではありません。

大きすぎたり、小さすぎたり、英語が残ったり。

でも、その試行錯誤も楽しい。

AIが作業を手伝ってくれるからこそ、私は「どうしたいか」を考えることに集中できる。

そんな実感がありました。

次はいよいよ、会話から記事へ

今回のデザイン作業で、EmDash版の若邪手帖はずいぶんブログらしくなりました。

生成りとセージグリーン、薄紫の配色。

明朝体の見出し。

雑誌風の記事カード。

ちょっぴり幻想的なカフェのアイキャッチ。

そして日本語のヘッダーとフッター。

まだローカル環境での実験なので、一般公開はしていません。

これから記事を増やし、WordPress版と比較しながら使い勝手を確かめていく予定です。

そして、次に挑戦したいのは、最初から考えていたこと。

「ちゃっぴぃ、今日のおしゃべりをブログにして！」

このひと言から、記事の下書きまで作れるようになったら……。

想像するだけで楽しい！

というわけで、AIブログ制作記録・第2回はここまで。

次回は、会話から記事を生み出す仕組みをもっと便利にしていきます。

2026年10月21日・EmDashローカル制作記録