サーバーは試し置き場ではありません。
画像を送る前に、名前・役割・保存場所を決めておくと、あとでHTML作成もURL管理もかなり安定します。
なぜ「準備できたら」アップロードなのですか？
このサイトの流れでは、画像は次の順番で扱います。
- 必要な画像の種類を考える
- 画像を作る
- 画像名を決める
- ローカルの images フォルダへ整理する
- 準備ができたらサーバーへ送る
もし、この順番を飛ばして適当に画像をアップロードすると:
- 同じような画像が何枚も増える
- あとで名前を変えたくなる
- HTMLで使う画像がどれかわからなくなる
- URL管理がややこしくなる
アップロードは最後の整理ではなく、整理されたものを送る作業です。
先にローカルで整えてから送る方が、サーバー側がきれいに保てます。
どんな画像が「準備できた状態」ですか？
準備できた画像とは、次の条件がそろっている画像です。
- どのページやどの役割で使うか決まっている
- ファイル名が決まっている
- ローカルの images フォルダへ保存されている
- できれば見た目の確認も済んでいる
たとえば:
make-website-hero-main.jpg
website-workflow-diagram.jpg
website-putty-terminal.jpg
webbie-pointing.jpgのように、名前も役割もはっきりしている状態です。
test.jpg や final2.jpg のような名前のまま送らない方が安全です。
サーバーに上がったあとで名前を変えたくなると、あとでHTMLやURLも直したくなります。
ローカル側の images フォルダを整える
アップロード前に、ローカルで画像を1か所にまとめておくのがおすすめです。
C:\website\images\
├── make-website-hero-main.jpg
├── webbie-icon-square.jpg
├── webbie-header-logo.jpg
├── webbie-mascot.jpg
├── webbie-pointing.jpg
├── webbie-review.jpg
├── professor_webbie.jpg
├── website-planning-chatgpt.jpg
├── website-workflow-diagram.jpg
├── website-filenames-first.jpg
├── website-local-preview.jpg
├── website-image-urls.jpg
├── website-putty-terminal.jpg
├── website-winscp-files.jpg
├── website-vi-editor.jpg
├── website-homepage-last.jpg
├── website-sitemap-robots.jpg
└── website-section-index-last.jpgこうしておけば、あとで WinSCP で送るときも見通しがよくなります。
サーバーではどこへ送るのですか？
多くの場合、画像はサーバー上の images フォルダへ送ります。
/public_html/images/つまり、ローカルの:
C:\website\images\にある画像を、サーバーの:
/public_html/images/へ送る流れです。
なぜ images フォルダを1つにまとめるのですか？
1. わかりやすい
画像の置き場所が1つなら、あとで探しやすいです。
2. URL管理が楽
画像URLが同じパターンになるので、HTML作成時に使いやすいです。
3. WinSCPで送りやすい
左右のフォルダ対応がはっきりします。
4. 後で整理しやすい
画像だけをまとめて見直したり差し替えたりしやすくなります。
WinSCPでの基本的な流れ
画像アップロードの流れは、だいたいこうです。
WinSCPでサーバーへ接続する
SFTP でログインし、右側にサーバーを表示します。
左側でローカル images フォルダを開く
送る画像がまとまっている場所です。
右側でサーバーの images フォルダを開く
例: /public_html/images/
必要な画像だけを送る
まだ未完成の画像まで全部送る必要はありません。
名前を確認する
サーバー側で本当に意図したファイル名になっているか見ます。
一気に全部送る必要はありますか？
いいえ、ありません。むしろ最初は、必要な核になる画像から送る方が強いです。
たとえば最初に送るなら:
make-website-hero-main.jpg
webbie-icon-square.jpg
webbie-pointing.jpg
website-workflow-diagram.jpg
website-local-preview.jpgのように、すぐ使う画像だけでも十分です。
少数の重要画像から始める方が安全です。
まずは本当に使う画像を送って、あとで必要に応じて増やせば大丈夫です。
画像を送ったあとに何が起きますか？
サーバーへ画像を送ると、その画像には公開URLができます。
たとえば:
/public_html/images/website-putty-terminal.jpgに送ったなら、あとでHTMLでは:
https://website.co.jp/images/website-putty-terminal.jpgのように使えるようになります。
これが次のステップでとても重要になります。
アップロード前に確認すること
| 確認項目 | 見るポイント |
|---|---|
| 画像名 | 最終ファイル名になっているか |
| 役割 | どのページやどの用途で使うか決まっているか |
| ローカル保存場所 | images フォルダにまとまっているか |
| 見た目 | 使ってよい完成度か |
| 送信先 | サーバーの images フォルダで正しいか |
画像差し替えはどう考えるべきですか？
ときどき、あとでより良い画像に差し替えたくなることがあります。 それ自体は問題ありません。
ただし、次のように考えると安全です。
- 本当に差し替えたいと確信してから置き換える
- 同じ役割の画像なら、同じファイル名を保つ方法もある
- どのページで使っているか意識しておく
アップロード後に名前をころころ変えない方が強いです。
画像名が変わると、後でHTML側も修正したくなります。まずは名前を安定させるのが大事です。
このステップの一番大きな意味
Step 06 の本当の意味は、ただ画像を送ることではありません。
本当の意味は:
あとで HTML 作成に使える、安定した画像URLの土台を作ること
です。
画像がサーバーに上がっていれば、次のステップでその URL を控えて、 ChatGPT に「この画像を使って」と具体的に伝えられるようになります。
よくある失敗
1. 未完成画像まで全部送る
サーバー側が散らかりやすくなります。
2. 画像名を確定しないまま送る
後で名前を変えたくなって、HTML や URL 管理がややこしくなります。
3. images フォルダ以外に画像をばらまく
画像の置き場所が散ると、管理が急に難しくなります。
4. サーバーの送信先を確認しない
WinSCP で右側の場所を見ずに送ると、違う場所へアップされることがあります。
5. アップロード後に確認しない
名前や場所が違うまま気づかないことがあります。
サーバーに送るのは、整理された完成候補だけにする。
これを守るだけで、後のページ作成とURL管理がかなり落ち着きます。
このステップのゴール
Step 06 のゴールは、次の状態になることです。
- ローカルの images フォルダが整理されている
- アップロードする画像が絞れている
- サーバーの images フォルダへ正しく送れる
- 画像名が安定している
- 次に画像URLを保存する準備ができている
最小チートシート
画像アップロード前に確認:
- 画像名は最終形か
- どこで使うか決まっているか
- images フォルダに整理されているか
- 見た目はOKか
- 送信先は正しいか
まず整理
そのあとアップロード
次に画像URLを控えるこの6つができれば次へ進めます。
完了: 0/6