このホームページは、AIやChatGPTをこれから学ぶ初心者が、安心して読み始められることを大切にして作っています。難しい印象にしすぎず、学習記録、ツール導入、画像生成、サイト制作の流れを少しずつ記事にしていく構成です。
この記事では、この時点のHPを自分でも作れるように、最初に決めることと全体の作り方をまとめます。
01
サイトの目的を決める
誰に向けたHPなのかを一文で決める
最初に「誰に」「何を伝えるか」を決めます。このHPでは、AIに興味はあるけれど何から始めたらよいか迷っている初心者に向けて、実際に学びながら使い方をまとめることを目的にしています。
- AI初心者に向けて書く
- 50代・未経験でも始めやすい印象にする
- 学んだことを記録として残す
- ChatGPT PlusやOBSなどの導入手順をまとめる
- 将来は副業やネットビジネスにつなげる
- 専門用語はやさしい言葉で補足する
02
必要なページを決める
このHPは、トップページだけで終わらせず、読む人が目的別に移動できるように複数ページで作っています。
最初に用意するページ
- トップページ
- 自己紹介ページ
- 学習ブログ一覧ページ
- 最初に読む記事
学習に合わせて増やすページ
- ChatGPT Plusの導入手順
- OBSの登録手順
- 画像生成の作成プロセス
- このHPの作り方記事
03
ファイル構成を用意する
HTML、CSS、画像を分けて管理する
このHPは静的サイトです。特別な管理画面を使わず、HTMLファイル、CSSファイル、JavaScriptファイル、画像ファイルを同じプロジェクト内で管理しています。
基本のファイル
- index.html（インデックス）：トップページ
- articles.html：記事一覧
- profile.html：自己紹介
- style.css：見た目の設定
- script.js：動きの設定
- public/images：記事画像
ページを増やすときは、記事用テンプレートをコピーして、新しいHTMLファイルを作ります。そのあと、記事一覧ページにリンクカードを追加します。
04
制作の順番
最初から完成形を目指すより、骨組み、文章、画像、見た目、動きの順番で整えると作りやすくなります。
1目的と読者を決める
↓
2必要なページを書き出す
↓
3トップページを作る
↓
4自己紹介と記事一覧を作る
↓
5個別記事を増やす
↓
6スマホ表示を確認する
↓
✓公開前にリンクを確認する
SUMMARY
まとめ
このHPを作る第一歩は、コードを書くことではなく、目的と読者を決めることです。誰に向けたサイトかが決まると、必要なページ、文章のトーン、画像の雰囲気も決めやすくなります。
まずはトップページ、自己紹介、記事一覧、最初の記事を作り、学習が進むたびにページを増やしていく形がおすすめです。