7月2日、SwapSkills doubbble vol.01と題して、スマートフォンやタブレットの普及で変わる"次に見るウェブサイト"について新しい考え方や制作方法を学ぶことができる「モバイルサイト制作に見る、次世代ウェブのカタチ ～One Web～」が野村カンファレンスプラザ日本橋にて開催された。本稿では、前後編に分けて本イベントのレポートをお届けする。

イベントの概要

本イベントは、スマートフォンサイトの制作のための考え方やアプローチから始まって、フレームワークやパフォーマンス、ユーザー体験などの実践的な内容を紹介している。さらにスマートフォン以外のTVなど、今後の新しいデバイスのためのセッションもあり、モバイルサイト制作の最新のトレンドや制作手法を一から学べる構成となっている。

• 「Mobile First: モバイルファースト」が意味する今後のWebコミュニケーションデザイン（長谷川 恭久氏）
• 新潮流、デバイスに振り回されないスマートフォンサイト制作　菊池 崇氏
• マルチデバイスに対応するjQuery Mobile（吉川 徹氏）
• スマートフォンのUX（藤木 祐介氏・伊東 宣之氏）
• スマートフォンの徹底検証とサイトパフォーマンス（馬場 宣孝氏）
• スマートTVへのアプローチと制作（Daniel Davis氏）

「モバイルファースト」が意味する今後のWebコミュニケーションデザイン

まず始めに、長谷川 恭久氏より「モバイルファースト」という今後スマートフォンサイトを制作していく上でベースとなる考え方とその課題について解説した。

モバイルファーストとは、Webサイトを制作する上で、最初にモバイルを意識して設計し、それを軸にデスクトップやその他のデバイスへ活かしていくという基本的な考え方である。世界のモバイルの現状から今後ますますスマートフォンやその他のモバイルデバイスが普及していくことを示し、現在はデスクトップからモバイルへ変わっていく転換期であると述べた。そのなかで、デスクトップ向けのWebサイトをモバイル向けに作り替えるというのは間違っているとし、それぞれの利用者の姿が以下の点で違うことを示した。

デスクトップ・ノートパソコンの利用者

• ひとつの場所
• ほぼ室内
• 大きなスクリーン
• 電源十分
• 安定した回線

モバイルの利用者

• 常に動いている
• ながら行動
• 小さなスクリーン
• 電力は常に気になる
• 不安定な回線

このことから、2つの利用者の傾向や利用方法の違いを前提にしてWebサイトを作る必要がある。その際にモバイルを意識したデザインや設計を行い、それを軸として他のデバイスに展開することによって最適なユーザー体験が提供できるのではないか。例えば、スクリーンが大きなデスクトップ環境ではいろいろなコンテンツを盛り込むことができるが、スクリーンが小さなモバイル環境では同時に表示できるコンテンツに限りがある。そのため、多くのコンテンツの中から利用者にとって本当に必要なものにフォーカスしなければならないと述べた。

また、モバイルファーストのよくある誤解として、モバイルファーストはモバイルサイトを最初に作ることではないと述べた。例えば、Androidはそれぞれデバイスごとのスクリーンサイズや機能の違いが大きく、ターゲットとするデバイスが特定できない。そのため、それぞれのデバイスに同じ見た目を提供しようとすると、これまでと同じような落とし穴にはまってしまうと説明した。モバイルファーストの本当の意味は、コンテンツファーストである。コンテンツとは、どのデバイスで見ても共通している。利用者に提供すべきコンテンツがいったい何なのかを考えることこそがモバイルファーストであると述べた。では、提供すべきコンテンツはどのように考えるべきか、以下の4つの指針を提示した。

• スピード
• 即時性
• 小さい
• ポータブル

ネットワークが不安定なモバイルでは、いつ使えなくなるかわからないため、コンテンツを早く提供できなければ意味がなく「スピード」が重要であること。また、常に何かをしながら操作しているモバイルでは、その瞬間に欲しいと思ったときにすぐに提供できるように「即時性」が求められること。スクリーンが「小さい」ため、コンテンツそのものを小さくしなければならないこと。そして、コンテンツを他のアプリケーションや他のサービスから知ることができるように「ポータブル」化して持ち運びできるようにしておくこと。例えば、ソーシャルメディアなどで他の人におすすめする際に、そのコンテンツだけが提供できる状態になっているかなど。これらの指針を前提にコンテンツを考えていくべきだと述べた。その他にもスクリーンサイズが小さいモバイルで多くの表示領域をコンテンツに利用するためのナビゲーションの手法などを紹介した。

実際にモバイルファーストを実践するには、いくつかの課題がある。まず、サイトの基本構造を構成し直す必要があること。そのために、入念なプランニングが必要なこと。そして、もっとも重要なのは同じ見た目を提供しなくてならないという考え方を変えることである。考え方を変えることは、スキルアップよりも難しく、コミュニケーションを通じて啓蒙していくことが大事であると述べた。他にも技術的な課題やフォーカスすべきコンテンツをどう選択するかといった問題もあるが、現在はモバイルファーストという新しいアプローチをどう活かしていくか試行錯誤している段階である。だからこそ、いろいろ試して言って欲しいと述べた。

新潮流、デバイスに振り回されないスマートフォンサイト制作

Web Directions East LLCの菊池 崇氏よりiPhoneやAndroidといったさまざまなデバイスに対してスマートフォンサイトを制作するための手法としてResponsive Web Designを詳細に解説した。

まずスマートフォンサイト制作におけるアプローチには、足し算のものと引き算のものがあると述べた。足し算のアプローチのひとつには、Webサイトのデバイスによる振り分けがある。例として、氏が実際に経験した案件において、最初にiPhoneとAndroidのあるデバイスの2つの対応だけだったものが、次第に対応が必要なデバイスやブラウザが増え、そのたびに振り分けるHTMLファイルが増えて大変な苦労をしたという。その経験を踏まえて、今後はこのような振り分けによる対応は難しいことをモバイルの現状から説明した。スマートフォンのOSの種類は、iPhoneやAndroidに加えてWindows Phoneなど今後も増えていくこと。それにともなって、デフォルトで組み込まれたブラウザもMobile Safari以外にもIEなども考えてなければならないこと。そしてAndroidの多様なデバイスに見られるように、各キャリアからスマートフォンがどんどん発売されており、その比率は既に5割を越えていると述べた。さらに、スマートフォンでは、縦向きや横向きといったデバイスの向きでスクリーンサイズが変わることや解像度もそれぞれのデバイスで異なることから、対応しなければならないパターンは無限にあるという。また、TVやカーナビなどインターネットにアクセスするデバイスも増えており、限られた予算の中ではすべてのデバイスに対して振り分けで対応するのは現実的ではないと述べた。

そこで、ユーザーが求めているものは同じ見た目ではなくコンテンツであるとし、細かいレイアウトの違いを受け入れるという引き算のアプローチのひとつである「Responsive Web Design」を提案した。Responsive Web Designとは、スクリーンサイズが異なるデバイスごとに最適なレイアウトを提供するものである。具体的な手法として、Liquid LayoutやFluid Imageなどを挙げた。Liquid Layoutは、各要素のwidthなどのスタイルをパーセント指定にすることによってスクリーンサイズによってコンテンツが柔軟に拡大・縮小されること。Fluid Imageは、あらかじめ大きなサイズの画像を用意することで拡大・縮小されても綺麗に見えるようにすることである。そして、Media Queriesを利用してスマートフォンやタブレット、デスクトップ向けにそれぞれ異なるレイアウトを提供することで、今あるデバイスに対応するだけでなく、今後増えていく未知のデバイスにも柔軟に対応できるとした。

マルチデバイスに対応するjQuery Mobile

次に、吉川 徹氏よりResponsive Web DesignとjQuery Mobileを組み合わせることでマルチデバイスに対応する手法について解説した。

最初に、これまでのセッションを振り返ってResponsive Web Designを簡単に紹介し、これで本当にモバイル向けに最適化されたサイトを構築できるかと疑問を投げかけた。そしてJason Grigsby氏の「CSS Media Query for Mobile is Fool's Gold」という記事を引用し、Media Queriesは見掛け倒しであると述べた。モバイルではスピードが何よりも重要であるということを前提としてMedia Queriesの技術的な課題をいくつか説明した。例えば、Responsive Web Designを構成する手法のひとつであるFluid Imageでは、モバイルには不必要に大きな画像をダウンロードさせること。Media Queriesでは不要なHTMLやJavaScriptを削除することができないこと。そのため、HTTPリクエスト数や全体のサイズを減らすことができないといったことを挙げた。そして何より、デスクトップ向けのWebサイトを単に再構成しただけでは、モバイルの利用シーンやニーズを考慮したサイト構築はできないと述べた。

しかし、今度は逆にResponsive Web Designはそれでも有用なアプローチであると述べ、Media QueriesをJavaScriptで補う方法をPPK氏の「Combining media queries and JavaScript」という記事から紹介した。例えば、Media Queriesの定義は、JavaScriptで次のように書くことができるため、JavaScriptを使ってMedia Queriesの欠点を補うことができると述べた。

CSS
@media all and (max-device-width: 480px) {
  /* styles */
}

JavaScript
if  ( window.screen 

そして、Responsive Web Designの一部としてスクリーンサイズを判断してモバイル向けにjQuery Mobileを組み込むことができるということを実際のサンプルを交えて解説した。そのためには、まずコンテンツをモジュール化することが必要だと述べ、実際にモジュール化を行ったデスクトップ向けのWebサイトに対してjQuery Mobileの属性を追加してページを作成する方法やページを装飾する方法などを説明した。

また、もうひとつのアプローチとして、jQuery Mobileの中でResponsive Web Designを活用する方法をjQuery Mobileの公式サイトを例に紹介した。その中で、Media Queriesを使って2カラムレイアウトやCollapsibleブロックの展開、スクリーンサイズに合わせたトランジションの方法やトランジション速度を変更する方法などを解説した。

そして最後に、ここで紹介したようなResponsive Web DesignやjQuery Mobileなど新しいアプローチや便利なフレームワークはいくつもあるが、それぞれ単体でモバイルにおけるさまざまな課題を解決する「銀の弾丸」のようなものはないと述べた。重要なのは、それらの利点や欠点を知り、ユーザーのニーズに最適なものを選択して、組み合わせていくことだとした。