記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

レスポンシブデザインをタブレットに適用する方法

レスポンシブデザインを導入する上では必須とも言っていい、「タブレット」の表示について解説しています。タブレットのレスポンシブデザインを実装するなら抑えておきたい、各タブレットのサイズや考え方、表示崩れがしにくいメディアクエリなどをご紹介します。

レスポンシブデザインでの制作を考える時、少し悩みの種になりやすいのがタブレットの表示です。PC表示と同じにするには横幅が狭いものの、スマートフォンと同じ表示にするのも難しい。筆者も一時期、同じような悩みを抱えていました。ですが、考え方を変えてみたらタブレットのレスポンシブデザインも効率的に実装できるようになりました。本記事では、タブレットにおけるレスポンシブデザインの考え方についてご紹介します。

レスポンシブデザインについて

レスポンシブデザインのおさらい

レスポンシブデザインは「閲覧ユーザーの使用するデバイス・ブラウザ・デバイスの横幅に合わせて変化する見やすいWebサイトのデザイン」です。レスポンシブデザインはGoogleも推奨しており、レスポンシブデザインになっていない(モバイルフレンドリーではない)Webサイトは検索順位が上昇しにくくなってしまいます。

レスポンシブデザインの切り替え方

レスポンシブデザインの切り替え方は、大きく分けて4つに分類されます。それぞれ制作に使用する言語や方針によって切り替えるのがオーソドックスです。

①CSSで切り替える

②Javascriptで切り替える

③PHPで切り替える

④WordPressの関数で切り替える

本記事では、タブレットにおけるレスポンシブデザインを主にCSSで切り替える方法を前提として記載しています。

タブレットにおけるレスポンシブデザインについて

タブレットと一口に言っても、OSや各デバイスによってそれぞれサイズは異なります。また、タブレットはスマートフォンにはあまり搭載されていない「分割表示」機能があるということも、タブレットにおけるレスポンシブデザインを制作する上で考える必要があります。

主流のタブレットのサイズ

現在市場に出回っている主流のタブレットはiPadの他、androidやKindle、Surfaceなどが挙げられます。今回はそれぞれのタブレットごとの画面サイズをまとめてご紹介します。

iOS

機種 画面サイズ(ポイント)
iPad / iPad 2 768×1024
iPad 3 / 4 / 5/ 6/

Air1/ Air2

1536×2048
iPad 7 / 8 1620×2160
iPad mini 768×1024
iPad mini
iPad 3
iPad 4
iPad Air
iPad Air 2
iPad Pro 9.7
768×1024
iPad Pro 10.5
iPad Air(3世代)
834×1112
iPad iPad Air(4世代) 820×1180
iPad Pro 11 834×1194
iPad Pro 12.9 1024×1366
iPad Pro 2018 / 2020 2048×2732

android

Galaxy Tab / 7.0 Plus 600×1024
Galaxy Tab 10.1 LTE 800×1280
ARROWS Tab LTE (F-01D) 800×1280
ARROWS Tab (F-05E) 1200×1920
Nexus7 (2012) 800×1280
Nexus7 (2013) 1200×1920
Nexus 9(2014) 1536×2048
Xperia Z2 Tablet 1200×1920
Kindle Fire 600×1024
Kindle Paperwhite 758×1024
Kindle Fire HD 800×1280
Kindle Fire HD (LTE 2016モデル) 1200×1920
Kindle Fire HD10 1200×1920
Lenovo Miix 2 8 (2014) 800×1280
Lenovo YOGA Tab 3(2015) 800×1280
Lenovo Tab M8 (2019) 800×1280
Lenovo Tab M10 HD (2020) 800×1280
ASUS ZenPad S 8.0 1536×2048
HUAWEI MediaPad m2 8.0 1200×1920
HUAWEI MediaPad M3 1600×2560
HUAWEI MediaPad Lite 10 1200×1920
HUAWEI MediaPad T2 1200×1920
HUAWEI MediaPad T5 lite 8 1200×1920
HUAWEI MediaPad T5 1200×1920
ASUS ZenPad 8.0 800×1280
ASUS ZenPad 10 800×1280
BLUEDOT BNT-791W 768×1024
BLUEDOT BNT-1061W 1080×1920

その他

Surface Pro 4 1824×2736
Surface Laptop 2 1504×2256
Surface Pro 6 1824×2736
Surface Go 1200×1800

タブレットにおけるレスポンシブデザインの考え方

①縦表示

出典:▷Apple

タブレットのレスポンシブデザインと聞くと、縦のタブレット表示を想像する方は多いかもしれません。

タブレットの縦表示の場合、横表示程大きいものはあまり存在しないため、特に難しく考える必要はありません。

②横表示

出典:▷ Apple Support iPad でマルチタスク機能を使う – Apple サポート

現在のタブレットの横幅は非常に大きく、中には1200pxを越えるサイズのタブレットも存在します。タブレットの横幅が小さい場合にはスマートフォン表示もしくはタブレット専用表示にする必要がありますが、横幅が1200px以上のタブレットの場合にはPCと同じ表示を縮小して表示するという方法が多く採用されています。

③分割表示

出典:▷ Apple Support iPad でマルチタスク機能を使う – Apple サポート

PCとスマートフォンの中間にあるタブレットだからこそ活躍する分割表示も、タブレットにおけるレスポンシブデザインを考える上で忘れてはいけない要素です。

画像のように均等に分割する場合もあれば、自由に割合を調整する場合もあります。タブレットにおけるレスポンシブデザインの考え方としては、均等に分割した場合の横幅を考えてメディアクエリを設計するのが無難です。

均等に分割された状態を基準にすることで、その割合以下の場合にはスマートフォン表示に切り替えることができます。そのため、例えば3:7という割合で分割した場合には3の画面がスマートフォン表示、7の方がタブレット表示という形で表示されます。

タブレットにおけるレスポンシブデザインの解決法

タブレットにおけるレスポンシブデザインの表示崩れを解決する方法としては、主に2つの方法が挙げられます。タブレットの横表示専用デザインを制作するか、画面幅に収まるデザインにするかの2つでタブレットにおけるレスポンシブデザイン崩れの対策を取ることが可能です。

それぞれのパターンごとに、考え方やメリット・デメリットをご紹介します。

①タブレットの横表示を想定してデザインする

出典:▷ Apple Support iPad でマルチタスク機能を使う – Apple サポート

iPad Air2を例に出すと、縦表示の768pxと横表示の1024pxの間に限定したレイアウト

を作るような、限定的なレスポンシブデザインを作る考え方です。

メリット

  • どの表示でも適切にレスポンシブデザインで表示される

デメリット

  • ブレイクポイントをPC、タブレット縦、タブレット横、スマートフォンと4つで指定するデザインを制作することになるため、工数が増えます。
  • 現在ではさまざまなサイズのタブレットが販売されているため、それぞれの縦・横の間を埋めるレイアウトを制作するのは負担がかかります。

②画面幅に収まるデザインにする

PC用の画面レイアウトを縮小してタブレットの横表示にそのまま表示するという考え方です。例えばiPad Pro 12.9の場合には横幅が1366pxあるため、このような場合にはPC表示が画面幅に収まるように制作するのもおすすめです。

メリット

  • 専用のレイアウトを追加することなくレスポンシブデザインにできます。

デメリット

  • viewportを画面幅、もしくは機械を検知して切り替える必要があります。WordPressの場合にはis_mobile関数を利用することで効率的に切り替えが可能です。

静的なWebサイト制作で切り替えをしたい場合には、Javascriptで下記のようなコードで切り替えましょう。

タブレットにおけるメディアクエリの設定

メディアクエリとは

メディアクエリはCSSでレスポンシブ対応をするためには必須な仕様であり、各デバイスの横幅に合わせてCSSを分岐表示するために指定するものです。メディアクエリを指定することで、1つのスタイルシートでさまざまなデバイス幅に合わせたCSSコーディングをすることができます。

全体的なメディアクエリ

表示に合ったサイズでレスポンシブデザインの切り替えを実行するブレイクポイントは、以下のように設定します。

スマホ 320〜519px

タブレット 560〜959px

PC 960px以上

上記のブレイクポイントはあくまで表示の切り替え用であり、デザインに合わせて別途

ブレイクポイントを指定してリキッドレイアウトを指定します。

表示に合ったブレイクポイントでなおかつ、PCファーストでメディアクエリを組むと以下のようなコードになります。

スマートフォン表示をベースにしたモバイルファーストでCSSを組む場合には以下のコードでメディアクエリを指定します。

タブレットのブレイクポイントの設定理由

タブレットにおけるレスポンシブデザインを考える場合、分割表示についても考える必要があると先述しました。この520pxという指定は、まさにその分割表示を意識して設定された数値です。

iPadの最小サイズであるiPad Miniは768×1024pxというサイズになっており、これは横表示で等分割したら512px程になります。

しかし、iPad miniはピクセル密度が高いため、512pxというサイズがあっても実際にはだいぶ小さく表示されます。

そして、iPad Miniの縦表示はiPad10.2の等分割表示とほぼ同じ幅・倍率で表示されます。このため、iPad10.2の等分割表示である535pxとiPad Mini に横分割サイズ512pxの中間として520pxを採用しています。

まとめ

タブレットにおけるレスポンシブデザインの考え方についてご紹介しました。タブレットの表示を意識した制作をした経験はあっても、分割画面での表示まで考えたことはなかったという方も多いのではないでしょうか。画面サイズは豊富にあるタブレットだからこそ、適切にレスポンシブ表示がされるように制作していきましょう。

!– =========================== *** ここから下のコードを管理画面の各投稿エディタの下に(今回と同じように)コピペする *** =========================== –>

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

無料でできるWebマーケティング11選  <MIDORIBON>

ダウンロード資料画像

Webマーケティングに取り組もうとしている方に向けて、無料で利用できるWebマーケティングに役立つツールを9つ集めました。ツールの始め方からWebマーケティングに利用するメリット、実践的な活用方法まで解説します。

コストをかけずにまずはWebマーケティングに取り組んでみたい思いの方にぴったりの一冊です。