初心者向けスマホ対応レスポンシブWebデザイン簡単解説!

【 2016年版 】 今のあなたの大切なサイトを、自分の手でスマホ最適化できます!

MENU

スマホ対応の方法は3種類あります

スマホ対応のやり方は、大きく分けて3種類あります。
どれを選ぶかはサイトの特性によりけりですが、今あるPC用のサイトをそのまま使いたいという人には、下記(3)のレスポンシブ対応をお薦めします。1つのHTMLでPC、スマホ、タブレットいずれにも対応でき、Googleも推奨している、これからのWebデザイン主流になる方式です。
まずは、3つの方式それぞれを簡単にご説明しましょう。


(1)スマホ専用のサイトを別に作る方法

スマホが登場した当初はこの方式でした。PC用のサイトとは別に、スマホ専用に見易くレイアウトした別のページを作成していました。今もこの方式のサイトは結構あります。
内容はPCサイトと全く同じ場合もあれば、スマホ版は簡潔に抜粋した内容だけの場合もあります。

この方式の問題点は、ソース(HTML)が2つあるため、更新の都度両方をメンテナンスしないといけないことで、管理の手間は2倍になり、完全に同期をとるのも難しくなります。
また、サイトが別々なので、検索エンジンの評価も別になってしまうのも好ましくありません。

ユーザーから見た場合は、スマホ用に見易くしようと内容を抜粋版にした結果、逆に「PC版より内容が少ない」と嫌われることも多いようです。


(2)CMSを使用してサイトを制作する方法

CMSとは、コンテンツマネージメントシステム(content management system)の略で、Webサイトの制作と管理を行うソフトウェアのことです。HTMLの知識がなくてもWebサイトを作ることができ、最近のものはスマホにも対応しています。

CMSにはたくさんの種類がありますが、現在圧倒的な人気とシェアがあるのがワードプレス(WordPress)です。

ワードプレスにはたくさんの種類の「テーマ」(デザインのテンプレート)がサポートされていて、いずれかのテーマを選んでそのデザインに従って文章や画像を入力することで簡単にWebサイトを制作することができます。現在では、多くのテーマがレスポンシブ対応(下記(3)参照)になっているので、自動的にスマホ対応がされます。

この方式の問題点は、テーマによってデザインが決められているので、完全に自由なデザインにはできないということです。雛型にそったデザインでよい場合にしか使えません。
また、利用しているサーバーによってはワードプレスが利用できないことがあり(特に無料のサーバー)、その場合はドメインを引っ越さなければなりません。
いずれにしても、既にPCサイトがあっても、作り直しということになります。




(3)お薦め:レスポンシブ対応

「レスポンシブ」とは、画面のサイズによってCSSを切替ることで、1つのソース(HTML)で、PC、スマホ、タブレットなどの異なるサイズの端末に適したレイアウトを表示させる方法です。

数年前に登場した手法ですが、その優れた方式に爆発的に広まりつつあり、現在新規にスマホ対応をする場合は、この方式をまず第一に検討すべきでしょう。

メリットは何と言ってもソース(HTML)を一元管理でき、同一内容のコンテンツをPCにもスマホにもタブレットにも表示できることです。
また、デバイスではなく画面サイズによって切替えるという考え方なので、新しい機種、機械が出てきても自動的に対応されますので、その点では万能です。

デメリットは、HTMLとCSSを分けていない場合は、分ける作業から始めないといけないということですが、現在はCSSを分けるのが常識ですので、この機会に分けることをお奨めします。

比較的シンプルなデザインのサイトであれば、思いがけず簡単にスマホ対応ができますので、是非チャレンジしてみてください。

次のページ:「レスポンシブとは?」で、レスポンシブについて詳しく解説します。








▲ページトップに戻る

inserted by FC2 system inserted by FC2 system