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

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

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

関連記事

【CSS】linear-gradient(グラデーション)を使ったボタン作成

CSSのlinear-gradient()関数を用いることで画像を使わずとも、グラデーション色のボタンを作成することができます。 ※矢印は、「Font Awesome」、文字はGoogle Fontsの「M PLUS Rounded 1c」を組み合わせております。 ボ...続きを読む

2021.02.19CSSHTMLコーディング

【CSS】CSS3で実現するドロップシャドウ効果

画像処理のソフトなどには、文字やオブジェクトに影をつける「ドロップシャドウ」という機能があります。 ボタンや写真などに「ドロップシャドウ」使うことで立体的に表現することができるのでよく使われる効果のひとつです。 画像処理のソフトなどで行う「ドロップシャドウ」効果を...続きを読む

2015.02.09HTMLコーディング

モバイルサイトを構築するときに役立つフレームワーク5選

スマートフォンやタブレットなどのモバイル端末の普及に合わせて、モバイル端末によるWEBサイトへのアクセスやモバイルアプリケーションの需要が多くなってきていることを感じます。 今回はモバイル端末に最適化されたWEBサイトやアプリケーションを制作するときに役立つフレームワー...続きを読む

2015.02.08HTMLコーディング

【お名前.com】ドメインの申請が完了できなくなってしまった-解決方法-

WEBサイト(ホームページ)を新しく公開するときは、URLとなるドメインが必要になります。ドメインを取得するために、「お名前.com」のサービスを利用することが多いのですが、申込中にエラーが発生しました。 「お名前.com」で新しいドメインを申込した際に、『カートの内容が変...続きを読む

2018.07.23WEBサイト制作お名前.comドメイン

【デザイン】印象に残るビジネスカードデザイン第2弾

以前に「印象に残るビジネスカードデザイン」をテーマにアイディアにあふれるビジネスカード(名刺)をご紹介しました。今回は第2弾目です。 今回もちょっと変わった、もらうと印象に残るビジネスカード(名刺)の事例をご紹介します。 TAM Cargo:Box Busines...続きを読む

2015.04.16インスピレーション