Tadashi Nakai's Blog: BloggerのデザインをAIを使って1時間で改善した記録――noteに乗り換える前に試してほしいこと

2026年3月31日火曜日

ある日、試しにはてなブログへ記事を投稿し、そのURLをXに貼ってみた。

すると、投稿の中にサムネイル画像がきれいに展開された。当たり前のことのようだが、Bloggerではそれが出ない。ずっとそのままにしてきた。並べて見ると、差は歴然だった。

「やっぱりBloggerは古いのか」と思いかけたその瞬間、別の考えが頭をよぎった。

これって、HTMLの設定を変えればなんとかなるんじゃないか。

「自分ではHTMLを触る気がなかった」人間が動いた理由

1990年代の学生時代、HTMLでホームページを作っていた。だからHTMLが何かは分かっている。ただ、こったデザインのページを作るには相当な手間がかかることも身に染みて知っていた。以来、「デザイン周りは自分でやらない」が暗黙のルールになっていた。

その方針を変えたのは、最近のバイブコーディング体験だった。AIにコードを任せてみると、自分では到底書けないものがあっという間に出てくる。「コーディングはAIに任せればいい」という実感が、HTMLへの心理的なハードルも一緒に下げていた。

だからBloggerのテーマ改造にも、やる気になれた。

作業の流れは単純だ。

AIに現状のHTMLファイルを渡し、「こう変えてほしい」と伝える。出力されたファイルをBloggerに貼り付け、ブラウザで表示を確認する。気になる点があればまたAIに伝える。それだけだ。

指示の出し方はこんな具合だった。

「フォントや行間をnoteのように読みやすくしてほしい」
「画像のボーダーと影を消してフラットな見た目にしてほしい」
「Xにシェアしたときにアイキャッチ画像が出るようにしてほしい」

HTMLの知識は要らない。どんな見た目にしたいかを言葉で伝えるだけでいい。自分でコードを書くことは一行もなかった。

結果として、HTMLファイルの改良版を保存した回数は6回。かかった時間は1時間に満たなかった（図1）。

順調に見えたが、一箇所だけ時間を取られた場所がある。モバイル表示だ。

スマートフォンから見ると、見出しのサイズが逆転していた。h2よりh3のほうが大きく表示されてしまう。リンクの下線も出ない。PCの表示とまるで違う。

AIと一緒にCSSを修正し、!importantまで付けて上書きを試みた。それでも直らない。

原因は、Bloggerが独自のモバイルテンプレートを別途配信していたことだった。URLに?m=1が付いた瞬間、書き換えたCSSが完全に無視される仕組みになっていたのだ。

解決策は拍子抜けするほどシンプルだった。Bloggerの管理画面で「モバイルテーマ→デスクトップを表示」に切り替えるだけ。設定1つで、すべて解決した。

ただ、そこに辿り着くまでに遠回りをした。AIは「モバイル設定のギアアイコンを押してください」と案内してくれたのだが、そのギアアイコンがBloggerのUIから消えていた。AIも私も、設定画面の現状を正確には把握できていなかった。

後から思えば、スクリーンショットを貼って「この画面です、ギアはありません」と伝えていれば、もっと早く解決できただろう。面倒がらずに画面を共有すること。AIとの作業で学んだ、地味だが確実な教訓だ。

noteやはてなブログに乗り換えようとしている理由が「デザインの古さ」だけなら、急がなくていいかもしれない。

AIに任せれば、フォント、行間、文字色、画像スタイル、Xカードの設定――これだけのことが1時間で片付く。Bloggerに積み上げてきた記事の蓄積も、そのまま生きる。

もちろん、noteのコミュニティ機能や記事の販売が目的なら話は別だ。プラットフォームの乗り換えには、デザイン以外の理由もある。

ただ、「なんとなく古く見えるから」という理由だけで移行を考えているなら、まず1時間だけ試してみてほしい。HTMLを自分で書く必要はない。AIに「noteみたいな見た目にして」と伝えるだけでいい。

思っていたより、ずっと手軽だった。

本記事はAIとの対話のみで構成されています。筆者は本文を1行も執筆していません。

蛇足を一つ。本文中に「私たちが書き換えたCSS」という表現がある。この「私たち」はAIと筆者を指している。コードを書いたのはAIで、判断したのは筆者だ。この分業を「私たち」という一語に収めることに、今は違和感がない。それがむしろ、何かを示しているような気もしている。