1. TOP
  2. ブログ
  3. うちのWEBサイトの課題、マルチデバイス対応はどうやったら成功するの?

うちのWEBサイトの課題、マルチデバイス対応はどうやったら成功するの?

~自動変換方式、別ドメイン方式、レスポンシブ・ウェブデザイン方式のどれがいい?

最近のうちのサイトって、パソコンからのアクセスと同じくらいスマホがあるんだな・・・とアクセス解析をつぶやくWeb担当者の方が増えています。では、実際のところ世界的にパソコンとスマホのアクセス比率はどうなっているのでしょうか?昨年のニールセンの調査によれば、スマホからのアクセス数はなんと70%程度になっており、パソコンを大きく凌駕しているのです。
パソコン用のサイトしか用意していない!という会社はそろそろ本気でマルチデバイス対応をしないといけない時期かもしれません。今回の記事はその方法のまとめです!

手軽な自動変換サービス

スマホの普及率がぐんぐん伸びていった頃、パソコンサイトのURLを登録すると自動的にスマホ用のサイトを生成して表示してくれるサービスが沢山出て来ました。
もちろん今でもサービスを継続しているものもありますが、以前に比べると数はずいぶん少なくなりました。

autochange

メリットとしては一度登録してしまえば、こちら側ではメンテナンスが要らない、ということです。ただし、サービス提供側のスマホサイトへの変換ルールに従いますので、細かなデザインの直しなどはできないというデメリットあります。

最近のサイトの作り方の傾向として、パソコンでは詳細な情報を見せたい、でもスマホでは概略だけを見せたい、などのデバイスによって見せ方を変える方向があります。この自動変換サービスではこうしたユーザーごとのきめ細かい使用シーンに沿った最適なコンテンツを提供することができません。変換ルールに従って自動変換されるので、手軽な分、ユーザーに対しての訴求力は弱まってしまう傾向にあります。

こうした点から、この種の自動変換サービスは段々とサービスを打ち切りにしてしまうところが増えてきたという経緯があります。

デバイスごとに別ドメインでコンテンツを分ける

パソコン用サイトを http://www.XXX.com/pc スマホサイトを http://www.XXX.com/smart に分けて構築するタイプの方法です。この方法ですと、先ほど自動変換サービスのデメリットとして挙げた、ユーザーごとに最適なコンテンツを届けるということが可能になります。

以前はごく大雑把に言って、パソコンはビジネスマンやスキルの高い大人、ケータイをメインにしているのは若年層やパソコンリテラシーのそれほど高くない人、という区切り方がありました。しかし、いまやこんな乱暴な区切り方をしている会社はどこにもありません。実際、パソコンを会社で使っている人が通勤電車の中や自宅ではスマホといった感じで、同一ユーザーが使用シーンによってデバイスを使い分けているのが現状です。

betsudomein

こう考えると、会社では商品などの詳しいスペックまでパソコンで確認したいけど、出先では表組みなどをカットした概略だけをチェックしたいという要望が出て来ます。

デバイスごとにサイトを用意すれば、こうしたニーズにきめ細かく応えられるわけですね。ただし、デメリットとしてサイトをふたつ分用意するようなものなので、初期の構築費用やメンテナンス費用も2倍くらいになるという事が挙げられます。

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

Googleが公式ページでレスポンシブ・ウェブデザインを推奨して依頼、レスポンシブ・ウェブデザイン対応サイトが急速に増加しています。

レスポンシブ・ウェブデザインを使用すると、次のような利点があります。
◇PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。
◇ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。

http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html

この方式ですと、別サイト方式のようにコンテンツをふたつ分用意することなく、デバイスの大きさでファイル側がデバイスに最適なコンテンツを自動生成してくれます。

responsive

変換ルールそのものをCSSの中に自社で記述できますので、自動変換方式とは違って自由度がありますし、ファイルは一つなので、別サイト方式のように費用が2倍に膨れ上がることもありません。

また、Googleが推薦しているだけのことはあり、SEO効果も抜群です。

今後のマルチデバイス対応では、このレスポンシブ・ウェブデザインが主流になっていくと思われます。

マルチデバイス対応方式の代表的な例を見てきました。
ぜひ参考にしてみてください!

    ホワイトペーパーフォームバナー

    【DL可能な資料タイトル】

    • ・プログラムによる建築/土木設計のQCD(品質/コスト/期間)向上
    • ・BIM/CIMの導入から活用までの手引書
    • ・大手ゼネコンBIM活用事例と建設業界のDXについて
    • ・デジタルツイン白書
    • ・建設業/製造業におけるデジタルツインの実現性と施設管理への応用

    詳細はこちら>>>

    PAGE TOP