「モバイルサイト制作に見る,次世代ウェブのカタチ ~One Web~ 」イベントレポート(前編)

この記事を読むのに必要な時間:およそ 3 分

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つの指針を提示した。

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

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

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

著者プロフィール

吉川徹(よしかわとおる)

普段は,普通のSIer。Webからローカルアプリケーション,データベースからインフラ周りに至るまで,何でも担当する雑食系。主にHTML5開発者コミュニティ「HTML5-developers-jp」で活動中。同コミュニティ主催の「HTML5とか勉強会」のスタッフを務め,HTML5の最新動向を追っている。

コメント

コメントの記入