デザインも動きも「気持ちいい」を目指して。ユーザーファーストで作った「My SoftBankアプリ」開発ストーリー

「2021年グッドデザイン賞」を受賞した、ソフトバンクのサービス利用者向け「My SoftBankアプリ」。利用しているサービスの使用状況や料金をまとめて閲覧できるアプリですが、よく見る一般的な会員ページとちょっと違うんです。カラフルでポップで、カードやボールの形をした図が浮かびあがるように表示される情報画面は、従来のイメージから脱却して、誰でも見やすく、分かりやすくするために考えられたデザイン。数え切れないほど検討を重ねたというデザインのこだわりについて、担当者に話を聞きました。

香取洋平さん

「My SoftBankアプリ」のリードデザインを担当。新卒入社で法人部門を経験後、クリエイティブ部門に所属。さまざまなサービスのUI・UX担当を経てMy SoftBank専任に。

木村峰人さん

「My SoftBankアプリ」の開発業務を担当。社内システムの開発業務を経て、2011年からPSソリューションズ株式会社へ出向し、さまざまなアプリ開発業務に携わる。出向終了後も引き続きMy SoftBankアプリの開発に従事。

ユーザーに寄り添った使い心地が評価。「My SoftBankアプリ」が「2021年度グッドデザイン賞」受賞

毎日開きたくなるようなキラキラしたアプリにしたい。約2000時間のデザイン会議を経て、行き着いたアプリの在り方

プロジェクトを主管する顧客基盤推進本部は、その名の通りユーザーに安心・安全な基盤を提供することがミッション。ソフトバンク公式のWebサイトやオンラインショップを運用しているチームが集まる中、スマホ向けの公式アプリを作ることになり、2016年にアプリ開発プロジェクトが発足しました。

当初から目指していたのは、「毎日開きたくなるようなキラキラしたアプリ」。日常使いのサービスについて情報を確認するアプリは、必要な時だけ開くもの。でも、毎日見たいと思ってもらい、開いたら離れなくなるような全く新しい世界観を作ろうと、大きなテーマを設定しました。

想像していなかったテーマを聞いたときは、どんなアプリになるんだろう？ と不安もありましたね。当時は携帯料金と使用データ量が見られる「My SoftBankプラス」というアプリはありましたが、それとは全く別のものを作るということでしたから。

2年間のプロジェクトの中で、デザイン会議に費やした時間は2000時間にも及んだそうです。中でも、プロジェクト開始からの半年間は、毎週4時間も本部長を交えたデザイン会議をするくらい、デザインへのこだわりが伺えます。また、活発な意見交換ができるよう、参加者も厳選されました。デザインイメージを作っては、議論して、また修正… という作業を何度も実施。その過程で、アプリ自体の方向性も見えてきました。香取さんは、アプリの在り方を方向づける、印象的な2つのキーワードがあったと言います。

多くのアプリでは、詳しい情報を見る段階になるとWebサイトに誘導する形態を取っています。こだわってアプリを作り上げても、設計思想の異なるWebサイトに遷移してしまっては、ユーザーは1から遷移先のサイトに向き合う必要があるため、それを避けたかったそうです。

Webサイトと連携する形はこれまで当たり前のことだと思っていたので、世界観の違うところに誘導しない、という上長の強い思いにハッとさせられ、自分の中でアプリ設計の概念が変わりました。

アプリ内で完結するということは、ソフトバンクのさまざまなサービスをまとめなければならないということで…。アプリの画面数は1,000を超えており、通常のスマホアプリと比べものにならないくらいでした。技術チームは、Webサイト側のチームと密に連携を取って、サービスの集約を実現しています。

デザインチームでも、PayPayやTポイントなど、サービスごとに世界観が異なるので、1つのアプリの中でどうやって統一感を持たせて表現するかが大きな課題でした。デザイン数も2～3,000あり、デザインチームもコンセプト設計、構成、画面デザイン、アニメーションなど、各パートに分かれてのプロジェクトになりました。

通常、料金プランやサービスには、条件や免責などの長い注記がつけられていますが、その常識も疑って取り掛かったとのこと。細かいところまで精査した結果、これまでの注記から9割も省くことができたといいます。

アプリ内に表示される文字全てに向き合い、注記1つ1つを精査しました。注記を注記として書かずに、適した場所に「ご案内」として自然に溶け込ませたことで、ここまで削減できたんです。すっきり見やすくなりますよね。

「空気感」「キャリア脱却」。全く新しい世界観を作り上げる

これまでのアプリの前例にとらわれずにアプリを作るという大方針のもと、デザイン作成でも大胆な試みが行われます。香取さんを始め、このプロジェクトにアサインされたのは、Web版のMy SoftBankを担当していなかったメンバーでした。

海外のアプリなどを見てインプレッションを受けつつも、基本的には、まっさらな思考で、1からデザインコンセプトを作っています。デザイン先行型で、アニメーションを取り入れたアプリ開発を実現することができました。

アプリを開いてすぐに目に入るのは、全てがふわふわと動くこと。My SoftBankアプリは「空気感」が重要なデザインコンセプトの1つで、キャリアの硬いイメージを脱却する狙いがありました。この空気感を演出するため、アプリ内には角（かど）で表現されたものがないのだそうです。

My SoftBankアプリは「カード型のデザイン」で各種情報を表示していますが、カードの角丸の具合だけでも何パターンも作ったんです。文字サイズも同じ。1ピクセルの違いでしっくりくる、こないの議論を進めていました。

見た目のデザインがガラッと変わるだけでなく、ふわっと動くアプリなんて、最初は戸惑いましたね。実現するには技術上難しいこともたくさんありました。代替案を出しながらも、どうやったら再現できるのか試行錯誤の日々でした。

カードの角丸の具合を検討したときのパターン

そうそう。例えば、各サービス料金を比較するのにボールを動くように見せているのですが、こちらから木村さんたちにお願いしておきながら… よく作ってもらえたなぁ、って思ってます（笑）

あれは完成するまで大変だった…。細かいニュアンスを理解するために、CG制作経験のある香取さんにアニメーションサンプルを作ってもらいながら、頭の中にイメージしているものをいかに受け止められるか。開発はコロナ禍に入る前だったので、よく対面で打ち合わせしていましたね。

各サービス料金を表すボールの動きを検証したときのパターン

初期デザインから大変化！ 理想のアプリを目指すためなら何度でも改良

左から右へアプリ画面のデザインの移り変わり

2年の開発期間で、たくさんのデザイン案を基に議論が重ねられてきました。そんなところまで！？というぐらい細部にこだわって改良された箇所もあるそうです。

ユーザーテストの結果も、アプリ改良のためには大切な情報。例えば、アプリ画面の一番下にあるグローバルナビゲーション（各ページ共通の案内メニュー）の色を白にしていたため、ユーザーに気づかれにくいことが判明。アプリの世界観からすると白の方が美しいのですが、使ってもらうことが優先なので、ネイビーに変更しました。

アプリ画面の一番下のグローバルナビゲーション（共通メニュー）のデザインの移り変わり

アプリを起動して、コンテンツを読み込む順番にも配慮しているんです。最初にグローバルナビゲーションをピョコっと表示させることで、格段に気づいてもらいやすくなりました。

これまでにないアプリを目指して作られた「My SoftBankアプリ」は、その独自の世界観や、多くのサービスと連携して1つにまとめあげた点が評価され、「2021年度グッドデザイン賞」を受賞しました。それでも現状に満足せず、チャレンジングな意気込みを語ってもらいました。

グッドデザイン賞の選考の2次会場には素晴らしいプロダクトがたくさんあって、エントリーしている人たちの強い思いが込められているのを感じ、圧倒されました。なので、受賞できたと知ったときは、喜びより安堵感が大きかったですね。このアプリは本部を越えて多くの方と連携して作り上げたので…。毎年新しいサービスも出ていますし、今のアプリで完成形ではないと思っているので、徐々に進化させていきたいです。木村さん、新しいデザイン案を待っていてくださいね！

香取さんから受賞の連絡をもらったときは、必死な毎日を思い出しました。とてもソフトバンクらしいなと思うんですが、経験のないことに挑戦するワクワク感もあり、無事乗り越えた今は、どんなデザイン案でも応えられる自信があります（笑）。まだまだ改良が続くとのことなので、これからも挑戦していきたいと思っています！

理想のアプリを目指してさらにパワーアップする「My SoftBankアプリ」、次はどんな体験ができるのか、楽しみですね。

（掲載日：2021年12月7日）文：ソフトバンクニュース編集部

料金やデータ通信料の確認、プランの変更やおトクな情報の受け取りまでソフトバンクのあらゆるサービスに対応したアプリケーション「My SoftBankアプリ」。LINEと連携するとさらに便利になりますよ！ 「LINEでかんたん確認」の詳細はこちら

sbn_tc_04

内容は掲載当時の情報です。記載されている会社名、サービス名、肩書などは現在と異なる場合があります。

Information is current as of the time of publication. Company names, service names, titles and other information are subject to change.