Flash導入で“ケータイ利用の座席指定”がここまで変わった――ANAのケータイFlash導入事例（2/2 ページ）

[PR／ITmedia]

PR

操作性、快適なレスポンス、グラフィックのこだわりをりーふねっとがサポート

全日空システム企画 国際旅客システム部 第四チーム シニアエキスパートの関隆次氏

ITmedia　全日空システム企画とりーふねっとは、こうしたANA側の要望やこだわりをFlashサイトに反映させていったわけですが、これはかなり困難な挑戦だったのではないかと思います。ANAのニーズを技術的にどのように解決していったのでしょうか。

全日空システム企画 関隆次氏（以下、敬称略）　ANA側からの要望が強かった座席指定の部分ですが、ここはファーストビューで座席を選択するところまで見られない点がずっと課題となっていました。これをモバイルで対応させるときに、当初はいきなりリッチコンテンツにいくのではなく、今のHTMLやc-HTMLを改善することで何かできないだろうかと考えていました。しかしこれには限界があることが分かり、その他の技術を検討する中で、候補としてアプリとFlashが挙がりました。

ITmedia　ANAではすでにANAマイレージクラブの会員証アプリを提供しています。このアプリの機能を拡張することは考えなかったのでしょうか。

関（全日空システム企画）　むろんアプリも検討しましたが、ダウンロードという一手間がかかるので、多くのお客様にご利用いただくにはアプリは難しいのではないかという結論になりました。（携帯電話に）デフォルトで搭載され、アクセスすればそのまま使える技術ということでFlashを採用しました。

ITmedia　Flash導入でハードルが高かったのはどんなところでしたか。

全日空システム企画 森川茂樹氏（以下、敬称略）　操作性とレスポンスですね。操作性については（キー操作が）十字キーの上下しか使えないというハードルがありました。Flashサイトは閲覧している際に十字キーの左を押してしまうと、（Flashを表示している画面から）1つ前の画面に移動してしまうのです。ここがジレンマで、ケータイならではの操作性をどうクリアするかが大きな課題でした。

　Flashのパフォーマンスについても、当時の我々はまったく分かりませんでした。こうした状況下でりーふねっとさんと出会ってさまざまな提案をいただき、それを見て「Flashで行ける」と確信できました。

りーふねっと 研究開発部 マネージャーの宝田祐平氏

ITmedia　りーふねっとは、技術面でFlash対応によるユーザビリティの向上に大きく貢献しています。今回の事例には、りーふねっとの持つどのような技術的優位性が生かされたのでしょうか。

りーふねっと 宝田祐平氏（以下、敬称略）　弊社が提供しているFlashの自動生成エンジンは、飛行機のレイアウトを元にテンプレートを作成し、ANAが導入している予約システムと合成して、APIに見せるといったことが可能になっています。このようなFlashの自動生成エンジンは他社からも出ていますが、弊社のエンジンは圧倒的にパフォーマンスが良いのが特徴です。

ITmedia　ANAのビジュアル面のこだわりと、応答性の高さというユーザビリティ面でのこだわりの2つを高いレベルで実現できるというわけですね。

宝田（りーふねっと）　そうです。弊社の場合、Webサーバに組み込む形になっているので、例えばJavaベースで作られているものなどに比べると、相対的に速度が出るところも利点です。

ITmedia　操作性の向上に向けたANA側のリクエストに、りーふねっとはどのように対応したのでしょう。

宝田（りーふねっと）　携帯電話のFlashサイトでは、十字キーの上下キーのみを使い、いかに“（十字キーの）左キー”を意識させずに直感的に使えるようにするかが大きな課題でした。

　例えば座席のエリアを選ぶ場合、次のエリアに移りたいと思った時に“戻る”の感覚で左十字キーを押してしまうことがあります。これを避けるために列の上下にエリア移動のボタンを付けたりするなど、いろいろとアイデアを出しましたね。

全日空システム企画 国内旅客システム部 旅客販売WebプロジェクトSEの森川茂樹氏

ITmedia　操作性をよくするための提案や改善のやりとりは、りーふねっとが提案してシステム企画側と議論を重ねて対応したのでしょうか。

森川（全日空システム企画）　基本的には弊社とりーふねっとさんとの間で話し合い、最初に3パターンほど作りました。それをANAに提案し、そこで出てきた意見を反映させてサンプルを作っていただきました。細かい改善などをふくめると、50種類から100種類くらいになりましたね。

　まずは、何を見せなければならないのか、お客様をどう誘導しなければいけないのかといったところだけを考えてアイテムを並べ、何をどこに配置するのかといったもので紙芝居のように3パターンを製作しました。それから実際に「これは左キーを意識させないよね」「お客様が見たときに面白いよね」といった部分を作り込んでいきました。結局、この3パターンのうちのどれかを選んだというよりは、融合させたものを選んだ形になりましたね。

大村（全日空）　（座席選択の最後の部分で）飛行機を回転させたのは、最後まで上下キーだけで操作してもらうためです。エリアの選択は上下キーで済みますが、座席を選ぶ際にはそのままでは横移動の操作が発生してしまいますからグルッと飛行機を回転させて、そのまま上下キーで操作できるように導いています。画像が突然切り替わると分かりにくいので、モーションを使って分かりやすく表現しました。

ITmedia　そこはANAらしいこだわりと遊び心を感じさせますね（笑）

大村（全日空）　私自身のさり気ないこだわりでもあるのですよ。せっかくFlashを使っているわけですから、どうしても動かしたくて（笑）。

エリア選択後に座席を指定しようとすると飛行機が回転し、座席を上下キーで選択できるようになる。これは携帯向けFlashサイトの操作で使えない左右キー操作をせずに座席を指定できるようにするための工夫だ

りーふねっと コンテンツ推進部 Webデザイナーの有田真依氏

ITmedia　Flash化にあたり、“グラフィックのこだわりを実現しつつ、容量を抑える”ために、どんな工夫をしたのでしょうか？

森川（全日空システム企画）　りーふねっとさんには「クオリティを落とさずにあと20％くらい削減できないか」といった無茶なことをお願いしていました（笑）。難しいオーダーであるにもかかわらず、お願いすると1日〜2日後くらいに改善されて戻ってくるのはありがたかったですね（笑）。

ITmedia　りーふねっとは、こうした要望にどのように応えたのでしょう。

りーふねっと 有田真依氏（以下、敬称略）　大半は地道な努力ですね。グラフィックの部分では、例えば（搭乗者を示す）黄色い人型のアイコン1つとっても、頭と胴体を別々に（オブジェクトとして）持った方が軽いのか、つながっているグラフィックの方が軽いのか――といったところまで細かく検証しました。

ITmedia　まさしくトライ＆エラーの繰り返しだったと。

有田（りーふねっと）　そうですね。国際線のグラフィックも、ファーストクラスの椅子が卵形で向かい合っていたので、画面に映っていない脚の部分を削ってみたり、椅子を共通で使ったりと、細かい部分を見直しながら少しずつ容量を削っていきました。

国際線のグラフィック。グラフィックの容量制限がある中で、ファーストクラス、ビジネスクラス、エコノミークラスそれぞれの椅子の形を忠実に再現している

さらに使いやすい、“ケータイならでは”のユーザーインタフェースを目指す

りーふねっと代表取締役社長の岡丈詞氏

ITmedia　今回のANA SKY MOBILEの座席予約システムは、その技術的な先進性や使いやすさで、世界中のどの航空会社よりも“先を行って”います。今後の進化の方向性についてお聞かせください。

大村（全日空）　ANAとしては、モバイルサイトの位置づけをさらに高めていきたいですね。これからはケータイでも一貫したサービスをANAとして提供したいと思っています。分かりやすくて、使いやすい。そして、予約の段階から旅行の楽しさを感じられるようなサイト作りをこれからも目指していきます。

ITmedia　ANAのニーズを高いレベルで実現したりーふねっとは、今後のさらなる機能拡張や進化について、どのようにお考えですか。

りーふねっと 岡丈詞氏（以下、敬称略）　PCに比べて小さい携帯の画面の中で、いかに多くの情報を分かりやすく伝えるか――。りーふねっとのFlash生成技術は、こんなコンセプトで開発をスタートしています。当初からパフォーマンスのよさが大前提であり、その点ではご満足いただけるレベルにあると考えています。

　今後は当社のFlashソリューションの「ダイナミックUI」をさらに強化します。PCよりも分かりやすく使いやすい“ケータイならでは”の画面イメージやユーザーインタフェースを目指して、Flashのさらなる進化はもちろん、Flash以外の技術も融合した形でりーふねっとの技術的優位性を積みあげていきたいですね。

ITmedia　モバイル向けWebサービスは今後、さらに増えてくると思いますが、その中でもUIは最重要なポイントになります。ここにりーふねっとは貢献していく、と。

岡（りーふねっと）　モバイルとPCは使うシチュエーションが異なるので、今後も共存していくと考えています。我々としては、モバイルで各種のWebサービスを利用する際に、直感的な操作を実現するユーザーインタフェース開発を目指していきます。

---

ANAの要望とりーふねっとの対応

ANAの要望	りーふねっとの対応
年齢や性別を問わない使いやすさを実現するUI	豊富なFlash化実績に基づくコンサルティング
サクサク動く快適なレスポンス	Flash自動生成エンジン「Mobile Kompressor」
見栄えのいいグラフィック	低容量・高品質なグラフィックを実現するデザインチーム