エンジニアtype - エンジニアのシゴト人生を考えるWebマガジン
  • TOP
  • キーパーソン
  • 旬ネタ
  • コラボ
  • ノウハウ
  • 女子部
  • キャリア

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

タグ : DeNA, UI/UX, マンガボックス, ヤフー 公開

 
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デザインは必ずエンジニアとデザイナーが協力して作る体制に移行した。

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

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




人気のタグ
業界有名人 スタートアップ 開発 SE 転職 エンジニア Web プログラマー スキルアップ ソーシャル アプリ シリコンバレー 起業 プログラミング キャリア スマートフォン Android SIer 技術者 えふしん クラウド UI btrax スペシャリスト Webサービス アプリ開発 Twitter ギーク Facebook CTO デザイン Apple IoT Brandon K. Hill Google ツイキャス SNS 英語 モイめし 世良耕太 IT 30代 赤松洋介 採用 コーディング 20代 村上福之 勉強会 プロジェクトマネジメント UX Ruby 法林浩之 ITイベント Webエンジニア モノづくり 受託開発 ひがやすを 五十嵐悠紀 LINE ビッグデータ 中島聡 ウエアラブル IT業界 ドワンゴ MAKERS コミュニケーション ロボット ハードウエア SI Webアプリ 女性 ゲーム インフラ iPhone 女性技術者 高須正和 ソーシャルゲーム マイクロソフト トヨタ イノベーション 研究者 ノウハウ tips 息抜き システム プラットフォーム イベント 和田卓人 チームラボ 自動車 メイカームーブメント ソニー エンジン 教育 UI/UX 開発者 iOS オープンソース グローバル Java サイバーエージェント 女子会 メーカー 家入一真 ソフトウェア 増井雄一郎 スーパーギーク コミュニティ IPA ニュース 40代 GitHub 日産 TDD テスト駆動開発 グーグル 音楽 モバイル PHP ソフトウエア TechLION

タグ一覧を見る