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

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」以下の小さい画像は、拡大表示されるため輪郭がぼやけてみえます。

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

関連記事

【WP】WEBカタログのようなギャラリーを作成することができる『Page Flip Image Gallery』

説明書やページ数のあるカタログをサイトに公開するとき、ページをペラペラとめくることができるWEBカタログの形式で公開したいときがあります。 しかしWEBカタログはページをめくるアニメーションやボタン操作などFlashやJavascriptなどを用いた開発が必要となるので...続きを読む

2015.02.19WordPress

【WP】WordPressで出力されるHEADタグ内の内容を整理する

WordPressを利用してWebサイトを構築すると、HTMLを構成するHEADタグ内にWordPress特有の記述が見れます。このWordPress特有の記述は自動的に生成されるため、テーマファイルのソースに記述されているheadタグ内の内容を編集するだけでは変更することができ...続きを読む

2021.01.28HTMLコーディングWordPress

藤枝おんぱく『村松八百蔵商店ギャラリー』(5/30)

藤枝駅前の古民家「村松八百蔵商店」を会場に藤枝おんぱくで行われたさまざななプログラムのフォトギャラリーの展示の様子をお届けします。 フォトギャラリー ※写真をクリックすると拡大表示します。 [gallery link="file" columns="4" ids="98...続きを読む

2015.08.17フォトギャラリー

【ソーシャルメディア】2004から2013年までのソーシャルメディアの成長

検索エンジンジャーナルによる2004から2013年までのソーシャルメディアの成長をあらわした図解です。( Search Engine Journal ) The Growth of Social Media v2.0 [INFOGRAPHIC] 図解をみてみると、...続きを読む

2015.02.17WEB

【デザイン】ウエディングパーティーのエスコートカード

ウエディングパーティーなど来客者をテーブルに案内するときは座席表やエスコートカードが登場しますね。今回は、クリエイティブなエスコートカードの参考事例をご紹介します。 Malibu Calamigos Ranch wedding 可愛らしいミニチュアサイズの鉢植えでお出...続きを読む

2015.03.25インスピレーション