このワイヤーの特徴
写真を大きく見せたまま、題名を伝える
写真の下部に題名を重ね、写真の面積を減らさずに、何の写真かを伝えています。
暗い帯を敷いて、文字を読めるようにする
写真の下部に、下に向かって暗くなる帯を敷き、明るい写真の上でも白い文字が読めるようにしています。
1枚目を大きくして、代表の事例を目立たせる
1枚目を2行分の大きさにし、代表的な事例を目立たせています。
ほかの写真は同じ大きさでまとめています。
題名は、マウスを乗せなくても見せる
題名をマウスを乗せたときだけ表示すると、SPやキーボードでは見られません。
題名は常に表示しています。
制作時のよくある失敗
マウスを乗せたときだけ、題名を出す
マウスを乗せたときだけ表示される題名は、SPでは見ることができません。
題名は常に表示します。
帯がなく、白い写真の上の白い文字が読めない
写真の明るさによっては、文字が背景に溶けて読めなくなります。
暗い帯を敷くか、文字の後ろに背景を付け、文字と背景の明るさの差を確保します。
写真の大事な部分に、文字が重なる
写真の下部に大事な内容が写っていると、題名で隠れます。
写真を選ぶときに、下部に余白がある構図を選びます。
題名を、写真の中に文字として焼き込む
題名を写真に焼き込むと、読み上げや検索で伝わらず、直すたびに画像を作り直すことになります。
題名は文字として重ねます。
よくある質問
帯の暗さは、どのくらいにすればよいですか?
写真の明暗に左右されないよう、文字と背景のコントラスト比を確かめます。
WCAGでは通常の文字で4.5:1以上が目安とされています。
写真によって明るさが違うため、いちばん明るい写真の上で確かめます。
1枚目を大きくするのは、なぜですか?
同じ大きさの写真が並ぶと、どれが代表の事例か分かりません。
1枚目を大きくすると、最初に見てもらいたい事例が伝わります。
写真を押したら、どこへ移ればよいですか?
事例ごとの説明のページへ移るのが基本です。
写真を大きく見せたいだけなら、画像拡大型 モーダルのように拡大する形もあります。
