I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > web関連 > ホームページの携帯電話・スマートフォンなどのモバイル対応方法

ホームページの携帯電話・スマートフォンなどのモバイル対応方法

ホームページの携帯電話・スマートフォンなどのモバイル対応方法

ホームページのモバイル対応を行なうにはどのような方法があるでしょうか。
モバイル対応の方法としては、主に下記の3つが挙げられます。

  • レスポンシブ・ウェブデザインを使用しているサイト、すなわち、すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Google の推奨する設定方法となります。
  • すべてのデバイスに対し単一の URL で、ユーザーエージェントに応じてデスクトップ用かモバイル用かなどを判断して動的に異なる HTML と CSS を提供するサイト。
  • モバイル用のサイトとデスクトップ用のサイトを別々に構築しているサイト。
Google ウェブマスター向け公式ブログ|Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法

それぞれ下記の通りご説明します。

レスポンシブ・ウェブデザインを使用する場合

レスポンシブウェブデザインとは、サイトを表示するときの画面のサイズによって、CSS(スタイルシート)のみの機能で表示するデザインを切り替えるデザインです。

レスポンシブ・ウェブデザイン

画面のサイズによってデザインを切り替えるので、

  • スマートフォン用のデザインが用意されている場合、スマートフォンからはスマートフォン用のデザインでしかサイトを表示できない。
  • タブレット用のデザインが用意されている場合、タブレットからはタブレット用のサイズでしかサイトを表示できない。
  • パソコンからサイトを閲覧している場合、ブラウザのウィンドウのサイズを変更すると、タブレット用のデザイン・スマートフォン用のデザインでサイトを表示できる。

という動作をします。
実際に動作するサイトは下記を参考にしてください。

レスポンシブデザインを利用しているサイト
レスポンシブデザインを使用するメリットとデメリット

レスポンシブデザインを利用したサイトのメリットとしては、

  • サイトのURLをひとつしか用意しなくてよい
  • CSSのみでデザインを切り替えることができる

という点が挙げられますが、デメリットとして、

  • スマートフォン・タブレットからPC用のデザインを確認できない
  • スマートフォン・タブレットの画面サイズが固定されていない

という点があります。
たとえば、スマートフォンから「PCでサイトを見た時に右上にあったボタンをクリックしたいのに場所がわからない」などの状況が発生する可能性があります。
また、ブレイクポイント(デザインが切り替わる画面サイズの数値)をどこに置くかという点も議論のポイントになり得ます。

ユーザーエージェントに応じてサイトのデザインを切り替える場合

useragent.jpg

ユーザーエージェントに応じてサイトのデザインを切り替えるには、JavaScriptPHPを使用します。
iphoneやipad、androidでアクセスする時はスマートフォン用のCSSを読み込み、その他の場合はPC用のCSSを読み込んで表示します。

実際にユーザーエージェントに応じてデザインを切り替えているサイトとしては、

  • ブログサービスを利用したブログ
  • CMSを利用したサイト

などが挙げられます。

なお、国内創作サイト向けコンテンツ管理システム freo(フレオ)では、ユーザーエージェントに応じてスマートフォンやタブレットでサイトを表示する際に専用テンプレートを使用することができます。

ユーザーエージェントによってデザインを切り替えているサイト
ユーザーエージェントによってデザインを切り替えるメリットとデメリット

ユーザーエージェントに応じてサイトのデザインを切り替えるメリットとしては、

  • ユーザーエージェントを切り替えることで動的にサイトのデザインを変更できる。

点が挙げられます。

スマートフォンやタブレット用のブラウザには、自分のユーザーエージェントを変更する機能が備わっている場合があります。
ブラウザ側でユーザーエージェントを変更することで、スマートフォンやタブレットでもPC用のサイトデザインを確認することができます。

上 記は閲覧者側の対応になりますが、サイト管理者側の対応として、閲覧者のユーザーエージェントによってサイトのデザインを変更するだけでなく、閲覧者の ユーザーエージェントをクッキーなどに保存して、そのクッキーを変更することでも、サイトデザインを動的に変更することができます。

デメリットとしては、サイトデザインを切り替えるために、

  • JavaScriptまたはPHPを利用できる環境でなければならない。
  • 表示を切り替えたいユーザーエージェントを指定しておかなければならない。

という点が挙げられます。

サーバーによってはPHPを利用できないサーバーもありますし、ユーザーエージェントによって表示を切り替えるため、表示を切り替えたいユーザーエージェントを把握し、あらかじめ指定する必要があります。
現在ではiphone・ipad・androidを指定するので十分かと思いますが、将来的に他のユーザーエージェントを振り分けなければならなくなることも考えられるので、そのような対応がとれるようにしておいたほうが良いと思います。

デザインの切り替え機能を自前で用意するのが困難な場合は、ブログCMSを利用するのも有効な手段だと思います。

参考サイト

モバイル用のサイトとデスクトップ用のサイトを別々に構築する場合

PC用のサイトモバイル用のサイトを用意し、PC用のサイトではPC用デザインで表示し、モバイル用のサイトではモバイル用のデザインで表示します。
別々のサイトを用意することになるため、URLも当然PC用とモバイル用では別のものを用意しなければなりません。

なお、携帯用のサイトに利用できるドメインとして、.mobiというドメインがあります。
.mobiでは、モバイル端末での閲覧に適したホームページとなるようmTLDによりMobile Web Developer’s Guideが規定されています。

【Mobile Web Developer’s Guide】
http://mobiforge.com/developing/blog/mobile-web-developer%e2%80%99s-guide-part-ii

モバイル用のサイトとデスクトップ用のサイトを別々に構築しているサイト

PC用サイトにアクセスしたモバイルを利用した閲覧者に対しては、.htaccessを利用してユーザーエージェントを判断し、サイトを自動的に転送するなどの処置を行った方が良いでしょう。

スマートフォンサイト制作ブログ|htaccessによるPC・スマートフォンの振り分け転送

モバイル用のサイトとデスクトップ用のサイトを別々に構築するメリットとデメリット

PC用のサイトとモバイル用のサイトを別々に構築するメリットとしては、

  • アクセスするURLを変更することでユーザーが動的に閲覧時のデザインを選択できる
  • PC用のサイトとモバイル用のサイトで、サイトのデザインだけでなく、表示するコンテンツの内容を変更することができる

という点が挙げられます。
PCからの閲覧者とモバイルからの閲覧者では、欲しい情報・利用したいサービスが違います。
アクセスするURLによって閲覧時のデザインや内容を閲覧者が自由に変更・選択できます。
あるコンテンツの内、PCでは全文表示したいものの、モバイルでは抜粋のみを表示したい場合などに実用的です。

デメリットとしては、

  • 複数のサイトを運営しなければならないので、サイトを管理する手間が増える

という点が一番大きいでしょう。
なお、「同じサイトが二つもあっては重複コンテンツと判断されて検索結果上不利にならないか」という点については、linkタグのアノテーションを正規に記述することによって回避することができます。

参考URL

まとめ

以上のように、サイトをモバイル対応するには様々な方法がありますが、閲覧者の操作しやすさ・サイト管理者の管理しやすさ・検索エンジン等への対策を感がえて、一番適切なものを選ぶ必要があります。
せっかくサイトを管理するのであれば、どの端末から見ても見やすいように配慮し、運営してみてはいかがでしょうか。

I'll be NETでは、新規サイトの作成・既に運営されているサイトのモバイル対応のご相談をお受けいたします。
ご希望の方はどうぞお気軽にお問い合わせ下さい。

記事移動

関連記事

pixiv小説のように縦書き表示する方法-2019版

pixiv小説のように縦書き表示する方法-2019版

smartyのarray_key_existsで配列の中のキーの有無を調べる方法

レスポンシブデザインなサイトの作り方

創作サイトの携帯電話・スマートフォンなどのモバイル対応方法(中級者編)

創作サイトの携帯電話・スマートフォンなどのモバイル対応方法(初心者編)

創作サイトの携帯電話・スマートフォンなどモバイル対応の必要性

Comment Form

  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

Feed