プロトタイプの制作

今回は、現在開発中のアプリのUIの動作サンプル用の、HTMLとCSS/JSを使用して構築されたプロトタイプを紹介します。webflowとChatGptさんの協力を得られたのでせっかくなので対決させてみました。

以下に、ページの機能とデザインの特徴を簡体に説明します。

機能:

このページは、3Dキューブとナビゲーションメニューで構成されています。キューブは4つの面を持ち、ユーザーは特定のボタンをクリックすることで、回転を開始することができます。

特徴:

3Dエフェクト: キューブは3D空間で回転するアニメーションがあり、立体感を与えています。

このページの目的や用途は現在開発中のアプリサービスのUI用に作成したもので、インタラクティブな要素と魅力的なデザインにより、ユーザーに楽しさや興味を提供することが主な目的となっています。

実際にアプリで使用するデザインはニューモフィズムを採用しており、メインコンテンツが地図のため、長年のトレンドであるパララクスや軽快なアニメーションUIは相応しくないと考え、3D、空間感を意識したものを模索しました。

魅力的な3Dエフェクトを組み合わせたインタラクティブな体験を提供するため、各々キューブの面を操作することで、ページ内での異なる操作や各種コンテンツへのアクセスを可能にします。（予定）

キューブの回転やナビゲーションメニューのクリックなど、ユーザーとのインタラクションの面で開発者との認識合わせのため、まずはwebflowを用いてプロトタイプとして作成しました。

特定のコンテンツや情報を提示するためのプロトタイプやデモンストレーションとして使用する場合もwebflowを活用することで粘土をいじるように作成できるのは便利です。

イメージに似ているソースをcodepen/githubなどで検索しても見つかれば良いのですが、ない場合も多々ありますよね。

探す時間に半日かかってしまったりすると流石にコストを気にしてしまいます。

webflowでのプロトタイプ

できたプロトタイプはこちらです。

 jsファイルはwebflowのデフォルトソースをそのまま格納しているので、非常に長く見えますが、実際のjs機能はボタンを押したらどうするか？くらいしか機能を持たせていません。

GPTなどのAIを使用しうまくプロンプトを駆使すればもっと早くできるのだろうか、、、

と思い、試してみたのが以下になります。

指示

/////

一辺が縦800px横380pxのA,b,c,dの4面の赤、青、黄色、緑の直方体があり上面、下面は空とする。

ブラウザの下部に固定されたナビゲーションa,b,c,dの4つのボタンが配置され、それぞれを押す毎に直方体が右回転し押されたボタンに対応し正面に配置されるとする。

アニメーションとしては90%縮小してa,b,c,dそれぞれ該当する面が正面に配置される際は100%の大きさに戻るものとする。

Aからdの順の場合にボタンを押された場合は右回転、dからaの順にボタンが押された場合は左回転し、それぞれ押されたボタンに対応する面が正面に配置される。

これは3Dを表現するUI画面です。

そのソースをhtml/css/jsを使って書いてください。

/////

この指示まで行き着くのになんやかんやで3,4時間かかりました・・・・・・

GPTでのプロトタイプ

できたソースはこちらです。 

See the Pen Untitled by Rialto (@tomohito-kuniyasu) on CodePen.

ちなみに最初に書いた指示はこんな感じです。

//////

a/b/c/dの4面の適当な各色の立方体があり、下部にそれぞれに対応したボタンが配置されている。

それぞれを押す毎に90%縮小してa/b/c/dの面が回転して正面に配置されるとする。

正面に配置される際は100%の大きさに戻るものとする。

立方体は一辺800px横380pxとし上部、下部はなしとする。

そのソースをhtml/css/jsを使って書いてください。

//////

やはり適当で、雑な指示だと結果に答えてはくれません。

主語、述語をなるべく省略せずに細かい仕様を伝えるのがコツのようです。

AI技術恐るべしと思いますが、このケースで言うと直方体（長方形）の縮小が省かれています。

これは、この後色々と試してみましたが、

申し訳ありませんが、直方体の縮小と正確なアニメーションを含む要件は、テキストベースのコミュニケーションだけでは実現するのが困難です。直方体の回転やアニメーションを実装するには、JavaScriptの詳細なコーディングとアニメーションライブラリまたは3Dエンジンの使用が必要です。以下は、回転と面の切り替えに関するHTMLとCSSのソースコードの例ですが、直方体の縮小と正確なアニメーションは含まれていません。

ということで、GPTさんには断られてしまいました。

はい、私もこれ以上言葉だけでうまく伝えられそうになかったため諦めることにしました。

今回はwebflowが勝ちという印象ですが、今後ますますGPTの精度があがると思いますのでプロンプトにより慣れていければなと思います。