ココロミにきみ

本と体とプログラミング

DIY 生成AIでつくるwebページ

もう使っている人は当たり前のように使っている生成AIですが、本当に楽になる部分があるので、使ってない方はぜひこの機会に、ということで備忘録的に自分webサイトを生成AIで作り直した記録を紹介です

 

旧webページ(手打ちのタグで作ってたさ!)

これが、

新しいwebページby生成AI

ターゲット層が英語圏なので、英語がさきに来るページにして、コンテンツの種類でタブごとにページを分けて、さらに、新作のものだけハイライトとして自動でTOPページに来る、というのを生成AIに作ってもらいました

一回で作ったわけではなくて、段階的に会話しながら作るほうがうまくいきます

手本にしたい誰かのサイトがあったら、スクショして最初に見せると話がはやいです

* * *

そして生成AIで作るときの一番の便利さは、めんどくさい修正をすぐしてくれることではないかと思います

なんなら大まかに作るのは自分でやって、細かい修正とかをAIにお願いしたほうがうまくいくかもしれません

やっぱ角丸にしたいなとか、ハイライトの時だけ背景色変えてとか、どこに記述したっけ?みたいなのを全部任せられるのは楽です

* * *

ああ、でも個人ユースとか、小規模なサイトじゃないときびしいかな

なぜなら、htmlの内部構造はけっこうはちゃめちゃに作るので(特にエラー修正のあと!)、2025年の7月の段階では、html,css,javascriptの知識がないと、エラーが出たときに対処できなかったりします

エラーもスクショしてAIに見せていけば解決することもあるんですが、対処の仕方が根本的な解決を探すのではなくて、場当たり的な解決なので内部構造をよりめちゃくちゃにする解決策を提示することがけっこうあることに気づきました

なのでエラーが出たら、自分で構造から考えたほうがいいです

技術的案質問だとcloudeよりGPTのほうが詳しい場合が多いです

* * *

さて、サイトに話を戻すといったん表紙のページだけ作ってもらってしばらく放置していて、数ヶ月経って、内容ページも生成AIにつくってもらい始めました

写真を用意して、原稿を用意して、AIにこの原稿をもとに後からサイトを構成をするからね、という感じで先にテキストを作ってもらいます

その時に足りないところはインタビューしてね、と言っておくと全体の構成がよくなることが多いです

それができたら、表現の方向性も指示してhtmlを作ってもらいます

こういう新聞記事的なのは得意みたいですが、おしゃれな雑誌風とか言うと、はてしなくダメなやつを作ってくれたりもします

あと余白多めのアート風や、学会レポートみたいなタイプはうまくいきました

新聞記事っぽいのはたくさん作ると飽きもくるのですが、人間側がそれに慣れてるせいもあり、読みやすさという点でやはりいつでも選択肢に入れるべきだなと
また、最初に書いた原稿も表現の方法次第では、勝手に文章の切りはりをしてテキストを作ってくれます・・・それが良くも悪くもあり

例えばアート的なページにするとガッツリ文章を削られます

一度テキストを作ったあと、いろいろなタイプのページを作ってもらうのがおすすめです

書いてるうちに思い出しましたが、やはり好きなページのスクショを見せるのが一番の方法論の気がしてきました

この生成AIによるデジタル全体の底上げが一巡したあとは、今度はどうやって平均的によいページばかりの世界から逸脱するのか?みたいなところがポイントになってくるのでしょうね

美男美女だけの世界にいったら、残ったブサイクのほうが逆に個性的で魅力的に見える、みたいな