レスポンシブデザインというと、スマホ版はおまけみたいなものが多かったですが
どのサイズで見ても最適化されてる事例が増えてます。
よくよく見てみると、メインヴィジュアル辺りの表現が印象を左右するようです。
メインビジュアルさえ過ぎてしまえば、あとはブロックを並び替える往年のスタイルで突破できそうです。
是非、参考にしたいレスポンシブデザインのメインヴィジュアルのテクニックをお送りします。
狭いなら情報は厳選しよう
PCとスマホでは、横幅が3倍は違うので掲載できる情報量が大きく違うのも当然です。
そこを無理に表現しようとするからせせこましくなってしまう。
ならば、スマホではばっさり掲載内容を削ってしまったほうが
伝わりやすくなります。
http://www.onward.co.jp/jpresskids/
PCでは、コーディネート例4例載ってますが、SPだとひとりに絞ってます。
http://www.muji.com/jp/
PCでは、メンズ・レディースが載ってますが、SPではメンズのみに絞ってます。
使い勝手の用意MVを用意する
かなり横幅を広げたときでも、正方形に近くトリミングしたときでも見栄えする画像があると便利です。
http://sarara.jp/
中央のペットボトルを別レイヤーにすることで、大きさを保ちつつうまく背景の拡大縮小に対応しています。
主役がなにかを意識することが、より求められていきます。
http://www.dartisan.co.jp/
レスポンシブを想定した写真撮影をしてるのかな？
素材撮影から関われる際は、レスポンシブでの利用は想定しておきたいですね！
調子の良い写真素材がなくても、合成で乗り切れます。
文字組みを最適化する
1番読まれるメインキャッチフレーズですが、メインヴィジュアルに合成したものをそのまま縮小すると
SPでみたときに潰れてしまったりもったいないことになります。
http://40creations.com/
画角に応じて、改行を加える事で級数を一定上に保てています。
http://www.itoya-mentaiko.co.jp/
横幅が狭い＝縦幅が狭いことも想定されます。
一定幅以下では、横組に変更することで級数と可読性を保っています。
縦書きとかデザイナーのエゴになりがちなところ、配慮の行き届いた事例です。
まとめ
良いレスポンシブデザインをやろうとすると、
写真素材の段階、ワイヤーフレームでの情報の取捨選択、デザインでの気配りと
全部のレイヤーの協力が必要になりそうです。
頭を使ってがんばろう。。
