今や、サイトを作るには当たり前となったレスポンシブ対応。
しかし、そもそもレスポンシブって何をするの？どこを変えたらいいの？と悩む方もいらっしゃると思います。
今回はそんな方向けに、レスポンシブのいろはをご紹介します！

まず、PCとスマホの大きな違いは、「画面サイズ」。
PCでは、画面が横長なのに対して、スマホでは立て持ちが基本です。
そのため、PC用の画像をそのまま縮小すると、スマホ画面の上半分くらいで終わってしまう…なんてことになりかねません。

それを防ぐためには、「スマホ用画像を用意する」または「被写体の位置を調整する」のがポイント。
当社で制作した、株式会社ホームロジスティクス様のリクルートサイトの事例でご説明します。

こちらのサイトのトップページ、PCで見ると、自動で動画が流れます。
そしてスマホでは、スマホ用のトップ画像が表示され、タップすると動画が流れます。
こうすることで、サイトを開いた時のインパクトを損なうことなく、見せたい動画は横持ちにして再生してもらうこともできます。

そして、もう一つの「被写体の位置を調整する」方法は、同サイトの代表挨拶ページなどで使用しています。
PCで開くと、右側にテキスト、左側に被写体がバランスよく配置されています。
しかし実はこの画像、そのまま左右をトリミングしていくと、スマホ画面では被写体が切れてしまいます。

それを回避するために、CSSで画像の位置を右側に調整！
結果、別の画像を用意しなくても、綺麗に表示することができました。

そのほかにも、「テキストの大きさ」や「ボタンの位置」が気をつけるべき点です。

テキストは、PCの大きさをそのままスマホで表示すると、うまくいかない場合がほとんど。
縮小したら小さすぎて読めなくなってしまったり、タイトルの大きい文字がはみ出してしまったり…
先ほどの代表挨拶ページも、タイトルをPCでは48px、スマホでは36pxに調整するなど、スマホサイトでもきちんと読めるように工夫しています。

そしてボタンの位置は、お問い合わせボタンなど、常に画面上に表示させておきたいものがある時のポイントです。
ホームロジ様の事例では、NOWとFUTUREを切り替えるボタンがありましたが、PCでは右側、スマホでは下側に表示されています。

スマホで右側にボタンが来てしまうと、コンテンツが隠れて幅も狭くなってしまいます。
下側に配置すれば、画面もスッキリして、親指でも押しやすくなり、ユーザービリティが良くなります！

ここまでの事例として紹介した、ホームロジ様リクルートサイトの詳細はこちらでご紹介しています。
株式会社ホームロジスティクスリクルートサイト

レスポンシブデザインのポイント、いかがでしたか？
PCで気に入ったデザインができたのに、スマホにする時はどうしよう…！と悩むのは、WEBデザインあるあるだと思っています（笑）

しかし、デバイスが変わっても印象を損なわず、ストレスなく閲覧できるのが真のレスポンシブデザイン。
自社のWEBデザインについてお悩みがあれば、是非Cスクエア横浜にご相談ください！

サイトデザインについては、こちらの記事でも解説しています。