to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

ソフトバンクモバイル株式会社

「Yahoo!プレミアムでは、スマートフォン向けサイトでの画面表示の機種・OS依存を解消するために、x-fitを活用しています」
ソフトバンクモバイル株式会社 プロダクト・マーケティング本部 コンテンツ推進室 担当課長 甲立隆雄 氏(右) 同 コンテンツ推進室 コンテンツ推進企画課 福井友紀 氏(左)

ソフトバンクモバイル 甲立隆雄氏 福井友紀氏、リアライズ・モバイル・コミュニケーションズ 勝本淳之氏に、《Yahoo!プレミアム》のスマートフォン向けサイトで、『x-fit』を採用した経緯と評価について詳しく聞きました。

ソフトバンクモバイル株式会社

ソフトバンクモバイル株式会社について
日本を代表する携帯電話会社の一つ。2008年にiPhoneを国内で初めて取り扱うなど、日本でのスマートフォン販売の草分け。年商2兆1449億円(※ソフトバンクの移動体通信事業の売上額)社員数約6800名

ヤフー株式会社

ヤフー株式会社について
日本を代表するインターネットポータルサイト、『Yahoo! JAPAN』を運営。現在、「爆速」「スマデバファースト」をキーワードに経営。年商3020億円(2011年度)社員数3859名

x-fitをユーザーインターフェース開発ツールとして活用

「Yahoo!プレミアム」スマートフォン向けサイトのイメージ(画像は2013年3月時点のイメージです)
「Yahoo!プレミアム」スマートフォン向けサイトのイメージ (画像は2013年3月時点のイメージです)

── 《Yahoo!プレミアム》では、『x-fit』をどう活用していますか。

x-fitは、2012年10月に新設した「Yahoo!プレミアム スマートフォン向けサイト」のユーザーインターフェース開発ツールとして活用しました。

Yahoo!プレミアムについて

── 《Yahoo!プレミアム》について教えてください。

Yahoo!プレミアム
《Yahoo!プレミアム》は、Yahoo! JAPANが提供する有料サービスです。
月額399円で、「ヤフオク!」への出品や、ゲーム・動画・コミック・占いなどの楽しい特典やお得なクーポンなどをお楽しみいただけます。
「Yahoo!プレミアム」のホームページはこちらをどうぞ。

この《Yahoo!プレミアム》は、2012年10月から、サービス内容がスマートフォン向けに拡充されました。これはYahoo! JAPANとソフトバンクモバイルとの協業によるものです。

Yahoo!プレミアムのスマートフォン向け拡充について

── 「Yahoo! JAPANとソフトバンクモバイルの協業」と「Yahoo!プレミアムのスマートフォン向けサービスの拡充」について詳しく教えてください。

Yahoo! JAPANとソフトバンクモバイルは、「インターネットでNo.1」と「スマートフォンでNo.1」という互いの強みを相乗させるために、協業を開始しました。(※プレスリリース)その取り組みの一つが「Yahoo!プレミアムのスマートフォン向けサービスの拡充」です。

具体的な取り組み内容は、「1,000種類以上のスマートフォン向けコンテンツの拡充」、「Yahoo! JAPAN IDとソフトバンク携帯電話番号の連携」、「ソフトバンクショップでのYahoo!プレミアム会員登録の受付」、そして「Yahoo!プレミアムのスマートフォン向けサイトのリニューアル」です。

おかげさまで会員数は順調に増えており、2012年第3四半期の新規会員数の増加は、前年同期の数倍となりました。

インターフェースデザインの設計で特に気をつけたこと

── 「Yahoo!プレミアム スマートフォン向けサイト」のリニューアルにあたり、インターフェースデザインで特に気をつけたことを教えてください。

インターフェースデザインで気をつけたことは次のとおりです。

  1. あらゆる年齢層のどんなお客様でも、快適に使えること
  2. スマートフォンならではの楽しい操作感を取り入れること
  3. どんな「OS」、どんな「スマートフォン」でも正しく表示されること

「どんなお客様にも、あまねく快適に」

── 気をつけた点 1.「あらゆる年齢層のどんなお客様でも、快適に使えること」とは具体的には。

《Yahoo!プレミアム》は、そのサービスの性質上、お客様の年齢、性別、居住地などの属性に特に偏りはありません。

そうしたお客様に提供するサイトのインターフェースは、老若男女どんなタイプのお客様でも、快適かつ直感的に使えるデザインにする必要があります。

「スマートフォンならではの操作感を」

スマートフォンならではの、直感的な操作ができるインターフェースを採用(画像は2013年3月時点における「Yahoo!プレミアム」のスマートフォン向けサイトの一部です)
スマートフォンならではの、直感的な操作ができるインターフェースを採用(画像は2013年3月時点における「Yahoo!プレミアム」のスマートフォン向けサイトの一部です

── 気をつけた点 2.「スマートフォンならではの楽しい操作感を取り入れること」とは。

スマートフォンは、指で画面を軽くたたく(タップ)、つまむ(ピンチイン)、指を滑らせる(スワイプ)、など体感的なインターフェースが使えることが魅力の一つです。

こうした直感的で楽しいインターフェースはぜひ今回のサイトに取り入れたいと考えました。

今回、採用したインターフェースの代表的な例として、指をスワイプさせて、画面全体を横滑りさせて表示する「カルーセル」というインターフェースを採用しています。

「どんなOS・スマートフォンでも正しく表示されるよう」

「プラットフォームの区別は、「キャリア別」から「OS別」に変化しました」 (ソフトバンクモバイル 甲立隆雄 氏)
「プラットフォームの区別は、「キャリア別」から「OS別」に変化しました」
ソフトバンクモバイル
甲立隆雄 氏

── 気をつけた点 3.「どんなOS、どんなスマートフォンでも正しく表示されること」とは。

スマートフォンではない、通常の携帯電話(フィーチャーフォン)の場合、「表示のキャリア依存」、「表示の機種依存」という問題が生じます。

「表示のキャリア依存」は、ソフトバンク、au、docomoなどキャリアごとに、特定のデザインや文字の「表示できる/できない」が分かれるという問題です。「表示の機種依存」とは、たとえ同じキャリアであっても、機種の新旧により、やはり「表示できる/できない」が分かれるという問題を指します。

スマートフォンにおいては、そのプラットフォームの区別は、「携帯キャリア別」から、iOSとAndroidという「OS別」に変化しました。

このことにより、スマートフォンでの表示には「もはや機種依存やOS依存はない」と考える向きがあります。

たとえばパソコン用ホームページであれば、「Windows OS」でも「Mac OS」でも、一つのソースコードでほぼ同じように表示できます。ここから類推して、スマートフォン用サイトでも、普通に作っておけば、どのOS、どの機種でも、同じように正しく表示されると考えるわけです。

しかし、実際にはそのようなことはなく、表示の機種依存、それも「大きな機種依存」は依然として存在します。

スマートフォンでも「大きな機種依存」は発生する

「機種依存に留意したサイト制作をしないと、後に改修する必要がでてきます」 ソフトバンクモバイル 福井友紀 氏
「機種依存に留意したサイト制作をしないと、後に改修する必要がでてきます」
ソフトバンクモバイル
福井友紀 氏

── 「大きな機種依存」とは具体的には。

たとえば今回、《Yahoo!プレミアム》に採用した「カルーセル」というインターフェースで画面全体を切り替える動作は、iOS(iPhone)では動きますが、Androidでは動きません。
「表示が乱れる」、「使いにくい」ということではなく、「動かない」わけですから、これに気づかずにサイトをリリースすると、大きなクレームにつながります。

今回のサイトでは、「カルーセル」の他に、Android端末へ向けては「タブ」インターフェースを併設することで、この問題に対処しました。

「わたしは以前、別のスマートフォン向けサイトの企画に関わったとき、機種依存に十分留意しないままサイトをリリースしたことがあります。
そのサイトは、発表当初はどのOS、機種でも正しく表示されました。しかし、その後、新OS、新機種が出てきたときに、表示が上手くいかなくなり、結局、費用と手間をかけて、改修せざるを得ませんでした」(福井 氏)

「カルーセル」は「動く/動かない」が顕著に分かれる例ですが、これ以外にも、四角いブロックを等間隔に並べ綺麗に揃えるための「ジャスティファイ」や、サイト全体のコンテンツの各要素を正しく整列させるための「レイアウター」などの機能でも、OSごと、機種ごとに微妙な差異が生じるので注意が必要です。

機種依存解消のための体制

── 今回の《Yahoo!プレミアム》では、「表示のOS・機種ごとの依存」に、どのような体制で対処したのですか。

今回のスマートフォン向けサイトの構築では、ソフトバンクモバイルとYahoo! JAPANは「企画とマーケティング」を担当しました。
一方、サイトの開発は、リアライズ・モバイル・コミュニケーションズ(以下 リアライズ・モバイル※)に委託しました。

「表示のOS・機種依存への対応」は、役割分担としては「開発側」で対処することになります。
企画側である私たちは、開発側のリアライズ・モバイルに、「機種やOSに依存しないようコーディングしてください」と要件を伝えました。

その要件を、具体的にどのように実現するかは、リアライズ・モバイルに一任しました。

※ソフトバンクグループのシステム開発会社

機種依存解消のための基本方針

「機種・OS依存へ対応するための「仕組み」として『x-fit』を導入しました」 リアライズ・モバイル 勝本淳之 氏
「機種・OS依存へ対応するための「仕組み」として『x-fit』を導入しました」
リアライズ・モバイル
勝本淳之 氏

── リアライズ・モバイル 勝本様に質問です。「表示のOS・機種への依存」という問題に、どのような方針で対応しましたか。

この要望には「仕組み」で「一括対応」するべきだと考えました。

Yahoo! JAPANも、ソフトバンクモバイルも、「スピード」を重視する会社です。今回のプロジェクトも、スケジュールは非常にタイトでした。

企画側の皆さんには、やらなければならないこと、考えなければならないこと、判断しなければならないことが山のようにあります。そのとき、機種依存のような細かい話で、いちいち煩わせてはいけません。

今回のサイト開発では、表示の機種・OS依存に対応するための仕組みとして、KSKの『x-fit』を活用することにしました。

x-fitを選んだ理由

── x-fitを選んだ理由を教えてください。

『x-fit』を選んだ理由は、リアライズ・モバイルが過去に手がけた、ソフトバンクグループの他のスマートフォンサイトの開発で、既に実績があったからです。(※ 詳細はこちら)

Yahoo! JAPANとソフトバンクモバイルには、「機種依存の件は、x-fitを使って吸収します」とひとこと報告しました。それ以後は、企画側の皆さんと機種依存の件については特に会話はしていません。甲立様や福井様など皆様も、機種依存のことは特に意識することはなかったと思います。

こうして、2012年8月半ばから、約45日かけてサイトの開発とテストを完了。予定通り、10月1日には、《Yahoo!プレミアム》スマートフォン向けサイトを公開することができました。

x-fitへの評価

── 10月のサービスイン以来、5カ月が経過しました。

これまで活用してのx-fitへの評価をお聞かせください。

開発のやりやすさ、表示の機種・OS依存への対応の的確さなど、基本動作は期待通りです。
動作の安定性については、不確定事項がありましたが、これも問題ありませんでした。

── 「動作の安定性の不確定事項」とは?

『x-fit』を使うのは今回で2度目です。前回のサイトでは安定稼働しました。しかし今回は《Yahoo!プレミアム》という日本屈指の大量アクセスが舞い込むサイトでの活用です。

その大量アクセスに、プロキシサーバとしての『x-fit』が耐えられるかどうかは未知数だったので、この点については、サービスイン前に負荷テストを繰り返しました。
最終的にはこちらのサイジングテストで計算したライセンス数で問題ないという結論に達し、その体制でサービスインしました。

この5カ月の間に、『x-fit』の動きに問題はありません。安定して動作しています。

スマートフォン向けサイトの構築に関わるマーケティング担当者へのアドバイス

── 現在、スマートフォン向けサイトの構築を担当している企業のマーケティング担当者に向けて、「ある種の先輩ユーザー」としてアドバイスなどあればお聞かせください。

スマートフォン向けサイトについては、まだまだ勉強しなければいけないこと、やらなければならないこと、改善したいことが、山のようにあります。私たち自身が道の途上ですから、アドバイスのようなことは特にできません。

しかし、一つ言えることは、やるべきことが山のようにあるからこそ、「表示の機種依存の解消のような課題」、すなわち「重要であり、必ず解決しなければいけないが、しかしマーケティング部が本来やるべき事ではないこと」については、何らかの形で、「仕組みによる解決」を検討するのが、おそらくは適切だろうと思います。

機種依存の問題に時間を取られていると、目の前に山のようにある仕事に対応できなくなるからです。

今後の期待

── KSKへの今後の期待をお聞かせください。

Yahoo! JAPANとソフトバンクモバイルはこれから《Yahoo!プレミアム》をより一層、楽しく、使いやすくしていくために、さまざまな改善を加えていく予定です。 KSKには、私たちの取り組みを、高い技術と優れた製品、サポートで継続支援していただくことを希望します。今後ともよろしくお願いします。

ソフトバンクモバイル様、リアライズ・モバイル様、本日はお忙しい中、貴重なお話をありがとうございました。>貴重なお話をありがとうございました。

[事例会社]

ソフトバンクモバイル株式会社

ソフトバンクモバイル株式会社
〒105-7317 東京都港区東新橋1-9-1 東京汐留ビルディング
WEBサイト:http://www.softbankmobile.co.jp/

[事例会社]

ヤフー株式会社

ヤフー株式会社
〒107-6211 東京都港区赤坂9-7-1 ミッドタウン・タワー
WEBサイト:http://www.yahoo.co.jp/

[取材協力]

リアライズ・モバイル・コミュニケーションズ株式会社

リアライズ・モバイル・コミュニケーションズ株式会社
〒106-0032 東京都港区六本木2-4-5 6F
WEBサイト:http://www.realize-mobile.co.jp/

[取材協力]

SCSK株式会社

[x-fit販売代理店]
SCSK株式会社
〒135-8110 東京都江東区豊洲3-2-20(豊洲フロント)
WEBサイト:http://www.scsk.jp/

  • 取材日時:2013年3月
  • 取材制作:カスタマワイズ
  • 記載内容、数字はすべて取材日時点のものです。
  • 掲載されている会社名・製品名・ロゴ等につきましては、各社または各団体の商標または登録商標です。
タグ: 
x-fit