“ChatGPT“と”Xcode“を使ってバイブコーディング Vibe codingをする日々が続いています。
先日、”ChatGPT Plus”にアップデートした以降、更に拍車はかかってバイブコーディング Vibe codingが止まりません。
最初の頃は、アプリの機能にフォーカスして、”ChatGPT Plus”にプログラムの実装を手伝ってもらっていたのですが、ここ最近はアプリのUIデザイン作りをアシストしてもらっています。
というのも、先日開催された”WWDC 2025“で使われたアップルの透明なロゴを見て、多くの開発者が次は昔の”Aqua”の復活だね!と直感したはず。そうか、次の10年は、ユーザの操作を邪魔しないUIが主流になるはず!ということで、”WWDC 2025″の基調講演を観る前から、その方向性で既存の自作アプリのUIを大改造することにした次第です。
Screenshot
そんなわけで、”ChatGPT Plus”とのコラボ開発では、とにかくセンスの良いUI画面の実現を目指して奮闘しているところです。
そんななかで、気が付いたことがいくつかあるので、箇条書きでご紹介します。
- ChatGPTって、アップル社が手掛けるUIを再現するにはどうプログラムすれば良いのかを熟知している。恐らく、過去のWWDCやサンプルコードなどを解析して技法を蓄積しているんじゃないかなあ。
- SwiftUIに関しては、私のような素人プログラマーにはとても真似ができないレベルの高度なUI構築の方法論や相性の良い組み合わせなどを理解している。(ChatGPT Plusが提供するコードを見てみると、こんな複雑で知見に富んだコードは自分には絶対無理だと痛感します。)
- 一発で期待通りの結果にならなくても、とことん問題解決に向けて取り組んでくれる。勿論、空振りする場面もあるけど。
- 個人的に、これまで愛用していたListやFormといった構造は、高度で洗礼されたUIを構築するには全く向いていないことが分かった。ユーティリティアプリのUIなどは、基本、ScrollView構造で組み立てていくのがベストソリューションのようです。とは言え、List構造じゃないと実装が難しい機能もあるので、UI、機能どちらを優先すべきか悩ましい場面もあります。
- UIレイアウトをChatGPTといっしょに組み立てていく過程では、表現力のありなしが大きく左右する。ChatGPTに、如何に自分が描いているUIのイメージを伝えるのかが勝負どころです。勿論、言葉では伝え切れない内容は、スクリーンショットなどをアップロードして具体的な箇所を示す、っていう技もあります。
- ChatGPTは、ユーザとの会話や扱ったコードをリスト管理で記録しているそうです。なので、前にデザインを変えてもらったxxxxというビューと同じようなテーストで、といった要領でコードの生成を依頼できます。実際、ChatGPTから、そういう主旨の回答をもらっているので間違いないと思います。この域は、まさに”HAL 9000″ですよね。
最後の表現力に関しては、まだまだ試行錯誤をしている部分もありますが、ChatGPTと過ごす時間が増えるほどに、どうすればChatGPTに伝わるのかが少しづつ分かってきたような気がします。そういう意味では、会話力はバイブコーディング Vibe codingに欠かせない道具だと感じています。
で、実際に試してみると、
このビューを以前対応してもらったWeatherReportのCurrentWeatherOverViewと同じようなテーストでデザインを変更してもらいたんだけど?
凄すぎる! ちゃんと記憶しているだけじゃなくて、どのような方針や効果を狙ったデザインに仕上げたのかも把握しているんですね。
ChatGPT
最後に、ごく一部のサンプルですが、もともとのダサいUIと、ChatGPTに助けてもらいながら作り変えたUIのBefore & Afterをご覧下さい。
Before
After
Before
After
サンプルで紹介したのは、かなりシンプルなUIレイアウトをベースに作り替えたものなので、びっくりするような変化はないかもしれません。でも、作り替えた新しいUI画面を基礎にすれば、新しい”Liquid Glass”を適用しやすくなるはずだと思っています。UIデザインは一夜にして完成版は作れません。地道なステップを踏んで改良していく分野だと感じています。
コメント