よこぼと申します。
初心者です🔰

同じような初心者・初学者の方にも、
育成や普及活動を進める立場の方にも、
参考になるような記事をあげていけたらと思います。
よろしくお願いします🙇

=======================



以前、CDLEブログで「自分のwebサイトを作ったよ!」ということを書きました。




今回、
GPT-images-2.0とcodexで、

リニューアルしましたー!🥳㊗️🎊



というわけで、リニューアルまでの生々しい道のりを皆さんにご報告できればと思いますので、よろしくお願いします!

ぜひサイトに遊びに来ていただけると嬉しいです!


---

①デザインを考える


きっかけはChatGPT-Images-2.0の登場です。
楽しすぎて遊んでいる中で、「もしかしたらwebサイトのリニューアルに使えるかも💡」と思いつきました。

IMG_9734.jpeg 201.87 KB
ひとまずチャットGPTに投げてみる。

そして作ってもらったイメージがこちら。すげぇ👀

7C5E543E-3293-4714-99AB-1481A8BE09D3.png 1.84 MB
これでテンションが上がって、やる気がみなぎりました!

やっぱりゴールイメージって重要‼️


ちなみに、ここで重要になったのはマスコットキャラの存在です。
このデザインシートを作ってもらって、そこからサイトイメージを色々相談しながら作りました。(上の画像も一発出しではないです)

7E4224D5-5A37-43EB-BC32-9182C4F774AA.png 2.28 MB
---

②トップメッセージを考える


上のトップイメージでは
「やさしいAIで、未来をもっと面白くする」
をGPTさんがてきとうにいれてくれてました。

悪くはない…が、ちょっとイメージと違うな…

相談しよ。

IMG_0025.jpeg 188.06 KB

ここから何回かやりとりして、
「AIと遊び、気づけば自分が変わっていた。」
に決定しました。

6BE5CDE0-2B33-4B75-A7E5-309D88DCBBF0.jpeg 140.88 KB(当初は"AIで遊び"でしたが、いまは"AIと遊び"にしてます)

---

③実際につくってみる


できたイメージをCodexに投げて作ってみてもらいました!
(ちなみにpc版とスマホ版それぞれのイメージを作って、切り替えられるように指示してます)

E5AD7C1E-4A50-44BF-8CCD-DC60A5FF749D.jpeg 57.04 KB
うーん…
いまいち。

このときの僕はGPTさんに「最初にイメージ作ってもらったときの感動がないんだよなぁ」ってぼやいてました。



ここからひたすら、

チャットGPTにイメージ作ってもらう→Codexで作ってみる→チャットGPTにイメージつくってもらう→・・・

の繰り返しをしました。

ここでレイアウトに関しても色々みながらいじってます。
IMG_0028.jpeg 207.59 KB気に入らないところは改善してもらったりしてます


で、なんやかんやあってできたのがこのトップページです!見てやってください!
https://yokobo-ai-lab.vercel.app/ 


---

③管理者ページをつくる

旧サイトでは「投稿が続かない」という課題がありました。

原因は明らかで、
めちゃめちゃ投稿しづらいんです。

PCじゃないと投稿できなくて、
自分でmd書いて、画像の位置を設定して
それをpythonでjsに入れて…

みたいなとっても大変なフローでした。


なので今回は
「PCでもスマホでも、ブラウザから更新できる」
を目指して作りました!

そして出来上がった管理者画面がこんな感じ。

IMG_0033.jpeg 48.86 KB
これは開発当初の画面で、いまはこんな感じ↓

IMG_0033.jpeg 108.2 KB

---

まとめ


こんな感じで、自分のサイトのリニューアルができました。

〜気づき〜
①イメージ画像ってテンション上がる⤴️
②ゴールイメージを徐々に作り変えながら作れるのすごい
③自分の思い通りになるサイト…想像してたより面白い!



ここまでお読みいただきありがとうございました🙇
ぜひ遊びにきてください!!
(サイト内の応援ボタン押していただけたら嬉しいです🐈)