このワイヤーの特徴
写真で、雰囲気や中身がひと目で伝わる
空間、料理、商品、働く人の様子などは、写真を見ることで特徴や雰囲気をつかみやすい内容です。最初の画面を1枚の写真で大きく見せ、読み手がどんな場所・どんなサービスかを直感的につかめるようにしています。
写真の上でも、文字が読める
写真の明るい部分に白い文字を重ねると、読めなくなることがあります。文字の後ろに暗い重ね（グラデーション）を敷くなどして、実際に使う写真ごとに文字が十分読めるかを確かめています。
写真を差し替える場合も、文字との明るさの差をあらためて確かめます。
写真だけで終わらず、何のページかが言葉でも分かる
雰囲気のある写真でも、それだけでは何のお店か、何をしてほしいのかが伝わりません。写真の上に、対象を示すラベル、見出し、補足の文、ボタンを置き、言葉でも内容を伝えています。
SPでは、写真と文字を分けて読みやすくする
SPの狭い画面で写真の上に文字を重ねると、写真の主題が隠れ、文字も読みにくくなりがちです。SPでは写真を上に、文字とボタンをその下に置き、どちらも見やすくしています。
続きがあることが分かる
最初の画面が写真で埋まると、ページがそこで終わっているように見えることがあります。このワイヤーでは、画面の下に次のセクションの見出しを少しのぞかせています。
背景のつながりや、スクロールを促す表示で伝える方法もあります。
制作時のよくある失敗
文字が写真に溶けて読めない
写真の明るさや模様によっては、上に重ねた文字がほとんど読めなくなります。
暗い重ねを敷けば読めるとは限らないため、実際に使う写真ごとに文字が十分読めるかを確かめ、写真を差し替える場合もあらためて確かめます。
雰囲気だけの写真で、何の会社か分からない
握手や青空、都会の街並みのような、どの会社にも当てはまる写真だけでは、内容が伝わりません。
実際の店内、商品、スタッフなど、伝えたいことを裏付ける写真を選びます。
SPで、写真の主題が切れたり、文字に隠れたりする
PCの横長の写真をそのままSPで表示すると、人の顔や商品が端で切れたり、見出しに隠れたりします。
SPでの切り取り方を確かめ、必要に応じてSP用の写真や、写真の下に文字を置く配置を用意します。
最初の写真の表示が遅い
最初の画面の写真を後から読み込む設定にしたり、大きすぎる画像をそのまま使ったりすると、表示が遅くなり、読み込み中に配置がずれることもあります。
最初の写真は後回しにせず読み込み、画面に合った大きさに圧縮し、幅と高さを指定します。
複数の写真を自動で切り替える
複数の写真を自動で切り替えると、見ている途中で内容が変わり、写真や重ねた文字を落ち着いて確かめにくくなります。
この型では最初に伝える写真を1枚に絞り、ほかの写真は次のセクション以降で見せます。
よくある質問
写真の上に文字を重ねるのと、写真の下に置くのとでは、どちらがよいですか?
文字を読みやすく保てるなら、どちらでもかまいません。
重ねる場合は、文字の後ろに暗い重ねを敷くなどして、写真が変わっても読めるようにします。
SPのように狭い画面では、写真の下に文字を置いたほうが、写真の主題も文字も見やすくなることが多いです。
フリー素材の写真を使ってもよいですか?
使うことはできますが、どの会社にも当てはまる写真では、内容が伝わりにくくなります。
実際の店内や商品、スタッフの写真が用意できるなら、そちらのほうが伝わりやすいです。
写真が用意できない場合は、テキストを主役にする一文訴求型も選べます。
写真の代わりに、動画を流してもよいですか?
流すことはできます。
その場合は、音を出さずに再生し、止める手段を用意します。
動きを減らす設定をしている人には、動画を止めて静止画を表示します。
動画は表示が重くなりやすいため、最初の画面の表示速度にも注意します。
写真の代替テキストには、何を書けばよいですか?
写真が内容を伝えるために使われている場合は、何が写っているかを短く書きます。
見出しで同じことを説明していて、写真が雰囲気づけのための装飾にとどまる場合は、代替テキストを空にして、読み上げで重ならないようにします。
