【ChatGPTの使い方】HTMLとCSSのグラフデザイン生成【無料版では厳しい( ノω-、）】

はじめに

うい！NTAKOです。今回もChatGPTのでHTMLとCSSの使い方をご紹介します。今回の内容はグラフの作り方についてのお話です。グラフというのは図として見るだけならシンプルで単純なものなのですが、いざ作るとなると結構難しいものです。使用するグラフの種類の選択、構成とデザイン要素、数値データとリンクした図の作成といった要素を統合的に表現する必要があります。そのため、ChatGPTへの制作依頼メッセージにも、これらの要素を含めて的確に伝える必要があります。今回は棒グラフを作りながらその過程を見てみましょう。

※注意：今回の内容は依頼内容が少し複雑になるため、無料版のChatGPT 3.5では難しいので有料版のChatGPT 4を使用しています。どちらのGPTにもHTMLとCSSのグラフ作成の知識はあるのですが、会話のキャッチボールの精度の差により、修正回数に圧倒的な差が出ました。GPT 3.5とGPT 4の差は、同じスキルを持った子供と大人でイメージするとわかりやすいです。子供にお使いを頼むと「話をちゃんと聞いていないで間違えがち」とか「何かを忘れてくる」といった感じでやり直しの回数が増えるイメージです。

ChatGPTで棒グラフのデザインを作ってみよう

1.ChatGPTへのアクセス
まずOpenAIの公式ウェブサイトにアクセスします。
https://chat.openai.com/

2.HTMLとCSSで棒グラフの依頼文を送信する
ここでは下記のように依頼文を作成しました。「グラフの種類と表現方法」、「グラフのデータ」、「表記するテキスト」を具体的に指示しました。
データはstatcounter.comより引用しています。

すると、コード生成してくれたので、メモ帳にコピペして「index.html」として保存して開いて確認するとこのようなデザインになっていました。実際のページがこちら。



ある程度形になっていますが、ところどころおかしいので修正依頼を出します。修正依頼のコツは「現状を伝えてそれをどう修正する」という流れで伝えることです。

すると、修正したコード生成してくれたので再度確認します。このようなデザインになっていました。実際のページがこちら。

完成形に近づきましたが、まだ「その他」が上揃えになったままです。複数の周囲があると一気に解決されないことはよくあります。さらに下記の修正依頼を送ります。

そして、生成された修正コードを再度確認します。このようなデザインになっていました。実際のページがこちら。

「その他」は下揃えになりましたがレイアウトが崩れました。1つの要素の修正でレイアウトが崩れるということもプログラミングではよくあることなので、改めて現状を伝えて修正依頼を送信します。

これで完成しました。実際のページがこちら。

このようにグラフデザインを生成することができます。今回は1本ずつの単純な棒グラフではなく、2列の国比較グラフをさらに全体のカテゴリで比較するという少し複雑な依頼内容だったので少し修正回数も多くなったかなという感じです。

おわりに

ChatGPTを使ったグラフの作成は、基本的な指示をした後に何回か修正のキャッチボールをしながら完成に導く形になると思います。実際にお仕事でグラフの作成を部下や外部に依頼した際のやりとりと同じような形になっているのではないでしょうか。日常会話の中でよく人に対して「デキるヒト・デキないヒト」とか「使えるヤツ・使えねーヤツ」と言った表現をしますが、この感覚はGPTにも当てはまるように感じます。無料版のGPT 3.5と有料版のGPT 4ではその差は大きく感じますし、GPT 4の中でも開いているチャット事にもその差を感じます。もし、「やり取りが上手くいかないなー」と感じた時は、新しいチャットでやり直してみるのもおすすめです。もちろん指示の仕方も大切なので、この両方のアプローチを意識してみてください。