【コーディング初心者向け】AI初心者のデザイナーがGeminiを使ってWebページを作成してみた！（音声ガイド付き）

「よくある質問」ページの作成をGeminiと“協働”してみた

私は前職まで、AIを活用しながらの業務を行った経験がありませんでした。今回は私自身の勉強も兼ねて、ページ作成でGeminiのCanvasに力を借りてみました。

プロにお願いするのが一番！という場面ももちろんありますが、軽微なサイトであれば社内で完結したり、自分で作りたいという方もいますよね。また、十分な知識がない中で、WordPressなどのCMSを扱わなければならないスタッフの方も少なくないと思います。

ただでさえ時間が奪われるウェブデザインやコーディング…。なんとか効率化したい！と思われる方も多いのではないでしょうか？「AIの民主化」が進む昨今、AIの力を借りれば誰でも簡単にページを作ることが可能です。

用意するもの

• 元となる質問と回答のデータ

POINT：こちらはスプレッドシートでも良いのですが、PDFやJPGで画像化したものの方が精度が高くなります！

スプレッドシートリンクをGeminiに共有してみる

試しにスプレッドシートをもとにしたもので作ってもらうと…

１回のやりとりでこのようなページを作ってくれました！HTMLファイルをサーバーにアップロードせずとも、GeminiのCanvas上でプレビュー表示ができ、使用感がわかるのはとてもありがたいですよね。

しかも、回答をクリックする前と開閉後の矢印の向きなど細かい部分も反映してくれています！

しかし…スプレッドシートのリンクだと内容が少し異なっています。

スプレッドシートをPDF化したものを添付してみる

そこで、スプレッドシートをPDFファイルに変換したものを送ってみると…

回答はぜひ、こちらでご確認ください（笑）

見出しも質問内容も正確に反映してくれました！

こういう部分の指示、自分でやるとかなり面倒なんですよね…もちろん検索すればコピペ可能なスニペットを用意してくれているサイトもありますが、手間を極限まで省いてくれるAIは本当に便利です。

生成されたコードをサイトに埋め込む

次に、生成してくれたソースコードをサイトに埋め込みます。

↓

完成！…と思いきや。

カテゴリの見出し下のラインが消えてしまっています。これはお使いのCMSなどの環境によっては、下記のようにメインのHTMLとは書き込み先が異なる場合があったり、微妙な調整が必要になるためです。もちろん、「◯◯（お使いのサービス）に反映されるようにコードを書き換えて」などとGeminiにお願いすればきちんと反映してくれますのでご安心ください！

また、このページはシンプルなのでここまで短時間で短時間で作成することができましたが、表などの場合はスマホ対応にするための追加指示（プロンプト）が必要になる場合もあります。

こんな感じで、メインのHTMLとは別途記載が必要なことも。コード内の<style>や<script>の書き込み先に注意が必要な場合があります。

完成！

…そうして、ブラッシュアップしていくと、こんなページができました！

細かな指示を行い、アンカーリンクメニューの設置や、質問開閉後のタイトル色を変えることもできました。

いかがでしたでしょうか？“Geminiと会話するだけ”で、簡単にページ作成をすることができました！

ぜひ皆さんも試してみてくださいね。

最後に

余談ですが、こちらの記事の音声ガイドは「NotebookLM」で作成しています！

この記事のドキュメントを読み込ませるだけで対談形式の音声ガイドを作ってくれました。自分の記事を客観的に振り返ることもできて興味深い経験になりました。こちらもぜひお聞きください！

▼音声ガイドはこちら！（冒頭にあるものと同じです）

関連記事：資料はもう"聞く"時代？ Google NotebookLM「音声概要」とAI音声ツールの賢い選び方