「自分でホームページを作りたいけど、プログラミングの知識がなくて不安…」 そんな悩みを抱えている方は多いはずです。従来のホームページ制作は、HTMLやCSSの知識、デザインのスキル、さらに文章作成まで必要で、初心者にはハードルが高いものでした。
しかし、生成AIであるChat GPTを活用すれば、文章作成だけでなく、サイト構成やデザイン案の作成までスムーズに行えます。
この記事では、Chat GPTを使って自作ホームページを効率よく作る方法や手順を具体的に紹介します。
Chat GPTでホームページを作るメリット
AIを活用すると、初心者でも短時間で質の高いホームページを作ることができます。
1. 作業効率が格段に上がる
文章や構成案をAIに生成させることで、従来なら数日かかる作業も数時間で完成できます。タイトルや見出し、導入文も自然な文章で作れるため、修正の手間が少なくなります。
2. デザインや構成案もサポート
• ページのレイアウト案
• 色やアクセントカラーの提案
• 写真やイラストの選定
AIに相談するだけで、初心者でもプロっぽいサイトが作れます。
3. SEOや読みやすさも考慮
SEOキーワードの挿入や、見出し構成、文章の読みやすさもAIで提案可能です。 これにより、検索エンジンからの流入も期待できます。
Chat GPTでホームページを作る
ステップ1：構成案を作る
まずはサイトの目的やターゲットを整理します。
• トップページに載せる内容
• サービス紹介やクラス情報
• 内容にあった雰囲気、イメージ
これを元に、Chat GPTに「これでホームページのhtml、cssコードを作成して」と入力します。
そうするとhtmlと書かれたものとcssと書かれたものの文字列が大量に出力されます。これを各々メモ帳などに保存し、拡張子を「.html」、「.css」として保存します。
その後エクスプローラーから作成した「○○.html」をクリックしてブラウザで開きます。すると生成されたホームページの概形ができます。
ステップ2：構成を考える
次に、HPの構成を考えていきます。
概形はできましたが、どんな内容を載せるかを考えなければいけません。
先ほど生成された「html」と「css」のうち、HPの構成をしているのが「html」です。
そのためここでは「html」を修正していきます。
空手道場のHPを例にすると、
- タイトルは～がいい
- 構成は「この道場の特徴」、「指導者紹介」、「料金と時間」、「アクセス」にする。
- HPの最後に問い合わせフォームを入れる
- 項目ごとにページを変える
など、具体的にどんな構成にしたいのかを箇条書きし、AIに「これらを満たすようにhtmlを修正して」と指示します。
すると先ほど作成したhtmlの修正版が出力されます。これを先ほど同様にファイルに上書きしてブラウザで開きます。このようにして修正と確認を繰り返します。
ステップ3：デザイン提案
構成が整ったら、AIにデザイン案を提案してもらいます。自分のイメージに合わせるには具体的に説明する必要があります。
例えば、
- 色の配色やフォントの選び方 → 背景を黄色にしてフォントは明朝体で
- レイアウトのアイデア → 「この道場の特徴」については横一列で3つの写真を
並べ、その各写真の下に説明文を入れたい
- 写真やイラストの配置 → 写真は二列にならず、一列で横に並ぶ形にしたい
このように少しずつ指示をして修正を繰り返すことで自分のイメージに合わせていくことができます。
色や配置、文字サイズなどの調整を担うのは「css」のほうなので、修正の指示をして出たコードは主に「css」となります。
ステップ4：実際にホームページを組み立てる
作成した「html」と「css」ファイルを公開するには、サーバーとドメインが必要となります。詳しくはchatgptに「公開するにはどうすればいい？」と聞けば答えが返ってきて、公開までの手順をわかりやすく教えてくれます。
ちなみに無料でサーバーを使用する場合は「Github」というサイトがおすすめです。使い方の流れもchatGPTが教えてくれるので、少し面倒ではありますがお金がかからないし選択肢としてはありだと思います。
私が初めて生成AIでホームページを作成したのは、今通っている道場に新たに新クラスができたからでした。いかに短期間で作成すべきかを色々考え、AIと相談をしながら上記のようにトライ＆エラーを繰りかえし、一日1時間ちょっとで約一週間で完成しました！
この経験からわかったことは、進行で詰まったらすぐにAIに聞くことです。自分でちょっと考えてわからなければすぐに聞くことで隙間時間でもスムーズに制作することができます！
なかには「すぐにAIに聞くんじゃなくて自分で考えてどうしてもわからない時に聞くほうがいい」と思うかたもいるかもしれません。
しかしAIの回答は正確度が日々進歩してきてます。そのため最短で作成を完了するにはすぐに聞くほうが効率がいいです。
まとめ
Chat GPTを使えば、プログラミング知識がなくても自作ホームページを効率よく作成できます。
- 構成案や文章作成はAIに任せる
- デザイン案もAIで提案してもらう
- SEOや読みやすさも意識して最適化
ポイントはとにかく指示を出し、修正してもらって点検してって感じのトライ＆エラーをひたすら繰り返すことです。
まずは簡単なホームページから試し、少しずつ内容やデザインを追加していき、自分なりのオリジナルHPを一つ作成してみましょう！
コメント