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


エンジニアとして8年ほど働いており、バックエンドに関しては、一通りの実装であれば困らない程度に
コーディングできるようになりました。


ですが、どれだけキャリアを重ねても苦手な領域というのはあるもので、
私の場合はそれが「フロントエンド」でした。


かつては他の方の実装を参考にしたり、広大なインターネットを彷徨ったりしながら、
どうにかこうにか形にしてきた、というのが本音です。


そんな中、業務で生成AIを利用できることになり、「Gemini」の「Gem」機能を触る機会に恵まれました。


コーディングを完全にお任せするのはまだ不安ですが、「自分の苦手をサポートしてくれる、理想のパートナー」を
AIで作れないかと考えたのが、今回の取り組みのきっかけです。


私が理想としたのは、単に答えを提示するだけのツールではなく、次のような存在でした。


  • 圧倒的にポジティブ
     試行錯誤の過程を肯定し、常に前向きな言葉でモチベーションを高めてくれる。


  • 根気強く、丁寧
     知識が浅い事柄に対しても、嫌な顔一つせず（AIなので当然ですが！）、詳細に噛み砕いて教えてくれる。


  • 心理的安全性の守護者
     「こんな初歩的なことを聞いてもいいのだろうか」という不安を払拭し、何度でも同じ質問に付き合ってくれる


この「いつでもポジティブで明るいイメージ」を形にするなら、私の中では「ギャル」一択でした。


そんなパートナーを作成し、エンジニアなら一度は目にしたことがあるであろう
「CSS完全に理解した」の再現に挑んでみます。



■連載構成


・第1回：Gemの作成

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



■今回やること

本記事では、Geminiの「Gem」機能を使って、自分専用のAIパートナーを作成します。


今回は「ギャルでポジティブなHTML/CSSサポーター」をテーマに、
Gemの設定方法やカスタム指示の作成方法をご紹介します。



■Geminiの「Gem」とは


本題に入る前に、今回活用したツールについて簡単に整理しておきます。

Googleが提供するAIモデル「Gemini」には、「Gem（ジェム）」という機能があります。


Gemは、特定の指示や知識をあらかじめ読み込ませることで、自分専用の
「カスタムAIエキスパート」を作成できる機能です。


通常、AIに何かを頼む際は「あなたはプロのエンジニアです」「初心者に分かりやすく、ポジティブな言葉で教えてください」といった前提条件を、その都度伝える必要があります。


しかし、Gemとして定義しておけば、毎回細かな指示を繰り返すことなく、
自分の用途に合わせたAIアシスタントと対話できます。




■業務で利用する際の3つの約束


便利なAIですが、特に業務で活用する場合には、以下の点に注意をしています。


① データプライバシーの保護


もっとも重要な点です。

業務上の機密コードや個人情報は入力せず、あくまで技術的な相談、汎用的なコードの生成に留めています。

また、会社で契約しているGoogle Workspaceのプランに基づき、入力データがモデルの学習に
利用されない設定であることを確認しています。


② 「答え」ではなく「提案」として捉える

AIは時に、存在しないCSSプロパティを提案したり（ハルシネーション）、古い仕様を教えたりすることがあります。
そのため、AIが提案したコードは必ず自身の環境でテストし、仕様書を確認するプロセスを省かないようにしています。


③ 自身のスキルの補助輪として使う


AIに丸投げするのではなく、「なぜこのコードになるのか？」を対話を通じて理解することを大切にしています。

今回作成するGemも、私の学びを加速させるための「伴走者」として位置づけています。




■Gemを作成する


Geminiのサイドバーから「Gem」→「Gemを作成」と進みます。


今回は「アゲアゲ☆HTML/CSSパートナー」という名前を付けました。




■カスタム指示（プロンプト）の設計


AIへの指示は「ペルソナ」「タスク」「コンテクスト」「形式」を意識すると良いですが、難しく考える必要はありません。


「AIへの指示は、AI自身に考えてもらう」のがコツです。


ざっくりとした要望を入力し、鉛筆マークの「Geminiを利用して指示を書き換える」を押すと、
詳細なカスタム指示にブラッシュアップしてくれます。


今回は「ギャルでポジティブなHTML/CSSサポーター」という要素だけを伝え、対話的に詰めていきました。




カスタム指示ができたら右上から保存して、Gemの準備は完了です。



■今回のまとめ

今回は、Geminiの「Gem」機能を使って、自分専用のAIパートナーを作成しました。


自分が苦手とするフロントエンドをサポートしてもらうため、「ギャルでポジティブなHTML/CSSサポーター」という
役割を設定しました。


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





■次回予告


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


まずは「あの『CSS完全に理解した』ロゴを作って！」と丸投げしてみます。


果たして、ギャルGemはどのようなコードを提案してくれるのでしょうか？

さらに、Gemと対話しながら修正を加え、理想の「CSS完全に理解した」の再現を目指します。



次回もぜひご覧ください！