トップページでも喋っていたり、記事の途中にもちょくちょくある私とAIとのやりとりフキダシ。
あれ、前々から作ってみたいと思ってたんですよ。なのでAIに「こういうの欲しい」って言ったらサクッと作ってくれました。
参考書とかブログとかでの憧れ
クオリティの高いブログとか、あとは参考書とかにもこういうやりとりってよくあるじゃないですか。
こういうの↑を結構見てきたので、自分でコンテンツ作るってなったときもこういうのやりたいな～って。
でもずーっと言い続けてるように、わからないんですよ。やり方。
一応、Cocoonには標準でフキダシ機能あるにはあるんですけど、すっきりした見た目でブログデザインから浮いてしまうので、浮くんですよね。そこの部分だけ。
昔なら、自作なんて発想自体が浮かばなかったでしょうね。標準機能で我慢or諦めるの二択で、実際過去に挫折したサイト作りでは諦めるを選んでいたワケで。
それが今は、作りたいものを言葉で伝えれば形になるようになっちゃって。いや昔でも人に頼れば実現できたんでしょうけど、みんながみんなそんなコミュ力あるわけじゃないんですよ!
どういうフキダシにしたか
作るうえで考えたのは、だいたい3つです。
まず、誰が喋っているか一目で分かるようにすること。自分の発言は黄色のフキダシで右側、AIの発言は水色のフキダシで左側に置きました。色と位置の両方で分けているので、パッと見ただけでどちらの発言か分かります。よくあるチャットアプリの画面と同じ発想です。
次に、アイコンを丸く切り抜いて、黒いフチを付けたこと。これはブログ全体のデザインに揃えるためです。カテゴリのカードもフキダシも同じ「黒フチ」で統一されているので、並んだときにちゃんと同じブログの部品に見えます。
そして一番こだわったのが、トップページ専用にしないことでした。
最初は「トップページの一番上で会話させたい」という発想だったのですが、それだけだと、記事の中で使えません。せっかく作るなら、記事のどこにでも好きなだけ差し込めるようにしたい。そこで、部品として独立させて、どのページに貼っても同じ見た目で出るように作ってもらいました。
なので今は、記事を書いていて「ここはAIとのやり取りをそのまま置いたほうが伝わるな」と思ったら、その場所にポンと差し込めます。タイトルに「差し込める」と入れたのは、そういう意味です。
フキダシ完成
構想から完成まで、私がやったのは「こういうのが作りたい」と伝えて、返ってきたものを貼って、「ここをこう変えたい」と伝え直す、その繰り返しだけです。コードは一行も自分で書いていません。書けません。
まさにAIにおんぶにだっこですが、それでええんです。今この文章を打ってるPCも何をどうして動いているのかわかりませんが、動いてればOKなのと一緒です。
「バイブコーディング」って言葉が昨今隆盛していますが、あれ良い言葉ですね。リスクもあるのでしょうが、世の中の物だいたいそうですし。便利なものはどんどん使っていきたいですね。
おまけ：コード置き場
同じようなものを作りたい人向けに、実際に使っているコードを置いておきます。真似したい方は自由にどうぞ。
<div class="onbu-talk">
<div class="onbu-bubble onbu-me">
<img class="onbu-icon" src="自分のアイコン画像のURL" alt="わたし">
<div class="onbu-balloon"><span class="onbu-who">わたし</span>ここに自分のセリフ</div>
</div>
<div class="onbu-bubble onbu-aib">
<img class="onbu-icon" src="AIのアイコン画像のURL" alt="AI">
<div class="onbu-balloon"><span class="onbu-who">AI</span>ここにAIのセリフ</div>
</div>
</div>色を変えたいときは `#FFBE0B`（自分側の黄色）と `#D9E5FF`（AI側の水色）を好きな色に、アイコンのサイズを変えたいときは `width` と `height` の `48px` を変えてください。
コメント