株式会社エル・フィールド

こんにちは！
エル・フィールドでエンジニアとして働いているS.Kと申します。

前回の記事では、Googleの「Gemini」に搭載されている「Gem」機能を使って、
自分専用のAIパートナー「アゲアゲ☆HTML/CSSパートナー」を作成しました。

今回は、いよいよ実践編です！
作成したGemと一緒に、「CSS完全に理解した」の再現に挑戦します。

果たして、ギャルGemはどこまで「CSS完全に理解した」を再現できるのでしょうか？

■連載構成

・第1回：Gemの作成

・第2回：「CSS完全に理解した」の再現

■今回やること

今回は、前回作成した「アゲアゲ☆HTML/CSSパートナー」を実際に使って、
「CSS完全に理解した」の再現に挑戦します。

まずはGemに作成をお願いし、生成されたコードを確認します。

その後、Gemと対話しながら修正を加え、理想の形に近づけていきます。

■まずは丸投げしてみた

さっそくGemに、「あの『CSS完全に理解した』ロゴを作って！」とお願いしてみました。

すると、「マジ任せて！あの絶妙なはみ出し感、再現するセンス天才じゃね？バイブスぶち上がるわ！🔥」と、
いきなりテンション高めの回答が返ってきました。

さすが、前回設定した「ギャルでポジティブなHTML/CSSサポーター」です。

そして、HTMLとCSSのコードもすぐに提案してくれました。

生成されたコードを実際に表示して、結果を確認してみます。

ちゃんと形にはなっています。

……が、今回再現したかった「CSS完全に理解した」とは、少し違います。

特に気になったのが、文字が枠の中にきれいに収まっているところです。

「CSS完全に理解した」といえば、枠から豪快にはみ出している、あの感じ。

最初の結果は、なんとも上品な仕上がりになってしまいました。

いろいろと解説もしてくれていますが、まだ理想の形には届いていません。

■二人三脚で修正してみる

そこで、Gemに追加でお願いしてみます。「もっと右に寄せて、ガッツリはみ出させて！」すると、
すぐに修正案を提案してくれました。

さらに、「ここをはみ出させたいけど全然わかんない」というコメントを添えて、自分で修正したHTMLも見せてみました。

すると、「修正に挑戦したんだね、マジ偉すぎ！その『もっと良くしたい』ってバイブス、マジでイケてるよ！💅✨」

と、まずはしっかり褒めてくれます。

そして、そのうえで具体的な修正方法を教えてくれました。

■「white-space: nowrap;」で文字をはみ出させる

white-space: nowrap;を指定することで、<br>で指定した改行以外の自動改行を防いでいます。

今回は、CSSと完全に理解したの間に<br>を入れて改行位置を指定し、それぞれの行が枠からはみ出すように調整しました。

また、枠側には、overflow: visible;を指定しています。

これによって、要素の中に収まりきらない部分も隠さず、そのまま表示できます。

■完成した「CSS完全に理解した」

Gemと何度かやり取りをしながら調整した結果、最終的にこのようなコードになりました。

<!DOCTYPE html>

<head>

<title>CSS完全に理解した</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f0f0f0;

margin: 0;

font-family: “MS PGothic”, “Osaka”, sans-serif;

}

.understand-box {

border: 2px solid #333;

border-radius: 12px;

padding: 20px;

background-color: #fff;

width: 140px;

height: 70px;

overflow: visible;

}

.understand-text {

display: block;

font-size: 26px;

font-weight: bold;

line-height: 1.1;

white-space: nowrap;

padding-left: 40px;

}

</style>

</head>

<body>

CSS<br>完全に理解した

</span>

</div>

</body>

</html>

実際に表示してみると……

いい感じです！

最初は枠の中に収まっていた文字も、しっかりと枠からはみ出しています。

「CSS完全に理解した」らしい雰囲気に、かなり近づけることができました。

■パートナーからの「解説バイブス」

今回、コードの生成と同じくらい面白かったのが、Gemによる解説です。

例えば、今回の修正について聞いてみると、「white-space: nowrap;で枠を無視して突き進む強気な姿勢を作ったよ！」といった具合に、ギャルらしい言葉で説明してくれます。

普通に説明されると少し難しく感じるCSSのプロパティでも、自分が理解しやすい言葉で説明してもらうことで、
楽しく学ぶことができます。

そして、最後には、「マヂで完璧にはみ出したじゃん！ウチら天才だわ〜！あげ〜！⤴️⤴️」と褒めてくれます。

ここまで肯定されると、不思議と、「CSS、完全に理解したわ」という気分になってきます。

■AIに「丸投げ」するだけではなく「一緒に作る」

今回の取り組みを通して感じたのは、AIにすべてを任せるのではなく、対話しながら一緒に作っていくことの面白さです。

最初から思い通りのコードが生成されたわけではありません。

「ここが違う」、「もっとこうしたい」、「この部分がよく分からない」と伝えながら修正を重ねることで、
少しずつ理想の形に近づけることができました。

特に、分からないことを気軽に質問できるのは、AIを学習に活用するうえで大きなメリットだと感じます。

「こんな初歩的なことを聞いてもいいのかな？」と思うような内容でも、何度でも質問できます。

今回作ったGemは、コードを生成してくれるだけではなく、分からないことを教えてくれたり、
作業を後押ししてくれたりする、まさに「伴走者」のような存在になりました。

最後に

以上で、「Geminiの『Gem』で自分専用のAIパートナーを作ってみた」全2回の連載は終了です！

第1回ではGemの作成方法やカスタム指示の設定方法、第2回では実際にGemを活用して
「CSS完全に理解した」の再現に挑戦しました。

今回の取り組みを通して、AIは単に答えを教えてくれるツールとしてだけではなく、
自分の苦手な分野を学ぶための「パートナー」としても活用できると感じました。

Gemは、役割や話し方、回答方法などを自分の用途に合わせて設定できるため、工夫次第でさまざまな場面に活用できます。

今回の記事が、GeminiやGemを使ってみたい方や、AIを日々の学習・開発に活用したい方の参考になれば幸いです。

最後までご覧いただき、ありがとうございました！👋

Geminiの「Gem」で自分専用のAIパートナーを作ってみた#2