2013年5月9日木曜日

レスポンシブウェブデザインの期待と不人気の2つのトレンド

一部では熱狂的に注目され、一部ではまったくダメとされる

レスポンシブウェブデザインの期待と難しさとは?

これまでも、マルチスクリーン対応のために、レスポンシブウェブデザイン(RWD)という手法が注目されてきました。かつてはリキッドデザイン、その後は、可変グリッドデザイン、最近では「レスポンシブウェブデザイン」として注目を集めています。

この背景を分析すると、
1)Googleが今後のマルチスクリーン対応の解決策として推奨してきた
2)コーディングを駆使する上で Webデザイナーにとってはチャレンジングな手法。
これらがいまだにHotな状態をキープしているのでしょう。
















企業が敬遠するレスポンシブウェブデザインの課題
 ところが、企業のWeb担当者にとっては、やっかいなアプローチとして、少々あきらめ感があります。つまり敬遠気味なのです。

その理由として
1)制作コストが3倍近くかかってしまう。
2)フルリニューアルが必要で、そんなコストは出せない
3)更新運用が少し面倒であり、改修などにはそれなりのスキルを要する
4)ローディングスピードが遅い。
5)そもそもモバイルファーストで設計がされていない

 以上のような課題を抱えています。




レスポンシブウェブデザインでは儲からない!?
 ところが、制作サイドからもレスポンシブウェブデザインを、あまり好まれないという考え方もでてきました。あるWebデザイナーによると、
「割にあわないんですよ。結局、レスポンシブウェブデザインでは、1ページで3ページ分をまかなうわけです。ところが、3倍のお金が請求できません。せいぜい請求できても2倍程度です。つまり、作業負荷などは3倍以上もかかるのに、コストとしてが見合わないんですよ」

 このあたりも、ちょっと課題の多い話です。このままでは日本のレスポンシブウェブデザインの勢いがなくなっていまうのではないでしょうか。うーん。


アダプティブウェブという柔軟な方法で

 こうしたレスポンシブウェッブデザインというものに対して、「アダプティブウェブ」という概念も登場してきた。
 アダプティブウェブとは「既存のPCサイトを元に、各スクリーンにアダプティブ(適合)させていこう」というものです。これはレスポンシブウェブデザインという手法の良さは認めつつ、形式にとらわれないで、柔軟な姿勢で適合策を図っていくというアプローチです。図にすると下記のようになります。




 アダプティブウェブとは、まだ日本では聞き慣れない言葉ですが、米国ではアーロン・グスタフソンによる解説書も登場してきました。

 アダプティブウェブの良さとはなんでしょうか?この概念のとらえ方にはいくつかありますが、

1つは、リニューアルが必要なく、現在のPCをベースに対応できることです。アダプティブウエブが広まるということは、現在のレスポンシブウェブデザインという手法を取り込み、もっと柔軟で小回りの利くWebアプローチがどんどん増えてくるということになりそうです。

アーロン・グスタフソンによる
アダプティブウエブデザイン









2013年5月7日火曜日

「モバイルの時代」に行くため不可欠な「サイト表現の標準化」について


モバイルファースト時代への対応とはなにか?

マルチスクリーン対応にむけた

ベースサイトの整備と基本構造の重要性 

このレポートは、私たち、ドーモが1年間に渡ってスマートデバイスへの最適化をしながら、発見したこと、見えてきたことを占部、大賀、坂井の3人によるディスカッションをインタビュー形式でまとめてみました。
      出席 坂井潔(Webエンジニア)大賀匠津(Webデザイナー)司会:占部雅一(DOMO代表)


そう簡単ではない、「モバイルの時代」に行くということ

ようやく時代がモバイルに向かっていくんだということが、認知され始めてきました。もはやスマートフォンとタブレットはPCのおまけではなく、今後はこれらが中心のデバイスの時代になっていくんだ、ということです。



では、モバイル向けサイトをどう考えて、どう構築していくかですが、実は、そう簡単ではないわけです。スクラッチ構築は高コストとか、無駄が多く生じる。プロキシーソリューションは、セキュアが課題に加え、PCとスマホでは領域が異なる問題。またレスポンシブデザインにはJavascriptの処理に負荷がかかる上、小回りの運用が効かないなど、いくつかの問題が存在しています。


どれが最良の方法というのは難しいのですが、PCサイト、スマホサイト、タブレットサイトのそれぞれで最適化させ、安定した運用を得るためには、実は土台のWEBの構造。つまり基本(ベース)サイトの正規化が重要だということが分かってきました。

ワンソース・マルチデバイス、OneWeb実現のために必要なこと

今後は、マルチデバイス、マルチスクリーン向けに最適表示させるためには、表向きのAdaptive策だけでなく、実はしっかりと構造化されたベースサイトの正規化が必要になってきます。


「ダメなサイトでもどうにか再構成はできます。しかし、ダメなサイトを無理にやりくりするより、実はゼロから作ったほうが安上がりになる可能性もある。無理をすると、パッチを当て続けることになるわけですから、あとからの破綻の可能性が大きくなります」
坂井 潔氏Webエンジニア)





そういう意味では、モビファイは、マルチスクリーン時代に移行するこの時期には、最適のツールではないかと。なぜなら、ダメなPCサイトであれば「修正しないといけない」と、ベースサイトの程度の良さを見極めるいい機会を作ってくれるからです。

「スクラッチやサーバサイドテンプレートで対応すると、個別対応になりがちです。WEB担当者は、エンジニアにその部分をまかせきりになる傾向もあります。案外、その場しのぎなんです。だから無理のままを続けたり、問題にフタをしたままやり通すことにもなり、あとになって大変な処理をしないといけない可能性がでてきます」(同・坂井氏)。


「モビファイタグの挿入」とは、モバイルを意識すること。
モビファイタグの挿入は、もっと広い視点でモバイルへのグランドデザインを意識させることにつながります。」(大賀匠津/WEBデザイナー)

家に例えると、構造がしっかりしたものとそうでない場合がありますが、ダメな土台に増築を重ねても、一時しのぎにしかなりません。本質的な改善のためには、生活スタイルに会った土台を立て直す勇気が必要なんです。

同じように、とってつけたようにスマートフォンサイトを作った場合、運用面や構造変更、更新性までを考えると、いきなり破綻が起こりやすくなるわけです。下手をすると大きな連鎖反応を引き起こしてしまうことも可能性があります。これはEコーマスサイトでは命取りです。(同・大賀氏)

日本のPCサイトの場合、欧米に比べて日本流のカスタマイズが氾濫したせいか、複雑なものが多い。つまり、Webサイトの基準に適合して作れられていないものが多いのです。
これからは、Webサイトの基準に合わせた構造に修正することが重要です。マルチスクリーン対応にむけた構造設計が必要になってくるわけです。


構造設計のとともに重要になる「モジュール」の設計
モビファイの素晴らしいところは、よりよい環境を用意すれば、さらにいいパフォーマンスを発揮できます。その優しさはスクラッチで構築する比ではなく、運用面、コストにおいて素晴らしい状態を提供してくれるでしょう。


構造設計をしっかりと基準にあわせて作り、ソースを正しく記述することが終わったら、次に大事なってくるのがモジュールの設計です。
「これからは、デスクトップ用のデザインだけでなく、とともに、マルチスクリーンにむけた各パーツをモジュールとして設計する必要があります。例えば、3カラムデザインを作った場合でも、スクリーンが変わっても、各パーツの配置が有機的につながるような考え方です」(同・大賀氏)


またモビファイの提唱するアダプティブWebでは、レスポンシブデザインに比べて、もっと自由な配置が可能になります。そうした意味でも、モジュールの設計はもっと考えて行く必要があります。


モバイルファースト、そしてコンテンツファースト
構造設計の見直しとともに、重要になってくるのは,ターゲットユーザーの利用スタイルです。ユーザーに必要なコンテンツファースト、および機能としてのモバイルファーストも含めて見直す必要があります。
しかし、これを一気にやろうとすると複雑すぎて混乱してしまう。そのためには、再構築フェーズを分けて展開する必要があります。


ローンチしてからが始まりです。
またモバイルサイトをつくってから、それから改修していくことが必要です。
「我々は、スマートフォンでのUI改善で、どうコンバージョンをあげていくかに対しても責任を持つ必要あります。ローンチして終わりではなく、それから改良をしていく、よりいいものに高めていく。A/Bテストをやらないで、いい結果は作れないでしょう」(同・坂井氏)
PCサイトだけを考えればいいという時代は、終わろうとしています。むしろ、モバイルを先に考え、スマートフォン、タブレット、そしてPCサイトへのそれぞれに結びつくコミュニケーションの最適化が必要です。マルチスクリーンの時代は混沌としてしまいます。


まとめ
 最適化の過程でみえてくるのは、マルチスクリーン対応にむけて、基本のベースサイトがどうあらねばならないかを考えさせてくれます。Onewebでの対応、,高速表示、有効なUI/UXデザイン、セキュア対応など重要なことはいくつかありますが、その前提において、いままで意識せずに行ってきた部分ですが、ベースサイトの善し悪しが、マルチスクリーン時代の最適表示の対応策の鍵につながっていくはずです。