スマートフォン対応ホームページの作り方

公開日:  最終更新日:2015/10/07

ホームページのスマートフォン対応はお済ですか?2015年4月にGoogleがモバイルフレンドリーアップデートを行い、スマホ対応の有無がモバイル検索結果順位に影響するようになりました。対応する方法は3種類、どれが向いているか判断しにくい方はぜひお読みください。

レスポンシブ

スマホ対応するなら3種類の方法があります

ホームページやWebサイトを作る際に今やスマートフォンに最適化することは必須項目と言えます。スマートフォンに最適化されたページを作成する方法は大きく分けて3つに分類されます。それぞれ一長一短ありますので

レスポンシブ

表示している端末の種類や画面サイズ毎に、表示内容が最適な状態に変化するよう設定されたファイルを用意することで実現できる仕組みです。1つのURL・1つのHTML文書でPCサイト・スマートフォンサイトの両方に対応できるため、初期の開発工数やその後の運用工数が削減できるメリットがあります。その一方で、サイトデザインには制約が発生するため複雑なサイトにはあまり向いていません。

サーバでの切り替え

サーバーの設定やプログラムによってスマートフォン用のページを表示する仕組みです。PCとモバイルで別々にHTML文書を用意し、サーバーやプログラムで判定して切り替えるため、レスポンシブの欠点である自由度に関してはかなり高いと言えます。その分、技術者による対応が必要ですので、初期コストや運用工数は他の方式にくらべやや不利になるでしょう。

スマホ専用サイト+リダイレクト

この方法では予め別途スマートフォン専用サイトを構築してしまい、もしPCサイトにスマートフォンのアクセスがあった場合はスマートフォン専用サイトにリダイレクト(転送)するという方式です。スマートフォン専用サイトを新たに構築するということで、自由度・柔軟性ともに抜群に良いのですが、URLがPCとモバイルで別々になってしまいSEO効果が十分に期待できない、リダイレクトを行う際にURLがPCとモバイルで1:1になっておらず転送先に悩む、などの苦労もありますので注意が必要です。

番外編!変換サービスを使う

今からホームページを作る人には関係ない話になりますが、既存ページを一瞬でスマホ対応するなら変換サービス(ASP)もあります。月額固定で5,000円程度〜利用できるので、どうしても急ぎ必要になった場合には検討してみる価値があるかもしれません。

比較表

ここまでにご紹介した対応方法3つを比較表にしてまとめてみました。

レスポンシブ 切り替え 専用サイト
初期コスト
自由度・柔軟性 △〜◯
運用工数

ホームページの種類で選ぶ、スマホ対応方法

では実際にスマートフォンサイトを作ろうとした場合、この3つのうちどれを選べばよいか悩んでしまうかもしれません。実は作ろうとするWebサイトの内容でどの方法が相応しいかある程度絞り込むことができます。ここでは代表的なWebサイトの種類とそれに合わせた作成方法をご紹介しますので参考にしてください。

画像が多い企業ページは「切り替え」「専用サイト」

例えばアパレルや住宅系、インテリア系などの「写真」やそのレイアウトが重要なサイトにおいてはデザインに制約が発生するレスポンシブは不向きです。「切り替え」「専用サイト」のいずれかを選ぶと良いでしょう。

メディア・情報サイトなら「レスポンシブ」「切り替え」

メディアや情報サイトなどテキストが中心になるサイトは「レスポンシブ」がおすすめです。テキストに加え写真も豊富に使う場合には「切り替え」を選ぶのも手です。どちらの場合もURLをPC・モバイルで共通にできるため、記事をシェアしてもらい拡散を狙った場合にアクセスしやすくなるという利点があります。逆に「専用サイト」ではURLが統一されないためこれらのサイトではおすすめできません。

ECサイトは「切り替え」がベスト

ECサイトの商品詳細ページは仕様が複雑になることが多いです。商品のカテゴリや種類毎に表示する項目が変わる場合も多々あると思います。こういった特性をもつサイトではアアクセスしてきた端末と商品の種類の組み合わせパターンをプログラムで処理させる「切り替え」による対応がベストの選択肢になるでしょう。

シンプルな企業サイトなら「レスポンシブ」

複雑なレイアウトパターンが少ないコーポレートサイトには「レスポンシブ」がおすすめです。1つのHTML文書で対応できるのでPC・モバイル両サイトの運用が手軽に行えるうえ、更新漏れといったミスも防ぐことができるでしょう。有名企業でもコーポレートサイトをレスポンシブで作成していますのでいくつかご紹介します。

kirin

[レスポンシブの美しい企業サイト]

KIRIN
NTTデータ
Apple
Adobe
SAMSUNG

とりあえず今すぐ対策なら「専門サイト」

「専用サイト」はURLが別になる、管理・運用の手間が増えるなどのデメリットが大きいですが、スマートフォンの使い勝手に最適なページを素早く作るにはもってこいの方法です。数が少ないホームページ構築で、技術・時間・予算など足りない状態で作るなら「専用サイト」が良いかもしれません。

スマートフォン対策をする場合にはSEO対策の観点や、ユーザーの使いやすさからPCページ・モバイルページのURLが同じであることがベストです。従って、まずは同じURLで開発・運用できないかを考えてみるのが良いでしょう。また、ユーザーアクセスがスマートフォンメインになっているのであれば、スマートフォンに最適なページを作りやすい自由度の高い方法を選ぶ、というのも視野に入ってくるでしょう。載せたい情報の内容によって最適な方法は異なりますので、これまでにご紹介した内容を参考に、ベストな方法を検討してみてください。

WordPressで対応もあり!

WordPressなどの無料CMSサービス、最近では多くのレスポンシブテンプレートが配信されていますし切り替えプラグインもあります。上記方法3種類のうち2種類が「開発なし」で対応できるわけです。WordPressの仕様に合わせて開発してしまう、というのも公開を急ぐ場合には大いにあり!下記の記事もぜひ参考にお読みください。

管理人おすすめ「安心・安全」レンタルサーバーはコチラ!

価格・サーバースペックだけでなく、安定性やセキュリティ、サポート面から判断しました。個人運用だけでなく企業様におすすめのサーバーになります。

順位 イメージ サービス名/説明
1位 カゴヤジャパン カゴヤ・ジャパン
中小企業・小規模ECなど安定が必要なWebサイト運営に最適。専用サーバーが高品質で低価格です。
2位 NTTコミュニケーションズ NTTコミュニケーションズ(Bizメール&ウェブ)
大手NTTコミュニケーションズが提供するレンタルサーバーサービス。
3位 さくらインターネット さくらインターネット
個人におすすめのライト(月額129円)から、ビジネスプランまで幅広いラインナップ。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
PAGE TOP ▲