スマホ解像度一覧【2025年最新】iPhone・Android比較とWeb制作で失敗しない方法

「スマホサイトの解像度設定が分からない」「最新のiPhoneやAndroidに対応したデザインを作りたい」このようなお悩みを抱えていませんか？

Webサイト制作において、スマホの解像度対応はユーザー体験とビジネス成果を左右する重要な要素です。機種ごとに異なる画面サイズや解像度に適切に対応することで、すべてのユーザーに快適な閲覧体験を提供できます。

この記事は、以下のような方におすすめです。

本記事では、2025年最新のiPhone 17シリーズやiPad Pro、Xperiaの解像度一覧から、Web制作で失敗しないポイント、プロに依頼するメリットまで徹底解説します。読後には、デバイスごとの最適な設定が明確になり、成果の出るスマホサイト構築を自信を持って進められるでしょう。

THINkBALは、多様なデバイスに最適化されたレスポンシブデザインで、ユーザビリティとビジネス成果を両立するWebサイト制作を提供しています。

>>THINkBALへWebサイト制作を相談する

スマホサイトを制作する上で、解像度の理解は欠かせません。ここでは解像度の基本的な意味と、Web制作における重要性を解説します。

画素密度とは、1インチあたりに含まれるピクセル数を示す指標で、ppi（Pixels Per Inch）という単位で表されます。

例えば、300ppiのディスプレイは1インチ四方に300×300個のピクセルが詰まっている状態です。同じ画面サイズでも、ppiの数値が高いほどピクセル同士の隙間が小さくなり、文字や画像がより滑らかで鮮明に表示されます。

iPhoneのRetinaディスプレイは326ppi以上の高密度が特徴で、肉眼では個々のピクセルが判別できないレベルの精細さを実現しています。

このppiの違いを理解することで、デバイスごとに最適な画像サイズを選択できるようになるでしょう。

Web制作で解像度を適切に扱うことは、サイトの品質とパフォーマンスの両立に直結します。

まず、視覚的な品質の面では、解像度が不足した画像を拡大表示すると輪郭がギザギザになり、サイト全体の信頼性を損うでしょう。

一方で、高解像度すぎる画像はファイルサイズが大きくなり、読み込み速度の低下を招きます。実際、ページの表示に3秒以上かかると半数以上のユーザーが離脱するというデータもあります。

さらに、PC、スマホ、タブレットなど多様なデバイスに対応するには、それぞれの画面サイズに適した解像度を用意することが必要です。適切な解像度設定により、美しい表示と快適な閲覧体験を両立できるのです。

内部リンク

主要なスマホ・タブレット端末の解像度を一覧表でまとめました。iPhone、iPad、Androidそれぞれの2025年最新モデルを含めた解像度を確認できます。

iPhoneの解像度は、モデルによって大きく異なります。

Web制作では、CSSピクセル（論理ピクセル）でレイアウトを設計し、画像作成時にはデバイスピクセル（物理ピクセル）を考慮する必要があるでしょう。

2025年9月発売のiPhone 17シリーズでは、新たに「Air」モデルが登場し、従来の「Plus」モデルに代わるラインナップとなりました。特にProモデルは高解像度ディスプレイを搭載しており、より精細な表示が可能です。

下記の表では、コーディング時に使用するCSSピクセルと、画像素材を作成する際のデバイスピクセルを分けて記載しています。

※（）内の数字は世代を表します

iPadは画面サイズのバリエーションが豊富で、7.9インチから13インチまで幅広いラインナップがあります。

2025年10月には、M5チップを搭載した最新iPad Proが発表され、AI性能が大幅に向上しました。

また、2025年モデルのiPad Airは11インチと13インチの2サイズ展開で、M3チップを搭載しています。

タブレット向けサイトを制作する際は、これらの解像度に対応したレイアウト設計が求められるでしょう。

※（）内の数字は世代を表します

Android端末は製造メーカーが多く、解像度のバリエーションも非常に豊富です。

ここでは日本国内で人気の高いXperiaシリーズを中心に解像度を紹介します。

2025年6月に発売されたXperia 1 VIIは、21:9のシネマワイド画面を継続しつつ、Snapdragon 8 Eliteを搭載した最新フラグシップモデルです。10月発売のXperia 10 VIIは、シリーズ初となる120Hzリフレッシュレート対応でミドルレンジながら滑らかな表示を実現しています。

Web制作では、これらの多様な解像度に対応するため、柔軟なレスポンシブデザインが不可欠です。

THINkBALは多様なデバイスに最適化されたレスポンシブデザインを得意としており、iPhone・Android・タブレットなど、あらゆる画面サイズで美しく快適に表示されるWebサイトを制作します。

単なるデザインにとどまらず、ユーザビリティやSEO対策も考慮した戦略的なサイト設計により、問い合わせ数の増加やコンバージョン率の向上を実現するでしょう。

UX/UIデザインからWebマーケティングまで、デジタル領域のサービスをワンストップで提供し、クライアント様のビジネス成長を支援いたします。

スマホ対応で成果を最大化したい方は、ぜひお気軽にご相談ください。

>> THINkBALへWebサイトの制作を相談する

まず前提として、スマホかPCかで画面の割合は異なります。

PCの画面割合は基本的に同じですが、スマホは機種によって異なりますので注意してください。ここではスマホとPCの画面の割合について紹介します。

PC画面の割合は基本的に16：9の割合で表示されます。PCを購入する際には縦と横の比率なんか気にする方は少ないでしょうが、サイトを構築する人間からすれば大切な要素です。

例えば、16：9の画面で表示されるはずのサイトに、3：2の比率で表示される画像が使われていたらどうでしょうか？もしかしたら、それほど違和感は感じないかもしれません。しかし、どこかむず痒さを感じてしまう方もいるでしょう。

大衆受けするサイトを構築するためには、画面の比率を意識したうえで画像を挿入する必要があります。ただし、すべてのPCの画面比率が16：9ではないことを意識しましょう。今や多くのプログラマー御用達のMacBook Proは16：10の画面比率です。

このように、すべてのPCの画面比率が16：9ではありませんが、16：9の画面比率が多いということを覚えておきましょう。

ではなぜ、16：9の規格が主流になっているか気になりませんか？先に正解を述べると、フルHDや無印HDの規格が由来しているからです。

フルHDは1,920×1,080、無印HDは1,280×720という規格でできています。約分すると、それぞれ16：9の比率になります。この黄金比をもとに多くのPCで16：9の画面比率が流行するようになりました。

続いてスマホの画面の割合を見てみましょう。まず知っておきたいのが、総務省が発表している「令和3年 情報通信白書」によると、インターネットを利用する端末の68.3％がスマホからだそうです。パソコンからの利用である50.4％より、17.9％も上回っています。このようにスマホが全盛の現代においては、スマホサイトのデザインに対応することは急務です。

しかし、今やスマホは大きく分けてiPhoneとAndroidの2つの端末が流通しています。両者とも異なる特徴を持っていますので、好みによって利用しているスマホは異なるでしょう。ここで大変なのが、スマホは機種によって画面比率がだいぶ異なることです。

すべてのスマホ画面比率を把握するのは大変ですが、せめてスマホの代表格であるiPhoneとAndroidの画面比率は把握しておきましょう。

iPhoneの画面比率は最新作のiPhone13で19.5：9です。これまでiPhoneは16：9の画面比率でリリースされていました。初期のiPhone4や4sなどの場合は3：2などの画面比率でもリリースされています。

しかし、16：9の画面比率が主流だったのも過去のことで、スマホ市場においては画面の縦長化が起きています。このトレンドが起きている背景として、スマホで検索することが増えたことがきっかけだと考えられるでしょう。スマホでの検索機会が増えたユーザーは、1つの画面でなるべく多くの情報量を求めるようになっています。

そのため、なるべく情報量が多く表示される縦長の画面がトレンドになったのでしょう。今後も縦長のスマホがシェアを伸ばしていく可能性があります。そのため、Apple社はいち早くiPhoneの画面比率を縦長画面に対応したのかもしれません。

Androidのスマホは、縦長化がさらに顕著に現れている機種が存在します。例えば、Androidのスマホといえば、arrowsやGalaxy、Xperiaなどを思い浮かべる方がいるでしょう。それぞれの最新作の画面比率は以下の通りです。

以上のようにAndroidスマホはiPhoneよりも縦長化が顕著です。さらに、なかには折り畳みできる形式のスマホが販売されていて、Androidスマホは今後縦長よりもPCに近い感覚で操作できるスマホをリリースすることが予想されます。

それぞれ端末によって画面比率が異なるため、どの程度のコンテンツ幅にしようかと悩まれることもあるでしょう。続いて、スマホとPCのコンテンツ幅でおすすめのサイズを紹介します。

PCサイトのコンテンツ幅は、1,000px前後〜1,000px以上がおすすめです。1,000px前後〜1,000px以上というコンテンツ幅がおすすめである理由は、多くのPC画面において、フルHDの1,920x1,080が採用されていることが影響しているといわれています。フルHDを採用していなくても1,280×720程度の画面を採用していることが多いです。

そのため、1,280の画面幅に合わせて、少なくともコンテンツ幅を1,000pxにするようにしているWebサイトが多いです。この際よくありがちな間違いなのが、コンテンツ幅とアートボードの概念を同じだと思うことです。

コンテンツ幅はアートボード内に入れるデザインの横幅のことですので、アートボード＝コンテンツ幅ではありません。もし「コンテンツ幅を1,000pxにしといて」と指示されたとして、アートボード幅を1,000pxに設定してしまってはかなりビジュアルが異なってきますので注意が必要です。

では、なぜコンテンツ幅を考える必要があるのでしょうか？コンテンツ幅を考える理由としては、アートボード上のデザインに上限を持たせないと文章が間延びしてしまう恐れがあるからです。横に伸びている文章はユーザーが読みにくいため、そもそも適切なデザインとはいえません。そこで、コンテンツ幅を設定する必要があります。

これはPCサイトでもスマホサイトでも同じですので、この際に覚えておきましょう。

スマホサイトのコンテンツ幅でおすすめなのは約300~500pxです。この300~500pxという数値は、統計情報を載せているWebサイト「StatCounter」の「Mobile Screen Resolution Stats Japan」にて記載されている情報を参考にしています。

StatCounterが掲載している統計によると、375x667サイズの画面が19.02％、414x896サイズの画面が13.79％のシェアを獲得しています。他にも横幅が300〜500pxの画面サイズだけで、ほとんどのシェア率を占めています。そのため、スマホサイトのコンテンツ幅を決める際には、300〜500pxの数値にとどめておけば問題ないでしょう。

ただし、注意していただきたいのがiPhoneはRetinaディスプレイを採用しているということです。RetinaディスプレイとはApple製品に搭載されているディスプレイのことで、通常のピクセルより2倍のピクセルで表示されています。そのため、Retinaディスプレイを採用することで、細かな表現を可能にしています。

通常より2倍のピクセルで表現されているということは、デザインやフォントの要素も2倍でデザインする必要があるということです。例えば、横幅300pxのデザインを作成する際には、600pxのデザインを作成しなくてはいけませんので注意してください。

Webサイトにおける解像度とは、画面上にあるピクセルの数を表すものです。PCやスマホ、タブレットによってそれぞれ解像度は異なります。ここでは、それぞれの端末別に解像度を紹介しますのでデザインの参考にしてください。

デスクトップPCの解像度で多いのは1,920×1,080pxです。統計情報を載せている「StatCounter」によると、2020年12月から2021年12月の間で利用されたPCの解像度で一番多かったのが1,920x1,080pxという数値でした。次いで利用されていたのが1,366x768pxです。

上記の解像度が多かった原因として、フルHDのモニターの利用者が多いことが考えられます。やはりPCのデスクトップでは上記のようなフルHDで16：9の比率の画面が人気なようです。

スマホの解像度で一番多く利用されているのは375x667pxの比率です。こちらの「StatCounter」に掲載されていて、375x667pxの比率は市場シェアの19.0％を占めています。

また、同統計を参照してみると、市場シェアのトップ5を占めている横幅の解像度は350〜450pxのあいだに分布しています。そのため、もしスマホサイトを作成するのであれば、300〜500pxの横幅に設定しておけば問題ないでしょう。

ただし、先述した通りiPhoneはRetinaディスプレイを採用していますので、上記の解像度の2倍の設定でデザインしなくてはいけません。iPhone製品だけで市場シェアのおよそ30％を獲得しているともいわれていますので、iPhoneのことも考慮したうえでスマホサイトを作成するようにしてください。

タブレットで最も多く利用されている解像度は768x1,024pxというデータがあります。タブレットで注目してほしい点が768×1,024pxの市場シェア率です。2020年12月から1年間におけるタブレットで最も利用されている768×1,024の解像度は、市場シェアの47.3％を占めています。

市場の約半分を768×1,024の解像度が占めていることになりますが、これはApple製品の初代iPad miniと同じ解像度です。つまり、タブレットを利用している方はiPad miniを基本的に利用しているといえるでしょう。そのため、タブレット向けのサイトであれば768×1,024の解像度を設定することで、市場のおよそ半分はカバーできることになります。

スマホサイトの制作では、解像度への対応を誤るとユーザー体験を大きく損ねてしまいます。ここでは、よくある失敗パターンとその回避方法を解説します。

スマホサイトで最も多い失敗は、ボタンやリンクのタップ領域が小さすぎることです。

指で操作するスマホでは、タップ可能な領域は最低48×48ピクセル以上を確保する必要があるでしょう。これより小さいと、隣のボタンを誤って押してしまい、ユーザーはストレスを感じます。

また、文字サイズが小さすぎる設計も問題です。本文は最低16ピクセル以上に設定し、拡大しなくても読める大きさを確保しましょう。

さらに、情報を詰め込みすぎてごちゃごちゃしたデザインは避けるべきです。スマホは画面が小さいため、シンプルなデザインでないと欲しい情報にたどり着きにくくなります。コンテンツ幅は画面幅に自動で収まるよう、可変レイアウトを採用することが重要です。

解像度対応で見落としがちなのが、画像ファイルの最適化です。高解像度ディスプレイに対応しようと、必要以上に大きな画像を使うと、ページの表示速度が大幅に遅くなります。

スマホは電波が届きにくい場所での利用も考えられるため、表示速度はPCよりもシビアに考えるべきでしょう。

対策として、画像圧縮ツール（SquooshやI love IMGなど）を使い、データ容量を削減することが効果的です。また、デバイスの画面サイズに合わせた画像を自動で配信する仕組み（srcset属性）を使うことで、無駄なデータ通信を防げます。

まずは「PageSpeed Insights」でサイトの表示速度を確認し、改善が必要な箇所を特定しましょう。CSSやJavaScriptファイルの圧縮も忘れずにおこなってください。

スマホサイトでは、すべてのユーザーが快適に利用できる設計が求められます。

まず、文字と背景の色の差をはっきりさせることが重要です。視覚的に見やすいコントラスト比を保つことで、高齢者や視覚に障害のある方も情報を読み取りやすくなるでしょう。

また、入力フォームには適切なラベルを設定し、音声読み上げソフトでも内容が理解できるようにする必要があります。フォームの入力欄は大きめに設定し、選択式を採用することで誤入力を防げます。

さらに、画面を拡大表示した際にもレイアウトが崩れない設計が必要です。ピクセル単位ではなく相対的な単位（em、rem）を使用することで、文字サイズを変更してもレイアウトが保たれ、多様なユーザーが利用しやすいサイトになります。

スマホ対応のWebサイト制作をプロに依頼することで、技術的な課題を解決しながら成果につながるサイトを構築できます。

専門知識を持つ制作会社は、多様なデバイスに最適化されたレスポンシブデザインを実装し、ユーザビリティとSEO対策を両立させた設計を実現するでしょう。特に重要なのは、最新のデバイスや解像度トレンドへの継続的な対応です。

iPhone・Androidの新機種が毎年登場する中、自社で全ての端末に対応し続けるのは大きな負担となります。プロに依頼すれば、技術アップデートや保守運用まで一貫してサポートを受けられるため、安心してビジネスに集中できるでしょう。

THINkBALでは、現状のサイト分析から課題の洗い出し、改善提案まで一貫してサポートし、アクセス解析に基づいた戦略的な視点でコンバージョン率を高める導線設計をおこないます。成果の出るスマホサイトを構築したい方は、ぜひTHINkBALにご相談ください。

>> THINkBALへWebサイトの制作を相談する

スマホサイトの解像度対応は、ユーザー体験とビジネス成果に直結する重要な要素です。

本記事では、iPhone・Android・iPadの最新解像度から、Web制作で失敗しないポイントまで幅広く解説しました。成功するスマホサイト制作の重要なポイントは以下の通りです。

効果的なスマホサイト制作には、多様な解像度への技術的対応とユーザー視点の設計が不可欠です。「自社で対応しきれない」「成果の出るスマホサイトを作りたい」とお考えの方は、ぜひTHINkBALにご相談ください。

THINkBALは、最新デバイスへの継続的な対応から戦略的なサイト設計まで一貫してサポートし、問い合わせ増加やコンバージョン率向上といった具体的な成果を実現します。

>>THINkBALへWebサイト制作を相談する