生成AI「Gemini」で 簡易HPを 作成する方法

そうですね。この段階で問題があるようであれば、「別案も提案してください」などと入力すると、別のデザインパターンが生成されます。

スゴいですよね。バージョンを経るごとにこちらの意図をより正確に把握できるようになってきているのだと思います。

基本構造はもうできています。もし問題があるようであれば、

・サービス紹介を3つから5つに増やして
・実績セクションを追加して

などと、指示すればつくりたいページにより近づけていくことができます。

大丈夫です。メディアクエリとJavaScriptの実装も含めて生成してくれます。

そうですね。今は日本語でも入力可能になったので扱いやすくなりました。今回はヒーローセクションで使う背景画像を生成していきます。

そうですね。「チームがミーティングしているイラスト」「オフィスビルの写真風」など、具体的につくりたいイメージを伝えれば生成することができます。

Geminiの画面からコードをコピーするだけでOKです。HTMLとCSSが一体になったコードなら、1つのファイルに保存するだけで完成です。

表示が崩れている箇所があれば、その部分のスクリーンショットをGeminiに見せて「ここを修正してください」と指示することもできます。慣れてしまえば、プロンプトを考える時間も含め15分ほどで制作できると思います。

十分かどうかは人や状況によって評価が分かれるかと思いますが、簡単なプロンプトだけで、ここまでできるということを感じてもらえればと思います。

基本的な流れは同じになります。ただ、当然ながらプロンプトを調整する必要があります。オススメは具体的な情報を箇条書きで伝える方法です。会社名、サービス内容、連絡先、カラーコードなどを具体的に伝えることで、自社に合ったHPを生成できます。

それは期待値が高すぎるんだと思います。生成AIはこちらの意図を勝手に汲んでつくってくれるツールではなく、こちらが入力するプロンプト次第で生成される結果が大きく変わります。道具である以上「生成AIにすべておまかせ」ということではなく、HP制作の基本を身につけたうえで使っていく必要があります。つまり、自力でつくろうと思えばつくれるかどうかが生成AIを使いこなす上でのポイントになります。

生成AIに任せっきりでは、テンプレート通りの他と同じようなサイトしか出来上がらないということになってしまい、結果的に「使えない」という評価につながってしまいます。そういった意味で、まずはHTML/CSSの基本やデザインの原則を身につけたうえで生成AIを活用していく必要があります。

どんな構成にすれば見やすいのか？
なぜこのデザインが選ばれるのか？
そしてそれらを実現する方法とは？

これらを理解することが、生成AIを使いこなす第一歩となります。