モバイル端末(スマホ・タブレット)への対応手法

スマートフォン・タブレット等モバイル端末へのホームページ(ウェブサイト)の対応手法は、次の2つに大別されます

今ご覧のこのページは、この手法です。2014年頃までは、モバイル対応としては、別URL方式が、主流で、非常に多くの大企業サイトでサイト内全ページについて、パソコン版URLとモバイル版URLの2つのページを設けてモバイル対応をしておりました。
同じURLのページに異なるスタイルシート(CSS)を適用する手法
当社の作成例(申込から納品までの流れ)を是非パソコン・スマホの両方でご覧ください。
2015年頃より、同じURLのページで、スタイルシートと呼ぶページのデザインを決定するCSSを切り替える手法が、むしろ主流となりました。
これは、
@iphone発売当初から、アップルが、 この手法を推奨していた点
Aそれ以上に、グーグルが、モバイル対応として、スマートフォンに最適化されたウェブサイトの構築方法として、この手法を推奨している点にあります。Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法 (グーグル公式ブログご参照)
Bこのため、弊社では、お客様から特段のお申し出がない限り、Aの方式=同一URLにてモバイル対応を行うことを原則としております
[ご注意]
弊社ウェブサイトは、サイト開設の場合、必ずパソコンが使用されることから、パソコンをメインターゲットとして構成しております。原則として、各ページは、パソコンのみをターゲットとし、一部のページのみモバイル対応しておりますが、
ご注文の際には、上記Aの手法でウェブサイト内の全ページのモバイル対応致します。
以下に、ご参考までに、モバイル対応手法の主要な全パターンをまとめております。
対応の手法(1)同じページに異なるCSSを適用

当社作成例

この手法が、2015年以降は、概ね主流となっておりますが、技術的には、次の3つのパターンがございます。
それぞれ、一長一短があり、お客様にてご指定ない場合には、下記@にてモバイル対応用Javascriptを作成いたします
@サイト訪問者が、使用している端末(パソコン・タブレット・スマホ)のブラウザ名に応じて、異なるCSS(スタイルシート)を適用する技術的手法
![]() |
スマホの場合、パソコン用のデザインでページが表示されることは、絶対にありません。 |
![]() |
iPad、Windowsタブレットにつきましては、全く問題ありませんが、Andoroid搭載のタブレットにつきましては、スマホのデザインで表示されます |
Aサイト訪問者が、使用している端末 ソコン・タブレット・スマホ)の画面の横幅に応じて、異なるCSS(スタイルシート)を適用する技術的手法
![]() |
使用されている端末(パソコン・タブレット・スマホ)画面サイズに、ページが完全にフィットします。 |
![]() |
スマホの横持ちの場合には、パソコン用のデザインでページが表示されてしまう場合がかなり多くなります。 |
Bサイト訪問者が、使用している端末(パソコン・タブレット・スマホ)の画面の横幅とブラウザ名の両方に応じて、 異なるCSS(スタイルシート)を適用する技術的手法。弊社が独自に開発した手法です。
![]() |
iPone6Plus等の画面サイズの大きいiPhoneでも、iPhoneであれば、パソコン用のデザインでページが表示されることは、絶対にありません。また、Andoroid搭載のタブレットにつきましても、タブレット用デザインで表示されます。@Aとの違いです |
![]() |
Andoroid搭載のスマホの横持ちの場合にのみ、パソコン用のデザインでページが表示される場合もあります。日本では、画面サイズの大きいスマホを好む方も多いため、将来的に新規製品スマホを考慮すれば、区分数値の決定がかなり困難です |
対応手法(2) 全ページを分ける手法
トップページを含む全てのページをモバイル版URLとパソコン版URLに分ける手法で、パソコンでのデザインを最重要視される場合に適しています。

対応手法(3) 切替ボタンを設ける手法

