マークアップエンジニア目線から見た、サイトリニューアル時のマルチデバイス対応!

マークアップエンジニア目線から見た、サイトリニューアル時のマルチデバイス対応!

最近アップルからスマートウォッチが発売され、インターネットに繋がる機器がさらに増えました。
様々なデバイスが登場する事によって、潜在顧客との接点を増やすための施策に対応すべき事が増えていくと考えられます。

しかし、このような環境下でも、マルチデバイスに対応できているWEBサイトは、まだまだ多いとは言えないと感じます。
本記事では、広義なマルチデバイス対応ではなく、PC、スマートフォンにに焦点を当てたマルチデバイス対応の構築手法をご紹介していきたいと思います。

昨年末に行われたあとらす21のアンケート調査によると
日経225の企業で、PCやスマートフォンに対応しているのは、44%と半分にも満たなかったようです。
(参照:http://at21.jp/web/topic/topic15.html

という事は、まだまだこれからマルチデバイス対応が広がっていく事が想定されます。

ただマルチデバイス対応の構築手法は、いくつか存在し、
どの構築手法が一番最適なのか分からない!!という声もよく耳にします。

そこで今回はマークアップエンジニアの視点からその構築手法について、
ご説明していきたいと思います。

 

■マルチデバイス対応とは?

冒頭でも少し触れましたが、広義なマルチデバイス対応は、
ブラウジングができるあらゆる機器でWEBサイトが閲覧でき、
ユーザーの目的を達成できる仕様になっている事と言えます。

本記事では、PCとスマートフォン向けに最適化されたサイトである事と定義します。

例えば、PCとスマートフォンでサイトの仕様・機能に違いなく、利用出来るものは
マルチデバイス対応化されたサイトですが、
PCにある要素がスマートフォンでは表示されないサイトは、
マルチデバイスに最適化されているサイトとは言えない場合があります。

詳しくは下記参考サイトにて。

http://www.pxt.jp/ja/diary/article/263/
http://e-words.jp/w/%E3%83%9E%E3%83%AB%E3%83%81%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9.html

 

マルチデバイス対応の構築手法

ここからは、実際にマルチデバイス対応の構築手法をご紹介していきます。

1.レスポンシブWebデザイン

Googleも推奨するマルチデバイス対応方法です。
WEBページをワンソースで管理し、CSSやJSで表示方法を変えていきます。
ワンソースなのでSEOに強いというメリットがあり、
最近話題のモバイルフレンドリーに一番適した方法です。

この構築手法は、マルチデバイス対応の定番なので
ご存知の方も多いかと思いますが、注意すべき点については、ぼんやりとしている人がいるのも事実です。

このレスポンシブWebデザインでの制作時には、入念な打ち合わせと設計が必須です。
なぜなら、最初の設計に破綻が生じるとPCとスマートフォンで相当な出しわけが必要になる場合があるからです。

その為、ディレクションや制作期間、マークアップエンジニアなどのスキルに一番左右されるということも
覚えておいてもらえると幸いです。

■2.個別デバイスサイト

PCはPC専用サイトに、スマートフォンはスマートフォン専用サイトに。
完全にサイトを分けてしまう方法です。

こちらの最大のメリットは、それぞれのデバイスに
一番最適化されたサイトが制作出来ることです。

操作性と閲覧性が高いことは、ユーザーのUXを高め、
サイト運営者の目的を達成しやすくする事が出来るので非常に有効です。

ただし、個別にサイトを制作することで、
更新の手間がデバイス別に対応する必要が生じ、コスト負担が大きくなる事があります。

そのコスト負担が大きいからなのか私たち制作現場では、
個別にデバイスサイトを制作するということは少なくなってきた印象です。

■3.変換サービス

コンバーターを通してマルチデバイス対応を行います。

例えば、基本PC基準だが一部ページはスマートフォンに最適化したいといったことも
テンプレートをあてがうことで簡単に行うことが出来ます。

ただコンバーターサービスに依存するので、サイトレイアウトの自由度は低いかもしれません。
よって、リッチサイトにしたい場合は、あまり向いていない事もあります。

■その他、WordPressなどのCMS

CMSを導入して、各デバイスごとに出し分ける方法です。

CMSを使用すると個別に対応した場合に比べ、
サイトの更新管理業務の手間が大幅に削減できるのが大きなメリットです。

また世界で最も利用されているWordPressではマルチデバイス対応のテンプレートが充実しているので、
レスポンシブWebデザインや個別デバイス対応などに比べ、非常に少ない作業工数で制作出来る事があります。

CMSを利用する場合、その運用方法や操作方法を覚えなければならなく
多くの学習コストがかかってしまう場合があります。

■まとめ

これらマルチデバイス対応の構築手法は、どれが優れているかという事ではなく、
自社の潜在顧客が必要とする情報を必要な時に、どのように提供できるかを念頭に置き、
手法を選定する事が重要です。

テキスト中心のサイトである場合、レイアウトに自由がきく場合があるので、
レスポンシブWebデザインを採用し、充実した情報と更新頻度を高めるサイトにしよう!
というような明確な目的を定めて制作することが大事だと思います。

以下に、今回ご紹介した構築手法の概要をまとめました。

RWD メリット
1.URLが統一されているのでSEOに有利
2.更新に強い
デメリット
1.設計にスキルが要求される
個別デバイス メリット
1.最適化されたサイトを提供できる
デメリット
1.更新に手間がかかる
変換サービス メリット
1.スキルがそこまで要求されない
デメリット
1.サイトの自由度が低い

 

今回、この記事をご紹介している中で、今までに適切に構築できていなかった部分を思い出したりして、
一言にマルチデバイスと言っても目的やコストなどに見合った適切なサイトを構築せねば!と感じた次第です。

 

今回ご紹介した以外にも、更に詳しいことが知りたい場合は下記参考サイトなどもおススメです。

http://web-tan.forum.impressrd.jp/e/2013/12/10/16348
http://www.sitepublis.net/special/multidevice.html

 

Share on Facebook0Tweet about this on TwitterShare on Google+0Email this to someone