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

Vingowのリニューアルプロジェクトに学ぶ、「デザインと組織づくり」のイイ関係【連載:UI・UXキホンのキ】

タグ : UI/UX, VINGOW, デザイン, ニュースアプリ, リニューアル 公開

 

「デザインが分からない」

時折、エンジニアからこうしたセリフを聞くことがある。 たいてい、このセリフが意味するのは「自分には絵心やセンスがないから」という単純な理由なのだが、本当に絵心やセンスがないとデザインは理解できないものなのだろうか?

この連載では、デザインの本質的なロジックやデザイナーの思考法を、毎回著名サービスにかかわるデザイナーに語ってもらう。

連載第三回目となる今回は、ニュースキュレーションアプリ『Vingow』(ビンゴー)のリニューアルを手掛けた細野雄紀氏だ。

デザイン志向な技術者になるための「UI・UXキホンのキ」

株式会社JX通信社 取締役兼COO
細野雄紀氏

1990年生まれ。早稲田大学人間科学部で情報科学や認知科学、人間工学などを学ぶ。学生時代からWebデザインやフリーペーパー制作などを通じ、デザインへの造詣を深める。2012年、日本初のニュース自動要約アプリ『Vingow』(ビンゴー)の開発を行うJX通信社に入社。フロントエンド開発の傍ら『Vingow』Web版のデザインのほか、iOSやAndroid版のデザインワークも兼務。2014年4月から現職

Vingowリニューアルの内幕とは?

今、ニュースアプリ市場が盛り上がりを見せている。特に『SmartNews』や『Gunosy』、『Antenna』、『FlipBoard』といったプレイヤーがしのぎを削るニュースキュレーションアプリは、群雄割拠といえる状況だ。

その一角を担う『Vingow』iOS版が、2014年3月、ロゴを含むインターフェイスの大幅な刷新を行った(Android版は後日刷新予定)。

今回は、自身もデザイン作業に携わり、開発チームを統括するJX通信社の細野雄紀氏と、iOS版のフロントエンド開発を担当したエンジニアの原遼一氏に、リニューアルの狙いと同社におけるデザインワークのあり方について話を聞いた。

過去のアップデートとは異なる意図を持つ今回のリニューアル

「3月のリニューアルによって実現したかったのは、真のiOS7対応を果たすこと。さらに、ニュースの自動要約機能を効果的に見せるUIに改めることで、メインターゲットであるビジネスユーザーにとって、使い勝手の良いアプリにするために行いました。ただし、リニューアルしなければならなかった理由はほかにもあったんです」(細野氏)

その理由を詳しく聞く前に、ここで『Vingow』iOS版の大まかな歴史を振り返ってみたい。

2012年10月のリリースから1年半ほどの間に、『Vingow』は2度ほど機能拡張を実施している。

最初の機能拡張は2013年3月に公開したバージョン2.0。このバージョンではユーザーの好みにマッチした記事やタグを推奨する機能と、主要SNSとのログイン連携やPocket、Evernote、はてなブックマークといった外部サービスとの連携強化を実施。また、200字程度のサマリーから元記事を素早く表示する機能なども付け加えられた。

その3カ月後、iOS7と同時期にリリースしたバージョン2.3では、日本初のニュース自動要約機能や、お気に入り記事をオフライン表示できる機能、元記事を簡易表示する「すっきりブラウザ」を導入し、さらなる機能強化を図っている。

バージョン2.3で登場したニュースの自動要約機能だが、当時はホームフィード上ではなく「この記事の要約(β)」というクッションページを介して表示していた

そして、今回のバージョン3.0(4月末時点の最新版は3.0.2)で再び大きな刷新が行われたわけだが、今回のリニューアルと過去のアップデートは、その性格も目的もまったく異なっていたと細野氏は言う。

「2.0はiOS6登場の直前にリリースしたバージョンで、2.3はiOS7と同じタイミングでリリースしたもの。本来なら2.3でiOS7に完全対応するのが理想的でしたが、当時は社内リソースが手一杯で、過去の遺産を引き継ぎながら作業に当たらざるを得ませんでした」(細野氏)

ここで言う「過去の遺産」とは、iOS6で一般的だったスキュアモーフィックデザイン(実物の質感に似せたデザイン)だけを指すのではない。

ページによってナビゲーションボタンの配置が異なるといったUI上の混乱や、自動要約した文言をホームフィードではなく、元記事との間に設けたクッションページを介して表示するなど、実は最適化し切れていないUI上の課題が累積していたのだ。

「一部分を修正すると、どうしてもその前後にも当然影響が出てきてしまいます。限られたリソースでは手を出しにくかった小さな不具合を一気に解消しようとしたのが、今回のリニューアルのもう一つの目的でもあったんです」(細野氏)

「ユーザーがニュースを読むという行為を最適化したかった」

バージョン3.0で廃止された「すっきりブラウザ」。元記事の簡易表示を実現する機能だったが……

従来のアップデートを「増築」とするなら、今回のリニューアルは「リノベーション」に例えられるだろう。

住宅のリノベーションの場合、構造上必要不可欠な壁や柱以外は極力撤去されるが、今回のリニューアルでも際立たせるべき機能だけを残す「機能の切り離し」が徹底して行われた。

「以前は“あったらいいな”と思う機能は極力実装する方向で動いていました。しかし、利用頻度が少ないわりに、機能を維持、向上するために多くのリソースを割かなければならない機能に関しては、思い切って廃止することにしました」(細野氏)

例えば前バージョンで実装した「すっきりブラウザ」や、Microsoft、Googleアカウントのログイン連携などがそれに当たる。

「その一方で、自動要約文の表示はホームフィードに直接表示するように改め、本文との区分けを行いつつ強調したほか、可読性を高めるため極力シンプルなデザインを心掛けました。何よりもユーザーがニュースを読むという行為を最適化したかったからです」(細野氏)

バージョン2.3(左)と3.0(右)の比較。3.0から記事の要約文がホームフィード上に表示できるようになった

改めたのは開発コンセプトだけではなかった。

今回のリニューアルから、これまで細野氏が兼任していたデザイン作業を外部のUIデザイナーに委託したほか、UIまわりの実装を先に行うよう開発プロセスの変更も行うことにしたのだ。

「わたしの兼務もそろそろ限界に差しかかっていたので、今回は外部デザイナーとの共同作業する道を選択しました。ただデザイナーが社外にいることで意思疎通が困難になっては元も子もありません。そのため今回はデザイナーとエンジニアの意向を汲み、プロトタイピングツールの『Flinto』を導入することにしたんです」(細野氏)

以前は、静止画と画面遷移図を突き合わせながら操作感を想像するしかなかったので、後々になって大きな修正が入ることも多かったという。

「しかし、今回はあらかじめインタラクションの調整を行った上でUIの実装を先行させたので、そうした事態に陥ることはありませんでしたね。こうした作業プロセスを変えたことで、チーム間でUI・UXに関する議論も深まりましたし、以前より意思疎通がうまくできたと思います。良い学びの機会になりました」(細野氏)

フロント側の実装にかかわった原遼一氏も、細野氏と同じ意見だ。

「以前はUIを実装するにも、どういう過程で変更するのか分からないこともありましたし、工程の間に差し込まれる修正対応に追われ、本来のスケジュールがどんどん後ろ倒しになることがありました。正直エンジニアとしてはフラストレーションが溜まる瞬間です。でも、今回は早い段階で実際に動作するプロトタイプを中心に議論を深めることができたので、誤解や認識違いも生まれず後工程が切迫することもありませんでした」(原氏)

「UI・UXを突き詰めると組織論に行き着いた」

ツールの活用とデザインプロセスの改善は、実装する側の手間も減らすと原遼一氏は話す

『Vingow』の開発チームは、ユーザーがニュースを読むという行為を最適化するため、社内リソースと開発プロセスを見直すことで効率化を実現した。これは機能ありきの開発コンセプトからコンテンツ優先の開発コンセプトへと舵を切ったことを意味する。

ユーザーにとって一番大切なのは、良質なコンテンツがより最適な形で届けられることだ。自分のホームフィードに興味あるニュースが届き、必要に応じてシェアしたりクリップしたりしてもらうには、およそ50万種類に拡張したタグの中から興味のある項目を効率よく選べるよう、情報構造を再設計する必要もあった。

「それに、ホームフィード上での記事とタグの関係を分かりやすく明示する必要がありました。そうしなければ、そもそもユーザーが求める情報を提供できないからです。先ほど申し上げた『過去の遺産』を整理する過程で、ニュースアプリに求められる基本の大切さに改めて気付かされました。ですから今回のリニューアルはそれまでのアップデートとは異なり、機能という“枝葉”より“木の幹”、つまりユーザーとニュースとの出逢いの部分を磨くことにこだわったんです」(細野氏)

ニュースアプリに求められる基本に立ち返り、ユーザーにとって理想的な導線づくりを徹底したいという強い意思がなければ、一度付けた “枝葉”を切り落とすことは難しかったろう。

しかし彼らはやり抜いた。その成果はリニューアル1カ月足らずでじわじわと表れている。

現状公開できる数値はまだ限られているそうだが、アクティブユーザーの数は大きく増えており、従来のユーザーが離反する傾向はないという。またApp Store内での評価も全バージョン通じて4.5程度で、以前の3.5から4ほどだった数値より改善している。

「今回のリニューアルでは新しい手法や開発プロセスを取り入れましたが、結果的にチームメンバーと成功体験を共有できたのは大きな収穫でしたね」(細野氏)

さらに細野氏はこの経験で、かねてから温めていた「UI・UXを突き詰める組織論に行きつく」という持論に現実味が加わったとも感じている。

「強みや経験値が異なるメンバーをいかに束ね、コラボレーションを通じて成果を出すことが、いかにUIやUXをつくり上げる上で重要なのかが分かりました。極論かもしれませんが、『デザインにコミットする人間が組織を作るべき』。そんな実感さえ持ちましたね」(細野氏)

今回のリニューアルで、「過去の遺産」を払しょくすることに成功した『Vingow』開発チーム。これにより、UI・UXの改善サイクルが以前より効率的に回すことが可能になるだろう。

個の力からチームの力へ。『Vingow』のデザインワークは1つ上の段階にステップアップしたようだ。

細野氏に聞く、「デザイン事始め」Q&A

Q. デザインとは?

デザインの本質は問題解決にあると思います。プロダクトやサービスを通じて、ユーザーの生活を豊かにすることこそ、デザインの役割だと思っています。

Q. デザイナーの役割とは?

デザインが、1人の職人のものからコラボレーションを前提とした作業となることで、今後は場づくりや組織づくりもデザイナーの仕事に含まれるべきだと思います。

その上でデザイナーは、インフォメーションアーキテクチャインタラクションの知識を活かし、抽象的な概念をいかに言語化しチームに示すことが求められるでしょう。 プロジェクトの初期段階でいかにチームにコミットするか。これもデザイナーの役割として重要になってくると思います。

Q. UI・UX設計のプロセスは?

通常はPhotoshopを使わずIllustratorでパーツ類をモジュール化し、デザインを行っています。

今回のリニューアルでは、初めて外部のデザイナーさんと仕事をすることにしたため、操作感の共有にはプロトタイピングツールの『Flinto』を利用したり、画面動作アニメーションには動画編集のAfter Effectsを利用したりして、チーム間の相互理解を深めるのに役立てました。

Q. UI・UXをもっと知りたい方へ

デザインはデザイナーに任せるべきものという考えは間違っていると思います。

誰しも何がしかのプロダクトやサービスのユーザーであるわけですから、ユーザー体験について門外漢であるはずがないと思うからです。デザインはコラボレーションから生まれるべきもの。それぞれの立場でUIやUXについて学び、語ることは重要だと思います。

Q. UI・UXを学ぶためのお勧め書籍

以下の書籍はモノづくりやUXの普遍的な概念や価値を学べます。

■『誰のためのデザイン?―認知科学者のデザイン原論』(新曜社)

■『人を賢くする道具―ソフト・テクノロジーの心理学』(新曜社)

■『ビジネスマンのための「行動観察」入門』(講談社現代新書)

■『デザイン思考の道具箱―イノベーションを生む会社のつくり方』(早川書房)

また、以下は情報設計の基礎や実務を学ぶのにお勧めです。

■『IAシンキング Web制作者・担当者のためのIA思考術』(ワークスコーポレーション)

高速かつ低コストで行うユーザテストの手法を知りたいなら以下ですね。

■『アジャイル・ユーザビリティ ―ユーザエクスペリエンスのためのDIYテスティング―』(オーム社)

リーンスタートアップの手法を応用した、今話題のLean UXも参考になります。

■『Lean UX―リーン思考によるユーザエクスペリエンス・デザイン

取材・文/武田敏則(グレタケ) 撮影/玄樹

>> 連載「UI・UXキホンのキ」記事一覧


編集部からのお知らせ

エンジニアtype姉妹サイト



人気のタグ
業界有名人 スタートアップ 開発 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

タグ一覧を見る