画像URLを保存する

なぜ画像URLを保存するのですか？

たとえば、画像をサーバーへアップしたあと、 あなたは次のような URL を持つことになります。

https://website.co.jp/images/website-putty-terminal.jpg
https://website.co.jp/images/webbie-pointing.jpg
https://website.co.jp/images/website-workflow-diagram.jpg

これをちゃんと保存しておくと、後で ChatGPT に:

このページでは次の画像を使ってください
- https://website.co.jp/images/website-putty-terminal.jpg
- https://website.co.jp/images/webbie-pointing.jpg

のように、かなり正確に指示できます。

保存しないと何が起きますか？

画像URLを控えていないと、あとで次のような困り方をしやすくなります。

• どの画像を使うつもりだったか忘れる
• ファイル名があいまいになる
• URL を手で毎回探すことになる
• ChatGPT に画像指定がしづらい
• HTML 内の画像指定がばらつく

つまり、画像はアップしただけではまだ不十分で、 URL 一覧として管理して初めて強くなるのです。

画像URLとは何ですか？

画像URLとは、その画像がインターネット上のどこにあるかを示す住所です。

たとえばサーバーの:

/public_html/images/website-putty-terminal.jpg

という場所に画像があるなら、サイト上では:

https://website.co.jp/images/website-putty-terminal.jpg

のような URL で使えるようになります。

どうやってURL一覧を作ればよいですか？

一番簡単なのは、メモとして一覧を作ることです。

例

Hero images
https://website.co.jp/images/make-website-hero-main.jpg

Webbie images
https://website.co.jp/images/webbie-icon-square.jpg
https://website.co.jp/images/webbie-header-logo.jpg
https://website.co.jp/images/webbie-mascot.jpg
https://website.co.jp/images/webbie-pointing.jpg
https://website.co.jp/images/webbie-review.jpg
https://website.co.jp/images/professor_webbie.jpg

Training images
https://website.co.jp/images/website-planning-chatgpt.jpg
https://website.co.jp/images/website-workflow-diagram.jpg
https://website.co.jp/images/website-filenames-first.jpg
https://website.co.jp/images/website-local-preview.jpg
https://website.co.jp/images/website-image-urls.jpg
https://website.co.jp/images/website-homepage-last.jpg
https://website.co.jp/images/website-sitemap-robots.jpg
https://website.co.jp/images/website-section-index-last.jpg

Tools images
https://website.co.jp/images/website-putty-terminal.jpg
https://website.co.jp/images/website-winscp-files.jpg
https://website.co.jp/images/website-vi-editor.jpg
https://website.co.jp/images/website-site-css-js.jpg
https://website.co.jp/images/website-grading-review.jpg

このように役割ごとに分けておくと、とても使いやすいです。

なぜグループ分けするとよいのですか？

画像URL一覧をグループに分けておくと、あとで:

• トップページ用だけ取り出せる
• Training 用だけ渡せる
• Tools 用だけ渡せる
• Webbie 用だけ選べる

つまり、毎回すべてを見直さなくて済みます。

どこに保存すればよいですか？

保存場所は何でもよいですが、あとで見返しやすいことが大事です。

たとえば:

• プロジェクト用のメモファイル
• テキストファイル
• 作業用ドキュメント
• ファイルツリー一覧と一緒のメモ

たとえばこんな形

website-project-notes.txt

1. サイト定義
2. ファイルツリー
3. 画像URL一覧
4. 共通ヘッダー・フッター方針
5. 完成済みページ一覧

この形だと、制作全体を見返しやすくなります。

ChatGPT にどう渡せばよいですか？

後でページを作るときは、必要な画像URLだけを選んで渡せば大丈夫です。

例: /ja/tools/putty-basics.html を作る場合

次のページを作ってください:
/ja/tools/putty-basics.html

使う画像:
https://website.co.jp/images/website-putty-terminal.jpg
https://website.co.jp/images/webbie-pointing.jpg
https://website.co.jp/images/professor_webbie.jpg

共通の /site.css と /site.js を使ってください。
PuTTY の基本を初心者向けに、やさしく実務的に説明してください。

こうすると、かなり具体的にページを作らせることができます。

このステップの本当の強さ

Step 07 は、単に URL を控えるだけの話に見えるかもしれません。 でも実は、このステップで:

• 画像とページの関係が整理される
• ChatGPT への指示が具体化される
• HTML 作成が再現しやすくなる
• サイト全体の見た目が安定しやすくなる

という大きな効果があります。

URL一覧とファイル名一覧はセットで強いです

ここまでで、あなたは2つの大事な一覧を持つことになります。

1. ファイル名一覧（どのページを作るか）
2. 画像URL一覧（どの画像を使うか）

この2つがそろうと、あとで ChatGPT に:

• どのページを作るか
• どの画像を使うか
• どの雰囲気で作るか

をかなり具体的に伝えられます。

よくある失敗

1. URLを保存しない

あとで画像を探し直すことになり、無駄が増えます。

2. 画像URLを1つの長い塊にしてしまう

役割ごとに分けておいた方が、あとで使いやすいです。

3. ファイル名とURLが対応していない

画像名があいまいだと、URL一覧も見にくくなります。

4. ローカルの画像名とサーバー上の画像名を混同する

実際に使うのはサーバー上の URL です。そこをはっきり区別しておきましょう。

5. 毎回すべてのURLを貼りすぎる

そのページに必要な画像だけ渡す方が、ChatGPT は使いやすいです。

このステップのゴール

Step 07 のゴールは、次の状態になることです。

• アップロード済み画像のURL一覧がある
• 役割ごとに整理されている
• 必要な画像だけをすぐ取り出せる
• ChatGPT に具体的に画像指定できる
• 次のページ制作がかなり安定する

最小チートシート

画像アップ後にやること:
- 画像URLを控える
- 役割ごとに整理する
- メモに保存する
- 後で必要な画像だけ取り出して使う

画像URL一覧があると:
- ChatGPT に具体的に指示できる
- HTML 作成が安定する
- サイトの見た目が揃いやすくなる