ファーストビュー、特に写真にキャッチコピー等を重ねる場合は、パソコン幅のレイアウトを基準に設定するとスマートフォン幅で読みにくくなる可能性が高いです。
ワイヤーフレームの段階からある程度「写真と重なった場合」を想定して配置を決めておきましょう。
背景画像の上にテキストを乗せる場合は、ユーザーに読みにくいと感じさせないように注意しましょう。
ファーストビューの変化
パソコンなど幅の広い画面向けであれば、ファーストビュー(ヒーロー)エリアで背景写真の上にキャッチコピー等を掲載する手法が良く使われています。
前回実習でレイアウトしたのもこの方法でした。
しかし、この方法でそのままスマートフォン向けに幅を狭くすると、テキストの可読性が損なわれる場合があります。
例えば、下図のようにファーストビューを設計していたとします。
そのまま幅を狭くしてみましょう。
テキストが読みににくくなってしまいました。
フォントサイズを更に下げたとしても、写真と重なっている読みにくさは解消されません。
メッセージを伝える機能はテキストにあります。
しっかりと可読性を保てるようにレイアウトを考えましょう。
方法①テキストを画像と重ねない
最もシンプルな解決法はスマートフォン対応とレスポンシブWEBデザインで、レイアウト変更のときにも登場した「力ラム落ち」のような配置にすることです。
画像と重ねているテキストを、画像の下に配置されるようにします。
少し文字サイズも調整しました。
写真と重なっていないので、読みにくさは無くなりましたね。
方法②薄く背景色をつける
下記のように、テキストエリアの背景に薄く色を付けても可読性は高まります。
二段にならないのでコンパクトで、まとまった印象が維持しやすいです。
ただし、この方法を使うと上図のように写真が見えにくくなってしまう可能性もあります。
方法③非表示にする、一部だけ画像の下に移動させる
メインのキャッチフレーズ以外を非表示にして、写真と重なるテキストをなくすという方法もあります。
非表示にせずに、図のように一部だけを画像の下にずらしても良いかもしれません。
使用する写真、テキストの量や重要度、サイトの雰囲気などを考慮してベストな方法を決めましょう。
◆実習：スマホ用ファーストビューの配置
PC用ファーストビューを元に、スマホ幅向けのレイアウトを作ります。
今回ホームで使用している「髪にも心にも優しいオーガニック施術をもっと身近に」というキャッチフレーズは、ヒーロー画像の下に配置します。
PCと同じフォントサイズだと大きすぎるので、調整しましょう。
カテゴリー以下の階層ではページタイトルのみなので、そのままのレイアウトで進めます。
フォントサイズと位置だけ調整しました。
