ChatGPTが登場し、GPT-4モデルが発表されてから、WEBデザイナーの仕事は将来、AIに奪われるのか？をテーマに、AIによるHTMLやCSSのコーディングレベルを定期的にチェックしているのですが、GPT-4Vモデルが登場し、かなり良いところまできたのでレポートしたいと思います。

Webデザイン

画像生成AIを使って、まずはWebページのデザインカンプを作成します。
様々な画像生成AIを試したところ、Leonardo.Aiが一番良い感じの画像を生成してくれたので、こちらをベースに進めたいと思います。

HTMLとCSSのコーディング

ChatGPTに上記の画像を見せて、上から順にHTMLとCSSをコーディングするように要望します。
一度にコーディングしてもらうように要望するよりも、パートごとに分けて依頼する方が正しくコーディングしてくれます。
ひとまず、画像は一色だけのダミー画像を使用し、ワイヤーフレームを完成させます。

個々の素材を用意する

個々のパーツ素材の完成度があまり高くなかったので、個別に作成しました。
この作業においては、Midjourneyが一番良い仕事をしてくれました。

素材を置き換え、修正する

デザインカンプにはフッター部分がないので、そちらを追加し、CSSは微調整して、完成させます。

完成

こちらの画像はデザインカンプではなく、ブラウザで表示したスクリーンショットです。人間が手を加えたのは修正だけで、ほぼAIだけで完成させることができました。

総評

Webデザインの知識のない初心者が、上記レベルのWebページを完成させるのは難しいと言えますが、知識がある既存のWebデザイナーであれば、かなり短時間で完成させられるようになるでしょう。
もちろん、プロとしてWebデザインをするには、クライアントの要望に応じた緻密なデザインの調整をするスキルは必須ですが、ひとまずたたき台となるデザイン（＋コーディング）を完成させるだけであれば、かなり重宝するでしょう。