はじめに
うい！NTAKOです。今回もChatGPTのでHTMLとCSSの使い方をご紹介します。今回の内容はグラフの作り方についてのお話です。グラフというのは図として見るだけならシンプルで単純なものなのですが、いざ作るとなると結構難しいものです。使用するグラフの種類の選択、構成とデザイン要素、数値データとリンクした図の作成といった要素を統合的に表現する必要があります。そのため、ChatGPTへの制作依頼メッセージにも、これらの要素を含めて的確に伝える必要があります。今回は棒グラフを作りながらその過程を見てみましょう。
ChatGPTで棒グラフのデザインを作ってみよう
1.ChatGPTへのアクセス
まずOpenAIの公式ウェブサイトにアクセスします。
https://chat.openai.com/
2.HTMLとCSSで棒グラフの依頼文を送信する
ここでは下記のように依頼文を作成しました。「グラフの種類と表現方法」、「グラフのデータ」、「表記するテキスト」を具体的に指示しました。
データはstatcounter.comより引用しています。
HTMLとCSSで下記データの縦向きの棒グラフをモダンスタイルで作ってください。
・棒は下から上に伸びるスタイルで長さは数値に連動。
・各データは「世界全体を青」と「日本を赤」の棒を2列で表示。
・世界全体の棒は青色、日本に棒は赤色に設定。
・データ1～3も比較できるように少し離して横並びで表示。
【棒グラフ】
・データ1：Android 世界全体：70.8% 日本：30.6%
・データ2：iOS 世界全体：28.5% 日本：69.3%
・データ3：その他 世界全体：0.7% 日本：0.7%
【表示テキスト】
・日本と世界全体のスマホOSシェア比較【2023年8月】
・■（■はグラフの青色で）世界全体
・■（■はグラフの赤色で）日本 ・Android ・iOS ・その他
すると、コード生成してくれたので、メモ帳にコピペして「index.html」として保存して開いて確認するとこのようなデザインになっていました。実際のページがこちら。
ある程度形になっていますが、ところどころおかしいので修正依頼を出します。修正依頼のコツは「現状を伝えてそれをどう修正する」という流れで伝えることです。
・「世界全体」と「日本」の文字が「iOS」と重なっているので少し下に移動してください。
・グラフの高さを2倍にして100％の長さを広げてください。。
・各棒に数値テキストを追加してください。
・「その他」が上に吸着しています。下揃えで固定してください。
・もっとリッチな見た目にしてください。。
すると、修正したコード生成してくれたので再度確認します。このようなデザインになっていました。実際のページがこちら。
完成形に近づきましたが、まだ「その他」が上揃えになったままです。複数の周囲があると一気に解決されないことはよくあります。さらに下記の修正依頼を送ります。
「その他」が上に吸着しています。下揃えに修正してください。
そして、生成された修正コードを再度確認します。このようなデザインになっていました。実際のページがこちら。
「その他」は下揃えになりましたがレイアウトが崩れました。1つの要素の修正でレイアウトが崩れるということもプログラミングではよくあることなので、改めて現状を伝えて修正依頼を送信します。
・Android、iOS、その他の文字がグラフの上にあります。グラフの下に移動してください。
これで完成しました。実際のページがこちら。
このようにグラフデザインを生成することができます。今回は1本ずつの単純な棒グラフではなく、2列の国比較グラフをさらに全体のカテゴリで比較するという少し複雑な依頼内容だったので少し修正回数も多くなったかなという感じです。
おわりに
ChatGPTを使ったグラフの作成は、基本的な指示をした後に何回か修正のキャッチボールをしながら完成に導く形になると思います。実際にお仕事でグラフの作成を部下や外部に依頼した際のやりとりと同じような形になっているのではないでしょうか。もし、「やり取りが上手くいかないなー」と感じた時は、新しいチャットでやり直してみるのもおすすめです。もちろん指示の仕方も大切なので、この両方のアプローチを意識してみてください。