トップページのメインイメージを変えたい・作り直したい｜先に決める3つと、変えたあとに続くこと・費用の目安

「トップの大きい画像が、何年も前のままになっている」「季節やキャンペーンに合わせて、トップの見た目を変えたい」という場合があります。トップページの上部などに配置する大きな画像を、この記事ではメインイメージと呼びます。1枚の写真で作られていることもあれば、写真の上に文字が乗っていることも、複数枚が順に切り替わることもあります。どの作りになっているかで、変えるときの手順と、必要になる作業が変わります。

この記事では、メインイメージを変えるときに先に決める3つ、いまの作りの見分け方、変更する部分の整理、スマートフォンでの見え方、複数枚を切り替えるときの読み込み、そしてblancに依頼した場合の費用の目安までを順に整理します。なお、すでにある枠に同じ大きさの写真を入れ替えるだけで済む場合や、本文の文章もあわせて新しくしたい場合は、ホームページの文章・写真を差し替えたいのほうに、自分でできる範囲と依頼の流れをまとめています。

「トップの大きい画像を変えたい」と思うのは、たとえばこんなときです

変えたい内容には、次のような例があります。同じ「変えたい」でも、そのうしろにある状況が違うと、先に確かめる部分も変わります。

• 写っているものが、いまの状況と違う——店舗を改装した、看板や車両が変わった、写っているスタッフがすでに退職している、といった形です
• 画像の中の文字が古い——「創業〇年」「今年のキャンペーン」など、時期の入った文字が画像に焼き込まれている状態です
• 季節や催事に合わせて入れ替えたい——年に数回、決まった時期に差し替える運用にしたい形です
• 載せたい内容が増えた——伝えたいことが1枚に収まらず、複数枚を切り替える形にしたいという相談です
• スマートフォンで見たときに、文字が読めない——サイトの作りや閲覧環境によって、画像の中の文字が小さく表示される場合などです
• サイト全体はそのままで、トップの見た目だけ新しくしたい——サイト全体の作り直しは考えず、トップの画像や配置を変えたい場合です

サイト全体の構成やページ数から見直すかどうかで、進め方と費用の規模が変わります。判断の分かれ目はホームページは修正で直す？作り直す？に、全体を作り直す場合の内訳はホームページのリニューアル費用はいくら？にまとめています。

先に決める3つ

メインイメージの作業は、次の3つが決まっているかどうかで進み方が変わります。決めきれていない段階でご相談いただいて差し支えありませんが、この3つは最後には御社でお決めいただく部分です。

1. 何を見せる画像にするか

写真だけで見せるのか、写真の上に文字を乗せるのか、文字を主にして図や色面で構成するのか。どれにするかで、用意するものと作業の範囲が変わります。文字を乗せる場合は、その文言も御社でお決めいただく部分です。

2. 1枚で見せるか、複数枚を切り替えるか

1枚を固定して置く形と、複数枚が順に切り替わる形があります。切り替わる形にする場合は、用意する枚数や並び順を御社で決める部分です。ページへの移動を設ける場合は、設定できる範囲に応じて、押す場所と移動先も決めます。あとから枚数を増やす予定があるかどうかも、あわせて決めておく部分です。

3. 写真と文字を、どなたが用意するか

お手元の写真を使うのか、素材を購入して使うのか、新しく撮影するのか。写真は、どの方法で入手し、どなたが用意するかを御社で整理する部分です。画像に入れる文言についても、どなたが案を用意し、どなたが決めるかを御社で整理してください。blancへの依頼内容と費用は、お見積りでご確認ください。

いまのトップ画像が、どの作りになっているかの見分け方

同じように見えても、中の作りは何通りかに分かれます。ご自身で当たりを付ける場合は、次の順で見ていただくと分かることがあります。いまの作りが分からない場合は、分かっていることと未確認のことを分けて、ご相談の内容に含めてください。

• 画面の中で画像が入れ替わるか——しばらく見ていて別の絵に変わる、左右に矢印や小さな丸印が出る場合は、複数枚を切り替える作りになっていることがあります
• 文字の部分だけを選べるか——画像の上の文字をなぞって選べる場合は、文字が画像ではなく文章として置かれていることがあります。選べない場合は、文字が画像の中に入っていることがあります
• 管理画面から画像を選び直せるか——CMSが入っているサイトで、管理画面にトップの画像を差し替える欄がある場合は、ご自身で入れ替えられる形になっていることがあります
• 画面の幅を変えたときに、見えている範囲が変わるか——ブラウザの幅を狭めたときに、写真の左右が切れる、別の画像に切り替わる、といった違いが出ることがあります

管理画面から編集できる箇所かどうかは、いまのサイトの作りと、設定の仕方によって変わります。写真だけを入れ替える場合の手順や、管理画面から編集できる範囲については、冒頭でご案内した「ホームページの文章・写真を差し替えたい」にまとめています。ここでは、文字の配置や切り替え表示もあわせて変える場合を扱います。

変更する部分を整理します

いまの作りと、決めた内容によって、どこに手を入れるかが変わります。次の3つは、組み合わせになる場合があります。

写真を入れ替える

いまの掲載場所をそのまま使い、写真だけを入れ替える形です。文字が画像の中に入っていない場合に取れることがあります。必要な作業は、いまのサイトの作りと、変更したい内容によって変わります。

画像の内容や配置を作り直す

写真の選び直し、文字の配置、色の扱いまで含めて、1枚の画像として作り直す形です。文字が画像の中に入っている場合や、載せたい内容が変わる場合は、こちらに当たることがあります。

切り替え表示の仕組みを変える

1枚だった場所に切り替え表示を足す、あるいは切り替え表示をやめて1枚に戻す形です。いまのサイトの作りによって、取れる形と必要な作業が変わります。切り替え表示を使う場合は、速さを設定できるかも確認する部分です。ページへの移動を設ける場合は、押す場所と移動先を御社で決めます。

文字を画像に入れるか、別の文章として置くか

メインイメージを作り直す場合は、文字を画像に入れるか、画像とは別の文章として置くかを御社で決める部分です。どの形を取れるかは、いまのサイトの作りによって変わります。キャンペーン名や期間など、次回も変更する文言がある場合は、その文言をどこに置くか、何を編集する形になるかも確認します。

画像の中の文字は、画面の幅が狭い環境では小さく表示されることがあります。また、画像に入れた文言が、画像とは別にページの文章としても掲載されているかを確認する部分です。伝えたい内容をページの文章としても置くかどうかは、お決めいただく部分です。画像に説明文が設定されている場合は、変更後の画像と説明の内容が合っているかも確認する部分です。

写真は、どう用意するか

用意の仕方は、おおむね次の3つに分かれます。どれを選ぶかで、費用と用意にかかる期間が変わります。

• お手元の写真を使う——すでにお手元にある写真を使う形です。外部へ提供できる条件かどうかも確認する部分です。加工前の大きいままのデータが残っているかどうかで、切り抜きや明るさの調整ができる範囲が変わります
• 素材を購入して使う——素材サイトで購入した写真を使う形です。購入の手続きと、利用できる範囲の確認は、どなたが行うかを決めていただく部分です
• 新しく撮影する——撮り下ろしの写真を使う形です。何を、どこで、いつ撮るかを決めることになります

スマートフォンで撮った写真をそのままお送りいただくこともできます。横長の枠に縦向きの写真を入れると、上下が大きく切れることがあります。撮る前に、写真の向きや余白をどうするかを検討する部分です。切れて表示される範囲は、いまのサイトの作りや、ご覧になる端末・ブラウザによって変わります。

載せてよい写真かどうかの確認

写真の出どころと、写っている方の扱いは、載せる前に確かめておく部分です。素材サイトの写真は、購入したものでも使える範囲が決まっていることがあります。人が写っている写真は、ご本人への確認方法や社内の取り決めにあわせて進めていただく部分です。確認の観点はホームページに載せる写真、その1枚は使って大丈夫？にまとめています。

スマートフォンで見たときに起きること

画面の横と縦の比率は、ご覧になる端末や画面の向き、ブラウザの表示範囲によって変わります。同じ画像を置いた場合でも、見えている範囲が変わります。横長の写真では左右が切れることがあり、画像の端に寄せた被写体や文字は、画面から外れることがあります。

この対応の仕方は、いまのサイトの作りによって変わります。同じ画像を切り取って表示する形、画面の幅によって別の画像に差し替える形、文字を画像から出して文章として置く形などがあります。どの形が取れるかは、いまのサイトの作りと、ご利用のサーバーの条件によって変わります。そもそもスマートフォン向けの表示になっていない場合の選択肢はホームページがスマホ対応していないにまとめています。

複数枚を切り替えるときの読み込み

複数枚を切り替える形では、いまのサイトの作りや閲覧の状況によって、実際に読み込まれる画像の枚数が変わります。掲載する枚数は、御社で決める部分です。最初に読み込む枚数を設定できるか、変更にどのような作業が必要かは、いまのサイトの作りによって変わります。

画像の形式による軽量化についてはホームページの画像が重い？WebP形式で軽量化する方法とその効果に、ページ全体で遅くなっているときの切り分けはホームページの表示が遅いにまとめています。

次の更新で確認すること

次の更新では、画像に入っている情報や、残っているデータによって作業の範囲が変わります。次のような状態を確認する部分があります。

• 時期の入った文字を画像に焼き込んでいる——年号や期間が画像の中に入っている場合、残っているデータや編集の仕組みによって、変更のときの作業が変わります
• 元のデータが残っていない——書き出したあとの画像しかない場合、画像の内容や変更したい箇所によって、文字の直し方と作業の範囲が変わります
• 切り替えの枚数が増え続けている——画像を追加する場合、実際に読み込む量は、画像の容量や読み込みの仕組み、ご覧になる環境によって変わります
• 画像の中に連絡先が入っている——電話番号や住所が画像に入っていると、変更のときに直す箇所として見落とされることがあります
• 差し替えの手順を決めていない——次の差し替えでは、担当する方、使用するデータ、直す場所を確認します。記録が残っているかどうかで、確認にかかる手間が変わります

公開する前に確かめること

公開前の確認項目として、次のような点があります。実際に確認する範囲は、変更する内容に合わせて整理してください。

• パソコンとスマートフォンの両方で、載せたい被写体や文字が表示範囲に入っているか——見えている範囲は、ご覧になる端末やブラウザによって変わります
• 画像の中の文字が読める大きさか——画面の幅が狭い環境での見え方を、あわせてご確認ください
• 押したときの移動先が合っているか——画像や切り替え表示に移動先を設定している場合の確認です
• 古い画像が別の場所に残っていないか——下層ページや、SNSでの共有に使われる設定に、前の画像が残っていることがあります
• 写真の出どころと、写っている方の扱いが決まっているか——公開の前に確かめておく部分です

変えたあとに続くこと

メインイメージは、一度変えて終わりになるとは限りません。時期に合わせて入れ替える運用にする場合は、次の3つを置くときに決めておく部分です。

• 次にいつ変えるか——期間を区切って載せる場合は、掲載を終える時期と、そのあとに何を表示するかを御社で決める部分です
• 誰が差し替えるか——管理画面から差し替えられるかは、いまのサイトの作りによって変わります。その条件を踏まえて、どなたが差し替えるかを御社で決める部分です
• 次に使うデータをどこに置くか——写真の元データと、画像を作ったときのデータの置き場所を決めておく部分です

ご自身で差し替える場合も、用意する画像の大きさや縦横の比率は、いまのサイトの作りや、管理画面で調整できる範囲によって変わります。管理画面での操作の手順については、料金表に「更新操作のレクチャー（1時間）」の項目があります。

画像のデータは、何がどこに残っているかを確認します

画像には、掲載用に書き出したデータとは別に、作る過程で使ったデータが残っていることがあります。文字や色を変更する方法は、残っているデータの内容と、変更したい箇所によって変わります。制作に使われるデータ形式の例は、PSD・AIファイルとは？で説明しています。

いまのサイトの画像について、元のデータが手元にあるかどうかは、以前に作られた方との取り決めによって変わります。元のデータが無い場合の作業の範囲は、個別にご相談ください。料金表の「メインイメージ制作」には「※テンプレートサイト・ブログ用」と記載されています。

料金表にある作業と、御社で決めること

メインイメージのご相談では、「どこからどこまでをお願いできるのか」が分かりにくいことがあります。料金表にある項目に沿ってお伝えすると、次のようになります。

• メインイメージ制作——料金表に項目があります。備考は「※テンプレートサイト・ブログ用」です
• 写真差し替え——料金表に項目があります。備考は「※写真1点につき」です
• 写真加工——料金表に項目があります。備考は「※明るさ調整・トリミングなど（5枚程度につき）」です
• スライダー設置——料金表に項目があります。備考の記載はありません
• 商品写真撮影——料金表に項目があります。備考は「※商品1点につき（写真加工込み）」です。商品写真撮影以外の撮影や、撮影の手配については、料金表に記載がありません

次の3つは、料金表に項目がありません。御社で決めていただく部分です。

• 写真の素材の購入——どなたが購入されるかを決めていただく部分です
• 画像に入れる文言——何と書くかを決めていただく部分です
• 画像のデータの保管——どなたが保管されるかを決めていただく部分です

ここでは料金表に掲載されている項目を紹介しています。ご依頼の内容と費用は、お見積りでご確認ください。

費用の目安

以下は、この主題に関係する項目を料金表からそのまま引いたものです。金額はよくある範囲でお示ししています。同じ作業でも、ページ数・データの量・いまのサイトの作りによって手間が変わるためです。

HTML関連

• HTML修正　5,500円（税込）——※1ページあたり
• スライダー設置　16,500～33,000円（税込）——-

※Wix・Jimdo等のホームページ作成サービスで作られたサイトは、編集制約のため作業時間が増えますので、上記料金の1.5倍となります。

デザイン

• メインイメージ制作　16,500～44,000円（税込）——※テンプレートサイト・ブログ用

画像関連

• 写真加工　2,200～11,000円（税込）——※明るさ調整・トリミングなど（5枚程度につき）
• 写真差し替え　550円（税込）——※写真1点につき

そのほか、関係することがある項目

• 更新操作のレクチャー（1時間）　11,000円（税込）——※オンラインまたはご来社。操作手順書をお渡しします。

※こちらの価格表に無いものについては別途お見積もりとなります。

金額の比べ方や、見積もりでそろえておく項目についてはホームページの相見積もり、どう比べる？に、修正作業ごとの料金の考え方はホームページ修正の費用相場にまとめています。

依頼するときに伝えるとよいこと

お問い合わせの際は、次のことを分かる範囲でお知らせください。分からない項目は、その旨を添えてください。

• ページのURL——変えたい画像が置かれているページのURLをお知らせください
• 写真がお手元にあるかどうか——ある場合は、点数と、加工前の大きいままのデータが残っているかを、分かる範囲でお知らせください
• 画像に文字を入れるかどうか——入れる場合は、その文言の案があるかどうかもお知らせください
• 1枚にするか、複数枚を切り替えるか——決めきれていない場合は、その旨をお知らせください
• 管理画面から差し替えたいかどうか——今後ご自身で入れ替える予定があるかをお知らせください
• いつまでに必要か——催事やキャンペーンに合わせる場合など、期日が決まっていることがあります

社内で先に整理しておくのは、画像で何を見せるか、1枚か複数枚の切り替えか、写真と文言をどなたが用意するかの3点です。次に変える時期も含め、決まっていることと、まだ決まっていないことを分けてお知らせください。

よくいただくご質問

写真を送るだけで、あとはお任せできますか

写真を使えるかどうかは、写真の状態や利用条件、掲載する場所によって変わります。外部に提供できる条件かどうかも確認する部分です。どの写真を使うか、文字を入れるかどうか、入れる場合の文言は、御社でお決めいただく部分です。決めきれていない場合は、写真・文字の有無・文言のうち、どこが未定かをお知らせください。

スマートフォンで撮った写真でも使えますか

写真の大きさや枠の比率、いまのサイトの作りによって変わります。縦向きの写真では上下が切れることもあり、表示される範囲はご覧になる端末やブラウザによっても変わります。加工前の大きいままのデータが残っているかどうかで、切り抜きの範囲を調整できる幅が変わります。

画像の中の文字だけを直せますか

画像を作ったときのデータが残っているかどうかによって変わります。書き出したあとの画像しか無い場合は、画像を作り直す形になることがあります。お手元にどのデータがあるかを、ご相談のときにお知らせください。

複数枚を切り替える形にすると、表示は重くなりますか

表示されるまでの時間は、画像の枚数や容量、読み込みの仕組み、回線などの閲覧環境によって変わります。最初に読み込む枚数を設定できるかは、いまのサイトの作りによります。掲載する枚数は、御社でお決めいただく部分です。

自分で差し替えられるようにできますか

いまのサイトの作りによって変わります。CMSが入っていて、管理画面に画像を差し替える欄がある場合は、ご自身で入れ替えていただけることがあります。入れ替えに使う画像の大きさや縦横の比率は、いまのサイトの作りや、管理画面で調整できる範囲によって変わります。

他社が作ったサイトですが、変えてもらえますか

他社が制作したサイトもご相談いただけます。いまのサイトの作りと、ご利用のサーバーによって、取れる形が変わります。ご依頼の内容と費用は、お見積りでご確認ください。

季節ごとに変えたいのですが、毎回依頼が必要ですか

いまのサイトの作りと、お選びになる形によって変わります。管理画面から差し替えられる形にした場合は、ご自身で入れ替えていただけることがあります。作業をご依頼いただく形にするかどうかは、御社でお決めいただく部分です。

元のデータが手元にありません。作り直しになりますか

お手元にどのデータが残っているかによって変わります。料金表の「メインイメージ制作」の備考は「※テンプレートサイト・ブログ用」です。いまの画像と、お手元のデータ、変更したい内容を分かる範囲でお知らせください。

ロゴやバナーも、あわせてお願いできますか

料金表には「ロゴ制作」「告知用バナー作成」の項目が、メインイメージ制作とは別にあります。備考は、ロゴ制作が「※ラフ案のご提示から、印刷にも使えるデータのお渡しまで。」、告知用バナー作成が「※サイドバーやフッター等に設置するものです。」です。

まとめ

トップのメインイメージを変えるときに、押さえておきたいのは次の3つです。

• 先に決めるのは3つ——何を見せる画像にするか、1枚か複数枚の切り替えか、写真と文字をどなたが用意するか。決まっている内容と、まだ決まっていない内容を整理します
• いまの作りで、必要な作業が変わる——枠に写真を入れ替えるだけで済む場合と、画像そのものを作り直す場合では、作業の範囲が違います。文字が画像の中に入っているかどうかが、その分かれ目になることがあります
• 変えたあとに続くことがある——時期に合わせて入れ替える場合は、次にいつ変えるか、誰が差し替えるか、データをどこに置くかを、御社で決める部分です

いまのサイトで何が取れるかは、作りによって変わります。いま分かっていることと、変更したい内容をお知らせください。ご依頼の範囲と費用は、お見積りでご確認ください。

ご依頼前のご相談とお見積りは無料です。