YPO industryのデジタルルーム

Profile

YPOindustry

フォローする

【ChatGPT×ホームページ作成】ChatGPTと0からホームページを作る①

テーマ：初めてのホームページ作り(384)

カテゴリ：ホームページ作成

皆様こんにちは！

これまでワードプレスとChatGPTでホームページ作ってきましたが、
「ぶっちゃけワードプレスいらなくね？！」
となったので、０からもう一度作り直します！

↓簡単にホームページ作成したい人はおすすめ！↓

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

はじめてのブログをワードプレスで作るための本［第3版］ [ じぇみじぇみ子 ]
価格：1,980円（税込、送料無料) (2025/2/20時点)

楽天で購入

ChatGPTで0からホームページ作成！パート1

ホームページを作るぞ！と意気込んで、まずはサーバーの準備からスタート。

今回はWordPressを使わず、手作業でHTMLとCSSを組みながらサイトを作る。

ChatGPTを相棒に、ゼロからのホームページ作成に挑戦する日々を記録していく。

✅ パート1の概要

サーバー内のファイル構成を確認・作成

ヘッダー・フッター作成（スマホ向けメニューボタン付き）

トップ画像挿入（スマホ対応）

📁 サーバー内のファイル構成を確認＆作成

まずは基本の「ファイル構成」から。ChatGPTに「ホームページを作るなら、どんなフォルダ構成がいい？」と聞いてみた。


/public_html/  ← ここにサイトのデータを配置
├── index.html  （トップページ）
├── css/
│   ├── style.css  （デザイン用のCSS）
├── img/   （画像フォルダ）
├── js/   （JavaScript用フォルダ）
├── includes/
│   ├── header.html
│   ├── footer.html

なるほど、これは使いやすそう！ということで、この構成に沿ってフォルダを作成。

🛠 ヘッダーとフッター作成！フッターにスマホ向けメニューを追加

ヘッダーとフッターは、サイト全体で共通して使う部分。毎回コピペするのは面倒だから、共通パーツとして「includes」に分けることにした。

ChatGPTに「HTMLのヘッダーとフッターを共通化する方法」と聞くと、PHPの include を使う案を提案された。


<?php include 'includes/header.html'; ?>

これならHTMLを分割しても管理が楽になりそう！さっそくヘッダーとフッターを作って、各ページで読み込むようにした。

📱 スマホでも見やすいメニューボタンをフッターに追加

次の課題はスマホ対応。スマホだとフッターのメニューが小さくて押しにくい！

ChatGPTに「スマホ対応のフッターメニューを作りたい」と相談。Flexboxを使って、アイコン付きのメニューを作る方法を教えてもらった。CSSとHTMLを修正して、スマホでもタップしやすいナビゲーションを追加！

しかし、ここで エラー発生……！

なぜかフッターが表示されない。PHPの include がうまく動いていない？

ChatGPTと試行錯誤しながら、 「パスの指定ミス」

🖼 トップ画像を挿入！スマホ対応で悩む

サイトの第一印象を決めるトップ画像を設置！

しかし、画像のサイズ調整が意外と大変で、PCだと良くてもスマホだとレイアウトが崩れる問題が発生……。