レスポンシブデザインとスマホサイト別制作の違い

目次

1. 「レスポンシブデザイン」がベストとは限らない
2. そもそも、レスポンシブデザインって何？
3. レスポンシブデザインの長所・短所
4. レスポンシブデザインに向いているサイトとは
5. スマホサイト別制作の長所・短所
6. スマホサイト別制作に向いているサイトとは
7. まとめ

「レスポンシブデザイン」がベストとは限らない

最近、WEB制作の世界ですっかりおなじみとなったレスポンシブデザイン。
「少ない制作費で、PCとスマートフォンの両方で同じサイトを表示させられる」という理由から人気を集めています。

しかし、実はサイトの内容によってはレスポンシブデザインが適さない場合があることをご存知でしょうか？
今回のコラムでは、レスポンシブデザインとスマホサイト別制作の長所・短所を考えてみたいと思います。

そもそも、レスポンシブデザインって何？

少し専門的な話になってしまうのですが、一つのWEBサイトを制作するときには「HTML」と「CSS」という2種類のコードをセットで作る必要があります。
HTMLは実際のWEBサイトに書かれている「内容」であり、CSSはレイアウトや色、フォントなど「装飾的な要素」を定義するコードです。

レスポンシブデザインでは、同じ内容のWEBサイトをPC・スマートフォンの両方で作るとき、HTMLは共通した1つのコードを作り、CSSだけはPC向け・スマホ向けに作り分けます。
つまりHTMLは1つ、CSSは2つ作るわけですね。

一方、従来から行われていたスマホサイト別制作では、「HTMLとCSSの両方を、PC・スマホ向けにそれぞれ作る」。
結果、HTMLを2つ、CSSを2つ作ることになります。

単純に制作工程を考えれば、HTMLを1つしか作らずに済むレスポンシブデザインのほうがコストは安く済むケースが多いわけです。

レスポンシブデザインの長所・短所

レスポンシブデザインの長所は、HTMLを1つしか作らずに済むため制作工数が少なく、制作コストを抑えられること。
現存するPCサイトのHTMLをそのまま使い、スマートフォン向けのレイアウトに調整したCSSを作るだけでスマホサイトを作ることも可能です。

一方、短所は「コンテンツの表示順序、内容、画像のレイアウトなどは大きく変更できない」こと。
PCでは見やすいのに、スマートフォンでは見づらいサイトが生まれる可能性があります。

レスポンシブデザインに向いているサイトとは

レスポンシブデザインに向いているサイトを一言でいうなら、「シンプルなサイト」。
たとえば簡単なコーポレートサイトなどは、スマホサイトで全く同じコンテンツを表示しても不都合は少ないでしょう。

また、文章が主体となっている記事サイトなども、レスポンシブデザインに向いているといえます。

スマホサイト別制作の長所・短所

スマホサイト別制作の短所は、言うまでもなく工数がふくらみコストも上がりがちなこと。
一方、長所は「PCサイトとは別でコンテンツを作れるので、よりスマートフォン向けに特化したサイトを柔軟に作り込める」ということです。
スマートフォンでは読みづらい長文を非表示にしたり、横向きの画像を縦向きに表示したりと、自由なカスタマイズが可能です。

スマホサイト別制作に向いているサイトとは

スマホサイト別制作に向いているサイトのパターンはいくつかあるのですが、まず一つ目は「文字を含んだ画像が多いサイト」や「見出しを画像で作っているサイト」。
レスポンシブデザインでは画像をスマートフォンに合わせてそのまま縮小してしまうため、画像化された文字は小さすぎて読めなくなることがあります。
この場合、スマホサイト用のHTMLを別に作ったほうがよいといえます。

二つ目は、細かい検索機能や地図などがあるサービスサイト。
スマートフォンで操作する際のユーザビリティを考慮せずPCと同じ設定にすると、思いのほか使いにくいサイトになってしまう場合があります。

そして三つめは、画像が多い、項目が多いなど複雑な要素を持つサイト。
スマホ向けにコンテンツを絞ったほうが見やすくなるような場合は、別途HTMLを作ったほうがよいといえます。

まとめ

いかがでしたか？
実は私たちも「レスポンシブデザインって安いんでしょ？今あるサイトをそれでスマホ化してよ」と依頼を受けることがあるのですが、スマホサイト別制作のほうが適しているケースも意外に少なくありません。
WEB制作を依頼するときの予備知識として、それぞれの制作手法の特徴を知っておくと便利ですよ。