第12回: 納品・公開と実務でのサバイバル術

この回の目標

  • サイト公開の流れを理解している
  • 納品用のファイル構成を作れる
  • 修正依頼への対応イメージが持てている
目次
  1. サイトを世界に公開しよう
  2. 納品の考え方
  3. 実務でどう活かせるか
  4. 次のステップ
  5. 講座全体の振り返り

サイトを世界に公開しよう

ローカル（自分のPC）で作ったサイトを、サーバーという「ネット上の土地」に移して公開しよう

サイトが公開される仕組み

サイトを公開するためには、コーディングしたファイル一式と併せて、サーバーとドメインが必要

リクエスト（データ要求）

自分のPC・携帯

① 見たいサイトを検索

ブラウザ

② サイト情報を要求

サーバー

提供（データ返却）

自分のPC・携帯

④ サイトを表示する

ブラウザ

③ Webページ情報を渡す

サーバー

サーバー（土地）

ユーザーからの要求（リクエスト）に応じて、データや機能・サービスを提供するコンピューターのこと
ここにファイルを置くことで、いつでも誰でも見れるようになる

ドメイン（住所）

「coding-lab.jp」のような、サイトの場所を示す「住所」のこと
webサイトのURLになる部分（https://www.xxx.com）

ファイル一式（家）

自分で書いたHTMLやCSS、画像たちのこと

公開までのステップ

1. 土地（サーバー）を借りる

ネット上に自分のスペースを確保する

レンタルサーバーの代表例

  • エックスサーバー
    国内シェアNo.1で超安定・管理画面も使いやすい
  • ロリポップ！
    料金が安くて、趣味のサイトや勉強用に最適

2. 住所（ドメイン）を決める

土地に名前をつけて、見つけてもらいやすくする

ドメイン（住所）の決め方

ドメイン名は、一度決めると後から変えるのが大変（引っ越し作業が必要）だから、慎重に決めよう

  • 短くて覚えやすい: 打ち間違いが少ないもの
  • サイトの内容が伝わる: shiori-web.com や cafe-sample.jp など
  • ハイフン（-）を使いすぎない: my-first-web-design-site.com みたいに長いと怪しく見えちゃうことも

ドメイン（住所）の取得方法

  • ドメイン登録サービスで取得する
    「お名前.com」や「ムームードメイン」などのドメイン登録サービスで取得する
  • サーバーとセットで取る
    レンタルサーバー（土地）を借りると、ドメイン（住所）が1つ永久無料になるキャンペーンを活用する
    もしくは、XServerなど、サーバーもドメインも同じサービス内でレンタルできるものを選ぶ

サーバーとドメインを別々に契約すると「紐付け（ネームサーバーの設定）」という作業が必要になる
セットで取ればその設定が自動で終わるのでおすすめ

3. 家（ファイル）を引っ越しさせる

FTPソフトなどを使って、自分のPCからサーバーへファイルを転送（アップロード）する
サーバに接続するとドメイン名のフォルダが存在しているので、そのフォルダ内にファイル一式をアップロードする

FTP（File Transfer Protocol）とは

  • ファイルのアップロードやダウンロード、フォルダの操作を行う際に利用
  • 「FTPクライアント」と呼ばれる専用ソフト（FileZilla, WinSCP, Cyberduckなど）を利用するのが一般的
  • 接続には「ホスト名（サーバー名）」「ユーザー名」「パスワード」が必要
    → 契約したサーバーの管理画面等からFTP情報が確認できる

index.html の意味

index.html は「そのフォルダの最初に表示されるページ」
サーバーにアップすると自動的にトップページとして扱われる

「https://school.coding-lab.jp/」
→ 「https://school.coding-lab.jp/index.html」 を自動的に表示している

実際に公開してみよう

公開に必要な情報

  • FTP情報（「ホスト名（サーバー名）」「ユーザー名」「パスワード」）
  • ドメイン名

相対パス / 絶対パスの最終確認

パスが間違っていると、サーバーアップ後に画像が消えたりリンクが通らなくなってしまうことがあるので最終確認しよう

  • 画像はリンク切れになっていないか？
  • ページ間リンクは正しくつながっているか？

納品の考え方

サイトを作って終わりではなく、クライアント（依頼主）に引き渡すまでがお仕事

納品物として何を渡す？

  1. コード一式（HTML/CSS/JS/画像）をZIPにまとめたもの
  2. 指定のサーバーにアップロード完了した状態

納品時に伝えるべきこと

  • 修正回数の範囲（例：修正は2回まで無料）
  • 対応範囲（例：公開後の大幅なデザイン変更は別料金）

よくあるトラブル例

「ここも直してほしい」と後から追加要望

  • 「できない」と断るのではなく、「（別料金で）対応可能」というスタンスを見せる
  • 事前に「追加や変更はオプションになる」ということを伝えておくと良い

スマホ対応していないと言われる

  • どのブラウザ・どの機種で起きているか詳しくヒアリングして修正しよう
  • 納品時にどのデバイスサイズでチェック済みかを伝えておくと安心感もありスムーズに話が進められる

修正が反映されていないと言われる

  • ブラウザのキャッシュが古い可能性があるので、キャッシュ削除して確認いただくようお願いする
  • 修正の報告をするときにあらかじめ伝えておくとすれ違いが防げる

実務でどう活かせるか

対応できる案件例

  • 個人商店・小規模事業者のWebサイト：
    「メニュー」「アクセス」「お知らせ」など、ページが分かれたサイト
  • サービス紹介（LP）：
    商品の魅力を1ページで伝える強力なページ
  • イベント・キャンペーン用サイト：
    短期間でパッと作って公開するサイト

次のステップ

HTML / CSS はすべてのWeb技術の土台
ここをマスターできたら、たくさんの道が開けている

  • 経験値アップ:
    複数ページのサイト制作で経験値を積む
  • WordPressへの挑戦:
    ブログやニュースを自分で更新できるサイトが作れるようになる
  • Webアプリ・システム:
    PHPやPythonなどの言語を学べば、予約システムやSNSのような「動く仕組み」が作れる
  • デザインの深掘り:
    「なぜこの配置なのか」を追求して、デザインもできるエンジニアを目指す

講座全体の振り返り

「書ける」から「考えて作れる」へ
「なぜこのタグを使うのか」「どうすれば使いやすいか」を考えて作れるようになっている

完成＝ゴールではない
コードが最後まで書けた時、一番大切なのは「本当にこれをお客さんに出せるかな？」と何度も磨き上げること
最後に完璧な品質チェックをして、胸を張って納品しよう

この講座は、ゴールではなく「次に進むための土台」
これからPHPやJavaScriptを学ぶときも、結局ブラウザに映るのは今日学んだHTMLなので、すでに『基礎』がしっかりできている状態
『基本の考え方』さえあれば、新しい技術も怖くない！