BingAIを使用してUIデザイナー用語Wikiを作ってみた手順とプロンプト

以前から社内UIデザイナー向け用語のwikiを作りたいと思っていたので、生成するテキストの精度を上げるPromptを用いて、BingAIで足がかりを用意してみました。
ChatGPTではなくBingAIを使用した理由は、ソースとなる参照サイトの確認が楽だからに他なりません。ChartGPT4で行うと、ソースとなるリンク先が実在しないものとなってしまうので、このような参照サイトが必要な生成を行う場合はBingAIで行うのが現在は良いです。

リストの作成

まずはリストを作るためのPromptを色々試します。
生成物のクオリティを上げるために、Few-shot学習（少数の例文を書く）、Chain-of-Thought（段階を踏んだ推論を行う）を利用しています。
 #条件にChain-of-Thought、#例にFew-shot学習を使用

今回利用してみたPrompt1

 #質問
UIデザイナー向けの用語集を作成します。テーブル形式でリストを作成してください。
項目は
名称 | 説明文 | タグ | 重要度
とします。

#条件
- まず、あいうえお（アイウエオ）の5音から始まる言葉を羅列する。
- 初歩的なUIギミックの名称はリストから削除する。（アコーディオン・フロートなど）
- 次に、その単語の簡単な説明文を書く。
- 次に、UIデザイナーにとってその言葉の重要度の高さを5段階で評価する。
- 次に、以下のタグから適しているものを選択して表示してください（複数可）。
基本概念,デザイン原則,ユーザーエクスペリエンス,インタラクション,デザインプロセス,カラー,アクセシビリティ,ユーザーリサーチ,情報アーキテクチャ,デバイス,ユーザーテスト,開発,マーケティング

#例
- ヒューリスティック評価 | UI/UXの専門家がその経験則（ヒューリスティック）にもとづいて、Webサイトやサービス、アプリなどを評価する手法のこと
- UCD（User Centered Design） | ユーザーのニーズや課題に基づいてシステムやサービスを設計するアプローチのこと

BingAIで生成されたリストの一部

悪くない感じがします。言葉のチョイスはガチャなので、何回も試すと結構良い言葉が貯まってきますし、同時に不要なものの添削や内容の調整をしていきます。
これで最初はア行のみ試しましたが、カ行サ行とどんどん実施していくとベースが貯まっていきます。

詳細情報の作成

続いて、用語の詳細を作るためのPromptを色々試し、以下のPromptを作りました。
生成物のクオリティを上げるために、Chain-of-Thoughtを利用しています。段階的に考えてもらうと言うより体裁を全体で整えたいという意味が近いですが…。また、文章内にリンクを埋め込む手法も実現できます。

今回利用してみたPrompt2

#質問
UIデザイナー向けの用語集を作成します。
次の言葉について詳細の記事を書きます。
- ◯◯◯◯◯◯（詳細を書きたい用語の名称）
このタイトルを見出しh2として、本文を通常のテキストとして書き出してください。

#条件
- まず、その言葉の意味を最初に書いてください。
- 次に、その単語はUIデザイナーにとって、どのようなシチュエーションで使用されるかを書いてください。ただし、"UIデザイナーにとって"という言葉は使用しないでください。
- 最後に、参考にすべき実在するサイトのページのタイトル、そのページのURLのアドレスを記載してください。
- 参考1.[ページのタイトル](URL)　この形式で書き出してください。

BingAIで「アフォーダンス」について詳細を生成した結果

アフォーダンス

アフォーダンスとは、環境が動物に対して与える「意味」のことである。アメリカの知覚心理学者ジェームズ・J・ギブソンによる造語であり、生態光学、生態心理学の基底的概念である。アフォーダンスは物に備わる性質であると同時に、物と動物との関係の仕方、つまり物に触れる動物の行動によってはじめてあらわれてくる性質でもある。

アフォーダンスは、物やシステムが持つ機能や使い方を示唆する特徴のことである。例えば、ドアノブは回すという動作を促す形状になっている。これは、ドアノブが「回す」という行為を人間にアフォード（提供）していることを意味する。アフォーダンスは行為の選択肢そのものであるため、そのドアノブが回せるのだと示すインターフェイスを持つか否か、ひいては人間自身がそのドアノブを回せることが可能だと認識しているか否かは全く関係がない。

アフォーダンスは、デザインの分野においても重要な概念である。デザインとは、その使い方をアフォードするものでなければならないということである。たとえば、ボタンは押すことを、スライダーは動かすことを、テキストボックスは入力することをアフォードしている。これらは知覚のアフォーダンスと呼ばれ、本来の意味とは異なる解釈がされている。知覚のアフォーダンスは、人に自然な行動を促すためのヒントや効果を指す。

参考1.アフォーダンス - Wikipedia

参考2.アフォーダンス(あふぉーだんす)とは？ 意味や使い方 - コトバンク

参考3.アフォーダンスとは？意味・効果・活用例・シグニファイアの …

概ね問題ない形で生成できていると思います。マークダウンによる文章埋め込みURLの記述も問題ありません。
URLについては、たまにぜんぜん違うサイトのURLが貼られる時があるので要確認です。

課題

• BingAIの文章の欠点としてコピペした文章に参照番号（文末の1とか2とか）が入ってしまうのは欠点で、この参照を貼り付けない方法はないか確認しても手段としてはないということでした。この部分は手作業で削除してしまっています。

• 生成したリストはBingAIから直接CSVには書き出せませんでしたが、コピーしたテキストを.txtとして保存し、Googleスプレッドシートなどを経由してCSVに変換可能、用語集を掲載するページ用のデータにできそうです。

この調子でリストを作成し、詳細を記載すれば実用に耐えられるベースは比較的容易にできあがりそうです。
とは言え案外、想定していたテキストを生成してくれるPromptを作るのはなかなか時間がかかったので、大量の言葉を生成して元を取る！
もちろんデザイン以外の分野にもテキストを調整すればできるので、用語リストなどを作る際のテンプレートに使用してみると良いかもしれません。

Brewusでは他のデザイナーもAIの勉強中です！