スマホ特化デザインとは｜PC前提の設計と何が違うのか

Q: タップ領域は何pxあればいいですか

48×48pxを最小値として設計してください。ボタンの見た目がそれより小さくても、padding や透明な領域を足して実際のタップ範囲を48px確保すれば問題ありません。隣接するボタンとの間隔も8px以上空けると、押し間違いが減ります。

Q: スマホで見出しの改行がおかしくなるのはどう直しますか

CSSに word-break: keep-all と overflow-wrap: anywhere の2行を入れ、折り返してほしい位置にHTMLで を置きます。日本語はブラウザの自動折り返しが意味の切れ目を無視するため、目立つ見出しやキャッチコピーは手で指定したほうが確実です。公開前に実機で全段落を目で読んで確認する工程を入れてください。

この記事の対象: スマホからの流入が大半なのに、PCのデザインを縮めただけのサイトになっていると感じている制作者・事業者
読了時間: 約12分

「スマホ特化デザイン」という言葉を調べると、レスポンシブ対応の解説に行き着いてしまうことがよくあります。けれどこの2つは別物です。レスポンシブは「PC向けに組んだものを、画面幅に応じて崩さず見せる」技術。スマホ特化デザインは「最初からスマホで使われる前提で、情報の順番・親指の届く範囲・読み込みの軽さを決める」設計思想です。出発点が違うので、同じ素材から出来上がるものがまるで変わります。この記事では、両者の違いを具体的な実装レベルまで降ろして整理します。

スマホ特化デザインとは何か

定義：PCを基準にしない設計

スマホ特化デザインとは、スマートフォンでの閲覧を「主」として、レイアウト・情報設計・操作導線・パフォーマンスのすべてを決めるデザイン手法です。PC版は「スマホで決めたものを、横幅が広い環境向けに展開したもの」という位置づけになります。

よく混同される3つの言葉を並べると、位置関係が見えてきます。

言葉	基準になる画面	作る順番	主な関心
レスポンシブデザイン	PC（が多い）	PC → タブレット → スマホ	崩れずに収まるか
モバイルファースト	スマホ	スマホ → PC	最小構成から足していく
スマホ特化デザイン	スマホのみ	スマホで完結、PCは展開	片手で完結するか

モバイルファーストは2010年代から言われてきた考え方で、「小さい画面から作り始める」という手順の話が中心でした。スマホ特化デザインはそこから一歩進んで、手順ではなく仕様そのものをスマホの条件に合わせるところまで踏み込みます。「PCでどう見えるか」を一度忘れて設計できるかどうかが分かれ目になります。

なぜ今これが議論されるのか

理由は単純で、見られている画面がスマホに偏っているからです。業種によって比率は変わりますが、BtoCの小売・飲食・美容・不動産では、アクセスの多くがスマホという構成がごく普通になりました。にもかかわらず、制作現場では今もPCの大きなモニタでデザインを起こし、スマホ版を「縮小版」として後から作るフローが残っています。

このズレが生むのが、次のような症状です。

ファーストビューに入るはずのキャッチコピーが、スマホでは3行に折れて画像の下に押し出される
PCでは横並びだった3カラムが縦積みになり、3つ目までスクロールが長すぎて誰も到達しない
グローバルナビをハンバーガーに畳んだ結果、サイト内のどこに何があるか分からなくなる
画像を敷き詰めた美しいデザインが、遅い回線では表示に時間がかかる

どれも「PCでは成立していた」のが共通点です。スマホで壊れているのではなく、スマホでは最初から別の設計が必要だったという話になります。

設計の出発点が変わると成果物が変わる

スマホ特化（スマホ起点）

情報の順番をスマホのスクロールで決める
タップ領域を先に確保してから装飾
画像の枚数と重さに上限を置く
PCは余白と横並びで展開

PC起点のレスポンシブ

PCの配置を崩さない方法を探す
余ったスペースにタップ領域を押し込む
PCで映える画像をそのまま流用
スマホは縦積みで妥協

同じ素材でも、どちらから考えたかで完成形が変わります。右の進め方では「スマホで何を捨てるか」の判断が最後まで来ないので、結果として全部が中途半端に残ります。

スマホ特化デザインの5つの設計原則

1. 情報の順番を縦一列で決め切る

スマホには横並びがありません。並べたつもりのものは、必ず上下の関係になります。つまり順番をつけた時点で優先順位を宣言しているわけで、ここを曖昧にしたまま作ると「なんとなく上から順に置いた」サイトになります。

実務では、ワイヤーフレームの前に順番だけのリストを作ってしまうのが早いです。

何のサイトか（ブランド名＋一言）
読者が一番知りたいこと（価格・場所・空き状況など業種で変わる）
信じてもらうための根拠（実績・事例・口コミ）
行動の入口（予約・問い合わせ・購入）
補足情報（会社概要・ブログ・採用）

この5行を先に決めてしまえば、デザインの段階で「どこに何を置くか」で迷う時間が消えます。PCの2カラムで「サイドバーに入れればいいか」と逃げていたものが、ここでは全部順番をつけられます。

2. 親指の届く範囲を地図として扱う

片手持ちのスマホで無理なく届くのは、画面下部2/3の範囲です。上端はいったん持ち替えないと触れません。にもかかわらず、PCの習慣でナビゲーションやCTAを画面上部に置いてしまうのは、よくある取りこぼしです。

画面の位置	親指の到達	置くべきもの
上端（〜15%）	届きにくい	ロゴ、戻る動線（見るだけのもの）
中央（15〜70%）	届く	本文、画像、カード一覧
下端（70〜100%）	最も自然	固定CTA、タブバー、電話ボタン

実装としては、画面下に固定するCTAバーが効きます。注意点は2つ。iOSのホームバーと重なる領域を env(safe-area-inset-bottom) で避けることと、固定バーの高さぶんだけ本文の下に余白を足すことです。後者を忘れるとフッターの最終行が永久に読めなくなります。

.sp-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px;
  /* ホームバー／ノッチを避ける */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
}

.sp-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 48px は押し間違いが減りやすい下限の目安 */
  min-height: 48px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

/* 本文が固定バーに隠れないようにする */
body {
  padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
}

/* PCでは固定をやめてヘッダーへ戻す */
@media (min-width: 768px) {
  .sp-cta { position: static; padding-bottom: 10px; }
  body { padding-bottom: 0; }
}

env(safe-area-inset-bottom) は Safari・Chrome・Edge・Firefox の現行版すべてで動きます。第2引数の 0px を省くと、対応していない環境で calc() 全体が無効になるので必ず書いてください。

3. 文字サイズは「読める下限」から積む

PCで16pxに見えるものをスマホで13pxに落とす、という調整をよく見かけますが、これは逆です。スマホのほうが画面と目の距離が近いのに、画面が小さいぶん一度に入る情報量が少ないので、本文は最低16px、できれば16〜17pxを確保したいところです。14pxを下回ると、読まれる前に離脱しやすくなります。

加えて、iOSのSafariには「フォームの文字が16px未満だとフォーカス時に自動でズームする」挙動があります。問い合わせフォームの input を14pxにしたせいで、タップのたびに画面が拡大してレイアウトが破綻する、という事故はいまも現場でよく起きます。

/* 本文：スマホ16px起点、PCで18pxまで伸ばす */
body {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.85;
}

/* 見出し：スマホで折り返しすぎないよう上限を低めに */
h2 {
  font-size: clamp(1.375rem, 1.1rem + 1.6vw, 2rem);
  line-height: 1.45;
}

/* フォームは16px固定。これ未満にするとiOSが勝手にズームする */
input, select, textarea {
  font-size: 16px;
}

clamp() の設計そのものは別記事で手順立てて解説しています。

テクニック
font-size を clamp() でスマホ対応に｜PCまで1行でつなぐ
font-size をメディアクエリで3段4段に切り替えると、ブレークポイントの境目で文字が飛びます。スマホの375pxで読めるサイズを決め、タブレットで一…

4. 日本語の改行を機械に任せない

スマホ特化で一番軽視されがちなのがここです。狭い画面幅では、1行に入る日本語の文字数が限られます。この条件でブラウザに折り返しを任せると、「お問い合わせは/こちらから」が「お問い合わせはこちら/から」になります。意味の切れ目を無視した改行は、読みにくいだけでなく、素人が作ったように見えます。

対処は2段構えです。

.jp-text {
  /* 単語・文節の途中で折らない */
  word-break: keep-all;
  /* ただし1行に収まらない長い英数URLは折る */
  overflow-wrap: anywhere;
}

その上で、折れてほしい位置に  を手で置きます。

<h2 class="jp-text">
  スマホ特化デザインで<wbr>成果が変わる<wbr>3つの理由
</h2>

word-break: keep-all だけだと、長い見出しが画面からはみ出します。overflow-wrap: anywhere と必ずセットにしてください。この2行は主要ブラウザすべてで動きます。text-wrap: auto-phrase という自動分割の指定も存在しますが、固有名詞やブランド名の扱いが読めないため、見出しなど目立つ箇所では手で  を置いたほうが安全です。

5. 重いものは最初から持ち込まない

スマホの表示速度は、回線と端末の両方で足を引っ張られます。PCの光回線・高性能CPUで確認して「速い」と判断するのは危険で、実機の低速回線相当で見ると別物です。

スマホ特化の設計では、デザインを決める段階で重さの上限を置きます。

ファーストビューに入れる画像は1枚まで。残りは loading="lazy"
画像は WebP か AVIF。<picture> で JPEG にフォールバック
Webフォントは本文用1ウェイトに絞る。見出し用の別フォントは必要性を疑う
背景の装飾は画像ではなくCSSで作る

最後の項目は特に効きます。グラデーションやテクスチャを画像で用意すると重くなりますが、CSSで書けば読み込みが発生しません。

テクニック
CSSメッシュグラデーションの作り方｜画像を使わない背景
写真やイラストを置かずに、色がにじみ合う背景を作る方法です。メッシュグラデーションは、複数の radial-gradient を重ねるだけで作れます。画像フ…

ノイズ・グレインの質感も同じで、SVGフィルタで作れば画像を1枚も読み込まずに済みます。CSSノイズ（グレイン）テクスチャの作り方では、SVG版と画像版のファイルサイズを実測で比べているので、どちらを選ぶかの判断材料になります。

Soreiine!!ギャラリーの掲載サイトから読み取れる傾向

Soreiine!!のギャラリーには業種別のサイトが集まっています。そこから「スマホで強い作り」になっているものを分類すると、業種をまたいで共通する型がいくつか見えてきます。

固定CTAが効いている業種

掲載サイトを業種別に見ていくと、スマホでの固定CTAが機能しているのは行動が一発で決まる業種です。ホテル・旅館なら「空室を見る」、医療なら「電話する」、不動産なら「見学を予約」。どれも1タップ先に明確なゴールがあります。

業界・事例
ホテル・旅館Webサイトデザイン事例6選｜傾向を分類してわかったこと
Soreiine!!に掲載されているサイトのうち、ホテル・旅館業のカテゴリに分類されるサイトは6件です。掲載サイト全体からすればごく一部ですが、この6件を横…

ホテル・旅館の掲載サイトを並べると、写真の見せ方は各社でまったく違うのに、スマホでの予約ボタンの置き方だけは収束していきます。画面下に固定し、文言は「予約」の一語か、せいぜい「空室検索」。迷わせないことに全振りしているのが読み取れます。見どころは、写真の大きさとボタンの関係です。写真を全画面で使っているサイトほど、ボタンは小さく・不透明度を上げて、写真の邪魔をしないまま確実に見える位置に置いています。

一方で、病院・医療・薬品Webサイトデザイン事例7選に並ぶサイトは、固定するものが「電話」「診療時間」「アクセス」の3点セットになりがちです。これは患者が探している情報が決まっているからで、スマホ特化の観点では非常に正直な作りと言えます。装飾を削って、必要なものを下に固定する。地味ですが、ここを外しているサイトは問い合わせを取りこぼします。

縦スクロールの組み立てが上手い業種

アパレルとアート系は、スマホでの縦スクロールそのものを演出として使っている例が目立ちます。

業界・事例
アパレル・ファッションのWebサイトデザイン事例5選｜傾向を分類してわかったこと
Soreiine!!ギャラリーに掲載されているアパレル・ファッションカテゴリのサイトは5件。母数としては小さいものの、この5件を並べてみると「なぜこの業種は…

アパレルの掲載サイトを見ていくと、PCでは横スクロールのギャラリーだったものが、スマホでは縦の1列になります。ここで差が出るのが、1画面に見せる商品の数です。縦1列で1点ずつ大きく見せるサイトと、2列グリッドで一覧性を取るサイトに分かれていて、前者はブランドの世界観を売る路線、後者は点数の多さで選ばせる路線です。どちらが正しいという話ではなく、「何で選ばれたいか」から逆算して列数を決めているのがポイントになります。縮小の結果として2列になったのか、意図して2列にしたのかは、カードの余白の取り方を見るとだいたい分かります。

業界・事例
アート・美術館・展覧会Webサイトデザイン事例｜6件を分類
美術館、展覧会、アーティストのポートフォリオ。同じ「アート」でも、ギャラリー、施設、個人と発注者の立場は大きく違います。それでもSoreiine!!に掲載さ…

掲載例を見比べると、スマホで2列を選んでいるサイトは「一覧から選ばせたいもの」、1列を選んでいるサイトは「1つずつ理解させたいもの」という傾向にはっきり分かれます。ECの商品一覧は2列、サービスの特徴説明は1列、という使い分けです。実装上は grid-template-columns を auto-fit で自動調整したくなりますが、スマホ特化では列数を自分で宣言したほうが意図どおりになります。

.card-grid {
  display: grid;
  gap: 12px;
  /* スマホ：一覧性を取りたいので2列 */
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* 説明セクションは1列を維持する */
.feature-list {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

auto-fit + minmax() は便利ですが、画面幅によって列数が変わってしまい、端末によって見え方が揺れます。カード内の文字量が決まっているなら、明示的に書いたほうが検証も楽です。

制作フローをスマホ特化に組み替える手順

作る順番を入れ替える

スマホ特化デザインは、思想を理解しただけでは成果物に反映されません。制作フローの順番を物理的に変える必要があります。

スマホ特化に組み替えた制作フロー

情報の順番決め縦一列のリストだけを先に確定する

スマホワイヤースマホの画面幅で全ページ分を描く

スマホデザイン配色・書体・CTAをここで決め切る

PC展開余白と列数だけを広げる。要素は足さない

実機確認iOS/Androidの実機で全画面を目で読む

4番目の「要素を足さない」が守れるかどうかが分岐点です。PC展開の段階でサイドバーや追加バナーを足すと、スマホ版に存在しない情報が生まれて、管理も更新も二重になります。

デザインカンプの作り方

Figmaなどで作る場合、アートボードの初期値をスマホ実機の画面サイズに設定します。この幅で見出しが3行に折れるなら、文字を小さくするのではなくコピーを短くするのが正解です。スマホ特化では、デザインの制約がコピーライティングに跳ね返ってきます。

決めておく値を表にしておきます。

項目	スマホでの推奨値	理由
左右の余白	16〜20px	20px超は本文が細くなりすぎる
セクション間の余白	48〜64px	32px以下だと区切りが読めない
タップ領域の最小	48×48px	押し間違いが減りやすい下限
本文の行間	1.8〜1.9	日本語は英文より広く取る
1画面の情報ブロック	1〜2個	3個以上は読み飛ばされやすい

PCに展開するときの注意

スマホで決めたものをPCに広げるとき、やってよいことは3つだけです。

余白を増やす
列数を増やす（1列→2〜3列）
文字サイズを上げる（本文16px→18px程度）

やってはいけないのは、スマホに無い要素を追加すること。追加したくなったら、それはスマホでも必要な要素なのに削ってしまった、というサインです。スマホのワイヤーに戻って入れ直してください。

確認のチェックリスト

公開前に実機で見る項目です。エミュレータだけで済ませると、スクロールの慣性やフォーム周りの挙動が拾えません。

[ ] iOS Safari とAndroid Chrome の両方で、全ページを上から下まで読む
[ ] 全段落の改行位置を目で確認する（意味の切れ目で折れているか）
[ ] フォームの各入力欄をタップして、画面が勝手にズームしないか
[ ] 画面下の固定CTAがフッターの文字を隠していないか
[ ] 電話番号が tel: リンクになっていて、タップで発信画面が出るか
[ ] 回線速度を落とした状態で、ファーストビューがすぐに出るか
[ ] 横向きにしたときにレイアウトが壊れないか

よくある質問

スマホ特化デザインとレスポンシブデザインは何が違うのですか

レスポンシブは「1つのHTMLを画面幅に応じて見せ方を変える技術」で、スマホ特化は「スマホでの利用を前提に設計そのものを決める考え方」です。技術と思想なので対立するものではなく、スマホ特化で設計したものをレスポンシブで実装するのが現在の標準的な進め方になります。違いが出るのは、どちらの画面を基準に情報の順番と優先度を決めたかという点です。

スマホ専用サイトを別で作る必要がありますか

通常は不要です。URLが分かれると、更新が二重になり、検索エンジンへの正規化指定も必要になって管理コストが上がります。1つのHTMLをレスポンシブで出し分けるのが基本で、スマホ特化はその中で「どちらを主として設計するか」の話です。例外は、スマホとPCで提供する機能自体が違う場合に限られます。

既存サイトをスマホ特化に直すには何から着手すべきですか

まず画面下の固定CTAと、フォームの文字サイズ16px確保の2点です。どちらも既存のデザインを大きく崩さず入れられて、問い合わせや予約の取りこぼしに直結します。その次に本文の文字サイズと行間、見出しの改行位置を直していくと、作り直さずに体感の読みやすさが変わります。

タップ領域は何pxあればいいですか

48×48pxを最小値として設計してください。ボタンの見た目がそれより小さくても、padding や透明な領域を足して実際のタップ範囲を48px確保すれば問題ありません。隣接するボタンとの間隔も8px以上空けると、押し間違いが減ります。

スマホで見出しの改行がおかしくなるのはどう直しますか

CSSに word-break: keep-all と overflow-wrap: anywhere の2行を入れ、折り返してほしい位置にHTMLで  を置きます。日本語はブラウザの自動折り返しが意味の切れ目を無視するため、目立つ見出しやキャッチコピーは手で指定したほうが確実です。公開前に実機で全段落を目で読んで確認する工程を入れてください。