アプリを作るとき、まず考えるのは要件と実装で、
エンジニア的にはデザインやUIについては二の次な部分かと思います。
が、今回は要件を決めたらUIデザインをするところから始めていきます。
同時にChatGPTにデザインを渡し、だいたいのコードも書いてもらいましょう。
UIUXについてとChatGPTの利用法を学ぶことが目的でしたので、この2点に挑戦することが今回の趣旨です。
なんのアプリを作る？
今回はブラウザで動作する「カメラアプリ」を作りたいと思います。
弊社のマスコット「ココアちゃん」と一緒に写真を撮れる、
ARフォトフレームのようなものを作りたいな～と構想を練っていきます。
アプリの構成要素は下記の通り。
- カメラ映像
- フレーム画像
- シャッターボタン
デザインを作る
妄想を具体化するためにデザインを作ります。
今回はFigmaというツールを使いましたが、目的は脳内にある完成図を視覚的に再現することなので
XDでもスマホアプリでもMSペイントでも、ツールは何でもいいと思います。
そうしてできたデザインカンプがこちら。
適当に写真とイラスト（フレーム）とシャッターボタンを重ねてみました。
ChatGPTにコーディングをお願いする
ChatGPT（4o）は画像を添付するとそこに何が映っているかを解析できます。
ウェブページのワイヤーフレームを送ると、ある程度似たレイアウトのHTMLやCSSを組んでくれます。
その要領でアプリのコードのたたき台を作ってもらいましょう。
今回はアプリなので、デザインだけでなく
- 何の技術を使用するか
- どのように実装するか
といった要件的なところは把握しておく必要があります。
なのでこのようにお願いしました。
書いてもらったコードの修正
こんな風に実装例が返ってきましたが、今回の例だとシャッターボタンの画像について言及せずに依頼したので、buttonで実装されていました。
そのような個所を、ChatGPTに依頼して直してもらったり自分で直したり要件を追加したりしてできたアプリがこちら。
人とAI半々くらいです。
完成
こんな感じで、無事にフォトフレームアプリができました。
カメラの映像を全面に表示し、下のシャッターボタンでキャプチャ取得・保存を行います。
環境によってアクティブでない真っ暗なカメラが選択されていたりしたので、手動でカメラを選択できるプルダウンを追加したり等もしました。
これでココアちゃんとツーショット！
実際のアプリはこちら。
【GitHub】
https://github.com/mayegg4869/Portfolio/tree/master/photoframe
【GitHubPages】
https://mayegg4869.github.io/Portfolio/photoframe/
まとめ・感想
デザインから作ってみることを試してみて、一番実感したのはブレが少ないということです。
普段は作っているうちにどんどん脱線していってしまうのですが、
最初に完成形をはっきりさせたので、要件を増やした場合も目的を達成するための追加となり、焦点が定まっていました。
また、たたき台をChatGPTに作ってもらったことで、HTMLのお約束部分の工数削減や、
新しく自分で要件を追加してそれがうまくかみ合わないとき、考えられる原因についてを聞いたりといった相談ができたのも勉強になりました。
みんなもUIデザインからWebアプリを作ってみよう！ と適当に締めさせていただきます。
オブジェクティブグループではXの投稿も平日毎日行っています！
IT関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。
https://x.com/obg_ocr