盛って楽して、サイト運営MoteRakuを使って投稿ページを作ってみた！プロンプトだけでは難しかったけど、ある工夫で一瞬で完成

前回は404ページを作成しましたが、今回は投稿ページのデザインに挑戦です。

MoteRakuにはAI機能も用意されていますが、利用するにはAPIキーの設定が必要です。

今回はAPIは使わず、普段利用しているChatGPTでプロンプトを作成し、HTMLとCSSを書いてもらう方法で進めました。

まずはChatGPTに投稿ページを作ってもらった

最初に、こんな投稿ページにしたいというイメージをChatGPTへ伝えました。

「和風の雰囲気」
「読みやすいデザイン」
「少し他とは違う印象にしたい」

など、イメージをできるだけ具体的に伝えながら、HTMLとCSSを作成してもらいます。

そして、そのコードをMoteRakuへ貼り付けて反映。

……のはずだったのですが、なかなか思うように反映されませんでした。

1時間試行錯誤…でも反映されない

「このコードなら大丈夫かな？」

「じゃあ、この書き方なら？」

ChatGPTへ何度も修正をお願いし、そのたびにMoteRakuへ貼り付けて確認しました。

しかし、なかなか思ったように反映されません。

1時間ほど試行錯誤しましたが、MoteRakuでそのまま使えるコードを作ってもらうことができませんでした。

このデータを読み込ませたら一瞬だった

/

そこで試したのが、MoteRakuのプラグインファイルをChatGPTへ読み込ませる方法です。

\

「このプラグインの仕様に合わせてコードを書いてください。」

という形でお願いしてみました。

すると、それまで何度修正しても反映されなかったコードが、一瞬で反映できる形になりました。

やはり、AIもプラグインの仕様やルールを理解しているかどうかで、出力されるコードの精度が大きく変わるのだと実感しました。

実際に作成した投稿ページ

そして、投稿ページのイメージを伝えて作成してもらったデザインがこちらです。

テーマそのままのデザインでは出せない雰囲気も、AIへイメージを伝えることで形にできるのは、とても嬉しいと感じました！

実際に使ってみた感想

今回使ってみて一番感じたのは、

「反映できるコードさえ作ってもらえれば、本当にすごい。」

ということです。

HTMLやCSSを一から書けなくても、

「こんな雰囲気にしたい」
「もっと和風にしたい」
「カード型にしたい」

といったイメージを伝えるだけで、かなり理想に近いデザインを作ることができます。

一方で、今回のようにうまく反映されない場面では、

「なぜ反映されないのか」
「どこを修正すればいいのか」

をAIへ伝えるために、多少はHTMLやCSSの知識があったほうが、よりスムーズにやり取りできるとも感じました。

最低限の知識があると、AIへ指示もしやすくなり、完成までの時間も短くなると思います。

/

初心者の方はぜひこのやり方でお試しくださいませ。

\