こんにちは！Development事業部フロントエンドエンジニアのさかなです。

多様なデバイス環境に対応する現代のWeb制作において、レスポンシブ対応は必須です。レスポンシブサイトを実装する際は、サイト全体を画面幅に応じてどのように変化させるかという設計方針を最初に決めることが重要です。

たとえば、レスポンシブ設計には次のような方針があります。

・PCとスマートフォンでサイズを段階的に切り替える
・デザイン全体を画面幅に合わせて比例縮小する
・最小値と最大値の間で滑らかに変化させる

本記事では、主にrem、vw、clamp()を使った3つの設計方法と、それらを効率よく実装するSCSS関数を紹介します。

さかな：Development事業部フロントエンドエンジニア。東北大学文学部で心理学を学びながらカナダ・モントリオールに3年間居住。帰国後コーディングを独学し、GIGにジョイン。現在はサイト制作のフロント実装や自社サービスLeadGridの開発を行う。最近はAIやインフラに興味がある。

レスポンシブ設計は「どう変化させたいか」で選ぶ

どのような挙動を目指すかによって、選択すべきアプローチも変わってきます。まずは、それぞれの設計方針を整理してみましょう。

サイトのデザインや運用方法に合わせて、中心となるレスポンシブ方針を選びます。

rem：基本サイズを維持したいとき

本文の読みやすさや保守性を重視する場合は、remとメディアクエリを使った設計が向いています。

remは、ルート要素であるhtmlの文字サイズを基準にする単位です。

html {
  font-size: 16px;
}

.title {
  font-size: 2rem;
}

この場合、2remは32px相当になります。

remのメリットは、ブラウザの文字サイズ設定を反映しやすいことです。ユーザーが標準文字サイズを変更している場合でも、その設定に合わせて文字が拡大されます。

また、PCとスマートフォンでサイズを明確に切り替える場合は、メディアクエリと組み合わせます。

.title {
  font-size: to-rem(40);

  @include screen-small {
    font-size: to-rem(28);
  }
}

この設計は、デザインカンプとの差異を確認しやすく、後から調整しやすいのが特徴です。

一方で、PCとスマートフォンの中間幅ではサイズが変わらないため、タブレット幅などでバランスが悪くなる場合があります。

vw：デザイン全体を比例させたいとき

デザインカンプの比率を保ちながら、画面幅に合わせて全体を縮小したいことがあります。そのような場合は、vwを使った設計が有効です。

1vwは、画面幅の1％に相当します。

たとえば、1440px幅のカンプ上で120pxの余白を画面幅に比例させる場合は、次のように計算できます。

.section {
  padding-top: calc(120 / 1440 * 100vw);
}

文字や余白、画像などを同じ比率で変化させられるため、カンプのバランスを保ちやすいのが特徴です。

ただし、vwは画面幅に完全に連動します。

だから画面が広すぎるとサイズが大きくなりすぎ、狭すぎると文字が読みにくくなる可能性があります。そのため、適用する画面幅を限定したり、PC用とスマートフォン用で計算基準を分けたりする必要があります。

clamp()：上下限を設けて変化させたいとき

画面幅に応じてサイズを変化させつつ、大きくなりすぎたり小さくなりすぎたりするのを防ぎたい場合は、clamp()が適しています。

clamp()は、最小値、推奨値、最大値の3つを指定するCSS関数です。

.title {
  font-size: clamp(1.75rem, 3vw, 3rem);
}

この場合、文字サイズは画面幅に応じて変化しますが、1.75remより小さくならず、3remより大きくなりません。

つまり、vwのような流動性をもちながら、上下限を設定できます。

vwとclamp()は完全に別のものではありません。clamp()の中央の値として、vwやcalc()を使うことが多いためです。

設計上は、次のように考えると分かりやすいです。

・vw：画面幅にそのまま比例させる
・clamp()：画面幅に応じて変化させつつ、上下限を設ける

タブレットなどの中間幅でも自然にサイズを変化させたい場合に向いています。

em：コンポーネント内部のサイズを連動させたいとき

emは、サイト全体のレスポンシブ方針として選ぶものではなく、コンポーネント内部のサイズを連動させたい場合に便利です。

paddingやmarginに指定したemは、その要素自身font-sizeを基準に計算されます。そのため、文字サイズを変更すると余白も同じ比率で拡大・縮小されます。

たとえば、ボタンの余白を文字サイズに連動させる場合は、以下のようなコードになります。

.button {
  font-size: to-rem(16);
  padding: 0.75em 1.5em;
}

.button--large {
  font-size: to-rem(20);
}

文字サイズを変更すると、paddingも連動して大きくなります。

そのため、emは次のような場面に向いています。

・ボタンの文字サイズと余白
・テキストとアイコンの間隔
・バッジやラベルの余白
・見出しに付随する装飾

実務を効率化するSCSS関数

デザインカンプはpxで作られることが多いため、実装時の変換処理を関数化しておくと便利です。

pxをremへ変換するto-rem()

@use "sass:math";

@function to-rem($px, $base: 16) {
  @return math.div($px, $base) * 1rem;
}

.title {
  font-size: to-rem(40);
}

カンプ上の40pxという値をそのまま指定できるため、計算の手間やミスを減らせます。

pxをvwへ変換するto-vw() 

@use "sass:math";

@function to-vw($px, $viewport: 1440) {
  @return math.div($px, $viewport) * 100vw;
}

.title {
  font-size: to-vw(64);
}

基準となるカンプ幅を引数で指定できるようにしておくと、PC用とスマートフォン用で使い分けられます。

可変値を生成するto-clamp()

指定した画面幅の間で、最小サイズから最大サイズまで滑らかに変化します。

@use "sass:math";

@function to-clamp(
  $min,
  $max,
  $min-viewport: 375,
  $max-viewport: 1440
) {
  $variable-part: calc(
    ($max - $min) / ($max-viewport - $min-viewport)
  );
  $constant: calc(
    ($max - $max-viewport * $variable-part) / 16
  );

  $min-rem: calc($min / 16 * 1rem);
  $max-rem: calc($max / 16 * 1rem);
  $variable-rem: calc($constant * 1rem);
  $variable-vw: calc(100 * $variable-part * 1vw);

  @return clamp(
    $min-rem,
    $variable-rem + $variable-vw,
    $max-rem
  );
}

.title {
  font-size: to-clamp(28, 48);
}

.section {
  padding: to-clamp(64, 120);
}

どの設計を選ぶべきか

実際の案件では、次のような観点から設計方針を決めています。

まず本文の読みやすさや長期運用を重視する場合は、remとメディアクエリによる段階的な設計が扱いやすいです。次に、PCとスマートフォンの間でも自然に変化させたい場合は、clamp()を使った流体的な設計が候補になります。

重要なのは、複数の方法を無秩序に混在させないことです。

ある箇所ではvw、別の箇所ではclamp()、さらに細かなメディアクエリを大量に使うと、画面幅によって要素ごとの変化率がばらばらになる可能性があります。

必要に応じた併用は問題ありませんが、サイト全体の基本方針を決めたうえで使うことが大切です。

まとめ

レスポンシブ実装では、どのプロパティにどの単位を使うかだけでなく、サイト全体をどのように変化させたいかを先に考える必要があります。

・remとメディアクエリ：段階的にサイズを切り替える
・vw：画面幅に合わせて全体を比例させる
・clamp()：上下限を設けながら滑らかに変化させる
・em：コンポーネント内部のサイズを連動させる

さらに、to-rem()、to-vw()、to-clamp()のようなSCSS関数を用意することで、カンプ上の数値を実装へ落とし込みやすくなります。

すべての単位や関数を1つのサイトで使う必要はありません。サイトの目的やデザイン、対応する画面幅、運用方法を踏まえて、最も適したレスポンシブ設計を選ぶことが、不具合が起きにくくメンテナンス性の高いCSSにつながります。

GIGでは、こうしたCSS設計や技術選定をチーム全体でアップデートしながら、デザインの再現性と運用のしやすさを両立したWebサイト制作を行っています。こうしたフロントエンド開発に興味のある方は、ぜひ採用ページもチェックしてみてください！

株式会社GIGは、コーポレートサイト・採用サイト・ステークホルダー向けサイトのリニューアルや、企業理解を踏まえた情報設計、サイトリリース後の運用伴走支援がそろったデジタルコミュニケーション企業です。

・制作実績1,500社以上
・サービス利用継続率98%以上
・「Web制作会社」Google検索 1位獲得率55.8％
・AWS公式Technology Partner認定
・ASPICクラウドアワード先進技術賞受賞

ブランド表現と更新しやすさを両立したサイト設計と、公開後も改善し続ける伴走支援が強みです。

株式会社GIGは、お客様と丁寧で密なコミュニケーションを重ねてきたと自負しております。「まず話だけでも」という段階でも、ぜひお問合せください。専任の担当者が、お客様の状況にあわせた最適な提案をいたします。

■株式会社GIG
・お問い合わせはこちら
・制作実績はこちら
・事例インタビューはこちら
・求人応募はこちら（GIG採用サイト）
・求人応募はこちら（Wantedly）

さかな

Development事業部フロントエンドエンジニア。東北大学文学部で心理学を学びながらカナダ・モントリオールに3年間居住。帰国後コーディングを独学し、GIGにジョイン。現在はサイト制作のフロント実装や自社サービスLeadGridの開発を行う。最近はAIやインフラに興味がある。