ブログに表(テーブルタグ)を使うのは
- 情報の整理と可視化するため
- 比較と対照をわかりやすくするため
私はレシピを書くのにも表テーブルを活用しています。
AI(ChatGPT)に表のテーブルタグを作ってもらい、作業プロセスを簡易化する方法について、実際のやり取りを踏まえながらまとめていきます୨୧
ChatGPTとは
ChatGPTをご存知の方は次に進んでください୨୧
openai.comChatGPTとは人間のように自然な対話を行うことができる人工知能(AI)です。テキストで質問をすると、ChatGPTはその質問に対して回答を生成し、対話のようなやり取りができるプログラムです。
ChatGPTはさまざまな用途に役立つことができます。例えば、質問応答、情報検索、アイデアの発想、言語の翻訳、文章の校正など、コンピュータープログラムとの対話を通じて様々なタスクを行うことができます。
表の作成をChatGPTにお願いする
私はレシピ覚書を残すために
このような表テーブルを作りたいと考えていました。
まず、表の内容に関する指示を与えます。
例えば、データの種類や列の見出し、必要なセルの数などを具体的に伝えていきます。その後、ChatGPTはその情報をもとに、瞬時に表を作成して提供してくれます。
私が実際に行ったやり取り
レシピ表の元になる形作り
左がレシピの工程、右は写真を掲載するテーブルタグを作ってください!
![]() |
![]() |
※クリック/タップで画像拡大できます。
レシピ表の基本となるテーブルタグを生成してもらうことができました。
上記右側の写真を見てもらえるとわかるのですが、工程が増えたらそのつど手動で工程を追加していく必要があります。これが私がテーブルタグを面倒に感じる要因。
内容を入力された状態で再生成
手動で工程分を追加していく手間が省けたら、もっと簡単にブログに書いていくことが出来るはずなので、新しいお願いをしてみます。
レシピの工程をChatGPTに書いたら、それを入力された状態でタグを書いてくれますか?
![]() |
![]() |
※クリック/タップで画像拡大できます。
工程どおりに表の生成をしてくれるんだ!ChatGPTちゃん…しゅきっ!
表(テーブル)デザインの指定
ChatGPTにテーブルタグを作ってもらえることが分かったので、次はデザインコードの生成もお願いしてみます。
このテーブルタグのデザインを変えたい場合、CSSはどうなりますか?またテーブルタグを複数使っているため、このテーブルタグを差別化したいです!
![]() |
![]() |
※クリック/タップで画像拡大できます。
他のテーブルタグとは差別化されるようにクラス名を指定したテーブルタグを生成してもらうことができました。レシピ表の話をしていたからか、クラス名は自動で<recipe−table>にしてくれた!賢いなぁ。
最後に詳しいデザイン要望を伝えます。
全体幅100%・左側60%・右側40%のサイズで固定して作ってください!
※クリック/タップで画像拡大できます。
限りなく手間を省く
<table> <tr> <th>工程</th> <th>写真</th> </tr> <tr> <td>工程1</td> <td><img src="写真のURL" alt="写真1"></td> </tr> <tr> <td>工程2</td> <td><img src="写真のURL" alt="写真2"></td> </tr> <tr> <td>工程3</td> <td><img src="写真のURL" alt="写真3"></td> </tr> <!-- 追加の工程や写真をここに追記 --> </table>
⇧これが基本のテーブルタグです。
<>ごとに改行が入っていますよね。
私が普段ブログを書くのに使っている【はてな記法】ではタグ内の改行が文章の改行だと認識されてしまうようで、表にズレが生じてしまいます。
ズレを出さないためにはタグ内にあるスペースや改行を消していく必要があります。
作ってもらったタグを改行を取り除いた状態で再生成してもらえますか?
※クリック/タップで画像拡大できます。
至れり尽くせりで理想の表テーブルができた!ChatGPTちゃんありがとう!
やり取りを保存する方法
ChatGPTに生成したい表テーブルを覚えてもらえたら、やり取りをしたページをブックマークしておきます。
ブックマークすることにより、以前の会話や設定を継続したまま新しいテーブルタグを生成してもらえますよ♬
AIの弱点
ここまでAIによるタグ自動生成がいかに素晴らしいかを説明してきましたが、致命的な弱点があります。
それが、余計なことを言うと設定が崩れ、その崩れたものを新たに記憶してしまうということ。
<style>~</style>の表示は不要だったので、「デザイン指定の部分は不要です」と伝えてみました。
すると、わかりました!と、いつも通り優しく返信してくれたのですが…基本形の崩れたよく分からない新しいタグが再生成されてしまいました՞
こうなってしまったら、振り出しに戻って最初から覚え直してもらうしかありません。
「<style>~</style>の部分は不要です」という伝え方をしたら希望通り聞いてもらえましたので、超わかりやすく伝える必要があるようです。
このように、こちらの意図がきちんと伝わらないとそれまでのやり取りで組み上げた設定が崩れてしまいますのでご注意ください。
まとめ
- どのようなテーブルタグが作りたいのかを伝える。(右がレシピの工程・左は写真を掲載する等)
- タグ生成をしてもらったら入力して欲しい文章を伝える。(工程は1.~ 2.~等)
- デザインを変えたい場合は設定したいデザインを伝える。(右側の欄の幅は○px/○%にして等)
一度ChatGPTに覚えてもらえれば、その後の作業時間を短縮でき、大きなメリットですよね。頻繁に表テーブルを活用されている方には特にオススメです。
みなさんも、苦手なことがあったらAIに聞いてみると作業効率が上がる新発見があるかもしれません୨୧
今日はそんな感じ!
それではまたね🧸◌𓈒𓐍