AIでホームページを作ってみる

Geminiで簡単ホームページ作成

最近はホームページ作成もAIが簡単に行ってくれるようになってきました。

ホームページ作成に特化したAIサービスもありますが、汎用性の高いGeminiを使っても結構しっかりしたホームページを作成してくれます。

具体的にどんな風に作るのか、どんなものが出来るのか見てみましょう。

必要なもの

• Gemini（基本的に無料でもできます、出力されるもののクオリティに多少差があるかもしれません）

• 独自ドメイン（お名前ドットコムやXserver、ムームードメインなどで取得します）

• レンタルサーバー（Xserverやさくらのレンタルサーバー、ロリポップなど）

以上があれば大丈夫です。
ただ、慣れていないと、ドメイン取得やレンタルサーバーの契約の部分から戸惑うかもしれません。

https://www.kurasuke.tokyo/ai-lab/gyosei-template.html

こちらが出力したサイトです。
そこそこしっかりしたものができてきますよね。
一応、行政書士事務所向けのサイトとして作ってます。

具体的なプロンプトは下記になります。

あなたは熟練のWebデザイナー兼フロントエンドエンジニアです。

以下の要件に基づいて、行政書士事務所のランディングページ（1ページ完結型HP）を作成してください。

コードはHTML5とCSS3を使用し、1つのHTMLファイル内に<style>タグでCSSを記述してください。

### 1. サイトの目的

* 地域の見込み客からの「無料相談予約」や「お問い合わせ」の獲得。

* 「信頼感」「誠実さ」と同時に「親しみやすさ」を伝える。

### 2. デザイン要件

*配色**: 「メインカラー」を基調に、見やすく配色してください。

*レスポンシブ対応**: スマホでもPCでも美しく表示されるようにしてください。

*フォント**: 日本語が美しく見えるGoogle Fonts（Noto Sans JP, Noto Serif JPなど）を使用してください。

### 3. 掲載するコンテンツ構成

1.  ヘッダー: 事務所名、電話番号、お問い合わせボタン。

2.  ヒーローエリア: キャッチコピー、アクションボタン（CTA）。

3.  お悩み解決: 「こんなお困りごとはありませんか？」という共感パート。

4.  最新情報・コラム: microCMSから取得したデータを表示するエリア（詳細は後述）。

5.  当事務所の強み: 3つの強みをアイコン付きで紹介。

6.  取扱業務: 業務内容をカード形式で紹介。

7.  代表者プロフィール: 代表者名と、信頼感のある挨拶文。

8.  ご依頼の流れ: 問い合わせから完了までのステップ。

9.  無料相談予約: Googleカレンダーの予約スケジュールを埋め込むためのエリアを作ってください（iframe用のプレースホルダー）。

10. 事務所概要・アクセス: 住所などの基本情報。

11. お問い合わせ: 電話番号と、Googleフォームを埋め込むためのエリアを作ってください。

### 4. 技術要件（microCMS連携）

「最新情報・コラム」セクションの実装には以下の要件を守ってください。

*API連携**: 入力された「microCMS サービスID」と「APIキー」を使用して、指定された「エンドポイント名」からデータを取得するJavaScript (fetch API) を書いてください。

*表示内容**: 取得した記事の「日付 (publishedAt)」と「タイトル (title)」をリスト形式で3件まで表示してください。

*クリック動作**: 記事データに「url」というフィールドがある場合はそのURLへリンクし、ない場合はリンクなしとしてください。

*エラーハンドリング**: 取得に失敗した場合は、「現在、お知らせはありません」等のメッセージを表示する処理を入れてください。

### 5. 入力データ（ここに入力された内容を反映してください）

* 事務所名: 【 例：行政書士篠原事務所 】

* キャッチコピー: 【 例：建設業許可とDX支援で、あなたのビジネスを加速させる 】

* メインカラー: 【 例：知的なネイビーと、アクセントに明るいオレンジ 】

* 強み:

    1. 【 例：ITに強い（電子申請対応） 】

    2. 【 例：土日祝も相談可 】

    3. 【 例：スピード対応 】

* 取扱業務: 【 例：建設業許可、会社設立、遺言・相続、IT導入補助金 】

* 代表者名: 【 例：篠原 博之 】

* 電話番号: 【 例：03-1234-5678 】

* microCMS サービスID: 【 例：kurasuke-lab 】

* microCMS APIキー: 【 例：xxxxx-xxxxx-xxxxx 】

* エンドポイント名: 【 例：news 】

### 6. 出力形式

* 完成された1つのHTMLファイルとしてコードブロックに出力してください。

* コピー＆ペーストですぐに使えるようにしてください。

           

上記のプロンプトの「4.入力データ」の部分をご自身の情報に書き換えて送信してください。

そうすると下記のようなコードを書いてくれます。

これを右上のコピーボタンでコピーして、Windosならメモ帳アプリなどに張り付けて、ファイル名の拡張子を「.html」に変えて「index.html」などにして保存します。

これをレンタルサーバーにアップロードすることで、ホームページとして公開されます。

また、このプロンプトではGoogleMapで事務所の地図、Googleフォームで問い合わせフォーム、microCMSというツールでお知らせを表示することも前提に作ってますので、そのあたりの設定も必要になります。

公開の手順や、細かい修正に関してはやはりある程度のITの知識は必要になってくるのですが、この辺もやる気があればAIに質問しながらでも十分可能です。

細かい手順についてはまた後程、追記していきたいと思います。