0120-899-952 
ホームページ制作YCOM
料金体系
制作について
制作実績
よくある質問
お問い合わせスマートフォンを使ったアクセスはどんどん伸びてます。
これからますますスマホやタブレットの処理速度があがって使いやすくなれば、今以上にそういったデバイスで閲覧することが多くなるでしょうね。
２０１５年のデータですが、
ほぼ毎日インターネットを利用する人は5,610万人～ ニールセン、デバイス毎のインターネット利用状況を発表 ～
業種にもよるけれど、スマートフォンで訪問するユーザーは無視できません。
スマホユーザーがこれだけ来ていることが分かっているのに、その人たちにとってとても見にくいページになっていませんか。
スマホユーザーも取り込むために、ホームページのスマートフォン対応はできるだけ早くしたものですよね。
スマートフォン対応の２つの方法
ホームページのスマートフォン対応には２つの方法があります。
- スマートフォン専用のページを作る
- レスポンシブ対応のホームページを作る
どちらもスマートフォンに対応したホームページを作ることに変わりはないですが、それぞれの特徴は違ってます。
どちらがいいというのが決まらないのが難しいところ、それぞれ一長一短がありその目的によって使い分けます。
前回記事にしたレスポンシブ対応のホームページを中心に、そのメリットやデメリットについて説明します。
レスポンシブ対応についてよくわからない人ははずは
技術者じゃなくてもわかるレスポンシブデザインって何？誕生の経緯とその特徴。
を読んでください。
レスポンシブデザインを簡単にまとめると
- ソースコードを１つでCSSにより各デバイスのレイアウトを変更している
- 表示される領域の横幅を判断基準としてレイアウトを切り替えている
この２つです。
一方スマホ専用サイトを作るというのは、
単純にあらかじめスマホ用ホームページのURLを別に用意して、そこへ飛ばすという方法です。
レスポンシブサイトのメリット・デメリット
レスポンシブ対応のサイトはスマホ専用のサイトを作った場合に比べるとどのようなメリットやデメリットがあるのか見ていきます。
レスポンシブデザインのメリット
運用コストが低い
スマートフォン専用サイトを用意する場合は、別URLにあたらしくサイトを作るのでソースコードももちろん複数必要になります。
それに対して、レスポンシブ対応のサイトはソースコードが共通なので運用がとても楽です。
住所が変わったり、料金が変わったりとホームページの中のテキストを変更しないといけないことはよくあります。
退社したスタッフを消したり、入社スタッフを追加したりと運用の上でコンテンツを触ることは多いですね。
そんな時に、ソースコードが１つしかないレスポンシブデザインでは変更する箇所はたった１カ所です。
これは運用上すごくコストが変わってきますし、変更のミスも防げますね。
複数のデバイスに対応できる
デバイスにはスマートフォンだけじゃなく、タブレットも必要です。
今後は他のデバイスが出てくることも考えられますが、スマートフォン専用サイトを作った場合はそれらの新しいデバイス用にもサイトを準備しなければいけません。
レスポンシブデザインでは同じソースコードでPC、タブレット、スマートフォンと３つのデバイスでデザインが変わるようにすることができます。
もちろん、今後これ以外のデバイスが出てきても、そのサイズで切り替えを行えるのでサイズごとにいくらでもレイアウトを調整できます。
スマホ用サイトに比べてコストが少なく、手軽に各種デバイスに対応していくことができます。
クロールされやすい
ホームページを検索するときに、PCでアクセスするかスマートフォンでアクセスするかわかりません。
同じURLにアクセスした場合に、スマホ専用サイトが用意されている場合はそこにジャンプさせる必要があります。
トップページだけならまだしも、会社概要や問い合わせやいろいろなページに検索から流入しますが、PCサイトとスマホサイトは必ずしもページ構成が同じとも限らないので、このあたりの設定を慎重にしておかなければいけません、でもこれをきちんとやっておくのってむちゃくちゃ大変。
もし、きちんと設定ができていなければGoogleなどの検索エンジンのクロールがうまくいかずにSEOの評価的にもきちんとされない可能性もあります。
レスポンシブデザインでは、それぞれのページが各デバイスに合わせてレイアウトを変更して表示します。
そのため、トップページだけでなく、会社概要やお問い合わせページなど、どのページも同じURLなのでクロールのことを考えなくてもいいです。
ひたすらこれまでと同じようにページを作ればいいので、運用上とても楽になります。
シェアがされやすい
先ほどの理由と同じですが、 シェアするときって、特定のアドレスでシェアしますね。
PC用のURLをシェアしたら、それをタブレットやスマホで見る人もいます。
レスポンシブではどのURLも各デバイスで見られるので問題ないですが、スマホ専用サイトを用意している場合は先ほどと同じくそれぞれきちんと関連付けておかなければいけません。
レスポンシブデザインのデメリット
もちろん、レスポンシブデザインのサイトにもデメリットはあります。
デメリットについてもきちっと理解しておきましょう。
デザインの制限が強い
レスポンシブデザインでは１つのソースコードですべてのデバイスに対応しなければいけません。
なので、PC用のページを作っているときにもスマホやタブレットでの表示を意識しておかないといけません。
そうすると、必然的にデザインに制限が出てきます。
その点では、スマホサイトを別で作る場合は、それぞれ独立しているため自由に作ることができてそれぞれのデバイスでより最適化したデザインでページを作れます。
PCサイトはスマホでは見られないし、スマホ用サイトはPCで見られることは少ないので、他のデバイスのことは考えずに作ることができます。
ソースコードが複雑
同じソースコードを作ると言っても、表示・非表示を工夫すれば、PCとスマホのサイトを全く別のようなものにすることができます。
運用上あまりよくないですが、PCとスマホの２つのソースコードを１つのファイルに書いて、それぞれをON・OFFすればいい。
ですが、もちろんそのようなことをするとソースコードの長さが倍になってしまいます。
そこまでしないにしても、要所要所ではPC、タブレット、スマホなどの複数のソースコードが入り混じっている箇所がでてきます。
それぞれの影響を意識して作らないといけないので、ソースコードが複雑になり技術的には高度になります。
読み込みが遅い
それぞれのデバイス上で表示するために必要な要素がソースコードに全て含まれています。
ソースコードの複雑さも多少の読み込み速度の違いに影響しますが、それよりはそれぞれのデバイス用に用意された画像をあらかじめ読み込まないといけないことが読み込み速度を遅くします。
PCとスマホでは表示領域が変わるので、表示させる画像も変えることがあります。
例えば、PCでは横長の画像だったのが、スマホでは縦に長い画像にするなど、デバイスごとに画像を呼び出します。
表示上は、PCではPC用の画像のみ、スマホではスマホ用の画像のみが表示されるのですが、実際には両方の画像をあらかじめ読み込んでしまうので、スマホで表示させる場合でもPC用の大きな画像を裏で読み込むことになります。
スマートフォン専用サイトを作る場合は、純粋にスマホ用画像だけを読み込めばいいことになります。
どうでしょうか、
レスポンシブ対応とスマートフォン専用サイトにはそれぞれ特徴があります。
どちらがいいというわけではなく、作るサイトによってどちらで作るかを決められるようにしましょう。
スマホ専用サイトとレスポンシブサイトの使い分けは？
このようなそれぞれの特徴を理解したうえで、どちらがよいんでしょうか。
本来はそれぞれのデバイスごとにサイトを作るのがよいと思います。
なぜなら、デバイスによってホームページを見る目的は違ってきます。
パソコンで調べる場合はじっくりと内容を読むことが多いし、スマートフォンでは急いで何かを探していることが多い。
スマートフォンで飲食店のサイトを見る時は、たいてい店舗を探しているかメニューを調べているかです。
店長のあいさつや、会社の沿革なんてものは読まないでしょう。
使う場面で見るものが変わるので、本来はそのデバイスを使う場面を想定したサイトをそれぞれ作ることになり、コンテンツのレイアウトはもちろんページ構成なども大きく変わります。
それをしっかりと運用するのは難しい。
理想はそうであっても、複数のサイトを運用するのと同じコストがかかるので単純にはお勧めできません。
レスポンシブサイトの方がはるかに運用管理にコストが低くなります。
運用が大変だからとどれも中途半端になるくらいなら、レスポンシブで少なくともどのデバイスでも見やすいサイトにすることが優先になります。
そのサイトがその事業に対してどれくらいの優先度を持っているか。
店舗の案内程度でしたらレスポンシブ対応でいいですが、YouTubeや食べログのようにWEBを中心としたサービスの場合は、ホームページの内容で収益が大きく変わります。
どの程度ホームページにコストをかけられるかを考えて、まずはレスポンシブサイトから始めるとよいでしょう。
