DAILY CADENCE & TECH PULSE | 都内通勤ローディ・DIY実験マガジン
平均ケイデンス: 88 rpm 本日通勤: 18.4 km 年走行: 4,200 km

Google Stitch × GeminiでBloggerを一新!1時間の試行錯誤が10分で「きちんとしたデザイン」に化けた話

12:25 | #AI


ブログ運営・AI

Bloggerへの引っ越しを進めていて、記事やデータの移行作業がようやく一段落しました。

「よし、次はブログのデザインを整えよう」と思い、まずはGeminiと壁打ちしながらテンプレートのCSSやレイアウトをちまちま調整。対話しながら1時間ほどかけて「まあ、及第点かな」という形には仕上がったものの、どこか素人っぽさが抜けきらない状態でした。

そんなときに見つけたのが、Googleのデザインツール「Google Stitch」でした。

テーマカラーとURLを渡しただけで、10分でプロ級のデザインが出た

お試し感覚で触ってみて衝撃を受けました。

やったことといえば、ブログのテーマカラーと自分のブログのURLをStitchに与えたくらいです。それだけで、Geminiとあーだこーだ言いながら1時間かけて作ったデザインをはるかに超えるクオリティのものが、わずか10分程度で出力されました。

「え、これすごいいいじゃん……!」

自分で組んでいたときは「とりあえず読める・崩れていない」という及第点止まりだったものが、余白の使い方や配色バランス、カードの質感まで整った「きちんとしたWebデザイン」へと一気に引き上げられました。

デザインのベースをStitchでサクッと出力し、Bloggerのテーマに落とし込む部分はGeminiに任せる。この連携のおかげで、最小限の手数で納得のいくデザインを作ることができました。

「デザイン.md」をハブにして、AIとの連携を加速させる

このStitchで作ったデザインシステムを デザイン.md(Markdown)として書き出し、Geminiにコンテキストとして読み込ませておく運用を始めました。これが想像以上に便利です。

  • ブログと似たトーンの画像生成: ブログのカラーコードや雰囲気に合わせたアイキャッチ画像を、Geminiからスムーズに出力できる
  • 記事装飾の統一: デザインの持つトーン&マナーを崩さずに、見出しやカードの装飾を統一して指示できる

一度デザインの「型」を言語化して渡しておけば、記事や画像を作るたびに雰囲気を合わせてもらえます。今後ストックが溜まっていけば、さらに運用の手数を減らせそうです。

デザインのこだわりを手放して、本当にやりたいことへ全振りする

デザインをあれこれ考える作業自体は、やっていて面白いものです。けれど、ゼロから自分で頭を捻ってCSSをこねくり回しても、正直なところ今のAIが出してくるクオリティ以上のものを作るのは難しいと感じました。

それなら、デザインや細かな設定といった周辺作業にいつまでも時間を溶かす必要はありません。そこはStitchのようなツールに割り切って任せてしまえばいい。たまの微調整で十分です。

周辺作業を手放せたことで浮いた時間は、すべて自分が本当に楽しいと思える「自転車」「写真・動画」、そしてそれらを加速させる「AI」のアウトプットに全振りできるようになりました。

自分が「いいな」と思えるデザインを最短距離で具現化して、コンテンツ作りに集中できる。この環境が整ったことで、趣味のブログも無理なく、ずっと続けやすくなったのが一番の収穫です。

READER BOOST

この記事はお役に立ちましたか?

読者のリアクションが次回の検証DIY記事の燃料になります!