スマホ版のデザインがない！？実務で役立つ「レスポンシブ化」の判断基準

Web制作の学習を進めていると必ずぶつかる壁があります。それは「PC版のデザインデータ（カンプ）はあるけれど、スマホ版のデザインがない」というシチュエーションです。

実はこれ、実務でも意外とよくあるケースなんです。

今回は、私がメンターとして活動する中で受講生の方からいただいた「スマホ版を作成する際の基準はどうすればいいですか？」という質問への回答をベースに、私が意識しているポイントを整理して解説します。

相談内容：スマホ版のデザインがない時の判断基準が知りたい

学習者の方から、以下のような具体的な相談をいただきました。

ご自身では「本文は14〜16pxにする」「横並びを縦にする」「余白はPC版の半分くらいにする」といった工夫をされていましたが、これらは非常に的確な判断です。

ここにプロの視点を加えると、より精度の高いコーディングができるようになります。

スマホは画面が狭いため、PC版の要素をただ小さくするのではなく「再配置」することが基本です。

優先順位の維持: PC版で「左から右」に並んでいるものは、スマホでは「上から下」に並べます。これは、ユーザーの視線が上から下に流れるため、重要な情報を先に配置するためです。
指での操作性: マウスカーソルではなく「指（親指）」で操作することを前提にします。ボタンの大きさや、タップできる要素同士の距離を十分に確保することが重要です。

「PC版の半分」という感覚は目安として優れていますが、以下のルールを意識するとデザインに一貫性が出ます。

ここを避けるだけで、コーディングの品質がグッと上がります。

文字が小さすぎる: 12px以下は可読性が著しく落ちます。最低でも14px、基本は16pxを基準にしましょう。
横揺れ（横スクロール）の発生: スマホサイトで最も嫌われるのが、意図しない横スクロールです。画像には必ず max-width: 100%; を適用し、要素が画面幅を突き破らないように注意しましょう。
タップエリアが狭すぎる: ボタンやリンクが密集していると誤操作を招きます。Appleのガイドライン等でも推奨されている「44px × 44px」程度のクリック領域を確保するのが理想的です。

コーディングが終わったら、ブラウザのデベロッパーツールで確認するだけでなく、必ず自分のスマホ実機で確認してみてください。

「文字が読みやすいか？」「ボタンが押しにくくないか？」

自分の指で触って感じた違和感を微調整していくことが、使いやすいサイトを作る一番の近道です。

デザインデータがないからこそ、エンジニアとしての「使いやすさへの配慮」が光る場面でもあります。ぜひ、今回紹介した基準を参考にしてみてください。

Webサイトの制作やコーディングのセカンドオピニオン、またはメンタリングにお困りの方は、お気軽にご相談ください。