マルチ・スクリーン対応アプローチの選び方
あなたにとってのベスト・アプローチは？
How to Choice the Mobile Shift Approach
What is the best for you?
はじめに、どれだけのスクリーン・サイズがあるかをご覧ください。
いかに効率良く作業を進めるべきか、すぐに気づきます。
こちらから、世界中にあるデバイスのスクリーンがどれだけ多様か、ご覧ください。
SCREEN SIZ.ES
実際のデバイスでのテストがいかに難しいかがすぐに理解できると思います。
また、ある程度のスクリーン・サイズ、縦横の比率を意識すれば、マルチ・スクリーン対応は十分に可能だとも読み取れます。
世界には、これからもデバイスは増えつづけるでしょう。そのすべてへの対応はITに任せ、コンテンツに集中すべきです。
重要なのは、細部の完璧さ追求するのではなく、最大公約数の中でベストな表現を目指すことです。
Responsive Design（レスポンシブ・デザイン）
コンテンツをひとつのソースで表現します。表示が自然にデバイスにぴったりの状態で表示されるように作ることになります。
それは「コンテンツを作る前に、すごく考えて作る必要がありそうだ」または「決まったルールに則ってコンテンツを運用することになる」ということを意味します。「すごく考えて作る」は私たちの仕事ですが、運用にルールが発生した時は、合わせていただくことになります。
メリット
- お客様は、ひとつのURLにアクセスするだけ。シンプルです。他の場所に連れていかれたり、気になる警告メッセージが出ることもありません。
- ユーザー・エクスペリエンスには統一感が出ます。デバイスを縦にしたり、横にしたりしても、新しいスクリーン・サイズのデバイスが登場しても、柔軟性が高いです。
気にすべき点
- 最初の制作時、テスト時に、とにかくいろいろと試してみることです。思ったとおりにコンテンツが表示されない、デバイスを回転したらレイアウトが乱れた、メニューが小さくて使えない…数々の課題が生じます。気づきやすいものから、目立たないものまで。
- 運用の際にも、多少の制約が伴います。もっとも配慮するのが「コピーライティングのボリューム」でしょうか。スマートフォンとタブレット、デスクトップでは、文字の量に対してのストレスが変わります。画像をいくつか準備する、動画を使う場合はファイル形式に気をつけるといったこともありますが、この部分はITが自動化すべき部分です。
- Googleが強調している「モバイル・ユーザーに大容量のトラフィックを発生させるな」という指摘。ひとつのソースで表現していると、画像をデスクトップむけにしてしまいがちです。その負荷をモバイルにかけないように配慮すべき、と推奨しています。
企画屋はレスポンシブ・デザインを、必要に応じてWordPressを使って実現します。WordPressは公式サイトにもあるとおり、無料で使うことができる、オープンソースのコンテンツ管理プラットフォームです。
WordPressを使うかの判断は、主に以下の視点で判断し、お客様と決定します。
- シンプルなコンテンツ表現ができる。凝ったクリエイティブが不要。
- 運用でコンテンツをアップデートするニーズがある。その発生頻度が高い。
- すでにブログを運用している。
- SEOやソーシャル・ネットワークの効果を活かしたい。
Dynamic Serving（動的変換でのサービス）
マルチ・デバイスへの対応を、コンテンツがあるサーバーに仕事をさせることで、運用で準備するソースはひとつ、表示をサーバーが各デバイスに自動で変換しながら行います。
もっともITらしいソリューションです。そのため気にすべきことも、典型的なITの問題が発生します。「ツールの導入にコストがかかる」そして「ツールにすべてを依存する」ということを意味します。
メリット
- お客様は、ひとつのURLにアクセスするだけ。シンプルです。変換はデバイスを判別して行われます。
- データのトラフィックはデバイス単位でコントロールされているため、モバイルに無駄なデータが送られることは防げます。
- デバイス単位でユーザー・エクスペリエンスをコントロールできます。統一感を出すことも、デバイスによって異なる表現をすることもできます。
- コンテンツのメンテナンスはレスポンシブと同様に容易です。ツールによっては、さらに利便性を高める機能が提供されるものもあります。
- 大量のコンテンツ資産を持っている方、レスポンシブ・デザインには時間や労力で抵抗がある方には、この選択肢が適切です。
気にすべき点
- 導入や運用にコストが発生しつづけます。従量制の場合、コンテンツにアクセスが増えた場合や、コンテンツの量が増えた際に、コストも合わせて増加します。
- 変換はコントロール不能な領域になります。あるデバイスでトラブルが発生した時、変換が原因の場合は、自分たちで直すことができません。時代に追随していけるか、何か挑戦してみたい、という時に「ツールが対応していません」との回答でがっかりする時が来るかもしれません。
- パフォーマンスが悪い、不必要なトラフィックが発生する、サーバーに必要以上の負荷がかかる、といったツールから発生する問題が新たに生じるかもしれません。
- チューニングやツールの使い方を習得するという、新たな技能が必要になります。これはWordPressを導入した際にも生じる問題です。
- 今からツールを導入する場合、コンテンツ資産が無駄にならないか、余計な作業が発生しないか、事前に十分な確認が必要です。今までWebサイトで見えてみたものが見えなくなる可能性は低いですが、新たなデータが必要になる可能性は十分にあります。
ソフトウェアやサービスに何かを任せるのであれば、あなたのWebサイトの運命共同体になります。いなくなられては困ります。おカネがかかり過ぎるのも考えものです。いつまでも仲良くできるパートナーになれるか、最初の選定が肝心です。
A Separate Mobile Site（モバイル・サイトを別に運用）
マルチ・デバイスの中でも急速に普及したスマートフォンへの対応を、デスクトップとは異なるものとして別のWebサイトとして運用することです。
一見、もっとも非効率です。その代わり、もっともシンプルです。つまり問題の発生がもっとも少ないと言えます。
メリット
- デバイス単位でユーザー・エクスペリエンスをコントロールできます。おそらくこのアプローチを選択するのは「異なるデバイスのユーザー・エクスペリエンスを分けたい」という理由が大半です。
- Webサイトが複数になるため、スマートフォンだけへのコンテンツ、デスクトップむけのコンテンツ、という発想での運用が可能になります。
- 3つの中ではもっともシンプルで、容易にチャレンジしやすいアプローチです。必要であれば、開発も運用も、分離した管理が可能です。
気にすべき点
- URLが複数になります。自動で切り替えたり、誘導することは可能ですが、ユーザー・エクスペリエンスを損ねる結果になっては問題です。何度も切り替えのメッセージが出る方が親切な時と、何も気にせずに自動で表示が切り替わっている方が便利な時があるものです。ここが不適切だと、ユーザーはストレスを感じます。
- コンテンツが複数で運用されることになります。頻繁なアップデートがある場合は運用効率を上げられる対策を事前に考えておくべきです。ひとつの情報を直す時、たとえばひとつのコピーのミスを直す、画像を入れ替える、リンク先を修正する時でも、手間は常に2倍以上です。
- 異なるデバイスでのユーザー・エクスペリエンスが、ユーザーに混乱を感じさせる。これは避けるべきとGoogleは強く推奨し、私も同意します。たとえばあるURLをメールで告知する場合、必ず複数の、存在するだけのWebサイトのURLを記載すべきです。複数のWebサイトを持っているだけの手間が、サイト運用以外にも発生することを最初に認識しておくことが重要になります。
ソフトウェアやサービスに何かを任せるのであれば、あなたのWebサイトの運命共同体になります。いなくなられては困ります。おカネがかかり過ぎるのも考えものです。いつまでも仲良くできるパートナーになれるか、最初の選定が肝心です。
企画屋はモバイル・サイトを別に作る場合、jQuery Mobileの活用をお勧めします。jQuery Mobileを活用することで、開発効率が向上し、何より無数のデバイスへの適合をjQuery Mobileで担保できます。
jQuery Mobileをどのように使うかの判断は、お客様とともに決定します。
