ホームページ制作 ／ 進め方の記録
ホームページ制作は、こう進みます
美容室の見本サイト 5 ページを題材に、写真をそろえる所から公開まで実際にどう進んだかを、記録そのままで載せています。「頼んだら何がどの順で出てくるのか」を先に見ていただくためのページです。
- 自主制作の見本
- 時間はコミット記録から
- 架空のお店です
- 5ページトップ・メニュー・スタイリスト・ギャラリー・アクセスhp/beauty-salon/ の 5 ファイル・2026-09-23 に計数
- 9枚写真は全部この店のために新しく作成（既製の素材は不使用）assets/beauty-salon/hp/README.md の生成記録・2026-09-23
- 2時間29分最初の公開物から仕上げの差し替えまで（同日中）git のコミット時刻 17:57→20:26・2026-09-22
- 375pxいちばん狭いスマホ幅で横スクロールが出ないことを公開前に測定site/tools/cdp-eval.mjs の実行結果・2026-09-23
できあがり
まずは実物を見てください
下のリンクはそのまま開けます。スマホでも同じ見た目で動きます。
進め方
4 つの段階に分けて進みます
各段階の終わりに、そのときの実物をお見せします。最後にまとめて見せる作り方はしません。
- 1
お店のことを伺い、必要なページを決める
今回は「どんな店か・誰がいるか・いくらか・どこにあるか・どんな仕上がりか」の 5 つに分け、そのままページ 5 枚にしました。ページを増やすほど費用も更新の手間も増えるので、最初は少なめに決めます。
- 2
写真をそろえる
この見本では、店内 2 枚・スタッフ 3 枚・仕上がり 4 枚の計 9 枚をこのお店のために新しく作りました。よそで見かける既製の写真は使いません。お手元に撮影済みの写真があればそれを使い、無ければこの方法で用意できます。
- 3
組み立てて、実物のリンクで確認していただく
この段階で一度お見せします。文言・並び順・色は、この時点なら安く直せます。見本では 19:34 に 5 ページを置き、そのあと 20:26 にトップの背景を写真から短い動画に差し替えました。
- 4
公開前に測ってから出す
「たぶん大丈夫」では出しません。下の表の項目を毎回測り、通ってから公開します。
記録
この見本でかかった時間と量
すべてコミット記録とファイルから数えた実数です。お客様の案件では、ご相談と確認のやりとりの時間がこれに加わります。
| 項目 | 値 | 出典 | 確認日 |
|---|---|---|---|
| 同日 17:57 | 先に 1 枚もののページと、触れる見本を公開 | コミット 31c381f 実測 | 2026-09-23 |
| 同日 19:34 | HP 5 ページを公開 | コミット a474023 実測 | 2026-09-23 |
| 同日 20:26 | トップの背景を 9 秒の動画に差し替え（読み込めない端末では写真を表示） | コミット 2076e74 実測 | 2026-09-23 |
| ページの中身 | 5 ページ合計 約 58KB（文字部分） | hp/beauty-salon/*.html を計測 実測 | 2026-09-23 |
| 写真 | 9 枚を新規作成。9 枚とも 1 回目で採用、撮り直し 0 回 | assets/beauty-salon/hp/README.md 実測 | 2026-09-23 |
| 表示の軽さ | 写真 9 枚それぞれに、長辺 1600px の軽い版を用意（計 18 ファイル） | assets/beauty-salon/hp/ を計数 実測 | 2026-09-23 |
公開前の確認
毎回ここを測ってから出します
見え方
- 幅 375px（小さめのスマホ）で横スクロールが出ないこと
- 本文が 12px 以上あること
- スマホ幅とパソコン幅の実画面を、目で 1 枚ずつ見ること
中身
- リンク切れ・画像切れが 0 件であること
- ブラウザのエラー表示が 0 件であること
- 暗い画面設定でも文字が読めること
この見本については、2026-09-23 に幅 375px で横スクロール 0（測定値 375px）を確認しています。
正直な注記: 「hair salon nagi」は実在しないお店です。腕前をお見せするために作った見本で、お客様への納品事例ではありません。写真の人物・店舗もすべて架空です。掲載している時間と枚数は、2026-09-23 に手元のコミット記録とファイルから数えた実数です。