iPhoneに始まり、さらにここ数年で様々なAndroidケータイが登場し、日本でもスマートフォンが普及し始めています。それにともない、企業サイトやECサイトを、スマートフォンブラウザーで利用するユーザが着実に増えてきています。世界規模でいえば、2012年頃にはスマートフォンの販売台数がPCを超えるという予測もあります(ITU, Mark Lipacis, Morgan Stanley Research.2009 資料PDF )。これはビジネス的に考えて、「まだ様子を見て、対応しなくてもよい」とはいえない状況でしょう。そこで、本連載では「スマートフォン時代のWebサイト制作」をテーマに、スマートフォン対応に必要となる考え方、Dreamweaverを使ったスマートフォン対応のテクニックなどを解説していきます。第1回目となる今回は、スマートフォン対応サイトを制作する前段階について考えてみましょう。

とても深く、難しく、興味深い「スマートフォン対応」

「ケータイ(ガラケー、フィーチャーフォンと呼ばれるもの)ブラウザーとは異なり、スマートフォンブラウザーではデスクトップ向けサイトでもほぼ問題なく閲覧できる」というのが一般的な認識でしょう。実際スマートフォンブラウザーでは、ほとんどのケータイブラウザーでは使えないJavaScriptも使えます。また、HTML5やCSS3の対応もモダンなデスクトップブラウザーと同等、もしくはそれ以上に進んでいます。

これだけを聞けば、普段レガシーなブラウザーの対応に四苦八苦している制作者からすれば、こんなに喜ばしい環境はないかもしれません。しかし実際には、スマートフォンをはじめとするモバイル環境を考えるというのは、とても深く、難しく、興味深いものです。

「Mobile First」という考え方

モバイルにおけるWebデザインを考える上で大事なことは何でしょうか。この数年に登場したキーワードとして「Mobile First」という考え方があります。Mobile Firstは、2010年2月にバルセロナで開催されたカンファレンスにおいて、GoogleのCEOであるエリック・シュミット氏が新戦略として唱えたことで話題になったキーワードです。

Googleでは、言葉の通り「モバイルを第一に」と、開発者がモバイル版を念頭においた開発を行っているようです。それは単にモバイルユーザーが増えている現状への対策というだけではなく、モバイルを第一に考えて開発することでより良いアプリケーションを生み出すことができるという考えにもとづいています。

このMobile Firstの考え方を実践するための方法論は、元Yahooのチーフデザインアーキテクトであるルーク・ウロブレフスキのプレゼンテーションにて詳しく説明されています。そのプレゼンテーションから引用すると、彼の考える「モバイルWebデザインで考慮すべきこと」は次の5つであると述べています。

スクリーンサイズと解像度の多様性 スマートフォンだけを取り上げたとしても、各キャリアやメーカーが様々なモバイル向けOSを搭載した機種を販売しており、それぞれでスクリーンサイズや解像度、その他の仕様が異なります。つまり、デスクトップにおける多種多様なブラウザーに対応すること以上に、「小さな画面サイズ」を対象としてコンテンツやデザインを最適化することの難しさがあります。
パフォーマンスの最適化 スマートフォンブラウザーが技術仕様として先進的なものを備えているとはいえ、端末スペックや回線速度はデスクトップ環境の比ではありません。快適に閲覧できるようにするために、表示の速い、軽いサイトが求められます。
タッチインターフェイスの性質 スマートフォン、またはiPadのようなタブレット型のデバイスにおいては、指などを用いたタッチ操作で快適に使えることも重要です。それは、マウスポインタのように繊細な操作ができないという制約があると同時に、直感的な操作による新たな体験を与えられる可能性も秘めています。
位置情報システム 位置情報システムは、モバイル環境で特に有効な機能でしょう。簡単な例をあげると、GPSなどを利用した位置情報システムを利用すれば、現在私がいる大阪の梅田周辺でおいしいイタリアンのランチが食べられる店を探すために、わざわざ「大阪市淀川区...梅田...阪急...」などと入力する必要もなく、「現在地から探す」というだけのインプットで検索できます。
デバイスの能力 先の位置情報システムも含め、加速度センサーやカメラなどモバイルデバイス特有の機能があり、またHTML5/CSS3などのWeb技術への対応も進んでいるので、それらの技術をできる限り利用できれば、より良いサイト、体験を作り出せる可能性があります。

こうした課題や新しい技術へ取り組むことは、モバイル向けサイトだけに好ましい話ではありません。Mobile Firstの考え方は、単純にモバイル環境におけるサイトの最適化ということではなく、モバイル向けサイトを作る・作らないに限らず、こうした「制約」や「特有の機能」を前提に考えることでデスクトップ向けサイトにおいてもより良いものができるという考え方です。

つまり、スマートフォン向けにより良いサイトを考えるということは、より深くユーザのことを考え、どういったコンテンツが必要なのか、必要最低限のものは何か、それをどう表現し伝えるかであり、それはデスクトップ向け、ひいてはデバイスを問わずに「良いサイト」を作るノウハウとなります。

スマートフォンへ対応するための4つのアプローチ

新しくサイトを作るときには、先に述べたようなMobile Firstの考え方を意識して取り組めばよいでしょう。それでは、既存のデスクトップサイトをスマートフォンへ対応させる場合はどうでしょうか? 「スマートフォンに最適化したサイト/ページを用意する」ということになりますが、すべてのサイトにおいて容易にそれができるわけではないでしょう。ここではスマートフォンに対応するための4つのアプローチを紹介します。

  • 部分的な対応
  • メディアクエリーによる対応
  • アプリケーションの作成
  • 専用サイトの作成

また、これらのアプローチがそれぞれでどういったメリット、デメリットを持っているかも考えてみましょう。以下は、そのためのさらに4つの指標です。

  • スクリーンサイズにどのくらい最適化できるか
  • ページの表示速度をどのくらい最適化・高速化できるか
  • ユーザインターフェイス、情報、コンテンツをどのくらい最適化できるか
  • 予算、工数、時間、管理コスト面をどのくらい抑えられるか

部分的な対応

メリット ほぼデスクトップ向けの形であるため、最適化対応のためのコストはかからない。
デメリット サイトが大きいためコンテンツが小さく見えてしまうこと、画像その他リソースが最適化されていないので表示速度が遅い。

アップルのサイトは、スマートフォンで表示した場合も基本的にデスクトップ向けの見た目と変わりません。しかし、スマートフォンの操作環境を考慮し、不便なところ・利便性を上げられるところなどについて部分的に対応しています。具体的には、各製品ページ上部にある横並びの商品リスト、デスクトップ版ではその直下のメニューを選んで商品リストを切り替えるだけのUIですが、スマートフォン版では商品リスト部分を指によるフリック操作でも切り替えることができます。これは意図的にJavaScriptで実装しなければ、そのような操作はできません。

またアクセスしたブラウザー(デバイス)をJavaScriptで判別し、そのデバイスに対応していないコンテンツ案内であれば、その旨を説明したページになります。例えば、iPadでiTunesのダウンロードページにアクセスしようとすれば、「すでにiTunesはアプリとしてインストールされています。デスクトップ用に必要であれば、デスクトップでアクセスしてください。」というような内容です。

なお、デメリットに上げた通り、画像ファイルをはじめとするリソースファイルは最適化されていないため、モバイルにおける表示速度の問題は解決できません。

メディアクエリーによる対応

メリット CSSを工夫することで、小さな画面サイズにもフィットしたレイアウトに、文字サイズも読みやすいサイズへと調整できる。
デメリット HTMLはデスクトップと変わらないため、リソースファイルは重く、表示速度の最適化は厳しい。

例に上げたサイトは、アドビの特設サイトとして、メディアクエリーを用いて制作されたサイトです。制作についての話、テクニックの詳細は比留間氏のインタビュー記事を参照してください。

メディアクエリーを使うことのメリットは、デバイスのスクリーンサイズに合わせたレイアウトの調整と、HTMLは1つでCSSを振り分けるという「ワンソースマルチユース」な対応ができることです。これを実現するためには、設計の段階で綿密に考える必要もありますし、デザインする上でもレイアウトが3カラム/2カラム/1カラムになっても対応できるものを用意しなければいけません。また、HTMLを再利用するということで、画像ファイルなどもデスクトップで利用されているものを使う場合、そのファイルはモバイル環境にとっては重すぎるファイルです。あまり写真などの画像を使い過ぎず、テキスト中心のサイトであれば、メディアクエリーの対応でも十分効果はあるといえるでしょう。

アプリケーションの作成

メリット ネイティブアプリであれば、ブラウザーを介するよりも軽快に操作できる。UI面でも対象のOSに特化した最適化したものを作り込める。
デメリット 既存のWeb向け言語ではない言語(Objective-C)を習得する必要があるため、学習面でのコストがかかる。

ここまでのサイトとしての最適化という話からは少し飛躍するのですが、サイトのコンテンツによっては半ば無理やりスマートフォンブラウザーに対応させるよりも、ネイティブアプリ化してしまう方がよりスマートフォンへの最適化としては有効であることもあります。ここで取り上げたクックパッドのように、レシピ検索など頻繁に「使う」ことに重きが置かれる場合であれば、より軽快に操作できるネイティブアプリの方が使い勝手が良いでしょう。しかし、専用言語で作る必要があること、またサイトとは異なり、公開までのフローに手間がかかることなどのデメリットもあります。

ただし、デメリットとして上げている言語については、今では「Titanium Mobile」や「PhoneGap」といったモバイルアプリ用のフレームワークを利用することで、HTML+CSS+JavaScriptといった技術で開発し、配布することができるようになっています。また、Adobe AIRがiOSやAndroidをサポートしたことで、Flash技術を使ってクロスプラットフォームなアプリを容易に作成することができるようにもなっています。

専用サイトの作成

メリット 総合的にスマートフォン向けに設計・デザインされるため、作り込むほどにより使いやすいものにできる。
デメリット 作り込むには時間はかかる。ネイティブアプリほど複雑なことができない(ブラウザーでできる範囲のことしかできない)。

スマートフォン対応として分かりやすく、もっとも最適化しているといえるのが「スマートフォン専用サイト」です。コンテンツ、デザイン、UI、パフォーマンスなどあらゆる点で最適化することでスマートフォンでも使い勝手の良いサイトになります。もちろん例に上げたYahoo! JAPAN相当のものを作り込むには、簡易的な対応と比べると色々なコストがかかります。これもまたコンテンツによって、それなりのコストをかけて専用サイトを作るまで最適化すべきかというのを検討する必要はあるでしょう。

また、専用サイトを作る上での1つの注意点があります。専用サイトを作るということは、デスクトップで見ている時とは違うデザイン、設計となるはずです。ここで考えるべきことは、それがユーザが望んでいる形であるか、ユーザが求めている情報を見つけやすい設計であるかどうかです。また別のケースを上げると、WordPressやMovableTypeのようなCMSの場合、プラグインを使ってスマートフォン向けテーマに切り替えることができます。これらのプラグインは、容易にスマートフォン向けページを用意できるという点はメリットとして大きいのですが、デザインが大きく異なってしまうものが多いです。つまり、デスクトップで見たときにはコンテンツに華を添える素晴らしいデザイン、もしくはデザインそのものにコンテンツとしての価値があったとしても、モバイルではその価値が無くなってしまうということです。体験を損なうという点でこうした対応が必ずしもベストとはいえないことは覚えておきましょう。こうしたケースにおいて、よりベターな対応なのは、ユーザーに対して「モバイル版」「デスクトップ版」それぞれ好みのテーマを選べるようにするという方法です。つまり、ユーザに選択肢を与える、ということです。

「スマートフォンに対応したサイトを作る」というだけで考えることはたくさんあります。こうした設計思想を持ちつつ、最後に上げた「専用サイトを作る」ことを目標に、次回は手を動かして実際にスマートフォン向けのサイトを制作してみましょう。

関連情報