【保存版】AIで無料でホームページを作成する方法

あなたは、一流のウェブデザイナー兼フロントエンドエンジニアです。添付ファイル、または私が指定したフォルダにある「サイト基本情報.txt」と素材を読み込み、以下の仕様でウェブサイトを制作してください。

1．基本情報と素材をもとに進めてください
会社情報、ページ構成、配色、デザインの方向性、参考サイトは、用意した基本情報を優先してください。資料やメモは、意味を変えずにサイトへ掲載しやすい文章に整理してください。「おまかせ」と記載された項目は、事業内容とサイトの目的に合う形で判断してください。資料にある内容を最初から質問し直す必要はありません。読み取れないファイルや、制作に必要な情報の不足・矛盾がある場合だけ、確認事項をまとめて質問してください。会社情報・連絡先・料金・実績などを推測したり、私の了承なくダミーで埋めたりしないでください。

2．使用技術・静的生成・公開方法を整えてください
Next.js、Tailwind CSS、GSAPを使用してください。公開先は、エックスサーバーのレンタルサーバー「スタンダードプラン」です。Next.jsの静的エクスポート（output: 'export'）を使い、HTML・CSS・JavaScriptなどの静的ファイルをアップロードして公開できる構成にしてください。Node.jsサーバーの常時稼働を前提にせず、画像の表示や下層ページへの直接アクセスも、この構成で動くように整えてください。

package.jsonにgenerateスクリプトを用意し、npm run generateでnext buildを実行して、サイトを静的生成できるようにしてください。公開時は、生成先フォルダの中身（HTML・CSS・JavaScript・画像など）を、SSH接続のrsyncでエックスサーバーへアップロードする手順を用意してください。転送するのは公開用の生成物だけとし、ソースコード・素材の原本・認証情報は含めないでください。静的生成が成功したことを確認してから転送し、実際のアップロードは私が公開を指示してから行ってください。

3．Gitで変更履歴を残してください
ソースコードはGitで管理してください。初期構成ができた時点や、大きな変更の前後など、後から戻しやすい区切りでコミットし、何を変更したか分かるメッセージを付けてください。認証情報はGitに含めないでください。

4．メリハリのあるデザインで、トップページから作成してください
まずはトップページだけを作成してください。基本情報に記載された配色と方向性を軸に、デザイナーとして大胆で、メリハリのあるデザインにしてください。文字の大小、余白の広狭、配色のコントラスト、写真の見せ方を使い分け、視線を集める見せ場と、落ち着いて読ませる部分を明確に作ってください。無難なテンプレートや、同じ大きさのカードの羅列で済ませず、このサイトならではの印象に残る表現を入れてください。事業内容の伝わりやすさ、文字の読みやすさ、操作のしやすさ、スマートフォンでの見やすさも大切にしてください。

5．必要な画像を用意してください
用意したロゴや写真を優先してください。写真やイラストがあると内容を伝えやすくなる箇所で、素材が足りない場合は、デザインの方向性に合う画像を生成してください。画像生成が使えない場合は、必要な画像と用途を知らせてください。生成画像を、実際の店舗・商品・スタッフなどの写真と誤認させない見せ方にしてください。最後に、生成した画像と、差し替え・確認が必要な箇所を一覧にしてください。

6．内容を引き立てるアニメーションを付けてください
GSAPを使い、各セクションの内容や役割に合った、斬新でメリハリのある動きを付けてください。すべて同じフェードインで済ませず、見せ場には印象的な演出を取り入れてください。ただし、読み進める妨げや表示の重さにつながる動きは避け、動きを減らす端末設定にも対応してください。

7．スマートフォンのメニューも作り込んでください
スマートフォンなどの狭い画面では、洗練された3本線のハンバーガーボタンを表示し、開閉に合わせて滑らかに変化させてください。開いたメニューにも、サイトの世界観に合う大胆なデザインとアニメーションを取り入れてください。メニューは閉じやすく、タップやキーボードで迷わず操作できるようにしてください。

8．ページトップボタンとCTAを配置してください
画面右下に、サイトの雰囲気に合うデザインの「ページトップへ戻る」ボタンを表示してください。基本情報と事業内容から、お問い合わせ・電話・予約など、訪問者に促したい行動（CTA）を判断し、ページトップボタンの隣など、分かりやすい場所に配置してください。案内先は、資料で確認できた連絡先やURLを使ってください。スマートフォンでも、本文やほかの操作ボタンを隠さないようにしてください。

9．お問い合わせは、まず電話とメールで案内してください
お問い合わせページを作る際は、ひとまず基本情報に記載された電話番号とメールアドレスを掲載してください。この段階では送信フォームは作らなくて構いません。制作後に、LINE公式アカウントやGoogleフォームを用意すれば、後からリンクやフォームを追加できることを案内してください。

10．ページごとのタイトルと説明文を設定してください
各ページの内容や強みが伝わるタイトルと、メタディスクリプション（ページの説明文）を設定してください。すべてのページで同じ文章を使い回さず、訪問者が何を知ることができるページなのか、自然で分かりやすい言葉でまとめてください。

11．SNSで共有したときの見え方を整えてください
サイトの雰囲気に合うOG画像を作成し、SNSでURLを共有したときに、タイトル・説明文・画像が表示されるようOGPを設定してください。画像内の文字は、小さく表示されても読めるようにしてください。必要に応じてページごとの画像を用意し、画像のURLは本番の公開URLに合わせて設定してください。

12．内容が伝わるHTMLと構造化データを用意してください
各ページに内容を表すh1見出しを設定し、見出しの階層やHTML要素の役割を整理してください。本文や重要な情報は、静的に生成したHTMLに含めてください。会社情報やパンくずなど、サイトに適した構造化データ（JSON-LD）を、実際に掲載する内容に基づいて設定してください。資料にない情報や実績・評価を作り足さないでください。

13．正規URLと検索エンジン向けのファイルを整えてください
各ページの正規URLを示すcanonicalを設定し、robots.txtとsitemap.xmlを作成してください。公開URLと実際のページ構成をもとに、URLの表記を統一してください。サイトマップには公開する正規ページだけを含め、公開時に検索対象のページを誤ってクロール禁止やnoindexにしないよう確認してください。公開URLが不明な場合は、推測で設定せず私に確認してください。

14．迷った方を案内する404ページを作成してください
存在しないURLにアクセスしたときに表示する404ページを、サイト全体の雰囲気に合わせて作成してください。ページが見つからないことを分かりやすく伝え、トップページや主な関連ページへのリンクで、次に進めるよう案内してください。公開先でもこのページが表示され、HTTPステータスコードが404になるように整えてください。

15．できあがったトップページを確認できるようにしてください
パソコン内でトップページを表示できるようにし、開き方を案内してください。パソコンとスマートフォンの表示、リンク、メニュー、アニメーションに加え、タイトル・OGP・構造化データ・検索向けの設定・404ページも確認し、私が確認すべき箇所をまとめてください。私がトップページの内容とデザインを了承してから、残りのページを制作し、各ページにも同じ要件を反映してください。この段階では本番に公開せず、今後も同じ作業フォルダで修正を続けられる形で保存してください。