Adobe Developer Connection（AD）

スマートフォン向けに、より良いWebサイトを作るコツ　～ Dreamweaver編

原題：スマートフォン時代のWebサイト制作第1回　スマートフォン対応の重要性とその方法

2012/05/02 14:00

　ここ数年で種類が一気に増え、普及しているスマートフォン。この記事では「スマートフォン時代のWebサイト制作」をテーマに、Webオーサリングツール「Dreamweaver」を使ったスマートフォン対応サイト制作のテクニックを紹介します。なお、本稿はDreamweaver CS5.5向けに書かれておりますが、最新版のCS6でも問題無くお試しいただけます。

はじめに

　iPhoneに始まり、さらにここ数年で様々なAndroidケータイが登場し、日本でもスマートフォンが普及し始めています。それにともない、企業サイトやECサイトを、スマートフォンブラウザーで利用するユーザが着実に増えてきています。

　世界規模でいえば、2012年頃にはスマートフォンの販売台数がPCを超えるという予測もあります（ITU, Mark Lipacis, Morgan Stanley Research.2009 資料PDF）。これはビジネス的に考えて、「まだ様子を見て、対応しなくてもよい」とはいえない状況でしょう。

　そこで、本連載では「スマートフォン時代のWebサイト制作」をテーマに、スマートフォン対応に必要となる考え方、Dreamweaverを使ったスマートフォン対応のテクニックなどを解説していきます。第1回目となる今回は、スマートフォン対応サイトを制作する前段階について考えてみましょう。

必要な環境

　この記事の手順を試すために、以下の体験版をインストールしてください。

Dreamweaver CS6 体験版ダウンロード

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

　「ケータイ（ガラケー、フィーチャーフォンと呼ばれるもの）ブラウザーとは異なり、スマートフォンブラウザーではデスクトップ向けサイトでもほぼ問題なく閲覧できる」というのが一般的な認識でしょう。実際スマートフォンブラウザーでは、ほとんどのケータイブラウザーでは使えない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つのアプローチをご紹介します。

　この記事の続きは、Dreamweaverデベロッパーセンターにてご覧ください。

記事の続きはこちら！