ページ制作練習のコンテンツをChatGPTに書かせよう

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

03で「タイトルに大見出しがあり、本文の中に３つの章があり、3つの章の中にもそれぞれ節が3つづつあるエッセーをhtmlでかきます。文書構造をおしえてください。」と言ってhtmlのセマンティックな構造を描いてもらったのですが、今度は同じ構造で復習のために同じ構造のデバイス会社の商品紹介ページを作ってもらいました。

教材コンテンツを架空のブランドと商品で作ってもらった

いつも使っている教材がページ名Apple、Macの章にはMackbookなど３つの商品、iPadの章にも商品が３つ、iPhoneの章にもそれぞれ商品が３つあります。つまり上の構造と同じ文書構造です。個人的に使ってるものなので公開するとなると実物のブランド名や商品名を使うのは躊躇します。そこで架空のブランドと架空の商品にマルっと置き換えてもらいました。

Appleベースのコンテンツをコピペして、「htmlのセマンティックなアウトラインを書く教材を作成します。Appleの社名をオリジナルなブランド名にしてその商品の名前をラップトップ、タブレット、モバイルでそれぞれオリジナルな商品名にしてリライトしてくれませんでしょうか？」と質問。

見事なウソップブランドと商品が爆誕！

その答えで見事なウソップページコンテンツが出来上がりました。が、ちょっと捻りを効かせて2033年発売のラップトップ３種、タブレット３種、モバイル３種でお願いしてみました。

各商品の画像をMidjourneyに書いてもらった

またchatGPTに書いてもらったコンテンツの各商品画像とページトップに配置するヒーローイメージ（日本ではよくキービジュアルなどど呼んでいるあれ）をMidjourneyに書き出してもらうためのプロンプトも作ってもらった。
プロンプトは長くなるので省略します。

以下にchatGPT作ウソップページコンテンツとMidjourneyが描き出したchatGPTのウソ商品とヒーローイメージの画像を貼っておきますので、教材にどうぞ！