UIUXデザイナーが「GPT4o」を活用してウェブサイトをつくってみた

　こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。

　今回は先日OpenAIが発表した新たなAIモデル「GPT-4o」を使ってウェブサイト（LP）を作成してみました。GPT-4oのパフォーマンスを知ること、そしてデザイナーが生成AIとどう関わっていくべきかを探るきっかけにすることが、今回の目的です。

　前提として「GPT-4o」がゼロベースでウェブページを作成することに向いているツールではないと思いますが、チュートリアルの要素と今後の可能性を知るためにあえて取り組んでみました。

GPT-4oについて

　「GPT-4o」の特徴は、モダリティ間の垣根を越えた処理能力にあります。テキストだけでなく、音声や画像、映像データをシームレスに取り扱うことが可能になったため、自然かつリアルタイムの対話を実現させています。

　また、視覚・音声認識の精度が飛躍的に向上し、多言語対応や複雑な文脈の理解力にも長けているため、幅広い用途に活用できそうです。無料ユーザーでも一定の機能を利用することが可能で、有料プランではさらに制限が緩和されるほか、企業向けのサービスも提供されます。

早速生成AIで作成してみる

　GPT-4oにプロンプトを投げて、骨組みから提案してもらいます。ちなみにGPT-4では、URL先を閲覧したり、画像をアップロードしたりすることでそれらを参照／解析することもできます。今回は弊社が今年リリースしたAndroidのアプリケーション「AlterMo」をプロモーションするためのLPを作成してみます。試しに一度あまり情報を与えずに、次のようなざっくりとした情報で提案してもらいました。

　少ない情報のなか、次のように回答してくれました。

　デザインコンセプトとして、ヘッダーやヒーロー、特徴のセクションなど、アプリのLPでよく使用される構成をレイアウトしhtml、CSS、 JavaScriptのコードを書き出してくれます。追加として必要な画像ファイルや、表示するための実装手順も丁寧に教えてくれました。これをローカルでウェブ表示してみます。

　Google Playへリンクされたダウンロードボタンや、SNSリンクなども配置されたシンプルなLPができあがりました。メニューから各セクションへ遷移するスムーススクロールも実装されている点は驚きです。伝えなくてもレスポンシブにも対応していました。少ない情報でも、そのなかでそれなりのウェブページを提案してくれます。