Interview : 面白法人カヤック 意匠部

「Adobe HTML5 特設サイト」のスマートフォン専用サイトが公開された。 既に、互換サイトとしてデバイス表示に対応していたサイトを、改めてスマートフォン専用に作り替えたポイントはどこにあったのか。
実際に制作を担当したカヤック意匠部のお2人にお話を伺った。

操作性と情報内容を最適化

–以前から公開されていたPC互換サイトも十分見やすかったと思いますが、新しく公開されたスマートフォン専用サイトでは、どこが変わったのでしょうか?

互換サイト(左)と、専用サイト(右)

互換サイト(左)と、専用サイト(右)

小倉

「スマートフォンは、直接指で触って直感的に操作できる所が一番の特徴です。専用サイトではそれが生かせるようネイティブアプリっぽい UI になっています。例えば、ページ遷移の際に滑らかなトランジションを提供して、普段のアプリと同じ感覚でページをめくれるようにとか。あとは、ヘッダーの左側に “戻る” ボタンを配置しました。これもスマートフォンユーザーには意識付けされている動作です。同じ ”前の画面に戻る” のにも、互換サイトの場合は、画面の外のハードウェアキーを操作しますが、これは PC でブラウザーを使うのに近い操作感ですよね。専用サイトはできるだけ、直接コンテンツを触って操作することに最適化されているのがよいと思っています」(小倉)

「ナビゲーションを一カ所に集めて見せられるのも専用サイトの特徴だと思います。ページを開くと最初にナビゲーションが表示されるのは、スマートフォンアプリでは一般的です」(渕上)

「サイトが表示されたら直ぐにナビゲーションから見たいところに遷移できのがよいですよね。ページスクロールによる移動も、1 カラムのデザインであれば、それほどストレスにはならないかと個人的には思っていますが」(小倉)

–ページ内の要素の配置も変わっているようですが?

渕上

「操作性の最適化と平行して、画面サイズを考慮した情報の最適化も行っています。例えば、ページ内の情報を絞るため一部のコンテンツはページを分けました。それと PC でないと意味の無い情報、製品体験版ダウンロードのリンクなどを取りました。」(渕上)

「互換サイトでは、画像を PC 環境と共有します。スマートフォンでの読み込み時には画像が少ない方が良いのですが、PC と同じ画像を使うことで、操作時のストレスになることがあります。また、人物の写真なのできれいに見せたい!と思ったとき、専用サイトであれば、デスクトップ環境用とは別に、小さな画面のスマートフォンに最適化した画像を用意できます。もちろん、通常の PC サイトをそのままスマートフォンに表示した場合と比較すれば、互換サイトでも、十分見やすいんですけど」(小倉)

jQuery Mobileを使うメリット

–専用サイトの制作には jQuery Mobile が使われています。実際に使ってみた印象はどうだったでしょうか?

「まず、jQuery Mobile は、スマートフォンサイトを作るためのフレームワークです。スマートフォンで使われる標準的な UI 部品は一通り揃っていて、今回は、リスト、ボタン、それからヘッダーなどの部品を使いました。ヘッダー内の ”戻る” ボタンなど、必要な機能はほぼ提供されています。使い方も簡単で、JavaScript が書けなくても使えます。HTML にタグと属性を足していくだけでスマートフォンの UI が生成されるんです。見た目のカスタマイズは CSS を使うので、通常の HTML サイトと同様に CSS3 のグラデーションを使って色を変えたり、角を丸くしたり、影の強さを変えたりしています。なにより、iPhone や Android といったデバイス間の差異を吸収してくれます。フレームワークを使わずに 1 から作ると、サポートするデバイスの数が増えるほど対応にも手間がかかると思いますが、今回は jQuery Mobile がマルチデバイス対応しているので、基本的に動作確認は 1 機種で済ませました。JQuery Mobile のおかげで、スマートフォンサイト制作の敷居が下がったと思います」(渕上)

–Dreamweaver CS5.5 は jQuery Mobile を使った開発に対応しました。これにより制作作業は改善されましたか?

「はい。特に個人的にいいなと思っている機能は、挿入パネルです。JQuery Mobile を使うのに必要な要素がすべて集約されているんです。 Dreamweaver を使わない場合、JQuery Mobile の要素を足すときは、通常リファレンスで機能を調べて、それからコードを編集して、実機で動作確認して、を繰り返すことになります。ところが、Dreamweaver の挿入パネルを使うと、例えばリストを挿入するときであれば、番号付きのリストにするかとか、項目の数、付加情報の有無などのオプションも GUI から設定できるので、コードを書くことすら不要です。挿入したら、ライブビューで表示するだけで、デバイス上と同じ状態で表示や操作の確認ができますから、ツール内で作業が完結します。調査、検証といった手間のかかる作業が省略できる分、ワークフローが効率的になります」(渕上)

Dreamweaver CS5.5 の挿入パネル。jQuery Mobile の要素をドラッグ & ドロップで追加できる

Dreamweaver CS5.5 の挿入パネル。jQuery Mobile の要素をドラッグ & ドロップで追加できる

「ある程度の規模のサイトになると、遷移も複雑になるので、まず紙でプロトを作ってみんなで共有してアイデアを揉みます。そのような場合も、実際に動くプロトを作って確認しないと分からないことは多いですし、Dreamweaver が jQuery Mobile に対応したのは大きいですね。これなら、デザイナーでも、こういう感じっていうモックをすぐに作れそうです。また、Dreamweaver は CSSの記述にも便利ですよ。修正と確認がシームレスに行える環境が提供されているので、ブラウザとエディタを行ったり来たりする手間が省けます」(小倉)

互換 or 専用、選択時に必要となる視点

–互換サイトと専用サイトをどう使い分ければよいでしょうか?

「既存の PC だけ想定して作られたサイトを、後付けでスマートフォン互換にするのは容易ではありません。特にページ内に情報が沢山ある場合は、サイトの構造まで見直さないと見やすいページにすることは難しいでしょう。また、互換サイトはPCサイトも兼ねるので、見た目は最適化されていても、使い勝手まで最適化するには制限が出てきます。例えば、リンクエリアが小さすぎてタップしにくい箇所が残ったり。ユーザーの使い勝手を重視するなら専用サイトの方が上でしょう。それなりにコストはかかりますが、jQuery Mobile なども出てきて制作が楽になってきましたし」(渕上)

「あとは、サイトを利用する “シナリオ” やがスマートフォンに固有の場合ですね。使われ方が PC サイトと全く異なると、同じサイトを見やすく、ではなく、要件に合わせた専用のサイトを提供するほうが理にかなっていますよね」(小倉)

「一方、互換サイトは複数の環境に対して 1 つのソースなので、メンテナンスが容易です。スマートフォン用に新規におこすでデザインの数が少ない事も考えると、コストは専用サイトよりも押さえられると思います」(渕上)

「最近、サイトへの流入が Twitter などのソーシャルメディアから、という割合が多くなっています。その際どうしてもPCサイトに行ってしまうことがあって、互換化されていないとスマートフォンからは楽しんでもらえません。せっかく訪問してもらったのにもったいないですよね。専用サイトは PC サイトと URL が別になるので、やはり PC サイトの互換化は検討するのが望ましいと思います」(小倉)

Dreamweaver CS5.5 の CSS インスペクトモード。領域に適用されているスタイルを確認し、スタイルの定義されたファイルへ移動できる

Dreamweaver CS5.5 の CSS インスペクトモード。領域に適用されているスタイルを確認し、スタイルの定義されたファイルへ移動できる

「今後、新規にサイトを設計するときは、すぐに互換化をしなくても、最初からモバイル対応を考えておくとよいのではないでしょうか。最初から考えていれば、互換化も容易になります。そうすれば必要な箇所だけ専用サイトを提供するという使い分けも可能です」(渕上)

使用したアドビ製品

事例データ

事例カテゴリ インタビュー
プラットフォーム スマートフォン
使用したWeb技術 HTML5, jQuery, jQuery Mobile

取材協力

会社名 面白法人 KAYAC (http://www.kayac.com/)
会社概要 鎌倉に本社を置きオリジナルWebサービス事業、Web制作事業を主要事業とする。近年はソーシャルゲーム、スマートフォンの企画開発も手がける他、飲食事業も展開。自社で運営するWebサービスにフロントエンドエンジニアのコード共有コミュニティ「jsdo.it」、「こえ部」、「ART-Meter」、ソーシャルゲームに「英雄になりたい!」、iPhoneアプリ「Reengo」など。東京インタラクティブ・アド・アワード、Yahoo! JAPAN インターネットクリエイティブアワードなど国内外の広告賞を多数受賞。ユニークな人事制度(サイコロ給、スマイル給)やワークスタイル(旅する支社)なども実施する。
スタッフ
  • 小倉 亜由美 面白法人 KAYAC
    意匠部
    小倉 亜由美
  • 渕上 伸吾 面白法人 KAYAC
    意匠部
    渕上 伸吾
page top