モバイル端末の画面サイズまとめ

mobile-design-device-size

WEBサイトを制作するときのサイズの基準になるのが画面の解像度です。

基本的には、ディスプレイサイズに合わせてデザインされるので、横幅が920px~1024pxあたりでレイアウトされるのが主流といえます。

最近では、スマートフォンやタブレットなどでWEBサイトを閲覧する機会も増え、スマートフォンやタブレットに合わせたデザインが必要になってきています。

そこで、スマートフォンやタブレットなどのモバイル端末の画面サイズをまとめてみました。

モバイル端末の解像度

解像度 端末
240×400
  • docomo F-05B
320×480
  • iphone
480×854
  • docomo N-01F
  • docomo P-01F
  • docomo SH-03E
  • docomo F-10B
  • docomo N-07E
540×960
  • docomo F-04F
  • MOTOROLA RAZR(TM) IS12M
640×960
  • iPhone4
720×1280
  • docomo XperiaTM Z1 f SO-02F
  • au DIGNO(R) S KYL21
  • au ARROWS ef FJL21
  • au AQUOS PHONE SERIE SHL21
  • au Xperia(TM) VL SOL21
  • au INFOBAR A02
  • au URBANO L01
  • au AQUOS PHONE SERIE SHL22
640×1136
  • iphone5s,iphone5c
1080×1920
  • docomo AQUOS PHONE ZETA SH-01F
  • docomo ARROWS NX F-01F
  • au Xperia(TM) UL SOL22
  • au HTC J One HTL22
  • au DIGNO(R) M KYL22
  • au ARROWS Z FJL22
  • au AQUOS PHONE SERIE SHL23
  • au GALAXY Note 3 SCL22
  • au Xperia(TM) Z1 SOL23
  • au isai LGL22

キャリアから販売されている主な機種の解像度のスペックをまとめてみました。

見てみると最新(2013年12月まで)の機種で「1080×1920」、デスクトップの大きさと同等ですね・・・。

端末ごとにこれだけ差があると、端末に応じてデザインをするのは途方に暮れてしまいそうです。

スマートフォン向けのWEBサイトの制作

実際の問題として、これだけ画面サイズが異なる端末に合わせてデザインを行うのは効率的ではないです。サイズの違いだけで10種類以上もバリエーションが必要になってしまいます・・・。

そこでスマートフォン向けにメタ情報として「viewport」という表示領域を設定する機能が用意してあります。

サンプルコード

/* 固定タイプ */
<meta name="viewport" content="width=320, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

/* 汎用タイプ */
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

固定タイプの記述では「width=320」を設定しています。この場合、スマートフォンで表示する場合のコンテンツの横幅は「320px」となります。

汎用タイプの記述では「width=device-width」を設定して、「device-width」とはその端末が持つ横幅に合わせるということになります。

この「device-width」は、端末の解像度なのか?というと、標準サイズとしてiPhone端末では「320px」、Android端末では「360px」が設定されているようです。※端末内のOSのバージョンによっては動作が異なります。

スマートフォンの横幅に関しては、「320px」または「360px」を基準にレイアウトをすればよさそうです。

高解像度端末の画像表示について

「viewport」を設定すれば、見た目の上では、高解像度のスマートフォン端末でも、古いタイプのスマートフォン端末と同じように横幅は「320px」または「360px」のサイズで表示されるようになりますが、画像を使う場合は注意が必要です。

実際に横幅が640pxの画面に320pxのコンテンツを表示するのは、コンテンツを2倍にして拡大表示していることになります。

1px×1pxの画像を単純に画面内に設置すると、この画像は4px×4pxに拡大表示されることになります。

そのため、横幅が「320px」以下の小さい画像は、拡大表示されるため輪郭がぼやけてみえます。

このようなスマートフォン特有の表示環境も考慮してデザインにも注意しておかないといけませんね。

関連記事

【無料】商用利用OKシームレステクスチャ「木目(ヒノキ風)」素材

自然の木目を表現したシームレスの無料で使えるテクスチャです。ヒノキの柱、床材のような木の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 ...続きを読む

2018.09.11シームレステクスチャ

【HTML】Font Awesome 5 をWEBサイトに組み込む方法

Font AwesomeはWEBサイトにも組み込むことができるアイコンフォントです。現行の最新バージョン(Version 5.8.1)では、無料版で1,513種類、有料版で5,097種類ものアイコンが利用することができます。アイコンは矢印やインターフェースで利用でいる記号、SNS...続きを読む

2019.04.24HTMLコーディング

美容室ヒュッゲ様WEBサイト制作

静岡県富士市にある『美容室ヒュッゲ』様のWEBサイトを制作いたしました。お店のナチュラルな雰囲気と、手書きのかわいらしいロゴに合わせて、水彩調のイラストやレースなどを用いてかわいらしいデザインをしました。ヘアギャラリーやスタッフブログなどCMSによる更新コンテンツも充実したホ...続きを読む

2019.06.14WEBサイト制作美容室

美容室グランディール様折込チラシ制作

富士宮市にある『美容室グランディール』様の折込チラシを制作いたしました。お店で開催されるキャンペーン、お店の基本情報を告知するための折込チラシです。 [gallery link="file" columns="4" ids="725,726"] クライ...続きを読む

2015.03.19チラシ制作美容室

【WP】5段階評価ができる「Yet Another Stars Rating」の導入方法

商品などのレビューに評価として星がついているのを見かけることがあると思います。外部からの評価として商品購入の参考にもなります。 今回はWordPress上の記事に5つ星の評価をつけることができるプラグイン「Yet Another Stars Rating」の導入方法をご...続きを読む

2015.04.15WordPress