動き出したマルチデバイス時代。アドビではこのサイトを通じて、サイト運営者や制作者の方々に、マルチデバイス対応へ取り組む上で役立つ情報をお届けします。マルチデバイス対応事例、そしてスマートフォン＆タブレット対応サイトの制作を支援するDreamweaver CS6 の機能を積極的に紹介していきます。

*なお、本サイト自体がマルチデバイス対応の事例でもあります。スクリーンサイズに応じて、閲覧しやすいようにレイアウトが可変します。詳しくは「互換化とは」をご覧ください。

レスポンシブなデザインと互換化について

Web サイトのマルチデバイス対応には、1 つの HTML をマルチデバイスに対応させる "互換化" と、PC 用とは別途デバイス専用の HTML を制作する "最適化" の 2 つの考え方があります。本サイトは、"レスポンシブなデザイン" を実装した、互換化によるマルチデバイス対応のサンプルになっています。

レスポンシブなデザインは、1 つの HTML ファイルを、スマートフォンからデスクトップまで、さまざまな種類の画面に積極的に適応させる新しいデザインです。表示される画面に応じて、カラムの幅や数、そしてコンテンツのレイアウトも動的に変化します。レスポンシブなデザインは、"リキッドレイアウト" と HTML5/CSS3 の新機能である "メディアクエリ" を組み合わせることで、このような可変レイアウトを実現します。

メディアクエリ

レスポンシブなデザインでも使われるメディアクエリーは HTML5/CSS3 から導入された新しい機能です。メディアクエリは、従来、印刷用の表示に切り替える場合などに使われていたメディアタイプの構文を拡張したもので、例えば、表示幅を条件として CSS ファイルを切り替えることが可能です。

iPhone の 320 ピクセル幅の画面と、デスクトップ上の 1024 ピクセルを超える幅の画面に対して全く同じレイアウトが使われたら、どちらかが使いにくくなりそうなことは容易に想像がつくと思います。そのような場合、メディアクエリを使えば、ページ内のカラム数やコンテンツの配置等のレイアウトルールを、表示するメディアに応じて選択できます。特にデバイス環境は HTML5 対応が進んでいるため、この手法が使い易いと考えられます。

Dreamweaver CS5.5 と HTML5

2010 年 5 月、アドビの最高技術責任者ケビン・リンチは最高の HTML5 開発環境を提供する意向を表明、その第 1 弾として HTML5 Pack for Dreamweaver CS5 を紹介しました。その機能の 1 つであるマルチスクリーンプレビューは、メディアクエリーに対応し、同時に 3 種類の画面サイズを、それぞれ異なるスタイルが適用された状態で確認できます。同年 9 月に公開された Dreamweaver CS5 アップデートでは、HTML5 Pack を Dreamweaver CS5 に統合、正式に HTML5 / CSS3 を利用した Web 制作ワークフローがサポートされました。そして 2011 年 4 月に発表された CS5.5 では、更に HTML5/CSS3 関連の機能が強化されています。

当サイトは、Dreamweaver CS5 を活用して作成されました。ページの表示幅に応じてレイアウトが変わる HTML5 / CSS3 のサンプルとしての利用が可能で、サイトのソースが提供されています。Dreamweaver CS5 の新しい機能と共に、HTML5 / CSS3 の学習にご活用ください。

スマートフォンサイトの構築に積極的に取り組み、DynamicViewer など既にいくつかの事例も手がけた大日本印刷株式会社 C&I 事業部とデジタルコムに、最近の、サイトのスマートフォン対応に関する顧客の状況についてお話を伺った。“今年になってから、サイトのデバイス対応についての問い合わせが多くなった印象” とのことで、制作業務にも大きな影響が出ているそうだ。

クライアントも目を向け始めたデバイス対応

－－ スマートフォンサイトに取り組みを始めたのはいつ頃からでしょうか？

「1 年半くらい前です。iPhone 3GS が出たころまずはチーム内で調査が始まりました。 HTML5 を始めたのは去年の春からです。まだデスクトップ環境ではブラウザを指定できないと使い物にならなかったのですが、iPhone 限定であれば使えるよね、ということで。そこに Android も出て来たので、スマートフォン全体がターゲットになりました」（生田）

「DNP の新しいビジネス構築を考えたときに、HTML5 のサイト制作は相性がよいと考えました。それは、既存システムとの親和性が高いこと、開発者の確保がネイティブアプリよりも容易なこと、が主な理由です。iOS アプリは審査が必要なので、リリースのコントロールに不安があったという面もあります」（森嶋）

－－ 会社全体としての取り組みも行われているのでしょうか？

「昨年 12 月に HTML5 の勉強会をしました。社内の各組織が提案案件ごと独自に取り組んでいた、という状況だったのですが、関係者が集まって改めて情報や状況の共有を行いました。それから横のつながりもできて、いろいろと話ができるようになっています」（森川）

「そのときの様子はサイトにも公開されていますよ」（生田）

－－ クライアントから、どのような要望が来ているか教えて頂けますか？

「以前は “単発で何か面白いアプリをスマートフォン向けに作りたい” というケースが殆どだったのですが、やっと最近になって Web サイトの話が増えました。要望としては、大きく 3 種類あって、携帯からスマホに切り替えた人にも同じコンテンツを伝えたい場合、今後のデバイスの戦略的な使い方を模索する中で最適化を進めたい場合、それから漠然とビジネスのネタ探しをしている場合、です」（武藤）

－－ なぜ最近になってデバイス対応の話が増えたのでしょう？

「去年の後半から、携帯キャリアからの広告としての露出が多くなったのが大きいと思います。それから計画を立て予算を取って、今年になって始められる状況が整ったということではないでしょうか」（武藤）

「競合他社が対応を始めたので、という話もありますし、地震などを契機にソーシャル機能の重要性が改めて見直されたというのもあると思います。Twitter とスマートフォンは相性がよいですから」（森嶋）

サイトか、ネイティブアプリか

－－ デバイス対応の際、Web サイトではなく、ネイティブアプリとして提供することもありますか？

「情報の質、利用するシチュエーションといった特性を検証して決定します。ユーザーが毎日使うものであればアプリ向き、いつでも読みたいものもですね。逆に、たまにしか見ないものや、その場で急に必要になったものは Web で探したいでしょう？」（武藤）

「状況に応じて使えるようネイティブアプリと Web を両方提供できれば理想的です。ただ、提供するだけでなく見つけてもらわないといけないので、ネイティブアプリはアプリストアから探せるように、サイトは検索エンジンから探せるように、それぞれの SEO が必要です。特にアプリはダウンロードして貰うための施策も必要になります」（森嶋）

－－ 開発効率やメンテの観点から比較すると？

「ネイティブアプリは特定の OS 上でしか使えないので、同じソースコードが複数の環境で閲覧される Webがよいです。ただ、ネイティブアプリでないと利用できない機能があるので、Web だけというわけにはいかないですね」（宮崎）

「既存のサイトのデバイスに対応させる場合、HTML サイトとして提供する場合は、必要な箇所だけ部分的に、少しずつ対応を進められます。一方、ネイティブアプリとして提供する場合は、HTML とは異なる技術を使うため、必要な機能はまとめて一度で置き換えなければなりません」（森嶋）

デバイス向けサイトを視野に入れた制作手法

－－ デバイスを意識することで、従来のサイト制作手法への影響はありますか？

「導線、操作感はどうなっているべきか、という点を制作とデザイナーが一緒になって詰めます。まず使い易さを最優先で設計、そこからプラットフォーム間の機能差に応じて仕様をそぎ落とします。 この手順で、全てのプラットフォームで動く仕様へ落とし込みます」（武藤）

「PC だけでなく iPad で見ることも考えて、Flash で作っていた簡単なアニメーションは JavaScriptで作るようになりました。iPad 向けの最適化としては、タッチし易いレイアウトや大きさを考えたり、アニメーションはスクリプトではなくて CSS3 を使ったりとか」（吉川）

－－ 作業量も増えたのでしょうか？

「あるプロジェクトでは、Android 用に大中小の 3 サイズと、iPhone、iPad、PC 用の 6 種類のテンプレートを作成しました。これは、プラットフォームによって表示されるコンテンツが変わる可能性があったからです。ソースを共有することで邪魔な依存関係ができるリスクを避けるために個別に作成しました。最初に 3 つのサイズのインターフェースを考え、それをコピーして 6 つにしたので、制作はある程度楽にできましたが、その後の更新作業は 6 つ別々に行っています」（吉川）

－－ そうすると、全般的に手間が増えてきているのでは？

「大変になりました。デバイス版は PC 版とは別に作るのですが、プラットフォーム間の差が大きいので、どうしても手間がかかってしまいます。特に Android 端末は画面サイズとバージョンがばらばらで、最適化がとても難しいです。最近は Sencha を使ったりしています。このフレームワークはプラットフォームの差を吸収してくれてます。ただ、JavaScript でアプリを組むことになってしまうのですが」（吉川）

－－ 開発の難易度が上がったということになるのでしょうか。

「はい。昔のタグを組むだけで良かった HTML とはずいぶん違います。Dreamwever CS5.5 ではjQuery Mobile が使えるようになったという話なので期待したいですね」（吉川）

デバイス向けサイトを制作する上での注意点

－－ デバイス向けのサイトをデザインする際には、どんなことに注意していますか？「 まだ、提供する側にとっても使う側にとっても新しいので、いろんな人が対応できるよう考えています。

例えば、フリックが使える人と使えない人、それぞれのためにフリックとボタンによる操作の両方を提供したり。画面サイズを考えると詰め込みたくは無いので、できるだけ簡素化するようには考えています」（宮崎）

「ユーザーの評価がストアに載ると、判断基準ができてきて、作る側の答えも変わります。デバイス向けのサイトはアプリ的な使い方をすることがあって、標準的な HTML サイトの使い方からははみ出ます。ところが新しい使い方についてはベストプラクティスが無いので、出してみて、評価を見て、作り直す、というフローは当面必要ではないでしょうか。 自分も、普段から使っていないと分からないと感じています」（武藤）

－－ 最後に、これからサイトのデバイス対応を始める場合、どのような点に気をつけるとよいでしょうか？

「とりあえず安くやっておこうでは、見てもらえるかは疑問です。見てもらえなければ、そもそもお金をかけることが無駄になります。画面が小さいから簡単に見えるかもしれませんが、 最低限、理にかなっているかどうかは確認するのが大切です」（宮崎）

「どこにお金がかかるか見えにくいという問題もあります。各プラットフォームの細かい仕様を知らないと、何が簡単で何に造り込みが必要かも分かりません。 最初から予算ありきではなく、やりたいことを明確にしてから、最終形までのステップを具体化し、1 ステップずつ予算化するのがよいと思います。実際に、予算化する前の企画段階から知識のある人を入れて調査するケースは多いです」（生田）