あなたのブランドサイトは無駄な労力やリソースを消費してしまっていませんか？
ここ数年、注目を集めているレスポンシブデザイン。
ご存知の通り、スクリーンサイズを基準にワンソース、同一URLでマルチデバイスに対応させる制作手法です。ワンソース・同一URLのため、SEOに強くソーシャルメディアのシェアやリンクが容易で、更新の工数も抑えられる最良のマルチデバイス対応と見られる事もあります。
また、Googleが公式にレスポンシブデザインを推奨した流れもあり、国内での実装事例も次々と出てきています。
ただ、我々制作会社からの立場でいえば、レスポンシブデザインを安易に発注者様に提案できないのも事実です。
その理由を、制作会社が発注者様に提供できるバリューという視点から考えて見たいと思います。
制作会社がクライアントに提供できるバリューとは
至極当然のことですが、我々制作会社が発注者様に行う全ての提案について、制作会社はバリュー（価値）を提供しなければなりません。
では、そもそもバリューとは何なのでしょうか。
上記の図のように、バリューとはコストと提供できるベネフィット(利益)の差分であると説明できます。この場合のコストとは、単純な制作費用だけでなく、発注者様の手間や制作にかかるマイナス要素全てを含みます。発注者様はかかる手間や制作費用以上にベネフィットを得られると感じなければ、提案を購入してくれません。
制作費用が決まっている場合、制作会社はベネフィットを積み上げることにより、発注者様やブランドにより多くのバリューを提供できると言えます。
それでは、スマートフォンを含むマルチデバイス対応において制作会社が提供できるベネフィットを具体的にいくつか挙げてみます。
- 多くのデバイスに最適化させ閲覧機会を増やす
- 操作しやすいインターフェースによりストレスによる離脱を最小化する
- モバイル端末ならではの機能（GPS、お財布、電話）で新しい体験を提供する
- 各デバイスでのSEOの強化により流入を拡大する
- 回線の遅いスマートフォンでの軽くて高速な表示で離脱を防ぐ
バリューを提供するためには、コストを下げる方法もあります。
- 制作費用を下げる
- クライアントの手間を軽減する
これらが提供できるベネフィットの全てではありませんが、レスポンシブデザインに以上を当てはめてみて、バリューを再考してみたいと思います。
もしブランドサイトをお持ちなら、是非自社サイトと照らしあわせてみてください。
ベネフィットを増やせるか
多くのデバイスに最適化させ閲覧機会を増やす
( △ )
CSSのMedia Queryによりブラウザの横幅からいくつかのブレイクポイントを設定し、表示を切り替える一般的なタイプのレスポンシブデザインでは、各デバイスに最適化するのではなくブラウザの横幅に最適化するといえます。
ブレイクポイントを各デバイスの横幅ごとに細かく設定することも可能ですが、この場合は工数とデータ量の点から賢い選択とは言えません。(コストについては後述します。)
完全な各デバイス最適化をせず、ブレイクポイントを最小に留めることにより各社のスマートフォン、タブレット端末に汎用的に一定のユーザビリティを提供し、閲覧機会を獲得することは可能です。
操作しやすいインターフェースによりストレスによる離脱を最小化する
( △ )
CSSを切り替えることと、設計・デザインの工夫により各デバイスに最適なインターフェースを提供することができます。
ただ、ストレスを感じて離脱してしまうような事態は回避できますが、ワンソースであるがゆえにデバイス毎に大きくコンテンツを出し分けたり、本当に細かいチューンナップが難しいという問題もあります。
モバイル端末ならではの機能(GPS、お財布、電話)で新しい体験を提供する
( △ )
PC版と同じソースコード、コンテンツを提供する為、GPS機能やお財布機能等のスマートフォン専用機能を実装することは難しいです。もちろん全くできないという訳ではないですが、スマートフォン専用サイトやネイティブアプリに比べて弱いのは明らかです。
各デバイスでのSEOの強化により流入を拡大する
( ◯ )
ワンソース、同一URLのためPCとスマートフォンで同一のSEOを行うサイトには効果が期待できます。
ただ、逆にスマートフォンでユーザーのニーズや動きが異なる業種には向かないともいえます。
回線の遅いスマートフォンでの軽くて高速な表示で離脱を防ぐ
( ☓ )
各ブレイクポイント分の画像、CSSを予め準備しておき、それらの表示／非表示で切り替えを行うため画像を多く使用しているサイトでは表示が重くなってしまうケースが多いです。
ブログ等のテキストがメインコンテンツのWEBサイトや、WEBフォントとCSS3の組み合わせによってある程度解決することができますが、日本語のWEBフォントのクライアント提案レベルでの実用性がまだ疑問が残る点からも、根本的な解決には至っていません。
コストを下げられるか
制作費用を下げる / クライアントの手間を軽減する
( – )
レスポンシブデザイン制作においてバリューを提供できるかはこの点にかかっているといえます。
一般的にレスポンシブデザインを導入する大きな理由として、ワンソースの為、実装コストが抑えられるといったものがあります。
果たしてそうでしょうか。
無駄に多くのブレイクポイントを設定し、各デバイスに厳密に最適化させようと画像やコンテンツを多く切り替えるようにしてしまうと、制作や検証の工数が跳ね上がります。
レスポンシブデザインの場合、表示するコンテンツがどのデバイスでも原則同じなため、最終的な落としどころは一番画面サイズの制限を受けるモバイル端末となります。
これまでと同じく、PC版のデザインカンプを作成し、それを他デバイスに対応させていくような流れとすると変換の際に無理が生じてしまうこともあります。
そのため、デザインや設計も一新し、モバイルファーストの考えで進めることが必要となってきます。
また、発注者様にデザインや動作の確認をする際にも工数がかからないような注意が必要です。
ブラウザの横幅によって見え方が変わるというような概念は、制作サイドは理解していても、発注者様に言葉の説明だけで理解してもらうことは難しいことが多いです。そのため、結局確認の際に仮のコーディングを行うなど無駄な作業が発生してしまいかねません。それが数ページのサイトならまだしも数百ページもの大規模なサイトとなると…
このため、従来のようにデザインカンプを作成しそれをコーディングに当てはめるのではなく、ブラウザでデザインするインブラウザデザインで制作を行うなど制作サイドの作業方法も見直す必要があるかもしれません。
バリューを生む実装方法の可能性
以上のことからクライアントバリューを提供できる実装を行うためには、いかにコストを押さえるかが重要となってきます。
制作工数を押さえて効果的に活用する事例を紹介します。
1. エントリーフォーム × Twitter Bootstrap
デジタルマーケティングにおいて、コンバージョンに直結するエントリーフォームの最適化は必須です。
そして、スマートフォンでPCサイトを閲覧している際に、大きなストレスを感じ時に離脱にまでつながるのもエントリーフォームです。ある程度汎用性のあるエントリーフォームをスマートフォン、タブレットに工数をかけずに最適化できれば、コストを下げることができます。
Schick 替刃&ジェル一年分プレゼント クローズドキャンペーン
Schickのクローズドキャンペーンでは、Twitterが提供するCSSフレームワークBootstrapでエントリーフォームをレスポンシブ化することで、制作コストを押さえたマルチデバイス対応を行いました。
CSSフレームワークは、うまく活用すればオリジナルでCSSを作成するより制作時間、作業工数を圧縮できます。
フレームワークを利用するにあたっては仕様を理解し、その仕様から大きく逸脱しないようにすることに注意が必要です。
仕様から大きく外れて独自のカスタマイズを多くしてしまうと、そもそもの工数を下げるという目的から逸れてしまいます。細かくデザインを作り込むのではなく、画面サイズでの最適化であるとクライアントと共通認識をとり制作を行うことでコストを下げながら、レスポンシブデザインのベネフィットをキープできます。
2. Media Queryを使用しないワンソース、同一URL
Googleが推奨したことでさらに実装サイトが増えることも予想されるレスポンシブデザインですが、「Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」を読んでみるとGoogleは「ブラウザサイズによる可変デザイン」を推奨している訳ではありません。
Googleが推奨しているのは、ワンソース、同一URLのスマートフォンでも操作しやすいサイトです。
次に紹介するサイトは、いわゆる画面幅反応型のレスポンシブデサインではありませんが、レスポンシブデザインのもつ
- スマートフォンでの操作しやすいインターフェース
- ワンソース、同一URLのためSEOに効果が期待できる
- シェアやリンクが簡単にできる
- 制作工数がかからない
という特徴を満たしています。
L’Oreal Paris ブランドサイト
http://www.lorealparisjapan.jp/
こちらのサイトは、ワンソース(コンテンツ部）、同一URLの形式でありながら、Media Queryでの画面幅切り替えをおこなっていません。
コンテンツ部分はPC、スマートフォン同一のものを使用し、スマートフォンで操作しづらいグローバルメニューのみを最適化するというものです。Media QueryではなくUser-Agentにより機種を判定し、PCとスマートフォンでphpでインクルードしたグローバルメニューを出し分けています。
コンテンツ部分は設計段階より、スマートフォンで操作することを前提にクリックエリア・各パーツを大きく設定し、指で操作した場合でもストレスを軽減するようにしています。
結局ページのフォーマットが変わればその分だけ、デザインをデバイス分作成しCSSを書き分けなければならないレスポンシブデザインと異なり、この場合、PCとスマートフォンでことなるのはグローバルメニュー部分のみなので、数百ページにわたるような大規模なサイトになればなるほど、工数の軽減を図ることができます。
繰り返しますが、制作会社はお客様にバリューを提供しなければなりません。
制作側から見れば、ブラウザサイズを大きくしたり小さくしたりして小気味よく可変してくれるレスポンシブデザインは大きなロマンを感じる技術ですが、そもそもスマートフォンではブラウザサイズを変更できませんし、一般ユーザーがそのような特殊な行動を起こすことはまず考えられません。
制作側のエゴにならず、クライアントバリューを最大限提供できるマルチデバイス対応を提案する際には、いかにコストを抑え、ワンソース、同一URLのでどんなデバイスでも見やすいWebサイトの制作ができるかという点が、制作側の課題となります。
一方で、マルチデバイスの提案を受ける側にもコストに見合ったバリューを享受できるのかという危機感が必要ともいえます。発注者様側からみれば、ページ数やコンテンツ内容に応じて適切なマルチデバイス対応方法を選択することで、浮いたコストはコンテンツ制作に投資することも可能になります。
日々増加しているスマートフォンやタブレット端末のユーザーに使いやすく読みやすいコンテンツを提供でき、ブランドにとってもバリューがあるサイトとなるように試行を重ねて制作を行うのがこれから求められていくのではないでしょうか。