【ChatGPTを業務活用】企画書～デザイン案までやってみました。

某会社DX推進部に勤務しています。 ＤＸ推進部となって「どこを」「どのように」すると、消費者さま、取引先さま、社内のスタッフに喜ばれるＤＸになるのかを考えています。 業務幅を広げるため、LINE BotやAIツールなどにチャレンジ中です。ChatGPTのについても業務利用の可能性を探るべく今回、直近の課題で試してみました。

# 企画題材：新規プロモーション計画案作成業務について
## 業務効率改善
私の担当はDX推進ですので対象部門は営業も管理も対応しています。
以前プロモーションを担当していましたので、今回プロモーション部門への業務効率改善としてChatGPTを使って企画を作ってみることにしました。プロモーションチームは昨年実績で大小含め７０企画を起案しています。企画書の素案作成（資料データなどは不明瞭な段階で、「いつ、何の目的で、誰をターゲットに、どのようなことをしたいか。」程度の要素で作成する企画書のたたき台です。）は１時間程度を要しそれから最終の提案書までまとめていきます。
今回の改善で前年実績ベースで７０時間の作業時間について考えてみます。加えてデザイン制作についてもトライしています。制作会社さまに依頼しているデザインについてラフデザイン案制作までの作業軽減を検討しました。
デザイン会社さまと打ち合わせして作成いただくまでに１、２日必要な作業になります。

### 使用ツール
ChatGPT
Codepen

## 実施１：ChatGPT を用いて企画書草案を作成しました
***企画テーマ：消費者との参加型コミュニティシステムの新規提案***

### 結果：７回のプロンプトで提案書草案を作成できました。
世の中の評価通り、書類の作成力は素晴らしいものだと思いました。簡単ですがメリットデメリット評価を記します
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/93cce9ed-1f24-ba1e-aa15-2e6c0444a8b1.png)

### ChatGPTを使用したメリット
* 企画書の素案作成について。20分程度で作成できました。40分の削減効果として約46時間／年の削減効果です。
* 1回のプロンプトでしっかりした文章でつくられた「たたき台」の大枠が出来上がっています。ブラッシュアップに時間を費やせるので企画書のクオリティを高められると思いました。
* 企画書のクオリティが上がるので、資料集め等の情報収集作業や、企画書の最終調整作業に時間を費やせ、こちらのクオリティも向上すると思いました。

### デメリット
* 企画の根拠情報原がChatGPT内のデータです。
* 会社向けの提案書として採用するためには添付する根拠資料を自分で収集して、最終書類としてまとめる必要があります。（ChatGPTデータベースは2021年9月までの情報）
* 費用概算も根拠が無いため自分で収集する必要があります。
**ただ、この作業は元々自分で実施していた作業なので、ChatGPTの役割に出来ない作業ということと思いました**
　　 　　
### 実施１のプロンプト
<details><summary>**１項事にチャット送信しています。**</summary><div>

1) ショッピングセンターの運営会社です。顧客ターゲットの中心は15才から49才の女性です。　ファン層を拡大する目的で、消費者との参加型コミュニティシステムを形成するプランを考えてください。
2) コミュニティプラットフォームの具体案をください.
3) ショッピングセンターを利用したことが無い消費者にも参加しやすいWEB上のプランを加えてください。プランにはマッチングサイトのような、消費者同士が出会える可能性を提供する仕組みを加えてください。
4) マッチング機能とコミュニケーションの内容を更に具体化した案をください
5) この具体案を会社に提案し、運営予算年間1千万円を獲得するための企画書にまとめてください
6) イントロダクションが弱いです。このプランの重要性を会社に理解してもらえるように強化してください。
7) イントロダクションの内容を証明する資料元を教えてください。
　**→NGが返ってきました**　　　
</div></details>


## 実施２：企画用のビジュアルキャラクター案について ChatGPTでキャラクターデザインのHTMLとCSSコードを作成しました。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWyqxVe" data-user="opa11111" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/opa11111/pen/XWyqxVe">
  ２</a> by opa11111 (<a href="https://codepen.io/opa11111">@opa11111</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### 結果：5０回のプロンプトで提案書草案まで作成できました。
**但し、デザインの詳細調整（目、羽、体、アクセサリの形、サイズ、色）はプロンプトだけでは作成しきれなかったので、Codepenで微調整しました。友人から背景を変更できるHTMLとCSSコードが記載されているサイトをおしえていただき、背景を装飾しました**　簡単ですがメリットデメリット評価を記します。
### メリット
* 今までデザイン会社に依頼していた作業が、自分で短時間で作成せきたので、時間とコストの削減になりました。
　約半日の作業になりました。実用可能なデザインまで作成できるようになれば更に制作費の削減になります。
### デメリット
* キャラクターデザインの詳細調整はプロンプトでは出来ない。サイズ、位置、形は実際にHTMLやCSSを調整する必要があります。
### 反省
⋆ 修正プロンプトで結果が出るのに何度か同じ指示を繰り返しました。振り替えると、指示の方法が良くなかったと
思います。つい相手が人間のように思えるほどのコミュニケーション力なので回答が人間向けになっていました。「目」なら「白い円形」等抽象的に表現する必要があることがわかりました。
⋆ ビジュアルを表示するコードを最初のプロンプト回答で「ASCIIアート」を使用する案が示されていたのをHTMLとして修正して進めたため更に手間を要したかもしれません。これは私の知識不足です。
### 実施２のプロンプト内容

<details><summary>**１項事にチャット送信しています。**</summary><div>

1) 簡単なフクロウの絵を描いてください
2) HTMLでしょうか？
3) 目を少し離して、少し大きく、黒目を入れて下さい
4) 前の絵から体形が変わってしまいました。円のままにしてください-
5) この体系のままくちばしと同じ高さに小さい羽を加えて描いてください
6) 羽は円の外に描いてください
7) 羽の位置がおかしいです。円の外で、くちばしと同じ高さに表示です
8) 左の羽を上下反対にしてください
9) 前回と変わっていません。左の羽の先端が下を向くようにしてください
10) 直っていません。右の羽を参考に左右対称になるようにしてください
11) 真ん中の三角形を軸に左右対称な形にしてください
12) 左右対称になっていません
13) 左右対称になりました。羽の向きを現在の上向きから下向きに変えてください
14) CSSコードは前回のままが良いです
15) 羽の向きが変わっていません下向きに変えてください
16) HTMLコードはこのままで、CSSコードを1つ前のコードに戻してください
   ![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/a1052598-3ea2-37cf-ccfd-61eeef2b6334.png)ここまででこんな状況です
17) 目の位置を少し上に修正してください
18) 目とくちばしがなくなってしまいました
19) めは表示されましたがくちばしは表示されません。2つ前のCSSへ一旦戻してください
20) 戻りました。ここから白目と黒目だけ少し上に移動させてください
21) 黒目をもう少し上に移動させて、黒目が白目の中央になるよう白目を移動させてください
22) 全く違います1つ前のコードに一旦戻してください
23) 戻りました。このまま白目と黒目だけ少し上に移動させてください。黒目は白目の中央に配置してください
24) 全く違います。一旦1つ前のコードに戻してください
25) 戻っていません。2つ前のコードに戻してください
26) 白円と黒円を少し上に移動させてください
27) 黄色の三角形は1つ前の位置へ戻してください
28) 黒円が白円の中心に位置するように、白円を上に移動してください
29) 現在、黒円は白円の中心より上に位置しています。黒円が白円の中心に位置するように白円を上に移動させてください
30) 変わっていません。
31) 現在、黒円は白円の中心より上に位置しています。黒円が白円の中心に位置するように白円を上に移動させてください
32) 白円だけ少し上に移動させてください
33) 白円だけ上に移動させてください
34) 全く移動されていません
35) 全く移動されていません
36) 移動していません
37) （Codepenで数値調整しコードをChatGPTに戻してみました。※コードが多いので省略）　
　　→位置調整完了したコードが返ってきました　　
   ![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/e7b4d47e-4a59-15c8-fce2-babece967299.png)少しフクロウに似てきましたか。
38) フクロウのボディに円を描けますか？
39) 表示されません。
40) 表示されません。3角形の下にベージュの円を描いてください
41) 3角形の下の位置にベージュの円形を表示してください
42) 黄色の3角形の下の位置に黄色の円形を表示してください
43) 全く表示されません。
　→追加コードの提案が表示され、既存のコードに指示に従い追加したら、表示されました。
   ![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/fcbed0ea-a891-9ef4-48ed-1b4e95e432b9.png)円位置は希望通りでは無かったです。
44) イラストの下に文字を表示させるコードを教えて
   ![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/4fd0526f-d3b3-e271-1e84-101be6815ff8.png)テキストが出ました
45) このイラストはペンギンに似たフクロウでペンロウと名前を付けます。ユーザー参加型キャラクターとして育てようと思います。キャラクターストーリーを作成してください。
46) ペンロウは毛並みや色はフクロウで形や羽がペンギンに似ています。という設定にしてください。
47) 架空のキャラクターなのでオシャレ好きな性格にしてください
48) 先程のイラストにオシャレなキャラクター特性を加えてください
   ![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/d634e3d8-5ff0-3fbe-0fad-a3f4352043a6.png)アクセサリが出ました
→おなかの羽色、くちばし形、アクセサリを調整、テキスト修正
　　![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/4d726ed1-67eb-dac1-aa1e-2f4f33ebc8cf.png)  

  49) 帽子の色をグリーンにしたいのでグリーン系のカラーコードをいくつか教えてください
   →カラーコードからエメラルドグリーンコード選択、目の大きさ数値調整。
 ![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/988eebc5-78dc-7b8a-236a-34d4a7c3f5ac.png)

番外）　以下のサイトから背景コード参照しました
　　　　【CSS】使える背景パターン、実装サンプル25選
　　　　https://125naroom.com/web/3737

![2023-08-21_19h15_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/ab5d0188-b353-f3eb-2d84-72066dc0a356.png)


50) この案を会社に提案し、運営予算年間1千万円を獲得するための企画書にまとめてください
![2023-08-21_19h44_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478695/f2c2ecd8-79ed-09fb-593d-81502f56b821.png)
</div></details>

## あとがき
作成していて感じたのは、AIと感じさせないコミュニケーション力でした。会社や、取引先の方とメールをしている感覚で今まで時間をかけていたものがすぐに形ななっているというのが率直に新鮮でした。
実施１、２別々のChatで作成したためか、企画書作成してみるとこの２つの関連が薄い印象です。実施２のプロンプトを発信する際、情報入れれば変わったかもしれないと思いました。また試してみたいと思います。
最後までお読みいただき感謝いたします。