このページの目的
このページは“完成した作品”というより、育てていく前提の拠点です。 ブログみたいに毎回きれいな記事を作るというより、 少しずつ更新しながら「自分の居場所」を整えていくイメージで運用します。
なので、ここでのゴールはシンプルです。 見た目がそれっぽくて、リンクが正しくて、読みやすくて、更新できる。 この4点が揃うだけで、もう個人サイトとして十分に成立します。
- はじめに「読むメリット」を提示する
- リンクや画像を“説明付き”で配置して不自然さを消す
- 長文でも読み疲れないように見出しと余白を整える
- 更新の導線（次に読む場所）を用意する
Neocitiesとは何か（ざっくり把握）
Neocitiesは、HTML/CSSで作った静的なWebページを公開できるサービスです。 「サーバーを借りる」「ドメインを買う」「難しい設定をする」みたいなところをすっ飛ばして、 まずはファイルを置いて公開するところまで一気に進められるのが魅力です。
公式サイトはここです：
Neocities（公式）
公式チュートリアルも用意されています：
Neocities Tutorials（公式）
なお、公開サービスを使う以上、念のため 利用規約（公式） も一度は目を通しておくと安心です（細かいことを全部覚える必要はありません）。
“不自然なページ”になりがちな原因
最初のサイトが不自然に見えるのは、センスの問題というより 文章の役割が決まっていないのが原因なことが多いです。 たとえば、コード例がそのまま並んでいると「練習の貼り付け」に見えます。
逆に言えば、同じ要素（見出し・リンク・画像・リスト）でも、 意味のある文脈に置けば急に“記事”になります。 このページでは、各要素に役割を持たせる書き方をします。
（例）リンクは「説明付き」にする
いきなりURLだけ置くと唐突ですが、「なぜそのリンクがあるのか」を1文添えると自然になります。 たとえば、学習の出発点として公式を案内するなら、 Neocities公式 を「このサイトを使っている理由」と一緒に書く、という具合です。
HTMLは“文章の設計図”だと思うと迷いにくい
HTMLはデザインツールではなく、文章の構造を決めるための言語です。 ざっくり言うと、見出し → 段落 → 補足（画像/リスト/リンク）の順で組むと、 多少デザインが素朴でも読みやすいページになります。
このページでは、読み手が迷子にならないように
<header>（導入）、
<main>（本文）、
<footer>（まとめ）
の形で整理しています。
リンク集（公式＋関連）を“記事の流れ”に溶かす
ここでは、個人サイト作りで実際に使う可能性が高いリンクを、 「リンク集です！」と突然並べるのではなく、用途ごとに紹介します。 読者が「次に何をすればいいか」を判断しやすくなるので、ページの完成度が上がります。
公式：まずここを押さえる
- サービス本体： Neocities（公式）
- 学びながら作る： Neocities Tutorials（公式）
- 使う上でのルール確認： Terms（公式）
コミュニティ：他の人のサイトを見る
個人サイトは、上手い人の“完成形”を見るより 同じように更新している人を見る方が参考になります。 Neocitiesにはコミュニティ/フィードもあるので、 「どんなノリのサイトがあるのか」を眺めるだけでもモチベが上がります。
参考： Browse（公式） / Activity（公式）
画像を入れる：見た目の“完成感”を最短で作る
個人サイトが最初に「それっぽく見える」瞬間は、 意外とデザインの凝り具合よりも、画像が1枚あるかどうかだったりします。 アイキャッチでもロゴでもスクショでもよくて、とにかく視線の止まる要素があると “ページとして整っている感”が出ます。
画像の置き場所は、基本的に index.html と同じ階層に置くのが分かりやすいです。
もし画像が表示されない場合は、ファイル名（大文字小文字含む）とパス
/neocities.png が一致しているか確認します。
外部リンクは“唐突さ”を消すと上品になる
外部サイトへのリンクは、いきなり貼ると宣伝っぽく見えることがあります。 でも「私がなぜ貼っているか」を短く説明すれば、 読み手にとっても意味のある導線になります。
たとえば、これは私の興味・参考として置いているリンクです： ハリネズミ 琉球
※外部リンクには target="_blank" を付けることが多いですが、
セキュリティと挙動の安定のために rel="noopener noreferrer" を付けています。
（このへんの“小さな丁寧さ”が、全体のしっかり感につながります）
長文でも読ませるコツ：見出し・余白・要約
長文ページを作るときに意識しているのは、 「ざっと読める」状態を先に作ることです。 じっくり読む人も、流し読みの人もいるので、どちらにも優しくします。
ざっと読む人のための要約
- Neocitiesは「公開までが速い」ので練習と相性が良い
- HTMLは“文章の構造”を作るもの。見出しと段落で整える
- 公式リンクは用途ごとに説明付きで置くと自然
- 画像1枚＋余白で、ページの完成感が出る
じっくり読む人のための補足
このページの狙いは「正しい答え」を詰め込むことではなく、 更新しながら学べる土台を作ることです。 だから、完璧なデザインや完璧な文章を目指すより、 少しずつ直していける構造（見出し、章立て、リンクの整理）を重視しています。
次に作るページ案（サイトとして育てるために）
1ページだけだと、どうしても“短いサイト”に見えます。 でも、実際にはページを増やすというより 役割を分けて配置するだけで一気にサイトっぽくなります。
- about.html：自己紹介、サイトの目的、連絡先の方針
- log.html：更新履歴（短文でOK）
- links.html：公式/参考/お気に入りをカテゴリ分け
これらは文章の質よりも、存在するだけで「運用している感」が出ます。 最初は空っぽでもOKで、少しずつ埋めていけば完成です。
まとめ：個人サイトは“公開してから”育つ
個人サイト作りは、作ってから公開するというより、 公開してから育てるのが続きます。 まずは、見出し・段落・リンク・画像・リストの基本を揃えて、 読める文章として成立させる。それだけで十分にスタートラインです。
もし迷ったら、公式の入り口に戻ればOKです： Neocities（公式） / チュートリアル（公式）