趣味でWS仙界伝シリーズの攻略サイトを作り始めて、早18年。
ずっとHTML手打ちでやってきましたが、いろいろ作れるらしいとウワサの生成AIをページ作成に使ってみたところ、思っていた以上に便利だったので覚え書き。
今回作るのは、404エラーページ。
リンク切れとかでページが存在しない時に「404 Not Found」と表示される残念なやつです。
レンタルサーバ標準のエラーページでもいいのですが、オリジナル版の404ページを設定することも可能だそうです。せっかくだから封神ぽい雰囲気のページを作りたいなと思いまして、生成AI…とりあえず初心者でもとっつきやすそうなChatGPTを使って作ってみることにしました。
１．ChatGPTで画像を作成（文字入れ）する
こんなのにしたいというイメージは頭の中にあるので、ビジュアルからいきます。
フリー素材とChatGPTに指示する用にペイントブラシで雑に文字入れした画像を用意します。これらの画像をChatGPTにアップロードして、LINEでトークする感覚で指示を出します。このAIへの指示のことを「プロンプト」ていうらしいです。
これが
こうなる。
わお。秒でできちゃった。
画像に文字入れするのって、
- 画像編集ソフトで画像を開く
- 新規レイヤーに文字を入力
- サイズやフォントや色や位置をあーでもないこーでもないと悩む
- 合成して完成
みたいなステップだったのですが、それが一瞬。
しかも「もうちょっと格好よく」なんてテキトーな指示なのに、私が自分で作るよりいい感じ。
たまたま一発でイメージ通りのものができただけかもしれませんが（後述するGeminiで作成したものはイメージからだいぶ遠かった）、今回の用途にはこれで充分でした。
２．ChatGPTでHTMLとCSSを作成する
続いてHTMLとCSSも書いてもらいます。
最初は「HTMLとCSSでWebページを作成して下さい。この画像置いて、下にこんな文言入れてセンタリングで」のような指示をしました。
するとChatGPTの方から「404エラーページ作るよ？少し綺麗なデザイン版も作れるよ？」と提案してくれたのでお任せすることに。
その後「レスポンシブデザインにして」「TOPページに戻るボタンはこれとこれとこれの3つにして」のようなやりとりを数回した結果
生成されたコードはこんな感じ。
このボタンクリックでそのままプレビューに切り替えできます。
わおわお。シンプルで今どきっぽいデザインになりました。採用。
これまでは新しくページをデザインする時は
- デザインを考える
- ひな形HTMLをコピって文章を書く
- 「ボタン横並びってCSSでどう設定するっけ？」などデザインを実現する方法を調べる
- スタイルシートを書く
- 保存してブラウザで表示確認
- うまくいかない箇所やイメージと違った箇所を修正
という流れでやっていたのが、ChatGPTにちょろっと指示するだけでそれなりの見栄えのものができちゃいました。へええええええ現代すごいーーーー。
ちなみに生成されたコードは直接編集もできます。色を変えるとかちょっとした修正なら、ChatGPT内で「修正→表示確認」が完結するのも便利でした。
３．完成
生成されたコードを確認して、余計なエフェクトを削るなど少し調整して完成したものがこちらです。
今回はちょっとしたページ１つを作っただけなので、生成AIがどのぐらい有用なのかはまだなんともわかりません。AIが作るとはいえ、人の手によるチェックや調整は必要ですし。
でも、これまで試行錯誤で時間がかかっていた部分（レイアウトが思うようにできないとか、見栄えがよくないとか）が一瞬で解決したのは驚きでした。
というか、「これでどうですか？」と出されたものが想像以上に良かった。
正直もっとトンチキなものが出てくると思ってましたよ。ごめんねChatGPT。
既存ページも、画像がはみ出しているのを直せていないとか、デザインもうちょっと綺麗にしたいなど改善したい事が色々あるので、そのうちChatGPTに手伝ってもらおうかなと思っています。
上記リンクは仙界伝弐攻略サイトのしすいくつマップのページで、昔の個人サイトっぽく隠しページを仕込んでいます。
本物は1つだけで、いくつかダミーリンクが混じっています。ダミーをクリックすると404ページへ飛ばされます。
よかったら探してみてください。
４．おまけ：Geminiでも作ってみた
他の生成AIだとどうかな？とGeminiで試してみたら、こんな感じになりました。
なんでそこ文字色変えるのｗ
0 件のコメント:
コメントを投稿