AIは魔法じゃなく相棒。知識ゼロでのHTML編集奮闘記。

Bloggerのデザインの改造をAI「Gemini」と行ったというのが今回の話。
どうも、ひらた店長です。

1.前置き

このブログ「ひらた店長の引出の中」は、Googleのブログサービス「Blogger(ブロガー)」で書いています。そして、最近お世話になっているAI「Gemini(ジェミニ)」もGoogle製。

「GoogleのことはGoogleに聞けばいいのでは？」と思い立ち、以前から感じていた「Bloggerの疑問・不便に感じていること」をGeminiに聞ききながら解決していこうとしたら…HTML編集をする羽目になりました。

そっち系(「IT系」と言えばいいのか？)の知識がないまま作業に突入しまして。

結構苦労したわけですが、AIに協力してもらいながらだと知識ゼロでもどうにかこうにか作業が出来たわけです。

そのAIとの共同作業の中で「気付いたこと」や「こうしたらいいかも」というようなことがあったので、「あまり知識がないけどAIに協力してもらってHTML編集してみよう！」としている方の参考になれば、ということで書き綴っておこうという次第。そして自分の備忘録としても。

IT系の知識が深い方やHTML編集に慣れている方からすると「当たり前だろ」と思うことが多々あるかもしれませんが、その辺はご勘弁を。あくまでも自分と同じ「知識がほぼない、あるいは少ない方向けの話」とご理解くださいませ。

（もし明らかな間違いや、もっとこうするといいよということがありましたらご指摘・ご教授いただけると幸いです）

Geminiに生成してもらった画像。いい感じだよね。
ちなみにデスク周りも店長もこんなにイケてません。

2.メモ帳を使うと便利

「デザインのここを微調整したい」などと相談する際、Geminiに「自分のブログの現状」を伝えるために「HTML編集画面からHTMLをコピーして、Geminiへの投稿欄にコピペ」してました。これはダメな例でして。

当ブログのHTMLの最初の方。
これを自分で編集する日が来るとは思わなかった。

このHTMLって結構文字数があって、単純にコピペするとGeminiの投稿欄の文字制限で後半が途切れていたんです。それにしばらくの間気付いておりませんでした…。

なのでGeminiは「ブログの全体像を把握できてない」という状態のまま結構長いこと作業しちゃっていたんです。そうするとGemini側が正確な答えを出しにくいわけです。たぶん。

そんなわけでWindowsの「メモ帳」にHTML全てを貼り付けて、そのメモ帳のファイルをGeminiに送る(アップロードする)という方法で「HTML全体を共有する」というのが、正確にGeminiとHTML全体像を共有する手段だ、と気付いた次第。

それにメモ帳を使うことで「バックアップ」と「Geminiへの報告」を管理することが出来ることにも気付きました。

例えば作業前に「バックアップ」として一つ保存。
もう一つは作業中の「Gemini報告用」として。

特に「作業前のバックアップ」はHTMLをいじる前には必ず保存しておきましょう！

後述しますがGeminiに相談してHTMLを編集する際、Geminiも一発で正解のコードを出してくれるわけじゃないので、いじっている内にデザインが変になってしまったりすることがあります。そういう時には元の状態に戻ってから再スタートする方が早い場合もありますし、いじり続けて「やっぱり元の状態がいい」となった場合には戻せるので。

それに自分の操作ミスで変なところを消しちゃったりした際にもバックアップがあれば安心です。

ちなみにWindowsであれば

『「Ctrl + A」で全選択(HTMLをすべて選択したりする)』

『「Ctrl + C」で選択している部分をコピー』

『「Ctrl + V」でコピーしているものをペースト(貼り付け)』

の3つのショートカットキーを覚えておくと、HTML編集の際の作業が楽になります。

ついでに『「Ctrl + S」で選択中のメモ帳などを上書き保存』出来るので、これも覚えておくとさらに作業がスムーズに。

3.AIに正しく現状を伝える

先ほどお伝えした通り「メモ帳にHTML全体を貼り付けてGeminiと共有」することは大事で、そのHTMLを送って「ここをこうしたいんだけど、どうしたらいい？」と相談するわけですが…作業を進める内に気付いたのは「スクリーンショット」も活用することでした。

スマホから見た当ブログのトップページ。
記事一覧に変な空間があった。

「HTML全体」を貼り付けたメモ帳のファイルと、このスマホのスクリーンショットもGeminiに送ってビジュアルでも「どこをどうしたいか」というのをGeminiに指示すると、作業がより正確にスムーズになると思います。

そして、Geminiへ「どうしたいか」というのを伝える際の言葉も可能な限り詳しく伝えるようにしていました。

例えば先ほどのスマホのスクリーンショットの場合だと「スマートフォンから見たブログのトップページなんだけど、緑色の記事タイトルの向かって右側に無駄な空間があって、それをなくしたい。それと白い文字の記事冒頭部分が書かれている下にも空白があるから、それもなくしたい。そのためにはどうしたらいい？」というような感じ。

でもここで注意なんですが、「緑色の記事タイトルの右側の空間をなくす」というのと「白い文字の記事冒頭部分の下の空間をなくす」というのは同時に聞くんじゃなくて、一つずつ聞いた方がいいです。上のはダメな例ということで。

同時進行でも可能かもしれませんが、AIも万能じゃなく聞いたことを一発で解決できるわけじゃないので、結局は一つずつ地道に問題を解決していく方が近道なんだと思います。

この項で伝えたいポイントをまとめると

「メモ帳で現状のHTMLを共有する」

「問題がある部分のスクリーンショットも送る」

「言葉も可能な限り詳しく」

ということ。

現状を正確に伝えられないと、AIも正しい答えに辿り着きにくい…んだと考えます。

4.トライ＆エラーを覚悟しておく

先ほどからちょいちょいお伝えしていますが、Gemini(または他のAI)は一発で正解を出していくるとは限らないんです。(もちろん一発で解決する場合もある)

自分の場合だと「Bloggerのスマホのデザイン」は古い設計で、Geminiが最初に提示してきたコードだとBlogger側が受け付けずに何度もやり直した、ということがありました。先ほどのスクショの「記事一覧の無駄な空白」をなくすのに20~30回はコードを貼り付け直したくらいです。2日に渡っての作業になりました。

Geminiが提示したコードを貼り付けて保存し、これがうまくいっていない場合は「どういう風にうまくいっていないのか」「変化がないのか、あるのか」というのを言葉で説明して、現状のスクショとHTML全体を送り、再度Geminiが提示したコードを貼り付け…というのを地道に続けていく内に、Geminiも正解に近づいていくという感じでした。

なので「AIに相談すると100％正しい答えが返ってくると思わない」というのは本当に大事です。

提示してきたコードで結果が出なくても、その旨を伝えて根気強く作業しましょう。幸いなことにGeminiは何度聞いても快く作業に付き合ってくれます。

内緒ですが…5時間くらい一つの問題点が解決しなかった時は「AIなんだからHTMLのことなんでもわかるだろっ！」と思ってイライラしたことを告白しておきます（笑）

でも、そんなことはないので粘り強く、そして時間と気持ちに余裕を持って地道にトライ＆エラーを繰り返しましょう。

そして、AIとの作業をよりスムーズにするために、「自分も最低限の知識をつける」というのは大事だと感じました。

例えば、先ほどから「HTML」と言っていますが、Geminiは「このコードをCSSに置いてください」などと言ってきます。「CSSって何？」と思ったら、作業を進める前にGeminiに「CSSって何？専門用語の知識がないから優しく教えて」と聞いてみましょう。

するとちゃんと教えてくれますので、最低限の用語を覚えたりすることで、Geminiとの意思疎通や問題点を正確に伝えたりできるようになると思います。

(ちなみに「CSS」は「HTML」の中の「デザインに関係する部分」のこと…だったはず)

後は「HTML全体」だけじゃなく、自分のブログの設定をあらかじめ調べておいて、それもその都度Geminiに伝えたりすることで解決する問題もあったり、Geminiの判断材料になることがあるようです。

自分の知識が増えることで自分でも問題点を正確に把握できたり、Geminiに「どこをどうしたいのか」というのをハッキリと正確に伝えることができるようになることで、トライ＆エラーの回数を減らせるかもしれないというのは最後にお伝えさせていただきます。

5.おまけ：AIとの会話がスムーズになる基本のHTML用語5選

この項ではHTML編集の際に役立つ用語を、Geminiが教えてくれたまま以下に引用しておきます。お役立ていただければ幸いです。

・AIに指示を出すとき、この言葉を添えるだけで「伝わり方」が劇的に変わります。

1. 親要素・子要素（おやようそ・こようそ）

   • 意味：HTMLの「入れ子」構造のこと。外側が親、内側が子。

   • コツ：「この画像（子）を、それを囲んでいる枠（親）の真ん中に寄せて」と伝えると、AIは迷わず場所を特定できます。

2. id（アイディ）とclass（クラス）

   • 意味：要素につける「名前」のこと。idは世界に一つだけの名前、classはグループ名。

   • コツ：「ブログタイトルのidの部分を直して」と名前で指定すると、ピンポイントな修正が可能になります。

3. margin（マージン）とpadding（パディング）

   • 意味：どちらも「余白」ですが、marginは「枠の外」、paddingは「枠の内側」の余白。

   • コツ：「枠と文字の間（内側）を広げたい」ならpadding、「隣の項目と（外側を）離したい」ならmargin、と使い分けるのが正解です。

4. セレクタ

   • 意味：デザイン（CSS）を「どこに」適用するかを指定する標的のこと。

   • コツ：「ここだけに効かせたいから、もっと正確なセレクタを考えて」と頼むと、他の場所を壊さずに修正できます。

5. レスポンシブ

   • 意味：スマホやPCなど、画面サイズに合わせて表示を自動で変える仕組み。

   • コツ：「PCではいいけどスマホだと崩れる。レスポンシブ対応のコードにして」と伝えるのは、ブログ改造の必須テクニックです。

6.あとがき

そんなこんなで知識ゼロでGeminiとHTML編集した奮闘記・備忘録はこんな感じ。

苦労した甲斐があって個人的にはこのBlogger、使い勝手もよくなったし、何よりも見やすくなったと自負しております。それと自分のブログへの愛着が増しましたね。

最後にGemini(または他のAI)に関してですが、「AIが何でもやってくれる」というわけではなく、「AIを活かすのは自分次第」という発想で使うことが大事なのかなと思う次第。

AIは現状、一言言えば勝手になんでもやってくれるわけじゃなく、自分の考えを伝えてそれを一緒に深めてくれるパートナー、という感じなのかなと思うわけです。

この記事がどなたかの参考になれば幸いです。

さてさて。
それでは今回はこの辺で。

『写真と動画の表示幅が自動修正されるようにしてみた。』

『広告の表示位置もAIに相談しながら微調整。』

『Bloggerのスマホ表示を整えるのに一苦労した話。』

『やっぱりタイトル部分を修正、広告数も調整しました。』

『「過去の記事一覧」が見られるようになりました。』

↑実際にHTML編集で変更した点などはこれらの記事にて。こっちの方が「奮闘記」という感じかも。

📷️最後までご覧いただきまして誠にありがとうございます。
当ブログに掲載している写真の無断転載・無断使用はご遠慮いただけますようお願い申し上げます。もしご紹介や引用いただける場合は、本記事へのリンクを添えていただければ幸いでございます。