画像が決まると、ページも決まりやすくなります。
使う画像があいまいだと、HTML もあいまいになりやすいです。 逆に、先に画像の種類と名前が決まっていると、ページづくりがかなり安定します。
なぜこの段階で画像を考えるのですか？
ここまでで、あなたはすでに:
- まずローカルで作ることを理解しました
- サイトの目的や対象を決めました
- ファイル名とフォルダ構成も決めました
次に大事なのが、ページで使う視覚素材です。 どんなヒーロー画像が必要か、どんな説明画像が必要か、どんな図解が必要かをここで整理します。
ページを作る前に、使う画像の種類を先に見える化します。
これだけで、後のページ制作がかなり整理されます。
ホームページに必要な画像の種類
画像といっても、全部同じ役目ではありません。大きく分けると次のような種類があります。
ヒーロー画像
ページの最初に大きく使う画像です。サイトの第一印象を決めます。
説明画像
記事や学習ページの内容を補助する画像です。理解を助けます。
図解画像
流れや構造を見せるための図です。学習サイトでは特に強いです。
マスコット画像
サイトの印象をやわらかくし、ブランド感を出す画像です。
website.co.jp の場合は何が必要ですか？
このサイトは、ホームページ制作を教えるトレーニングサイトです。 だから、必要な画像もかなりはっきりしています。
- トップページ用のヒーロー画像
- サイト制作の流れを見せる図解
- ファイル名やサイト構造を説明する画像
- PuTTY・WinSCP・vi の学習ページ用画像
- Webbie のマスコット画像
- Professor Webbie のような少し権威感のある画像
つまり、ただ「きれいな画像」を集めるのではなく、 サイトの役割に合った画像を揃えるのが大事です。
ヒーロー画像とは何ですか？
ヒーロー画像は、ページの冒頭で使う大きな印象画像です。 たとえば:
- トップページの最初
- 大きなセクションページの最初
に置くことが多いです。
ヒーロー画像の役目
- サイトの雰囲気を決める
- 何のサイトかを直感で伝える
- 見た目の信頼感を上げる
説明画像とは何ですか？
説明画像は、ページ本文の中で理解を助ける画像です。
たとえば:
- 「ローカルで作る」とはどういうことか
- 「ChatGPTでサイトを計画する」とはどういう場面か
- 「画像URLを保存する」とはどういう流れか
こうした内容に合った画像を使うと、文章だけよりずっとわかりやすくなります。
図解画像は特に強いです
学習サイトでは、図解画像はとても大きな価値があります。
- 制作手順の流れ
- ファイル構成
- 画像アップロードの流れ
- セクションページと詳細ページの関係
こうしたものは、文章だけより図の方が伝わりやすいことが多いです。
マスコット画像の役目
Webbie のようなマスコットは、必須ではありません。 でも、学習サイトではかなり強い要素になります。
- 少しやさしい雰囲気が出る
- 難しい話でも入りやすくなる
- ブランドが覚えやすくなる
- 注意ボックスや補足の印象を統一できる
画像名も先に整理するべきです
画像を作るときは、ファイル名もできるだけ最初に決めます。
よい例
make-website-hero-main.jpg
website-planning-chatgpt.jpg
website-workflow-diagram.jpg
website-putty-terminal.jpg
website-winscp-files.jpg
website-vi-editor.jpg
webbie-pointing.jpg
webbie-review.jpg
professor_webbie.jpgあまりよくない例
image1.jpg
hero-final.jpg
newpic.jpg
test2.jpg
webbie-new-final.jpg後で HTML で使うとき、画像名が整理されているほど強いです。
画像の名前があいまいだと、後でページもあいまいになります。
画像は見た目だけでなく、ファイル名でもサイトの整理に関わります。
どうやって必要画像を洗い出せばよいですか？
一番わかりやすい方法は、セクションごとに考えることです。
たとえば website.co.jp なら
トップページ:
- メインヒーロー画像
- Webbie の印象画像
Training:
- workflow 図
- filenames-first 画像
- local-preview 画像
- image-urls 画像
- homepage-last 画像
- sitemap-robots 画像
Tools:
- PuTTY 用画像
- WinSCP 用画像
- vi 用画像
ブランド用:
- Webbie アイコン
- Webbie ヘッダーロゴ
- Webbie 指さし画像
- Webbie review 画像
- Professor Webbieこういう一覧があると、あとで画像作成の順番も決めやすくなります。
ChatGPT にどう頼むとよいですか？
たとえば、こういう頼み方が強いです。
サイト定義とファイルツリーは決まりました。
次に、必要な画像一覧を作りたいです。
以下を整理してください。
1. トップページに必要な画像
2. セクションページに必要な画像
3. 学習用の説明画像
4. 図解画像
5. マスコット画像
6. それぞれの最終ファイル名こうして先に一覧化しておくと、画像づくりがかなり強くなります。
まず一覧、次に1枚ずつ作成。
いきなり無数の画像を作るより、必要一覧を作ってから順番に作る方がはるかに整理されます。
画像を作りすぎないことも大切です
最初から100枚作る必要はありません。むしろ、まずは「本当に必要な核になる画像」から始める方が強いです。
- トップページ用1枚
- セクション用数枚
- 図解数枚
- マスコット数枚
まず核を作って、その後で広げれば十分です。
このステップの大きな利点
画像を先に整理して作ると、次のことが楽になります。
- HTML 作成時に画像が決まっている
- 画像名が先にあるのでアップロードがしやすい
- 後で URL 管理が楽になる
- ページの見た目がぶれにくい
つまり、画像先行は「見た目」だけでなく「制作の整理」にも効きます。
よくある失敗
1. 画像を最後に回しすぎる
その結果、HTML が placeholder だらけになったり、ページが弱くなったりします。
2. 必要画像の一覧を作らない
思いつきで作ると、似た画像ばかり増えたり、必要なものが足りなかったりします。
3. 画像名を適当にする
あとで画像URLを管理するときに苦しくなります。
4. 全部を同じ役割の画像だと思う
ヒーロー画像、説明画像、図解画像、マスコット画像は役割が違います。
5. サイトの目的に合わない画像を使う
学習サイトなのに、意味のない飾り画像ばかりだと説得力が弱くなります。
画像は「飾り」ではなく「構造の一部」です。
サイトを説明し、印象を整え、後のHTML制作を安定させる。 そこまで含めて画像の役目です。
このステップのゴール
Step 04 のゴールは、次の状態になることです。
- 必要な画像の種類が整理されている
- どのページに何を使うか見えている
- 主要画像のファイル名が決まっている
- まず作るべき画像が絞れている
- あとでアップロードしやすい形になっている
最小チートシート
画像を作る前に考える:
- ヒーロー画像
- 説明画像
- 図解画像
- マスコット画像
先にやること:
- 必要画像一覧を作る
- 役割ごとに分ける
- ファイル名を決める
- 重要なものから順に作る
画像は後回しにしすぎないこの6つができれば次へ進めます。
完了: 0/6