私事ブログ変換 UIリニューアル

この記事には生成AIによって作られた文章が含まれています。 その点を了承のうえでご覧ください。

---

自作Webアプリ「私事ブログ変換」のUIをリニューアルしました。

前々からちょと野暮ったいUIだなぁ…と思いながら機能拡張を進めていたのですが、一通り機能拡張ネタは出し尽くしたかと思い、UIリニューアルに踏み切りました。

今回は、ChatGPTにUI刷新案の壁打ち相手になってもらうところからスタートしました。ただ「良いUIを考えて」と丸投げするのではなく、自分なりに考えていた方向性と、以前Claudeに作ってもらったペルソナ情報を一緒に渡して、それをベースに案を練ってもらいました。AIを使うにしても、こういった事前情報を揃えて渡すかどうかで出てくるアウトプットがかなり変わりますね。

結果として出てきた案は、以前のUIと比べるとだいぶ柔らかい印象のデザインになりそうで、方向性としてはかなり好みのものになりました。

そのままの勢いで、Codexに実装してもらうための設計書もChatGPTに作ってもらい、実装フェーズへ。

実装はCodexに任せる形で進めたのですが、気になったので事前に「実装前に設計書と実装が食い違う箇所を確認して」と指示しました。そうしたら案の定食い違う箇所がちらほらと、設計書の意図をCodexがうまく読みきれていない箇所がいくつか出てきました。完全にお任せというわけにはいかず、都度状況を確認しながら微調整を加えつつ進めていく形になりました。AIに設計から実装まで完全にお任せ、というのはまだ難しいのかもしれませんが、個人的にはこの方が安心だったり…。

そうして進めた結果、リニューアルが完了しました。設計案をそのまま再現できたわけではありませんが、以前と比べるとだいぶアプリらしい見た目になりましたし、モバイルレイアウトも整ってかなり使いやすくなった手応えがあります。

ChatGPT、Claude、Codexとそれぞれ得意な役割を割り当てながら開発を進めるスタイルが少しずつ板についてきた気がします。うまく使い分けることで、一人での開発でもできることの幅がだいぶ広がりますね。

#Webアプリ開発 #UI刷新 #ChatGPT #Claude #設計書 #ノーコード #モバイルレイアウト