今回は弊社が担当しているサイトで、トップのヒーローエリアの画像を変更してほしいというオーダーがありました。それを実例にしてダミーのデザインで、レスポンシブ時の画像のトリミングに関しての注意点をご紹介いたします。
あらゆるデバイスでベストなトリミングで見えるようにする
まずサイトはレスポンシブ時でも綺麗に見えるようCSSはバッチリ組んであります。モデルが入っている画像でそれなりに横長ですが、どう切り取るかで印象も大きく変わります（実際のサイトではなくダミーの素材で全て説明していますが、ほぼこんなことをやっています）。
PCで見るとこんな感じです
かなり横長になります。またロゴが入るスペースも必要です。画像はRetinaディスプレイでも綺麗に見えるように実際にはかなり大きな画像を用意しています。
画像は扱いやすいように元は16:9でトリミングしてあります。いわゆるHDの画角です。上下がいらないのでは？とお思いになるかもしれませんが、実際のサイトにはパララックス効果が入っているので、画像は上下に移動します。その分少し上下に余裕を持たせています。
画像パーツとしてはこの2つに分かれています。
画像素材元 https://unsplash.com/photos/0f6d8tYEljU
ロゴはPNGで背景がちょっとごちゃごちゃしても大丈夫なよう、白のボカシを少し敷いています。
ロゴの移動を考慮する
画像は背景処理されており、その上にロゴが配置されていますが、これは半分のdivボックスの中央に配置されており、レスポンシブ時には動きます。このロゴの位置にも気をつけて、なおかつ画像が画面サイズによってトリミングされても、キレイに見えるように調整していく必要があります。
スマホだとこんな感じです
メニューはハンバーガー化（ハンバーガーメニューはUI的に否定的な意見が多いですがここではいったん置いておいて…）します。ロゴは移動して画面の中央に来ます。背景画像は縮小されずにトリミングされる処理です。
この状態でも、人物を含めた背景の写真のある程度、イイところに来るようにあらかじめ調整しておく必要があります。もし、写真が撮り下ろしであれば撮影時に計算して撮っておく必要があるでしょう。融通が効くようにルーズ目に撮っておくのも手ですが、あまりルーズだと構図の完成度が低くなってしまいますので、ここはさじ加減が重要なところです。
レスポンシブ時に写真の完成度を高く維持する
そしてロゴも含めた全体レイアウトのクオリティーも維持します。もちろんCSSを毎回細かく調整しても良いのですが、画像素材だけを差し替えて済むのであればそれに越したことはないでしょう。
このように、レスポンシブデザインの場合、ドンピシャで画像（特にヘッダーやヒーロー）をトリミングしてバッチリ見せるケースは少なくなっており、ヒーロー画像としてのインパクトを保ちつつ、どんなデバイスでも「いい感じ」に見せるというテクニックが必要になってきます。
ちなみにタブレットの時はこんな感じです
メニューとロゴが移動します。ロゴはより中央に近づきます。
もちろん、アクセスして来る訪問者が、スマホメインであれば、スマホで見たときに一番ベストな状態でインパクトのある画像にするのも重要です。とはいえPCとあまりに乖離しても厳しいですよね。「レスポンシブだから、画像は当たり障りのない、どこを切っても大丈夫なような風景画でいいよ」ではインパクトは出せません。
レスポンシブ時の画像にこだわる。
スマホのような小さい画面だからこそ、最初のヒーロー画像がどう見えるのか？
重要なポイントになってきます。
貴社のサイトがレスポンシブ対応で華麗なヒーロー画像がスマホで見たときに残念なことになっていないか、確認して見てはいかがでしょうか？