こんにちは、森山です。 最近のブログではレスポンシブWebデザインのことばかり取り上げていますが、実際に現在お受けしているお仕事もほぼ100%がレスポンシブWebデザイン対応でご依頼いただいています。
おかげさまでレスポンシブWebデザインの経験を積ませていただくことができ、制作の際もあまり悩むことは少なくなってきたのですが、そんな今でも「ここどうしよう・・」と私を悩ませることがあるのが「メインビジュアル」（あるいはスライドショー）周りの挙動についてです。
写真だけを表示している場合は単純に縮小すれば問題ないことが多いのであまり困らないのですが、難しいのはキャッチコピーなどのテキストと合わせて表示させたい場合です。実際に制作するサイトはこのパターンがとても多いのですが、写真と同じ比率で文字まで縮小すると読めないし、でもある程度可読性が保てる文字サイズを維持しようとすると今度はレイアウトを再考する必要が出てきていつも悩ましい問題です。
そこで今日はメインビジュアルやスライドショーを用いたレスポンシブWebデザインサイトをいくつかピックアップし、それぞれどのように工夫されているかを考察してみたいと思います。
なんだかとってもマニアックな話題なので「誰が読むねんこのブログ！」というつっこみもあるかもしれませんが、「森山が知りたい！」という理由だけで書かせていただいてますのでどうぞご容赦ください（笑）
では見てみましょう。
参考サイト ピックアップ
Visee
一見PC版からスマホ版まで同じメインビジュアルを使用しているように見えますが、よく見てみると、767px以下では小さな画面サイズ用の画像に切り替わるように設定されていますね！
特に可読性に問題がありそうな小さな文字を大きくされているのが分かります。
くまもと田崎市場
http://kumamoto-tasaki-ichiba.co.jp/
こちらのサイトは静止画ではなく動画の上にコピーが重ねられていますが、幅480px以下になると動画ごと非表示になるよう設定されています。思いきって隠してしまうというのもひとつの手ではありますね。
保健医療2035 | 厚生労働省
http://www.mhlw.go.jp/seisakunitsuite/bunya/hokabunya/shakaihoshou/hokeniryou2035/
こちらのサイトはシンプルな文字とシンプルなモチーフのみを使ってグラフィカルに表現されていて素敵なサイトです。
767px以下の幅の場合にはメインビジュアルのレイアウトを変更することで小さな文字の可読性に配慮されています。
CSSで実装されたアニメーションとシンプルなビジュアルデザインがマッチしていてニクいです！割と堅めな内容ですが、軽やかな明るい雰囲気に仕上がっていますね。
ライオン
こちらも動画の上にテキストを重ねたデザインになっていますが、タブレット / スマートフォンでは動画の下にテキストが配置されるようになっています。私もこのパターンは結構よく使います。でも若干実装が面倒臭いのかコーダーさんに無言で却下されて時々涙を飲んでます。
金沢大学スーパーグローバル大学創成支援事業
http://sgu.adm.kanazawa-u.ac.jp/
デザインもさることながら、名前もなんかすごいサイトです。
メインのスライド部分には細かな文字がたくさん書かれています。が、こちらのサイトでは画面幅がちいさくなってもそのままの画像が表示されるようになっています。
小さい部分の文字は読めませんが、各スライドにリンクがついているため詳しい内容については各ページで知ることができるので割り切っているのかもしれません。
場合によってはこういった選択肢もありでしょうか。どうでしょうか。
NHKオトナヘノベル
スライドの両端と中央にテキストがある複雑なメインビジュアルを使用されているこちらのサイト。
画面幅が狭くなるに連れて、パーツごとの重要度と見た目の美しさの両方を考慮しながら文字の「サイズ」「配置」「表示/非表示」をパーツごとに変更されています。
デザイナーさんとコーダーさんの苦労の跡が見えるようですね。
CorVin
シンプルなメインビジュアルがかっこいいサイトです。 テキスト自体はそのまま縮小しているようですが、背景画像の位置を画面サイズに合わせて微妙に調整されています。
good loops
こちらはスマートフォン/タブレット表示時はキャッチコピーが縦書きになります。
なるほど、そういう手もありましたね。
勉強になります。
まとめ
ざっといくつかあげてみましたが、いかがでしたでしょうか。
画面幅が小さくなった時も小さな文字が読めるように何かしら工夫をされているところがやはり多いようですが、選択肢をまとめてみると下記の4つでしょうか。
- スマホ版でもPC版でも同じ画像を表示（読めなくても気にしない）
- スマホ版ではメインビジュアルを表示させない
- PC版とスマホ版で画像を別々に用意する（レイアウトはほぼ同じで小さな文字だけ大きめに表示させる）
- PC版とスマホ版ではメインビジュアルを構成する各要素のサイズや配置を変更するなどレイアウトを工夫し、小さな文字も読めるようにする
何か新しい発見があるかと思って考察をしてみましたが、だいたい皆さん行き着くところは同じなようです・・・
スマホ版では表示させない、小さな文字が読めなくても気にしないという思い切った選択肢を選ばれているサイトも意外とあったので驚きました。
レイアウトのパターンの引き出しをたくさん持っていれば、その分スピーディーに良い解決策をご提案していけるはずなので、引き続き様々なサイトのアイデアを収集して、良い参考があればこちらのブログにもアップできればと思います。
ではまた。
募集しています
スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート＆フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎！ぜひお気軽にご連絡ください。