こんにちは、デザイナーの中道です。
最近はスマホユーザーが断然多くなり、PCサイトをあまり見ないという方も増えてきたのではないでしょうか。
モバイルファーストなサイトが多くなりつつありますが、やはり企業サイトはまだまだPC対応のサイトが必要ですよね。
そんな、両方のサイトが必要場合に必須なのが「レスポンシブデザイン」です。
最近のサイトではこのレスポンシブ対応がされていないサイトはほぼ無くなってきました。
本日はそんなレスポンシブデザインについての基礎知識と、「レスポンシブ対応」や「画面サイズの違い」によるWebデザインの注意点をご紹介したいと思います。
レスポンシブデザインとは、「ユーザーが使用するスマートフォンやパソコンなどそれぞれのデバイスの画面サイズに応じて自動で表示を最適化するデザイン」のことです。
つまり、レスポンシブを適用することで、スマホでアクセスした時には縦長のデザインで、PCでアクセスした時には横長のデザインで表示されるようになります。
レスポンシブは見え方の問題だけではなく、SEOにも影響します。
2016年からGoogleはモバイルファーストインデックスへの移行を促しておりましたが、2021年3月にはモバイルファーストインデックスへ完全移行するということを発表しました。
つまり、スマホでの表示やUX・UI（使用感）がサイトの評価対象となり、検索順位への影響を与えるということです。
SEO対策もスマートフォンを中心に行うことが基本とされているため、サイト自体がPC向けのみのデザインではSEO的には評価が低く、検索順位を上げることが難しいとされています。
だからといって、PCからのアクセスは無視できませんよね。
Webサイトはどのデバイス（PCやスマホなどの端末）からアクセスしても良い使用感である必要があります。
PCもスマホもどちらのサイトも見やすいデザインであると、おのずとサイト自体のユーザー満足度も上がり、SEOにも良い評価が得られるでしょう。
このことからSEO対策としても、現在のサイト制作にはレスポンシブデザインが必須ということがわかりますね。
上記でご説明したとおり、レスポンシブデザインがサイト制作に重要ということはわかりましたが、ディスプレイサイズによって見え方が変わってしまうということは、レイアウトも整って見えるものから、崩れたように見えてしまうこともあるということです。
レスポンシブデザインに対応する際には注意しなければいけないことがあるのです。。
次は、これまでの制作のなかでお客様にご指摘いただいたことなど、レスポンシブに関する注意点をいくつかご紹介します。
はじめにも記述しましたが、縦長、横長の違いにより、レイアウトが大きく変わります。
そのためスマホサイズのデザインも、PCサイズのデザインもどちらも確認する必要があります。
ディスプレイサイズによってテキストの折返し位置が変わるため、文章の切れ目で改行するとレイアウトが崩れしまう場合があります。
PCで見た場合は丁度良いサイズのテキストが、スマホで見ると大きく見えてしまうことがあります。
そのため、PCとスマホでは意図的にテキストサイズを変えることが多いです。（同じ文章でもPCサイズでは文字サイズを大きくします）
画像をブラウザサイズに合わせたデザインの場合、アクセスするデバイスのディスプレイサイズでトリミングされる位置が変わってしまいます。
画像のトリミング位置を変えないようにするためには、比率を保って拡大縮小する必要がありますが、レイアウトが崩れる原因なりますので要注意です。
レスポンシブ対応で起こるデバイスごとの注意点だけでなく、スマホ、PC、タブレットそれぞれの機種によってディスプレイサイズの違いがあり、その事による注意点もあります。
こちらについても、少しご紹介します。
例えばデスクトップPCとノートパソコンの画面サイズでは大きさが違いますよね。その影響により、見え方も異なってきます。
そのため、基本のデザイン（一番整って見えるデザイン）はそれぞれ国内のシェア率の高いディスプレイサイズに合わせてサイトを制作することが多いです。
ちなみに現在（2023年4月）の各デバイスのディスプレイサイズのシェア率1位は以下のようです。
PC：1920px × 1080px
スマホ：390px × 844px
タブレット：768px × 1024px
シェア率だけでなく、サイトの使い道や業種などによっても基本のデザインのサイズは異なるので、デザインを考える時はサイトのターゲットはどのような人なのか、ということも重要なポイントになってきます。
ディスプレイサイズが異なると、一画面の表示のされ方が変わる場合があります。
ある程度の調整は可能ですが、テキスト文章が多すぎたりすると一画面で収めることが難しいです。
コンテンツ幅（テキストや画像が収まる範囲の幅）を指定している場合は、大きな画面で閲覧した場合に左右に空白ができる場合があります。
空白ができないようにするためには、ブラウザサイズに準じてコンテンツ幅を広くすることは可能ですが、レイアウトが崩れてしまう可能性があるので要注意です。
上記のような注意点がある中、最近ではそのようなしがらみを超えた新しい考え方のデザインも多く見かけるようになりました。
新しい考え方のデザイン中でも自分が気になったサイトをいくつかご紹介します。
スマホでアクセスするとわかりませんが、PCでアクセスすると一目瞭然です。
PCで見てもスマホのデザインが表示されます。
PCで見た場合にできる空白も写真を使用することで、空白を持て余すことなく楽しいデザインになっています。
ターゲットユーザーのアクセスがスマホの方が多い場合は、このようなデザインで全く問題ないと思いますし、レスポンシブ対応がない分、制作のスピードもアップするサイトです。
https://www.huistenbosch.co.jp/recruit/
次にご紹介するサイトは、レスポンシブ対応はされているものの、大きいディスプレイサイズで見ても同じレイアウトを保てるような作りになっています。
そのため、ディスプレイサイズによる空白問題や、画像のトリミング問題、レイアウト崩れ問題が解消されるデザインです。
また、こちらもディスプレイサイズによる細かな修正が少なくなることや、ブレイクポイント（デザインの切り替えポイント）を減少できるため、制作のスピードがアップするサイトです。
しかし、ディスプレイサイズが小さくなる場合は、ブラウザによっては最小のテキストサイズが決まっており、レイアウトが崩れる場合があるので要注意です。
今回はレスポンシブデザインや画面サイズの違いによる見え方の注意点をご紹介しましたが、ディスプレイサイズでの見え方の違いやGoogleの方針の変更など、今後もデバイスが進化する限り対応し続けなければいけない永遠の課題です。
そのたびに、どのような対応が一番良いかということを模索する必要があります。
そのような課題に対応できるよう、今後も新しいことに挑戦しながらより良い制作を進めていければと思います。
