こんにちは！佐久ハラミです。
佐久ハラミ Official Websiteはスタイルシートもない様なサイトだったのですが、
ChatGPTとGrokにきれいに整えて貰いました！
ChatGPTとGrokにホームページのデザインをきれいにしてもらった話
ChatGPTと話した編
それは体調不良で横になって休んでいる日のこと。
ふとChatGPTってHTMLデザインも出来るのかな？と思いました。
まずはChatGPTに
佐久ハラミ：このHTMLもっといいデザインにしたい
とHTMLの中身を送ると、
ChatGPT：いいね！ベースはしっかりしてるから、ちょっとモダンで洗練された感じにスタイルを追加するだけでだいぶ変わるよ。以下のように、HTML5準拠にしつつ、CSSで見た目を整えたバージョンを提案するよ：
と改良ポイントと改良済みHTML＋CSSが返ってきました。
これだけで相当すごい気がするのですが、さらに
ChatGPT：もし、「佐久ハラミらしさ」みたいなテーマカラーやイメージがあれば、さらにそれに寄せたカスタムもできるので教えてね。どうする？
さらなる提案まで。
佐久ハラミ：テーマカラーは薄めのイエローだね
と返すとまた改良済みのHTML＋CSSが。
佐久ハラミ：めっちゃよくなった
ChatGPT：ありがとう！めっちゃ嬉しい！🥹
佐久ハラミサイトにピッタリな、やさしい雰囲気出てると思う✨あとは、
レスポンシブ対応でスマホでも見やすい
可愛いアイコン入れる（Font Awesomeとか）
背景にほんのり模様（例えば水玉や和紙風テクスチャ）
とか、好みに合わせてもっと育てられるよ！
「トップページに何か足したい」とか「ギャラリーっぽくしたい」とかあれば、気軽に言ってね〜！
ハラミちゃんの世界観広げるお手伝い、喜んでやります🐮✨
牛の絵文字まで使って…。やりよるがすぎるやろ…。
この後もあーでもないこーでもないと会話していたのですが、
途中でChatGPTの回数制限が来てしまいちょっとアホの子に…。
Grokと話した編
それで次はGrokに移動。ChatGPTに作ってもらったHTML+CSSを見てもらい、
2024 Amazon買ってよかったものランキグンと佐久ハラミ美術館もデザインを統一して欲しいと伝えると、嫌な顔ひとつせずに対応してくれました。
そして教えてくれた内容をコピペして作ったHTML+CSSを見せると
Grok：おお、ナイスアップデート！ めっちゃバッチリ直してるやん！ #comparison消してスッキリ、back-to-topボタンに影とホバーエフェクト入れてカッコよく、CSSにスマホ対応の@media追加でバランス完璧！aria-labelもJavaScriptで自動追加のまま、しんどさゼロでアクセシビリティもバッチリキープ。SEOの<meta>タグもそのままで、ほんと非の打ち所がない仕上がりだね！
コードとstyle.css全部チェックしたけど、もうこれ以上言うことないくらい最高！
めっちゃ褒めるやん…。君が教えてくれたんやで…。
美術館のトップに現在の合計枚数が表示されているんだけど、最初ハードコーディングされていたので、
佐久ハラミ：全4444枚のところimgフォルダの配下の数にできない？
と聞くと
Grok：おお、了解！「全4444枚」がハードコードされてるのを、imgフォルダ内の実際のファイル数にしたいんだね。
とめっちゃ理解してくれる。
面倒で実装してなかった作者、コメント欄も
佐久ハラミ：超バッチリです。
作者名とかコメント入れたいね。
と軽く提案すると、
Grok：作者名＆コメントの入れ方
4444枚もあるから、手動で全部入力するのは大変だよね。効率的に管理する方法をいくつか提案するから、どれがいいか選んで教えて！
案1: テキストファイルで管理
方法: img/info/canvas00001.txtみたいに、各画像ごとにテキストファイルを作って、作者名とコメントを保存。例: ./img/info/canvas00001.txt
saku
佐久ハラミの笑顔が最高！
と色々提案してくれた上に、最後は登録フォームまで作ってくれました。
最後に
佐久ハラミ：美術館の画像押した時に新しいタブで開いたんだけど、
ページの真ん中に出せないかな？
と聞いて、その回答を貰ったところで残念ながら回数制限。
こちらはどうやら2時間使えなくなる模様。お世話になりました。
最後に
いやこれめちゃくちゃすごいですね。佐久ハラミ要らんやん…。
ChatGPTもGrokもめっちゃフレンドリーだし…。好きになっちゃう。
この後も録画PCからメインPCに録画したファイルを持ってきてエンコードして外付けHDDに保存するバッチを作ったりしました。
皆様も是非ChatGPTやGrokを使って色々やってみてはいかがでしょうか！
