作る

自分のホームページを作る方法

「いつかサイトを作る」は、ファイルが1つも無い状態では始まりません。まず1枚。名前と好きなことを書いたHTMLを、自分のPCで開くところまでが今日の仕事です。

そもそもホームページの仕組み

ホームページは、HTMLファイル(場合によってはCSS・JavaScript・画像)を「サーバー」と呼ばれるインターネット上のコンピュータに置いた状態のことです。誰かがブラウザでURLを入力すると、サーバーがそのファイルを送り返し、相手の画面に表示されます。つまり「作る」と「公開する」は別の作業で、自分のPCでHTMLを作っただけでは他の人には見えません。

作って公開するまでの全体像

初公開までの所要時間(合計約3時間) バーの幅が時間に比例。コードを書くより、アカウント作成と確認に時間がかかる ①ファイル作成 30分 index.htmlに20〜50行書く ②自分のPCで確認 20分 ダブルクリックで開く・誤字直す ③公開先準備 60分 GitHubアカウント作成+初設定 ④アップロード 10分 ファイルをpush・Pages有効化 ⑤公開確認 30分 スマホで開く・家族にURL送る ⑥微修正 30分 画像追加・色調整・誤字直し 0分 60分 120分 180分 ※はじめての場合の概算。2回目以降はアカウント作成不要なので30〜60分で公開できる
図1:作って公開するまでの所要時間。コードを書く時間より、設定・確認の時間が長い

① ファイルを作る

テキストエディタ(VS Code、サクラエディタ、メモ帳でもOK)でindex.htmlというファイルを作り、見出し・段落・画像のタグを書きます。最初は20行くらいの小さなページで十分です。文化祭の紹介、自分の趣味、簡単な作品紹介など、個人情報を出しすぎないテーマから始めましょう。

② 自分のPCで確認

index.htmlをダブルクリックすると、ブラウザでそのまま開きます。これは自分のPCの中だけで見えている状態。レイアウトや誤字を直しながら、納得できるところまで磨きます。

③ 公開先を選ぶ

ホームページの公開先(ホスティングサービス)にはいくつか種類があります。おすすめの無料サービスを紹介します。

無料で使える主要ホスティング5サービス比較 無料枠の数値は各社2024〜2025年公式情報の概算。最新は公式で要確認 サービス 容量 月間帯域 独自ドメイン 向いている人 GitHub Pages 静的HTML/CSS/JS専用 1GB 100GB ○ 無料 HTMLを自分で書く人 Netlify ドラッグ&ドロップで公開 無制限 100GB ○ 無料 フォーム機能が欲しい Vercel Next.jsの開発元 無制限 100GB ○ 無料 React/Next.jsを使う Cloudflare Pages 世界規模CDN付き 無制限 無制限 ○ 無料 速度&世界配信重視 Notion / Canva コード不要 プラン依存 プラン依存 × 有料プラン コードを書きたくない
図2:無料ホスティング5サービスの実データ比較。子どもはGitHub PagesかNetlifyから始めるのが定番

HTMLを自分で書きたい人はGitHub Pages、ドラッグ&ドロップで楽したい人はNetlify、コードを書かずに作りたい人はNotionかCanvaが入り口に向いています。

公開前に確認すること

ホームページは公開すると、家族や友達だけでなく、検索エンジンや知らない人からも見られる可能性があります。公開前に、本名、住所、学校名、制服が分かる写真、よく行く場所、連絡先を載せていないか確認しましょう。作品を見せたい場合は、ニックネームや専用メールを使う方が安全です。

また、画像のファイル名にも注意します。写真そのものに個人情報がなくても、school-festival-class2.jpg のような名前から学校やクラスが推測されることがあります。公開用のファイル名は、内容が分かる程度にシンプルにしておきましょう。

気をつけたい落とし穴

初公開で失敗しがちな3つ
  • 本名・住所・通学先・電話番号を載せない。後から検索される可能性を考える
  • 他人の写真・イラスト・音楽を無断で使わない(著作権違反)。フリー素材サイトを使う
  • SNSのIDやメアドを載せると迷惑メールが届きやすくなる。連絡先はフォームか専用メールにする

将来どう役立つ?

「自分のホームページを持っている」は、進学や就職で自分の活動を見せる材料になります。デザイナー・エンジニア・写真家・ライターなどクリエイティブ系の進路では、自分のサイトが作品集の入口になります。早く始めるほど、作ったもの、学んだこと、改善した履歴が積み上がっていきます。

今日からできること

今日の課題:公開前の1枚を完成
  1. index.html という名前で自己紹介を保存する
  2. 画像がなくてもよい。文章とリンクだけでよい
  3. 次の記事で、無料の置き場所に上げる準備をする

まとめ

ホームページ作りは「ファイルを作る」「サーバーに置く」「URLで見られるようにする」の3つです。GitHub PagesやNetlifyなど、無料から試せるサービスもあります。個人情報と著作権に気をつけながら、まず1ページ作って公開の流れを体験すると、Webの仕組みがぐっと身近になります。

確認 サイト公開に最低限必要なものは?