UIデザインはChatGPTに作らせよう

左脳の無い人のための超簡単フロントエンド開発06

つい、人の作ったかっこいいサイトデザインはパクりたくなるもんです。しかしそこはデザイナーとしてのプライドが邪魔してそのままパクるわけにはいかない。そんな時はこんな方向でパクリ元にインスパイヤされた（原型を留めていないことも方が多いが！）かっこいいサイトUIデザインを作ってしまいましょう。

まずパクリ元のサイトをスクロールでスクショ

スクロールスクショはchromeの拡張機能などを使います。
おすすめはこれ→GoFullPage - Full Page Screen Capture

パクリ元サイト例

今回はサンプルとしてこちらのサイトをスクショします。
Markaware

スクショをMidjourneyにアップロード

Midjourneyの使い方は数多くのNoteが書かれていると思うので、
「Midjourney 使い方」などで検索するとわらわら出てくると思います。

discodeの/describe

discode上のMidjourneyサーバー上には名前がnwebies-29やnwebies-の後に数字がついてるチャンネルがあるので、どこでもいいので入ります。
そこで/desとか打つと、/describe　imageというのが出てきて、

こんな画面になるので、ファイルアイコンの上にさっき撮ったサイトのスクショをDrag and Drop します。returnキーを押すとすると画像がアップされプロンプト４パターンが書き出される。下記の画像参照。

４つの番号をクリックすると下記のようなモーダルが立ち上がり、右下の「送信」ボタンをクリックすると描画が始まる。

描画されたUIは元サイトとは似ても似つかないものに描画される

しかもサイトの体をなしてないです！こんな感じ。初心者が作った雰囲気サイトみたいな感じ。

サイトっぽくするためにchatGPTにプロンプトを書かせる

詳しくサイト構成を含めて依頼しましょう。以下、依頼例です。
「下記はサイトのUIを画像生成AIに描いてtもらうためのプロンプトです。画像生成AIのプロンプトとして適切なものになるような英文に翻訳してください。 ティーン向けファッションのECサイトのシングルページのPC用のシングルページのUIを作ります。構成は左上にサイトロゴその横にナビ その下には、ファーストビューで表示される全面イメージ画像を配置してください。 スクロールするとおすすめ商品写真がが一列に４つづつ並んでおり、押し返して８行続きます。一番下に「もっと見る」リンクボタンをつけてください。商品写真の下にはキャプションが２行づつ入っています。 その下には、ニュースへのリンク、配送方法へのリンクなどのサイドコンテンツが並びます。一番下にはフッターナビ、会社概要へのリンク、コピーライトの表示があります。」

chatGPTが作ったプロンプトがこちら