Google AI proを使って簡単にできること2選｜プロフィールイラストとチャット形式のHTMLの作成

　今月から、GoogleのAI有料プラン（Google AI pro）を使い始めました。

　正直なところ、まだ「何ができるのか」をすべて把握できているわけではありません。とりあえず今は、日々のちょっとした困りごとの相談や、仕事に関わる情報収集・整理に活用しています。

「果たしてこれがProの実力を最大限に発揮した使い方なのか？」と聞かれると答えに窮しますが、少しずつ触れながら、日常の中にAIを自然に取り入れていければいいなと思っています。

　さて、ここからが本題です！

　 AIといえば、やはり「画像生成」と「コード作成」が醍醐味。

　ということで、今回はGeminiに「プロフィールイラスト」と「HTMLコード」を作ってもらった体験記をお届けします。

ブログのプロフィールイラスト作成

　手始めに、このブログのプロフィールページに載せる自分の画像をGeminiに作ってもらうことにしました。

　元にしたのは、昨年、剱岳に登った際、登山口の石碑の前で撮った写真です。その写真をアップロードし、Geminiに次のように依頼しました。

Vサインをしているのは私です

この男性を、ぎりぎり自分とわからないような感じ（知ってる人ならわかるくらい）にデフォルメしたポートレートを作ってください

ブログに載せる自分のキャラにしようと思います。あまり似過ぎていても困るので絶妙なラインで

いいですね、
参考までに他のバージョンはありますか？

1. 水彩画風

柔らかなタッチと色彩で、優しい雰囲気のイラストです。

2. アメコミ風

力強い線とポップな色使いで、インパクトのあるイラストです。

3. 劇画風

陰影を強調し、よりリアルでシリアスな雰囲気のイラストです。

(省略)

いかがでしょうか。これらのバージョンも、ブログのキャラクターとしてお使いいただけるかと思います。お好みのスタイルをお選びください。

　会話を重ねる中で、自分に似ているようで似ていない、でもしっかり「自分らしさ」の雰囲気は出ているという、要望通りのイラストがスムーズに完成しました。

　このイラストを、実際のプロフィールページに使用しています。

（→プロフィールページはこちら）

　1回の生成にかかる時間はわずか10秒程度。回数制限も（今のところ）気にする必要がなく、納得いくまで試行錯誤できるのがProの強みですね。

チャット形式のHTMLコード作成

　この記事でも使っている「会話形式のフキダシ」。 世間一般のブログではおなじみのスタイルですが、実はこのブログで導入するのは今回が初めてです。

　理由は単純で、「作り方がわからなかったから」です（笑）。

　以前、解説記事を読んだこともあるのですが、CSSの構造が理解できず、途中で匙を投げてしまいました。

　しかし、今の私にはGeminiがついています！ 

　私が利用している「Blogger」の仕様に合わせた丁寧な解説をしてくれるはず、と期待して聞いてみました。

　

よくブログで出てくる会話のフキダシをHTMLで書く方法を教えてください

ブログでよく見かける「会話形式のフキダシ」、これがあると一気に読みやすくなりますよね！
コピペしてすぐに使えるコードを作成しました。
ご家族（お父さんと中学生の息子さん）がGoogle AI Proについて話しているようなイメージで構成しています。

  1. CSS部分（styleの中に貼り付けてください）
 フキダシの「しっぽ（三角の部分）」は、CSSの ::before というテクニックを使って作ります。
（コード省略）
 2. HTML部分（本文に貼り付けてください）
 src="◯◯" の部分には、保存したアイコン画像のURLを入れてくださいね。
（コード省略）
 カスタマイズのアドバイス
（詳細省略）

　こんなふうにたった一行の依頼から、そのままコピペして使えるコードに加えて詳細な解説まで答えてくれます。

　さらに驚いたのは、Blogger特有の画像の扱いについても詳しく教えてくれたことです。

作ってもらったチャット形式のHTMLでimg src="ai-icon.png"の部分に画像を入れるにはどうしたらいいですか？使用しているブログはbloggerです

Bloggerでチャット風のアイコンを表示させるには、**「ネット上のどこかに保存された画像のURL」**を src="..." の中に入れる必要があります。 Bloggerの編集画面で画像をアップロードし、その「リンク（画像アドレス）」を取得してコードに貼り付けるのが一番確実です。以下の手順で進めてみてください。
 ステップ1：Bloggerに画像をアップロードする
Bloggerの**「新しい投稿」**（または編集中の記事）を開きます。 ツールバーの「画像を挿入（画像アイコン）」から、例の似顔絵イラストをアップロードして記事内に貼り付けます。 貼り付けた画像をクリックし、サイズを「中」または「元のサイズ」にしておきます（あとでCSSで調整するので、ここでは見えていればOKです）。
 ステップ2：画像のURL（アドレス）をコピーする
編集画面を一度**「作成ビュー」**（通常の見た目）にします。 表示されている画像を右クリックします。 メニューから**「画像アドレスをコピー」**（または「リンクのアドレスをコピー」）を選択します。 コピーされるURLは https://blogger.googleusercontent.com/img/b/... のような長い文字列になります。
 ステップ3：HTMLコードを書き換える
 先ほどお伝えしたHTMLコードの img src="ai-icon.png" の部分を、今コピーしたURLに書き換えます。

　このように、手順をステップバイステップで教えてくれるおかげで、今までできなかったチャット形式の記事が、あっという間に完成しました。

　基本的に、この記事のチャット部分はGeminiが出してくれたコードをそのまま使っています。

まとめ

　使い始めたばかりのGoogle AI Pro（Gemini Advanced）ですが、期待以上の活躍です。

　特に画像の修正機能が優秀で、アイコンの服装を変えたり、パーカーの色を明るくしたり、「白髪を減らして」といった細かい注文（笑）にも柔軟に応えてくれました。

　驚いたのは、指示した箇所以外の絵の雰囲気が変わらないこと。これまでの画像生成AIで苦労していた「微調整」が劇的に楽になりました。

　次回は、このブログの「タイトルイラスト」をGeminiと作り上げた過程について詳しくお話ししようと思います。