ホームページの上部にある画像が古い。自分で作り直してみたものの、文字が読みにくく、スマートフォンでは人物や商品が途中で切れてしまう。
このような場合は、ホームページ全体を作り直さなくても、ヘッダー画像だけを外注できます。
ただし、現在表示されている画像を送るだけでは、正しいサイズや掲載したい内容が伝わらないことがあります。作り直しを頼む前に、画像の使われ方と変更後に伝えたい内容を整理しておきます。
ヘッダー画像だけ外注できる
ホームページのヘッダー画像は、サイト上部に表示される大きな画像です。会社や店舗の写真、商品画像、キャッチコピー、問い合わせを促す言葉などが入っています。
次のような場合は、ホームページ全体ではなく画像だけを作り直せます。
- 写真や文章が古くなった
- 自作した画像が安っぽく見える
- 文字が多く、内容が伝わらない
- パソコンでは見えるがスマートフォンで切れる
- 新しい商品やサービスを目立たせたい
- キャンペーン終了後も古い案内が残っている
- サイトを作った会社に画像制作だけ頼めない
画像ファイルを差し替えられる状態であれば、デザイン制作とホームページの修正を分けて頼むこともできます。
一方、画像の変更場所がわからない場合や、文字が画像ではなくホームページ上に直接表示されている場合は、デザイン以外の作業も必要です。
最初に現在のヘッダーが画像かどうか調べる
画面上では一枚の画像に見えても、実際の作り方はサイトによって違います。
| 現在の作り方 | 作り直す内容 |
|---|---|
| 写真と文字が一枚の画像になっている | 新しい画像を制作する |
| 背景写真の上に文字を表示している | 背景写真と文字設定を別々に変更する |
| スライド画像が切り替わる | 必要な枚数と切り替え順を確認する |
| パソコン用とスマホ用が分かれている | それぞれのサイズで制作する |
| ページごとに画像が異なる | 作り直すページを決める |
判断できない場合は、現在のホームページURLと管理画面の画像を用意します。
右クリックで画像を保存できても、それがホームページに登録されている元画像とは限りません。表示時に縮小された画像や、画質を落とした画像が保存されることもあります。
可能であれば、ホームページの管理画面に登録されている元の画像を探します。
制作前に正しいサイズを確認する
ヘッダー画像のサイズは、ホームページによって異なります。
「横長で作ってください」だけでは、デザイナーが正しい大きさを判断できません。必要なのは、横幅と縦幅をピクセルで表した数字です。
たとえば、次のように伝えます。
- パソコン用：横1920px、縦600px
- スマートフォン用：横750px、縦900px
- ファイル形式：JPGまたはPNG
- ファイル容量の上限：1MB
- 必要枚数：2枚
サイズがわからない場合は、現在の画像ファイルを確認します。WordPressなどの管理画面に推奨サイズが書かれていることもあります。
ホームページの制作会社に問い合わせられる場合は、「ヘッダー画像を差し替えたいので、推奨サイズとファイル形式を教えてください」と聞けば足ります。
パソコンとスマートフォンでは見える範囲が違う
横長のヘッダー画像をスマートフォンに表示すると、左右が切れることがあります。
そのため、文字や人物の顔、商品などを画像の端に寄せすぎないようにします。中央付近に残したい情報を置き、切れても困らない背景を左右に広げる作り方が基本です。
確認したいのは次の3点です。
- スマートフォン用の画像を別に登録できるか
- パソコン用画像の中央だけが表示されるか
- 画像全体を縮小して表示するか
パソコン用とスマートフォン用を別々に設定できるなら、それぞれに合った構図で制作できます。
一枚の画像を両方で使う場合は、どこまで切れるのかがわかる画面画像をデザイナーに渡します。
掲載する文章は短くまとめる
ヘッダー画像に会社案内や商品説明をすべて入れる必要はありません。
最初に伝える内容を一つに絞り、詳しい説明は画像の下にある本文へ回します。
ヘッダーに入れる文章は、次の順で考えると整理しやすくなります。
- 誰に向けたサービスか
- 何を提供しているか
- 他との違いは何か
- 次に何をしてほしいか
たとえば、地域の整体院であれば、住所、営業時間、施術内容、料金、経歴、予約方法をすべて載せると読みにくくなります。
ヘッダーには「仕事帰りに通える駅前の整体院」「平日21時まで受付」など、来店を考える理由になる情報を残します。詳しい施術内容や料金は別の場所に載せます。
入れる文章と入れない文章を分ける
制作を頼む前に、文章を3種類に分けます。
必ず入れる文章
- 店名や会社名
- 商品名やサービス名
- メインのキャッチコピー
- 期間や開催日
- 必要な注意書き
入れられれば入れたい文章
- 特徴の補足
- 対応地域
- 営業時間
- 実績や数字
- 申し込みを促す言葉
画像の下でもよい文章
- 詳しいサービス説明
- 長い会社紹介
- 料金表
- 利用条件
- よくある質問
すべてを「必ず入れる」にすると、文字を小さくするしかありません。
優先順位を決めておけば、デザイナーが文字の大きさと配置を調整しやすくなります。
写真は大きさと使用許可を確認する
写真を使う場合は、画面画像やSNSから保存した小さな写真ではなく、元のデータを渡します。
横幅が小さい写真を無理に広げると、ぼやけたり輪郭が荒れたりします。横長のヘッダーに使う場合は、写真の左右に余白があるものや、広い範囲が写っているものが使いやすくなります。
用意する写真の例は次のとおりです。
- 商品写真
- 店舗の外観や店内
- スタッフの写真
- 作業中の様子
- 料理や施術の写真
- 会社を表す建物や設備
インターネット検索で見つけた写真を、そのまま使うことはできません。自社で撮影した写真、使用許可を得た写真、利用条件を満たす素材を用意します。
人物写真を使う場合は、本人から掲載の了承を得ているかも確かめます。
ロゴは背景が透明なデータを渡す
ロゴの周りに白い四角が付いていると、背景色を変えたときに不自然に見えます。
ロゴをヘッダー画像に入れる場合は、背景が透明なPNGデータや、制作時の元データを渡します。
手元に小さなJPG画像しかない場合は、そのまま拡大できるかを制作前に見てもらいます。元データがないロゴを作り直す場合は、ヘッダー画像の制作とは別の作業になることがあります。
ロゴの色を変えてよいかどうかも伝えます。会社でロゴの使用ルールが決まっている場合は、その資料も一緒に渡します。
参考画像は「どこを参考にするか」を書く
希望する雰囲気を伝えるために、参考画像を送る方法があります。
ただし、画像だけを何枚も送ると、どの部分を気に入っているのかわかりません。
参考にしたい理由を添えます。
- 写真を大きく使った配置がよい
- 文字数が少なくて読みやすい
- 明るい色だが子どもっぽくない
- 高級感のある落ち着いた雰囲気にしたい
- 商品と人物を一緒に見せたい
- ボタンが目立つ配置にしたい
反対に、避けたい例も一枚か二枚あると方向が伝わります。
「派手な赤は避けたい」「細い英字を多く使いたくない」など、嫌な部分を具体的に書きます。
納品された画像をそのまま公開しない
画像が完成したら、管理画面へ登録する前に表示を確かめます。
確認する場所は、制作時の大きな画面だけではありません。
- パソコン
- スマートフォン
- タブレット
- 横向き表示
- 画像の読み込み直後
- メニューを開いた状態
文字が切れていないか、メニューや問い合わせボタンと重なっていないかを見ます。
ホームページによっては、画像の上にロゴやメニューが重なります。制作前に何も載っていない画像だけを渡すと、完成後に文字が隠れることがあります。
現在のホームページ全体が写った画面画像も渡しておくと、重なる場所を避けて作れます。
ヘッダー画像を外注するときの依頼内容
制作先へ連絡する前に、次の内容を一つのメモにまとめます。
ホームページのURL
公開中のホームページを見てもらえるようにします。
公開前の場合は、テスト用サイトのURLか、ページ全体の画面画像を渡します。パスワードが付いている場合は、閲覧方法も伝えます。
作り直す理由
「古くなったから」だけでなく、現在困っていることを書きます。
- 文字が読みにくい
- サービス内容が変わった
- スマートフォンで写真が切れる
- 自作感が強い
- 問い合わせ先が目立たない
- サイト全体の色と合っていない
理由がわかれば、単に見た目を変えるだけでなく、直す場所を絞れます。
サイズと枚数
パソコン用とスマートフォン用を分け、必要な画像を一覧にします。
スライド表示の場合は、表示する順番も書きます。似た画像を何枚も作るのではなく、それぞれに何を伝えるかを決めます。
掲載する文章
必ず入れる文章と、削ってもよい文章を分けます。
日付、料金、電話番号、営業時間などは、古い資料と新しい資料が混ざらないように一つのメモへまとめます。
写真とロゴ
元の写真、背景が透明なロゴ、ブランドカラーの資料を用意します。
写真を任せる場合は、どのような人物や場所が必要なのかを伝えます。実際の店舗や商品と誤解される写真を使わないよう、素材写真の扱いも決めておきます。
希望する雰囲気
「おしゃれ」「目立つ」だけではなく、誰にどう見られたいかを書きます。
- 初めてでも入りやすい店に見せたい
- 法人向けの信頼感を出したい
- 安さより品質を伝えたい
- 子ども向けだが保護者にも安心感を与えたい
- 高齢者にも文字を読みやすくしたい
納品後の変更予定
期間、料金、営業時間などを頻繁に変える場合は、後から文字を直す方法も考えます。
毎回デザイナーへ修正を頼むのか、編集できるデータを保管するのか、文字をホームページ側で表示するのかを決めます。
まとめ
ホームページのヘッダー画像は、サイト全体を作り直さなくても外注できます。
依頼前に用意するのは、現在の画像だけではありません。ホームページのURL、正しいサイズ、掲載する文章、元の写真、ロゴ、スマートフォンでの表示状態をまとめます。
特に間違いやすいのが、パソコンとスマートフォンで見える範囲が異なる点です。文字や人物を端に置かず、必要に応じて端末ごとの画像を用意します。
何となく新しくするのではなく、現在困っていることを伝えると、作り直す目的が明確になります。見た目の好みだけでなく、誰に何を伝えるヘッダーなのかを整理してから依頼することが大切です。
