みなさん、こんにちは！25卒デザイン事業部所属の堀内です！

今回は「スマートフォンからPCまで、どんなデバイスでも快適に使えるウェブサイトを作るためのレスポンシブデザイン」について、効率的に進めるための考え方や実践的なコーディングのコツをご紹介します。

私自身、初めてレスポンシブ対応に取り組んだときは、とりあえずPC版をそのまま小さくすればいいのでは？と思っていました。ところが実際にやってみると、文字がはみ出したり、画像が潰れてしまったり…。結局どこから手をつけていいのか分からずに混乱したのをよく覚えています。

しかし、何度か作業を経験する中で「全部を完璧にやろうとしなくても、いくつかのポイントを意識すれば意外とスムーズに進められる」ということに気づきました。この記事では、そんな気づきも交えながらお話しします。

まず知っておきたい3つの注意点

1.モバイルファーストが理想、でも現実はPCからが多い

理想はモバイルファースト。小さい画面から設計することで、余計な装飾や複雑さを避け、シンプルなコードで仕上げられます。

ただし実務では、PCデザインを基準にしてスマホ版を調整することも少なくありません。私も実際にPCデザインからタブレット版→スマホ版のレスポンシブデザインのコーディングに取り組んだとき、最初は、スマホだとこの要素どうすればいいの？と悩みました。

そういうときはどの要素を優先的に残すか、どこを省略・再配置するかを意識して、小さい画面で必要最小限のUIに落とし込むのがコツだと学びました。逆にPC版にない装飾を勝手に盛り込んでしまうと、後からデザインとの不一致が出てしまい大変です。

2.相対単位を使いこなす

PC基準で作ると固定値(px)が増えやすく、SPで崩れる原因になりがちです。相対単位（em, rem, %, vwなど）を組み合わせることで、サイズ感を自然に調整でき、SP版への落とし込みもスムーズになります。

全部pxで書けばいいやと思っていたのですが、いざSPで確認すると文字が大きすぎたり逆に読みにくかったり…。その度にもっと柔軟に対応できたらいいのにと思っていました。

最近は、AIにこの画面幅に対して⚪︎⚪︎pxは何rem？と聞きながら進めるようにしており、少しずつ相対単位の感覚が掴めてきています。慣れないうちはpxベースでもいいけれど、余白や横幅は％で指定しておくと後から楽になります。（ここの部分はまだまだ未熟なのでもっと練習していきます）

3.メディアクエリは最小限に

PCからSPへ作業する場合、「あれもこれも」と個別に上書きするとメディアクエリだらけになってしまいます。
主要なブレークポイントを複数作るのでではなく3〜4箇所に絞ることで、コードの見通しを保ちやすくなります。

実践！PCからでも効率的にレスポンシブ化する3つのコツ

1.FlexboxとGridで柔軟に対応

PCで組んだレイアウトをSP向けに落とし込むとき、要素の順序や並び替えが必要になることがあります。FlexboxやGridを使えば、HTMLを触らずにCSSだけで再配置できるため、効率よく対応可能です。

私も最初、無理やりHTMLを書き直してしまい後悔したことがありますが、FlexboxやGridを知ってからは一気に見た目の部分が整い感動しました。特にカードUIや会社情報のように並び替えが必要な部分で力を発揮してくれます。

2.余白やフォントサイズは「縮める」視点で調整

PCデザインでは余裕のある余白や大きめの文字サイズが多用されますが、SPでは逆に情報を詰め込みすぎない工夫が必要です。
相対単位を使いつつ、メディアクエリで余白・フォントサイズを段階的に縮めていくと、読みやすさを維持できます。

3.開発者ツールでこまめに確認＆直接編集

PC → SP の変換では思ったより文字がはみ出す、画像が小さくなりすぎる、などのズレが起きやすいです。
そこで活用したいのが、ブラウザの開発者モード。

画面サイズを切り替えて確認するだけでなく、開発者ツール上で直接CSSを編集しながら調整すれば、修正の試行錯誤が素早く行えます。
気に入ったスタイルが決まったらエディタに反映させればよく、手戻りを減らしつつ効率的に作業を進められるのが大きなメリットです。

今回のレスポンシブデザインのコーディングでの一番の学びは『開発者モードを積極的に使っていくべき』という部分で、コードの重複や要らない記述の削除なども一気に解決することが出来ました。
ただし、開発者モードで横線が引いてある部分を信用して全部消してしまうとスタイルが崩れる可能性があるので注意しなければなりません。

（参考までにたくさん打ち消し横線がある自分でコーディングしたサイトを載せておきます）

まとめ

PCからでも、ポイントを押さえれば効率的にレスポンシブ化できます！

レスポンシブデザインは、設計段階でモバイルファーストを意識するのが理想です。ですが、実務ではPCデザインからSP版を作ることも珍しくありません。

その場合でも、

  • 必要な要素を見極める
  • 相対単位を活用する
  • メディアクエリをシンプルに保つ

といった工夫をすれば、無駄のない美しいレスポンシブ対応が可能です。

最初は、レスポンシブ＝とにかく難しい、という印象でしたが、やってみると 全部完璧にやらなくても、要点を押さえれば形になるということがわかりました。
まだまだ試行錯誤中ですが、次は相対単位をもっと自然に使いこなすことを目標にしたいです。

この記事が、同じように悩んでいる方の参考になれば嬉しいです！