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

タグ一覧を見る