ラベル 7インチ の投稿を表示しています。 すべての投稿を表示
ラベル 7インチ の投稿を表示しています。 すべての投稿を表示

2012年11月6日火曜日

【ウラジオストク対談】 マルチデバイス対応には、OneWebとアダプティブで対応していく!

はじめに。
ここ極東の果てのウラジオストクで、私とMobifyのイゴール・ファレッツキー社長と一緒に、連日のように、新しいモバイルサイトの対策について話し合っています。

というのは、従来の「最適表示」という問題に大きな変化が起こっているからです。もはやスマートフォンサイト対策だけでは、不十分であり、7インチを含めたタブレット対策という問題が目前にせまっているからです。ネクサス7に始まり、iPad Mini, Kindle Fire,さらにサムソンの新機種など、さまざまなサイズのタブレットが登場してきています。

サーバーサイドテンプレート調整の問題は、コストと、小回りが効かせにくい調整作業


占部雅一(以下 マサ)
 マルチデバイス対応なんだけど、結局、我々が取り組もうとしているOne Web以外の方法で、ほかにいい解決策があるのだろうか? CMSのサーバーサイドでのテンプレート調整では同等の対策をすることもできるが、この方法についてはどう思う?


イゴール・ファレッスキー(以下、イゴール)
 CMS+サーバーサイドテンプレート調整のコントロールをやれば、インフラのコストも含めて3倍~5倍のコストがかかってきてしまう。それはクライアントにとってたまったものではない。我々は、オープンソース化したMobify.jsを使い、かつ我々が用意したクラウド・サービスを使う。そのほうが、コスト的にはるかに安上がりになるのは間違いない。モバイルCDNなどを個別で用意したら、いったいどれほどのコストになるかを試算してみるといい。

マサ:結局、OneWebにするにしても、サーバーサイドのテンプレート調整では、結構手間になるようだし、いまはタブレット対応は、まったく考えられていないようだね。


イゴール: タブレット対応は、サーバーサイドのテンプレート調整でやる限り、コストがかかり過ぎる。またテンプレート調整では小回りはきかない。なのに内部のエンジニアは、トータルでコントロールしたいから、どうしてもこの方法に目がいくようだ。

レスポンシブウェブデザインは理想的だがコストに加え、エラーが発生しやすい


マサ: では、レスポンシブウェブデザインという方法はどうだろうか?OneWebを実現する上では、すでに古典的な手法で、もう何年も研究がされている。しかし、これらの「トラディショナルなレスポンシブウェブデザイン※注1」では、本当の意味での解決策にはつながらないのではないか?

イゴール; そのとおり。コストが合わない。

マサ: つまり、手間がかかりすぎる。構築の時間、コスト、メンテナンス、更新性など、どれもやっかいだよね。レスポンシブウエブに取り組むチャレンジャーのデザイナーでさえ、半分は諦めている感じがする。なのにムーブメントだけは熱い。クライアント側に対しても、トライアル後には「こんなに大変ならやめたほうがいい」という声も聞く。


イゴール:アメリカにもレスポンシブウェブデザインに対しては、熱烈なフリークがいる。彼らの取り組みといえば、CSSの芸術的なアプローチを追求し、そのジーニアス(天才的)な手法にこそ未来を見ようとしているうようだ。

しかし、我々自身がスターバックスやideeli(アイデリー)で取り組んだように、Adaptive(アダプティブ)ウェブという手法を提案している。

これは、PCサイトはそのままに、モバイル側だけでレスポンシブウェブデザインの対応を図るというコンセプトだ。

マサ: レスポンシブ・デザインの最大のネガは、リニューアルをしないといけないという点につきる。ここが大きなハードルです。また構築コストも約2~3倍かかってしまう。100万円でできるサイトに、だれが300万円もの大金を支払うだろうか。


イゴール:しかし、北米ではEコマースを中心にレスポンシブウェブデザインが主流になるとも言われている。Googleがこの方法を推奨しているからであり、SEO対策、ソーシャルシェアやアクセス解析の点でも問題がないからだ。また、実際にクローラーがひとつで済むというもの大きな点だ


「アダプティブ」とは、レスポンシブ・デザイン+Mobify というハイブリッドの対応策


マサ: 実際のところ、「アダプティブ」こそが最良策だろう。レスポンシブ・デザイン+Mobifyを組み合わせたハイブリッドな手法が、実はもっとも現実的だとおもう。それは先のリニューアルが不要なため、それに早く対応できることだ。
しかし、それなのに日本では、ハイブリッド策は、邪道と思われている節もあって、ピュアな開発者たちは、関心を寄せてくれない。

イゴール:アメリカでもそう。インハウスの技術者たちは、すべて自分たちでの解決を求める傾向があるんだ。スクラッチしかり、レスポンシブウェブデザインしかりだ。しかし、こうした方法でやればやるほど、構築コストとメンテナンスコストは跳ね上がってしまう。それは結果的に、クライアントに大きな負荷をかけるはずだ。

マサ:では、いま我々が取り組んでいる解決策、アダプティブウェブしかないんじゃないだろうか?つまり「Mobify.jsとクラウド」を使うことで、本当の意味の解決策はなるという。 イゴール、ほかの方法は、まだあるんだろうか?


イゴール:ないと思う。おまけにFacebookの急進がOne Webでなければならないことを押し上げている。口コミにしろ、モバイルコマースのコンバージョンがそれを証明しているしね。


マサ: とすると、僕らのPRが足らないということじゃないかな。でも、こうした結論にたどりつくまで結構時間がかかってしまった。なにしろ、どれも手探りだからね。

イゴール: これからは、アダプティブがいいでしょ。





マサ: そうだね。PCサイトはそのままにして、モバイルサイトのみをレスポンシブウェブデザインで対応させる。しかもスマホだけでなく、タブレットもやってしまう。

PCサイトの全面リニューアルは大変だから、そのままにしておく。過度的な解決策かもしれないが、ここ2年くらいは現状サイトが残るだろうから、企業サイトがモバイルファースト化するまでの執行ゆうyと思う。


イゴール:ともかく、ここロシアでもユーザー率は25%と、日本と同様だけど、街中には日本以上にWifiが多いね。日本は街中のインフラが少なすぎると感じたよ。どこにもアンテナが立たないのが問題だ。 北米のユーザー率は、来年には60%を越えるだろう。まもなくタブレット市場が活性化するとおもっているんだ。

マサ:、もっとOneWebを理解してもらうように、がんばりましょう。



※注1 トラディショナル・レスポンシブデザイン → CSSの技術を駆使して構築するオーソドックスな構築方法。反対に、レスポンシブ・デザインにMobifyのクラウド技術を加えて対応する方法を「アダプティブ」と呼んでいます。この方法だと、PCサイトはそのままに、モバイル側を対応することができるため、大がかりなリニューアルをする必要がありません。

※注2 One Web (ワン・ウェッブ) → PCサイトやスマートフォンサイト、そしてタブレットサイトをひとつのページ、すなわちOneWebの絶対パスのページで対応する方法。この方法だとあえて、複数のページを作成する必要がなく、集客や拡散の上でも大きなメリットがある。とくにFacebookが伸張している時代において、口コミによるリコメンドの存在は大きく、モバイルEコマースにおいては欠かせない条件と言われている。また同様にSEO効果にも都合がよく、、マーケティング分析の上でも無理のない仕組み。これらは、スクラッチやプロキシータイプのソリューションでは解決しにくい課題となっている。



2012年11月6日 (ウラジオストックでのモバイルサミットにて)








【北米モバイル通信】iPad Mini 向けWeb デザイン対策の5つのポイントとは?

iPad Mini 向けのWeb デザイン対策の5つのポイントとは?
これは、iPad Mini対応のWebサイト製作のためのヒントです。ほとんどの人が意識してこなかった最適化対策です。キンドルではどうする?ネクサス7ではどうする? 日本では、スマホ対策が急務ですが、これだけでは終わらないのです。7インチタブレット対策をどうするのかが、今後の重要な課題および研究ポイントになってきます。


1.      タブレットで見るPCウェブは時代遅れ

iPad Miniへの対応が注目されています。現在のサイトが、スマートフォンフォンサイトならば、拡大し、PCサイトなら縮小して対応することはできます。どちらを選ぶとなると、モバイルサイトを拡大する方が最適化の出発点としては無理がありません。
しかし、これも一時しのぎです。世界はすでにマルチスクリーンの時代です。Googleの発表では、「90%の人はスマートフォン、PC、タブレット、テレビと、それぞれのデバイスを使いわけている。」と言います。
ウェブサイトをさまざまな人々に見てもらいたいと考えるなら、すべてのデバイスに適応させる必要が迫られているのです。




2. タブレットデザインのガイドライン

では、 iPad Miniのような小型タブレットのためには、どうデザインしたらよいのでしょうか?下記は、タブレットデバイスのためのガイドラインです。

iPad Miniは、7.8インチの新しい画面サイズです。まず、1024 x 768 ピクセルサイズの画面 (iPad 1 2 と同じ) であることを確認し、デザインを開始します。

  • 大きなテキスト-読みやすさのために、14 ピクセルにフォントサイズを大きく。
  • パッドするために-PCより幅や高さを増やし、リンクのタッチ精度をあげます。
特にこれは、フォームやカレンダー 、ドロップダウンメニューに意識しましょう。
  • マウス動作 -可能な限り、マウスによる動きを削除します。
  • コンテンツ-タブレット画面サイズの600 x 1000 (ピクセル)の、 固定でのページ幅の修正ではなく、全範囲をカバーするように柔軟な設計を検討します。
  • フラッシュの削除– iPad やタブレットでは、フラッシュを削除する必要があります。
  • ポジショニング-positon:fixed]の設定はコンテンツのロードを遅くするので、外してください。

大事なことは、これらのガイドラインとともに、実際にユーザーとしっかり話をして分析をしましょう。最近の事例では、タブレット対応でテキストサイズを変更したことで、ユーザーは老眼鏡の必要がなくなり、コンバージョン率向上にもつながったケースもありました。




3.   サプライズ!: ユーザーは常に変化しています。

iPad Miniの画面比率は、1 億台以上販売されてたiPad と同じ43 ですが、まったく別物です。iPad MiniiPhone iPadの中間に位置します。7 インチ デバイスは、iPad より携帯しやすく、iPhone iPod Touchよりもパーソナルなデバイスになりうると予想します。
大きさの違いは、iPad Miniの特質を意味するのかもしれません。iPad Miniは、ハンドバッグ、ラップトップ バッグ、財布やキャリー ケースに簡単に収まり、通勤や旅行に手軽に持ち運べます。ユーザーは 電子書籍、映画およびビデオ、ゲームやそのほかのエンターテイメント、FacebookTwitterのようなソーシャルメディア やショッピングや商品検索など多岐の用途に使うことでしょう。

もちろん、彼らの行動を詳しく研究する必要があります。そのために、モバイルフォン利用の3 つの基本を再確認しましょう:
  • 繰り返し:ユーザーは株価、スポーツのスコア、オークション出品などの定期的なリアルタイムの情報を求めて接続します。
  • 退屈な時:ユーザーは時間つぶしや気晴らしを求めてFacebookTwitter、またはメールやその他のエンターテイメントを利用します。
  • 緊急な時:ユーザーは緊急時に、検索エンジンやニュースでどこで何が起きているかの情報を求めます。


4.   パフォーマンス: オプションにあらず!

iPad MiniWifiiと3G回線、LTEなどに接続しますが、性能はデスクトップ PCよりもスマート フォンに近いのです。開発においては、コンテンツ配信やコンテンツ運用で、パフォーマンスの制約に注意をする必要があります。ここでは、いくつかのケースを紹介します。

  • HTTP 要求の削減。タブレットはノートパソコンに近い画面領域がありますが、その処理能力はモバイルに近いのです。「Facebook Connect Google +1」 のような要素を削除すればパフォーマンスがよくなります。
  • 画像の最適化。 iPad Miniは非常に美しい高解像度表示を誇ります。デバイスへのイメージ最大化や縮小化にも配慮されています。しかし、注意が必要です。余計なデザイン化は、ユーザーエクスピアリアンスを損ないます。
  • スクリプトとスタイルの管理JavascriptCSSは、ページ内に書かれているものはすべて読み込まれます。不要なスクリプトはリソースを消費するだけなので、Jazzcatのようなサービスで、JavaScript CSS を統合してみてください。http://www.mobify.com/mobifyjs/docs/jazzcat/
  • CSS の選択アニメーションの荷は高く、JavascriptではなくCSSを選択してください。

つまり、iPad Mini対策では、簡単にPCサイトを綺麗に表示させることはできません。では、どうやってiPad Miniに最適化させればいいのでしょう?


5. レスポンシブを超えるアダプティブ


レシポンシブデザインは、マルチデバイス スクリーン用に構築する1つの方法です。しかし、レスポンシブデザインは、CSSを取り入れる適応可能なアプローチの1つに過ぎません。
ブラッド・フロスト氏は、プレゼンテーション:(Beyond media queries: anatomy of an adaptive web design:の中で、次のように述べています。


レスポンシブウェブデザインとは、可変グリッドデザインです。メディアの柔軟性があり、非常に幅広い適応可能な哲学/戦略の一部です。言葉が先行してしまった気配がありますが、マルチデバイスのウェブ構築のために定義されるべきです。




レスポンシブデザインだろうと、最適化を施されたサイトだろうと、重要なことは One Web アプローチです(http://www.w3.org/TR/mobile-bp/#OneWeb)。つまり、Web標準の HTMLCSSJavaScriptを利用し、ひとつのURLを通してユーザーに提供するということです。

もし、ウェブサイトが複雑でなければ、レスポンシブデザインを使用し、よりシンプルに可変性グリッド対応ができます。しかし、ウェブサイトが複雑に変化した途端、大きな問題を発生させることになります。

  • イメージ管理と最適化-さまざまなデバイスへの画像表示を可能にしますが、レシポンシブデザインのイメージの管理は困難です。http://dev.opera.com/articles/view/responsive-images-problem/
  • リソース管理と最適化-画像管理を越え、全体的なリソース管理画像、スクリプト、CSS はレスポンシブデザインなど、に大きな影響を与えます。
  • コンテンツのリフロー -レスポンシブ デザインは、コンテンツを非表示にするなど、限られたコンテンツでコントロールが必要です。。
  • ユーザー インターフェイス (UI)  多くのデバイスは、独自のUIが求められ、フォーム入力、メニューは、デバイスに応じたUIが必要です。
  • データのテーブル -画像とコンテンツをデバイスに適応させた後もテーブル要素の扱いはやっかいです。下記URLいくつかのソリューションがあります。

レスポンシブ・デザインはフロント エンドのレイアウトにはすばらしい技術です。しかし、多くの課題も抱えています。今後は、理想と現実に対応できる高度な機能が必要です。

レスポンシブ ウェブサイトの86%は、単純に同じHTMLページ(すべて同じ関連画像、スクリプト、コード、リソース)の配信です。そのため、それ以外を行うことは難しくなります。複雑な動作をさせることで、それぞれのバイスに最適配信ができますが、それがブラウザー上でしっかり動くかどうかはわからないという現状があります。。



iPad Miniの登場は、マルチデバイスの時代が訪れたことをさらに意識させます。今後のコミュニケーション・プロジェクト成功は、最適化のアプローチをいかにうまく行っていかがポイントになってくるでしょう。



補足:Domobiは、レスポンシブデザインをさらに拡張するできる機能を持たせることが可能です。よりパフォーマンスをあげ、構築期間とコストを抑え、さらにメンテナンスをしやすくすることができます。


James Sherrett, October 24 2012

2012年10月31日水曜日

マルチデバイス対応とは、オーディエンスを選ぶ時代になる!

アドテック東京2012 ライブセッション・レポート

 今日10月31日(火)は、広告とITの国際イベント、アドテック東京の初日でした。
 ワークショップのひとつ、ライブセッションにモデレーターとして登壇させていただきました。今日のゲストは、カナダのMobify社のイゴール・ファレスキー氏と、渡辺春樹氏(ビービッド)、戸井精一郎(日本経済新聞)、田中剛(花王)の4人で展開させていただきました。




どんどんデバイスが増えてきています。
スマートフォンだけの時代では、なくなってきている。

 すでに、7インチ・タブレットが登場してきました。 iPad miniをはじめ、Kindle Fireなどがそれです。またタブレットでも10インチのNexus10が登場しました。
  http://www.itmedia.co.jp/news/articles/1210/30/news026.html


つまり、どんどん違うサイズのデバイスが登場してきています。3.5インチだった旧iPhone、4~5インチのスマホ群、6~7インチのタブレット群、8~10インチの
タブレット2群と、まさにモバイルデバイスが百花繚乱となり、スクリーンサイズはどんどん増えていく時代になりそうです。



 マルチスクリーン時代のポイントは、
  • PCはどんどんタブレットPCへ置き換わっていく。
  • デバイス対応には、OneWebが理想である。そうしないと製作側は手間やコストが大変だ。
  • なにが何でもOnewebというわけではないが、いまはそれが一番近い解決策だ。




■本当の意味のモバイルファーストを求めて

 そして、今回のライブセッションで方向が見いだされたのが、「選ぶのは、オーディエンスである」ということ。これは、過去ブラウザ対応のように、異なるブラウザで表示チェックをしたように、今度はデバイスをどう併せていくかが問われていきます。

 そこでの課題は、どうデバイスやOSに対して、表示を最適化するだけでなく、「コンテンツをどう出し分けるかが課題だ」というところがポイントです。

 PCをベースにした時代から、PCを元に変換するとしても、今後は、コンテンツをどう整理するか?そして、大事になってくるのがオーディエンスのターゲットがどういう人たちかを見極める必要があるということです。


ワンソース・マルチデバイスで
コンテンツを出し分けるということ。

 そこで初めて「モバイル・ファースト」というキーワードがでてきました。モバイルファーストでコンテンツを組み立て直し、そこから各サイズのデバイスに出し分けることが重要だということです。

 オーディエンスを選ぶ。まずあるべきなのは、やみくもなデバイス対応ではなくて、まずターゲットあり。そしてコンテンツが決まってきます。そこでは、どういうコンテンツ形態にするか、 どこのデバイスを起点のソースにするか?が決まってきます。

 オーディエンス選定から、コンテンツ選定、次にデバイス選定、その上でワンソース・マルチデバイスが考えられると予想されています。

 こうなると、開発の余地はまだまだたくさんあります。
 さて、どう料理していくか、考えただけでもエキサイティングです。







2012年10月18日木曜日

新OS、新デバイスになったら、Web表示が正しくできますか?

10月も後半、ようやくiPhone5を手に入れることができました。
使い始めて、まだ一週間ばかりですが、最初のレポートとします。

 私が購入したのは、KDDIのauバージョン 16GBモデルです。auショップ人形町店です。ちなみに、ここの人形町店だと、64GBなら、案外すぐに購入できるようですよ。

 さて、持った感じは少し違います。掌サイズだった「4」のラインに比べて、少し長くなりました。掌スッポリではなく、ちょっとはみ出してしまう感じです。巨大化するアンドロイドと比べて、iPhone4は頑なに、従来のサイズを守ってきたともいえるのですが、今回は、少し縦方向に伸びました。この拡大はどう受け入れられるのでしょうか。

 で、一番の問題がそれほどサプライズがないこと(5Sや5Cもそうなりましたが)。4の延長なので、仕方ないですが、もう少しなにか期待感が欲しいところですね。一番の問題が、バッテリーの持ちが悪い点です。省エネ設定などを試してみましたが、それほど変わりません。もう少し様子をみて、ダメならショップに相談してみることにします。

まとめ。

○ 
・さらに精緻化されたデザイン、ディテールの処理に感動。
・薄く軽くなり、軽快な感じが多少します。
・アンドロイド製品群がふた昔前に見えてしまいます。素材といい。


・意外と発熱する。結構使い続けると熱い。

×
・思ったほど感動が少ない。アップルに科せられたサプライズが足らない。
・電池が持たない。iPhone4よりも30%ほど悪い。



新OS、新デバイスで、Web表示は対応できていますか?

 さて、新機種、新OS登場によるモバイルWEBサイトの対応状況が実は本題です。 新しいデバイスやOSが表れてきたときに、意外な盲点としてWEBが崩れてしまうことが多々あります。
 それが、スクラッチの工法だったり、CMSサーバー側のテンプレートの設定だったりすると、どうしても新デバイスへの対応やOSへの対応がすみやかにできなくて、WEBを修正、やり直しなどの作業が生まれてきます。
 多くの原因は正しいWEBの記述がされていないのが原因です。正規化されないデザイナー独自の技やローカルルールが、当たり前のように存在しているからです。









こういう場合でもクラウドの対応のサービスならば、意外とスムースに対応でき、もし不具合があったとしても極めて短時間で対策が図れていきます。
つまりサービス提供側でその対応の多くが賄われ、クライアント側による改修の負担が最小限で抑えられるわけです。特にデバイスのデータベースの管理は、個別でやると結構大変になります。


 今回のようなiPhone5もiOS6のような社会的なインパクトがある場合でも、細かいバグは心配になります。しかし、1)スクラッチの場合は前ページ槍換えなどの致命的な対応になる可能性もある。 2)CMSなどのテンプレート調整もテンプレート作成の数が多かったりします。また改修のためのスピード対応を考えると、さらに厳しい対応がせまれることも覚悟しないといけません。


 10月23日には、ipadミニがどうやら発表される見込みですが、GoogleのNexus7 アマゾンのKindle などでも、WEB対応は、新たな問題が発生する可能性があります。何しろ、7インチは誰もがノーマークだったジャンルです。いろんなコンバート方式、構築方法がある中で、やっぱりおすすめなのは、メンテのリスクが極めてすくないクラウドタイプの最適化サービスです。

 



企業としては、過去のWEB資産や、予算確保しなければならない都合から、一気にサイトリニューアルは難しいのが現状です。
 まずはサイト最適化サービスくらいから、無理のないところで、最適なモバイル対応を行う。

そのために、対応力のあるツールを選んでおくことが重要になります。ぜひこの機会に
新しいデバイスへの対応、OSへの対応についてチェックをしてみてください。