エンジニアtype - エンジニアのシゴト人生を考えるWebマガジン

500万DL突破の『マンガボックス』がリリース前に経験したUIデザインの大失敗とは?~Yahoo!×DeNA合同勉強会

公開

 
Yahoo! JAPANとDeNAが共同開催したUI/UX勉強会で披露された、『マンガボックス』の新旧画面比較。イチから作り直した甲斐あって、UI面はユーザーから好評という

Yahoo! JAPANとDeNAが共同開催したUI/UX勉強会で披露された、『マンガボックス』の新旧画面比

Yahoo! JAPANとDeNAのiOSエンジニア、UI/UXデザイナーが、開発、デザインのノウハウをシェアする勉強会が7月16日、東京都港区のYahoo!イベントスペースで開かれた。

Yahoo!とDeNAそれぞれが社内向けに行っていた勉強会を初めて合同開催し、公開したもので、社内外から約150人が参加した。

最前線で活躍するエンジニアやデザイナーが、2社双方から5人ずつ交互に登壇。飲食しながらのビアバッシュ形式で非常にくだけた雰囲気ながら、発表内容は実践的なものばかりだった。

登壇者と発表内容は以下の通り。

Yahoo! JAPAN

■田中淳子氏(デザイナー)
タブレット版「Yahoo!ニュースアプリ」のこだわり

■瀧知惠美氏(UXデザイナー)
スマホサービスに最適なUXを考えるアプローチ方法

■小林大介氏(iOSエンジニア)
スマデバリッチ広告をプロトタイプで作り上げる

■堀哲也氏(デザイナー)
プロトタイピングと定性調査のすすめ

■天野裕介氏(iOSエンジニア)
デザイナーとエンジニアのコミュニケーション

DeNA

■坪田朋氏(UI/UXデザイナー)
マンガボックスのアプリができるまで

■吉田正史氏(iOSエンジニア)
現場でのデザイナーとエンジニアの連携の実際

■高橋伸弥氏(UI/UXデザイナー)
インタラクティブデザイナーがサービスデザイナーになって感じる阿鼻叫喚

■黒沼慎太郎氏(iOSエンジニア)
チラシの裏のエンジニアリング~おっさんだらけの主婦向けアプリ開発の舞台裏

■増田直生氏(UX/UIデザイナー)
Sketch3を使った、デザインからプロトタイピング

ここでは、アプリ累計500万DLを達成したDeNAのマンガプラットフォームサービス『マンガボックス』を題材にした坪田氏の発表内容を詳報しよう。

フラットデザイン、アプリ市場への知見の不足が命取りに

アプリのDL数が500万を突破したDeNAのマンガプラットフォームサービス『マンガボックス』

アプリのDL数が500万を突破したDeNAのマンガプラットフォームサービス『マンガボックス』

『マンガボックス』は2013年12月のリリース以降、着実に支持の幅を広げ、このほどアプリが累計500万DLを突破した。

その歩みは順調そのもののように映るが、アプリのリリースに至るまでには大きな挫折があったという。

「マネジメントに携わる者として、作り直したのは一生に残るくらいの反省点です」

DeNAでUI/UXデザインなどのクリエイティブ関連のマネジメントを行っている坪田氏がそう振り返る通り、『マンガボックス』の制作チームはアプリの正式リリース前に、約4カ月の期間を費やして一度は完成させたアプリを一から作り直すという大きな回り道をしていた。

最初の『マンガボックス』は、どこに問題があったのか。UIの改善点として、坪田氏は次の4点を挙げた。

【1】文字・ボタンでUIを表現しすぎた
【2】タップナビが直感的でない
【3】ページ単位でUIを考えすぎた
【4】機能を盛りすぎた

当時は、iOS7に採用されたフラットデザインベースのUIが注目され始めた時期で、坪田氏個人としても、会社全体としても、フラットデザインに対する理解がまだ十分でなかった。

また、アプリ市場を十分に理解しておらず、「(Webデザインで培ったページ単位の)今までの僕らのデザインで勝負してしまったのは、おごりがありました」と振り返る。

さらに、アジャイル開発の考え方が浸透しておらず、「試行錯誤しないプロダクト開発がイケてないものを生んでしまった」ことも反省点として挙げられるという。

その結果、局所最適化では解決不能な状況に追い込まれ、イチから作り直す苦渋の決断を迫られたのだった。

失敗を経てDeNAが行った、UIデザイン工程の5つのChange

しかしその甲斐あって、今ではダウンロードせずにすぐにマンガが読めるUXを実現し、シンプルなUIはおおむねユーザーから好評を博しているという。

坪田氏は、劇的にクオリティーを向上させられた要因として、

【1】同じメンバーで作り直す
【2】ゼロベースではなく、同じUXでUIを再構築
【3】一生懸命、市場と競合を勉強する

の3点を挙げた。

「UXはそのままに、UIを作り直したことが改善につながった」と振り返るDeNA坪田氏

「UXはそのままに、UIを作り直したことが改善につながった」と振り返るDeNA坪田氏

「同じメンバーで、ちゃんと振り返って何がダメだったのかを話し合うことが大事。今回の場合、UXの部分は問題がなかったので、UIだけを再構築しようということになりました。それを徹底できたことが今につながったと思います」

こうした失敗~リカバリーを経て、DeNAでは、UIデザインの工程で5つの変革を行ったという。

【1】マネジメント/シニアもデザイナー1年生
【2】PhotoshopからSketch3への移行
【3】ProttFlintoといったプロトタイピングツールの導入
【4】UIデザイナー=GUI+アニメーション
【5】プロトタイプ必須

坪田氏自身、Webデザイナーとして十分なキャリアがあるが、「業界はここ1、2年大きく変わったので、自分もアプリを作ってみて勉強しました」。経験やポジションに関係なく、「デザイナー1年生」のつもりで勉強する姿勢がチーム全体に持ち込まれた。

インタラクティブなデザインを作るために、従来のPhotoshopはSketch3に切り替えた。プロトタイプ作成のためのPrott、Flintoといった新しいツールも、積極的に導入している。

また、「GUIとアニメーションの両方が作れて初めてUI」との考えから、UIデザインは必ずエンジニアとデザイナーが協力して作る体制に移行した。

こうしたポイントを挙げた上で坪田氏は、「ただし、どんなに考えて作ってもイケてないモノができることもある。そのためにプロトタイプは必須にして、早く試してみて、スクラップアンドビルドを繰り返すようにしています」と心得を説いていた。

取材・文・写真/鈴木陸夫(編集部)