HPの写真に重ねた文字、読めていますか？制作見本で考える見せ方

店内の写真を大きく使ったHPを頼みたい。でも、写真に重ねる店名や説明が読みにくくならないか気になる方へ。写真を主役にしたいときも、文字を置く場所は別に確保できます。写真の明るさだけに頼らず、文字の背景や配置まで一緒に決めましょう。

■ 写真を小さくせず、文字の居場所をつくる

こちらは美容室HP「LUMEA」の制作見本です。架空の店舗情報と生成イメージを使った掲載用サンプルで、実店舗の写真や納品・集客実績ではありません。

画面左下では、「光と緑。髪を整える、やさしい時間。」という言葉を、白に近い背景のある領域にまとめています。窓や木々が写る明るい場所に、細い文字をそのまま重ねてはいません。

この見せ方なら、空間を広く見せながら、言葉を読む場所も分かります。その下の「サロンの空間を知る」も同じ領域に収め、写真を見て関心を持った後の行き先を添えています。写真・見出し・案内ボタンを別々に決めるより、最初の画面全体で相談したい部分です。

■ 白い背景を敷く方法が、いつでも正解ではありません

写真の中に必ず見せたい商品や人物がある場合、文字の背景でそこを隠してしまうことがあります。そのときは、写真の横や下に文章を分ける方法が向いています。写真を切り替える予定が多い場合も、別の領域に文章を置く方が、差し替えるたびに重なりを調整する負担を抑えられます。

反対に、使用する写真が決まっていて、主役を隠さない余白を確保できるなら、見本のように同じ画面へ重ねる方法が候補になります。

文字に影を付けるだけで解決すると決めず、実際に載せる写真で確認しましょう。明るい写真に替わったときやスマホで表示範囲が変わったときも、見出しとボタンが読めるかを見る必要があります。

■ 依頼前に、写真へ文字を加工しなくて大丈夫です

写真は文字を入れていない元データで渡し、載せたい短い言葉を別に伝えると、配置の調整を相談できます。スマホでも残したい主役、文字を重ねたくない場所も添えましょう。

依頼メモの記入例

「店内写真をトップで大きく使いたいです。窓と奥の席は隠したくありません。見出しは『一人でゆっくり過ごせる美容室』。写真に重ねる案と、横に分ける案のどちらが合うか相談したいです」

これは相談の記入例で、この見本の制作時に受け取った依頼内容ではありません。

■ そのまま使える確認メモ

・使いたい写真：

・必ず見せたい部分：

・載せたい見出し：

・次に案内したいページ：

・写真を今後替える予定：

初稿では「文字が読めるか」「主役が隠れていないか」「スマホで見出しと案内が収まるか」をセットで確認してください。背景の工夫だけで写真そのものの解像度不足は直せません。撮り直しや別素材が必要な場合は、制作前に切り分けます。

■ 写真の選び方から、HP全体の見せ方へ

HP制作サービスでは、支給写真の配置、支給原稿の見出し整理、PC・スマホ対応を含め、トップと各ページの構成・デザイン・実装をご相談いただけます。撮影や全面的な原稿制作は標準範囲外のため、必要な場合は購入前に確認します。

上のメモと写真の準備状況を、HP制作サービスの見積り相談へお送りください。写真を大きく見せたい理由と、その後に読んでほしい内容を一緒に伝えると、ご希望の完成像をすり合わせやすくなります。