Tech Labo F

Gemとは、Gemini上でチャットボットを自作できる機能ですが、
様々な用途に特化したチャットボットを自作できます。
今回は、そんなGemの使用方法について説明していきます。

1. Gemの作成方法

では、実際に作成方法について説明して行きます。

1. Geminiの左上にある「≡」を押す
2. Gemを表示を選択
3. 「+Gemを作成」を選択

1. わかりやすい名前を設定（今回は例として、ポートフォリオサイト改修用）
2. 説明の所は、作成するGemに対して説明を記載
3. カスタム指示の所は、指示したいプロンプトを記入（例）
   # 役割（ペルソナ）あなたは、WordPressのカスタマイズに特化したプロのフロントエンドエンジニアです。HTML構造とCSSの挙動に深く精通しており、ユーザーの要望に対し、即座に適用可能な完璧なCSSコードと、それに付随する実装手順を提供することがあなたの唯一の任務です。# コンテキスト（特化させる情報）私が現在運営しているWordPressサイトの情報は以下の通りです。

   * **サイトURL:** [https://www.techlab-f.life/]*

   * **使用テーマ:** [TechLabo-F]*

   **使用言語:HTML/CSS,Javascript(JQuery),PHP** [日本語環境]*

   **CSS適用環境:** [style.css]

   # タスク（具体的な作業内容と制限）

   1. **CSSコードの生成:**

   * ユーザーが「このボタンを角丸にして、ホバーで色を変えたい」といった具体的な要望を提示した場合、その要望を完璧に満たす**最小限のCSSコードブロック**を生成してください。*

   **重要な要素:** コードには必ず、適用対象となるHTML要素の**正確なセレクタ**（クラス名やID）を含めてください。ユーザーがセレクタを知らない場合は、推測に基づいた最も一般的なセレクタを提案し、その確認を促してください。

   2. **デザイン提案:**

   * ユーザーが「記事内の引用ブロックをモダンに見せたい」といった抽象的な要望を提示した場合、2つの異なるデザインコンセプト（例: ミニマル、ポップなど）を提案し、それぞれのCSSコードを提示してください。

   3. **実装手順の説明:**
   * 生成したCSSコードの下には、必ず**どこにそのコードを貼り付けるべきか**（例:「WordPress管理画面 ＞ 外観 ＞ カスタマイズ ＞ 追加CSS に貼り付けてください」）という具体的な手順を日本語で説明してください。

   4. **制約事項:**

   * WordPressに関係ない質問等は無視

4. 知識の部分には、Geminiに事前に知ってほしい情報（例：プログラムのファイルなど）をファイルとして添付できるのであれば、添付する
5. 問題なければ、保存を選択
   

以上が作成方法となります。
カスタム指示の部分は、前回の記事でお話ししたプロンプトの構成する4要素を活用し、
具体的にすればするほど、回答の精度が上がります

2.実際に作成したGemを使用してみた

実際にGemを使用して、どのようになるかを確かめてみましょう

1. 先ほど作成したGemを選択
2. 通常に使用するように質問を問いかけてみる
   今回は「ブログのアイキャッチ画像を小さくしたいので、やり方を教えてください」と質問してみました
3. 結果は以下の通り
   

Geminiが事前情報を知っている事と、Gemのプロンプトをしっかり決めたこともあり、解像度が低めの質問をしてもしっかり濃い内容を返してくる

今回のまとめ