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

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

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

関連記事

【HTML】Bootstrap4を使いレスポンシブサイトをコーディングする《導入編》

Twitterのデザイナーや開発者が作成した『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応...続きを読む

2018.09.22BootstrapHTMLコーディング

美容室グランディール様WEBサイトのリニューアル

富士宮市にある『美容室グランディール』様のWEBサイトのデザインをリニューアルいたしました。上質な空間を演出できるように、よりナチュラルな印象に、おしゃれで可愛らしい雰囲気のデザインに仕上がりました。 インスタグラムでの投稿と連携して、写真が表示されるようになっております。...続きを読む

2018.02.06WEBサイト制作リニューアル美容室

【動画】スマートフォンを使った面白いトリック写真の撮影方法

こんにちは。最近はyoutubeで世界中の様々な方が撮影方法を動画で紹介しています。自分もカメラの勉強にとよく見ています。今回は、スマートフォンとちょっとしたアイディアを加えることで撮影できるトリック写真の撮影方法が紹介されていましたので紹介いたします。動画の解説は英語ですが、映...続きを読む

2018.02.15撮影スキル

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

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

2015.02.09HTMLコーディング

2015年のウェブサイトのデザイントレンド

2015年も4月新年度を迎えますね。年度の切り替わるこの時期はウェブサイトのリニューアルも多いと思います。今回は、2015年の注目されるウェブサイトのデザイントレンドをご紹介します。 Startup Framework 「Startup」タイプのウェブサイトは1ページ...続きを読む

2015.03.26WEB