Googleのサービスの一つである、Bloggerのオリジナルテーマを自作してみた。
最初は、今運営しているこのブログのためにWordPressのテーマを作ってみたいと考えていたのだが、仕組みが複雑すぎて諦めた。
自分は最低限のHTMLやCSSの読み書きならできるのだが、それ以上のことは難しい。
いずれは自分の手でオリジナルのテーマを作ってみたいと思っていたが、だからといってゼロからテーマを開発するのはさすがにハードルが高すぎる。
色々調べてみた結果、WordPressよりも構造がシンプルなBloggerテーマなら作れるかもしれないと考えた。
今回は、Antigravityを使って、テーマづくりに挑戦してみた。
今回作成したのは、読書ブログにぴったりな紙と本棚をモチーフにしたテーマだ。温かみのあるデザインを目指し、本を紹介するのに適したレイアウトを追求した。
作成に用意したものは、AIエージェントのAntigravityと確認用のPCやスマホだけだ。特別な開発環境を用意する必要もなく、ブラウザとAIだけで作業が進むのは本当にありがたい。
大まかな作業手順は以下の5つのステップに分けて進めた。
まずは、どのようなブログにしたいのか、方向性とコンセプトを明確にした。
以前から作りたいと考えていた、本が好きな人のための読書紹介ブログを構築することに決めた。
全体のコンセプトは、紙とペンをイメージした温かみのあるシンプルなデザイン。機能面では、スマホ対応や本を探すための検索窓、長文でも迷わない目次機能が欲しい。
フォントには、紙と本の温度感に合いそうな「Zen Maru Gothic」というフォントを採用することにした。
他にも、記事一覧は本棚のように縦長のカードを並べたデザインにして、見出しはマーカーペンで引いたような風合いにしたい、といった要望をコンセプト案として固めていった。
作りたいテーマのイメージが固まったら、AIエージェントへ渡す指示書を作成した。情報が正しく伝わるよう、「Bloggerテーマ.md」というマークダウンファイルに内容をまとめた。
AIに正しく意図を伝えるためには、箇条書きなどを活用して構造化するのが効果的と言われている。
この段階で、指定していなかった見出しの具体的な装飾イメージなども詳細に追加した。
準備した指示書をもとに、Antigravityの対話型インタビュー機能である「/grill-me」を起動した。
Bloggerのテーマを作成したい旨を伝え、AIとキャッチボールをしながら計画を整理する。
議論を重ねた結果、制作の道のりは以下の4つの工程にまとまった。
- Blogger独自のタグ仕様や変数の仕組みを調査する
- 確認用のデモページと、Bloggerテーマ用のHTMLファイルを並行して作成する
- デモ画面での微調整が完了した後に、実際のBloggerへファイルをアップロードする
- 本番環境での動作確認をして完成
次に何をやるかもAntigravityに説明してもらうことで、テーマ作成で次に何をやればいいのか自分とAntigravityで食い違いが起きないようにした。
「Bloggerテーマ.md」に沿って、Antigravityが最初のテーマファイルとデモページを作成した。
ここからは、デモページを目で確認しながら、機能やデザインの微調整を繰り返していく。
実際にデモページへ長文タイトルを流し込んでみたところ、見出しのマーカー装飾が途中で不自然に途切れ、盛大にレイアウトが崩れているのを発見した。
そこで、長文にも対応できるよう、折り返しがある場合の装飾も定義してもらうことにした。
さらに、箇条書きのリストも装飾が付けられていなかった。この原因は自分のうっかりミスで、装飾の指定を「Bloggerテーマ.md」に書いていなかったためだ。
リストにも装飾をすることにし、Antigravityにブログの雰囲気に合った装飾を定義してもらった。
デモページを見ていると欲しい機能が出てきたので、それを追加することにした。
具体的には、サイトの構造がすぐに分かるパンくずリストやヘッダーの検索窓、おすすめ記事・関連記事のブロックを順次追加した。
追加した機能もデモページで機能しているか確認し、きちんと動くか動作確認をした。
自分の伝え方がうまくないからかもしれないが、一度では指摘した不具合が直らないこともあり、何度かAntigravityとやり取りして機能の追加を行った。
デモページでは、デザインと機能の調整だけでなくUIの調整も行った。コンセプトを伝える「Bloggerテーマ.md」だけでは、期待する挙動を説明できなかったようで、調整を重ねることになった。
記事カード一覧の操作性、アニメーション、デスクトップとモバイルのデザインの調整など、自分が思い描いていた通りの挙動になるように、変更点をまとめてAntigravityに変更してもらった。
スマホでの見栄えを考慮し、記事一覧のカラム数を1カラムから2カラムへ急遽変更するなどの調整を経て、無事にすべての修正を完了した。
デモページでの確認を終え、いよいよ作成したテーマを本番のBlogger環境へアップロードした。
デモページでは問題なく動いていたのだが、実際の環境に適用すると、いくつかの箇所で表示の崩れが発生してしまったので再び調整することになった。
例えば、ヘッダーの色が透過されてしまったり、ラベルの表示が二重になってしまったり、サイドメニューが表示されなかったり。
調べてみると、デモでは動いていた機能がBloggerでは動かないのは、Blogger独自のHTMLタグ仕様とCSSの読み込み順序に原因があるそう。
Antigravityに不具合・エラーの状況をそのまま伝えて、原因を特定して修正コードを作成してもらった。
修正されたHTMLを再びBloggerにアップロードし、エラーが修正されているか確認した後、テーマの最終調整をすることにした。
テストは動作確認用にテーマが対応している装飾すべてをHTMLでAntigravityに出力してもらい、期待通りに表示されているか目で確認する形で行った。
この段階では最終調整だったので、ほとんど修正点はなかったが、ブロックの余白の追加といった細かい調整はまだあった。
デスクトップだけでなく、スマートフォンでも最終確認を行い、表示の崩れがないかを確認して、無事にすべての調整を完了した。
手探りの作業だったが、最終的にはなんとか納得のいくBloggerテーマを完成させることができた。
試行錯誤も含めた全体の制作時間は、およそ3時間程度。
特にデモページを使った微調整に一番時間がかかったが、そのぶん思っていた通りのクオリティに仕上げることができた。
初めてのテーマ開発ながらも作りたいと考えていたテーマを作ることができたのは、AIエージェントのサポートのおかげだ。
今回の挑戦を通じて、自分好みのデザインをコードに落とし込む楽しさを実感した。
またBloggerのテーマを作ってみたいし、いずれはWordPressのテーマも自作にも挑戦してみたい。
今回完成した本棚テーマは、自分自身でしばらく運用して不具合が出ないことを確認したうえで、このブログで無料配布する予定だ。
使い方やカスタマイズ方法については配布ページで詳しく説明するつもりです。
