このワイヤーの特徴
文章と画像の、それぞれの強みを生かせる
言葉だけでは伝わりにくい製品の画面や人の様子と、写真だけでは伝わりにくいサービスの中身を、同時に見せたい場面があります。文章と画像を左右に分け、どちらも隠れずに読める・見られるようにしています。
文字が写真に重ならず、読みやすい
写真の上に文字を重ねると、写真によっては読みにくくなります。文章は白い背景の上に置き、写真の明るさや模様に左右されずに読めるようにしています。
文章から読み始め、画像で補える
このワイヤーでは、最初に内容を言葉で理解してもらうため、文章を左、画像を右に置いています。
見出しを読んだあと、画像でサービスや製品のイメージを補える順番です。
SPでは、文章とボタンを先に置く
SPで横に並べると、文章も画像も小さくなります。SPでは縦に並べ、文章とボタンを先に、画像をその下に置いて、何のページかと次の行動が早い段階で分かるようにしています。
製品の画面も、説明はテキストで伝える
製品の画面をそのまま画像にすると、画面の中の文字は小さく、読み手はそこから説明を読み取れません。画像は雰囲気や操作のイメージを伝える役割にとどめ、何ができるかは左側のテキストで説明しています。
制作時のよくある失敗
画像を大きくしすぎて、文章の幅が狭くなる
画像の見栄えを優先して幅を広げると、文章が細い幅で何度も折り返され、読みにくくなります。
文章と画像はおおむね半々か、文章をやや広めにし、見出しが読みやすい幅を保ちます。
文章量と画像の高さが合わず、片側に不自然な余白ができる
文章の量と画像の縦横比が合わないと、どちらか一方の下に不自然な余白が生まれます。
文章量と画像の高さを見ながら、中央揃えか上揃えかを選び、片側だけに不自然な余白が残らないように調整します。
SPで画像が先に来て、文章とボタンが下へ押し出される
PCで画像が左にある場合など、そのまま縦に並べると画像が先に表示され、見出しやボタンが下へ押し出されます。
SPで何を先に見せるかを決め、HTMLの順番もそれに合わせます。
製品の画面の中の小さな文字で、説明しようとする
画面の画像に細かい説明を入れても、縮小されて読めず、読み上げでも伝わりません。
何ができるのかはテキストで書きます。
画像が文章で伝えていない情報を補う場合は、その内容が分かる代替テキストを付けます。
画面に見える文字をすべて代替テキストに詰め込む必要はありません。
中間の幅で、文章が細くなりすぎる
タブレットなどの中間の幅では、左右に並べたまま文章の幅が狭くなりすぎることがあります。
文章が読みにくくなる幅では縦の並びに切り替え、複数の画面幅で確かめます。
よくある質問
画像は左右どちらに置けばよいですか?
文章から読み始めてほしい場合は、文章を左、画像を右に置く形がよく使われます。
画像を先に見てほしい場合は左右を入れ替えてもかまいませんが、SPで縦に並べたときの順番と、HTMLの順番がそろうようにします。
文章と画像の幅は、どのくらいの比率がよいですか?
おおむね半々か、文章をやや広めにする形が扱いやすいです。
見出しが1行あたり十分な文字数で読める幅を先に確保し、残りを画像に割り当てると、文章が細く折り返されにくくなります。
製品の画面を載せるときに、気をつけることはありますか?
実際の画面に近いものを使い、個人情報や顧客情報、社内だけで使う情報が映らないよう、公開用の見本データに置き換えます。
画面が更新されたときに古い画像が残らないよう、差し替えの手順も決めておきます。
写真の代わりに、イラストを使ってもよいですか?
使ってもかまいません。
ただし、何を表しているのかが分かるイラストにし、文章の内容を補う役割を持たせます。
雰囲気づけだけのイラストなら、文章を主役にする一文訴求型も検討します。
