Vingow 開発ブログ
hosono
2014年3月14日

Vingowリニューアルの裏側 「真」に使いやすいアプリの開発に向けて

icatch

こんにちは。開発チームの統括をしている細野です。

このたびVingowが大幅にリニューアルしました。これまでのオレンジをベースとしたデザインから大きく変わって、白を基調とした明瞭なデザインに変更しています。何を考えながらどのように開発を進めたのか。アップデートに至るまでの裏話をご紹介します。

なぜリニューアルが必要だったか?

(1)「真に」iOS 7対応するため

iOS 7になり、スキューモーフィズムを排除する必要がありました。そうしたデザイン環境の変化に応じて、Vingowのイメージを一新する必要がありました。

(2)要約機能を有効に活用するため

自動要約機能を有効に活用したUIにすることで、さらに魅力的に利用できるアプリになるのではないかと考えていました。

(3)よりターゲットを絞り込むため

今回からビジネスユースをメインに据え、よりターゲットにとって使い勝手のいいアプリにする必要がありました。
想定されるユースケースを踏まえてアプリのデザインからインタラクションまでを最適化したいと考えていました。

ロゴの作成過程

ラフ案

まずはロゴの策定から。Vingowの持つ特徴からブレイクダウンして考えます。
3文で構成される自動要約タグ、さらには頭文字の「V」などから発展させながらブレスト。
写真 2014-03-13 15 19 08

色調の検討

全体的に白ベース、黒ベースに要素を乗せるという配色のアイコンが多いのですが、やはり青・緑系統の色をキーカラーとしていることが多いことが分かります。

他アプリとの比較を通して、より濃いオレンジ色に変更しました。従来のキーカラーのオレンジを活かし、なおかつビジネスユースにも使われることを想定しています。

色相比較

アイデアは足元に転がっていた!

いいアイデアはないかと考えていたところ、茅場町駅の4b出口でひらめきました。
「V」をモチーフにしているため、かねてから逆三角形のシェイプがしっくりくると考えていたのでこれはいいぞ、と。

写真 2013-12-06 18 48 35

完成したロゴがこちら。

完成したロゴ

一方でボツになってしまったロゴも…

クリエイティブに犠牲はつきものです。ボツになってしまった案のなかから1つをご紹介します。なかなか愛嬌があってかわいいんですけどね。
試作ロゴ

Vingowが大事にしていること

VingowにおけるUIの役割とは、より良質なコンテンツを、より最適な形でユーザに結びつけることです。ユーザにいかに快適に使ってもらうかを分解して考えれば、読みたい記事を選ぶ・読む・シェアするという一連の流れを、いかに容易にするかが重要です。

(1)緻密な情報構造設計

まずは情報の構造を整理しなければなりません。ここを誤るとUI全体に響くほか、致命的なバグを生む可能性があるので要注意です。
特に利用頻度の高い遷移フローはできるだけアクセスしやすいよう工夫しておきます。

(2)コンテンツが第一

Vingowは記事を読むためのアプリですので、快適に読むことができるという点が根本の価値になります。

例えばiOS 7対応アプリでは、ナビゲーションバーに白を使っているアプリが多いのですが、その理由はコンテンツの邪魔にならない色で設計する必要があるからです。
濃い色では、多くの記事一覧を見ていく上で目障りになりやすいので致命的です。特にiOS 7ではステータスバーの領域まで広がるため、目立ちすぎてしまいます。
よって、Vingowでは白い背景を採用し、コンテンツに集中できるようにしています。

(3)分かりやすさ・手軽さ

どれだけ便利なアプリでも、仕組みを理解してもらわなければ使ってもらうことは難しいでしょう。
特に、Vingowは一般的なニュースアプリとは一味違います。タグをフォローすれば記事が流れてくる、ということを理解してもらう必要があります。

そのために、フィード内にはフォローしているタグを表示するようにしました。
記事の内容を推測する材料になるほか、初見のユーザにとっては選んだタグに応じて記事が流れてくるのだということを暗黙に伝えることができます。

手軽さの面では、「一画面で事が足りる」ことも非常に重視しています。
Vingowでは、「すべての記事」に読みたい記事が集まります。理想論を言えば、ユーザが何もアクションを起こさずに読みたいニュースを手に入れる状況を作りたいと考えています。
鍵になるのは受動性であり、それが手軽さに繋がります。

(4)タグとの出会いを生む

写真 2014-02-27 21 01 28

Vingowにとってタグとは血液のようなものです。タグに応じて記事配信する仕組みになっているため、ユーザとタグとの間で良質な出会いがあることが必要不可欠です。

記事を表示する際、上部にタグのリストを表示するようにしました。
また、一定の条件に応じて端末側でタグを追加するよう促す仕組みも導入しています。
今後はより一層興味のあるタグを簡単に見つけられるよう改善予定です。

なお、今回のアップデートを期に10万種類から50万種類に拡充しています。

(5)要約という新しい情報体験

Vingowの特徴でもある3つの要約文。
要約された文章を表示する事例はあまりありませんが、だからこそ新しい体験を提供できると考えました。

これまでも要約を提供する中で、要約文を見ることでより記事へ興味を持つことが分かっていました。
要約を読むことで記事への段差を軽くする効果があるのだと思っています。
要約を読んでとりあえずシェア/クリップのようなアクションも期待し、自然なかたちで押せるようボタンを配置しました。

※なお、要約は設定画面からON/OFFの切り替えが可能です。

チームでいかに連動するか?

一人ひとりが独立してしまっては、良いアプリは開発できません。
開発したあとに「こんなつもりじゃなかったのに」となってしまうのを防ぐために、エンジニアとデザイナーが密に連携することが重要です。

最初にUI周辺を実装してしまう

エンジニアは表側のUIまわりを先に実装し、デザイナーとの高度な連動を可能にしました。
例えばアニメーションなどを搭載する場合も、いかにデザインが美しくても実装できなければ意味がありませんよね。

なお、これまでは完全に社内でデザイン作業を完結させていましたが、本バージョンでは外部のデザイナーさんとのやりとりを交えながら作業を展開していきました。
頻繁に顔合わせができないため、相互の意思疎通が特に求められるUIまわりを最優先に仕上げる必要がありました。

Flintoなどを活用

Flintoの利用でインタラクションの調整を行いました。これにより、デザイナーとエンジニア間での高度な意思疎通が可能になりました。

これまでは静止画で動作を検証していましたが、これまでの経験で整合がとれなくなってしまうことが多々ありました。
そこで、今回からFlintoなどのツールを利用して調整を進めていきました。
これからのアプリ開発にとってインタラクティブなUI開発が不可欠であるということはデザイン会社・Goodpatchさんのブログでも触れられています。

過去1年間、FlintoやFramer.js、Marvel、そしてXcodeのストーリーボードなどの素晴らしいツールが紹介され、これらはかつてないほどにデザインを動かしたり、インタラクションを付けるのを簡単にしてくれました。(中略)さらにここで重要なのは、自分の作ったデザインを事前に試せるようになったという点です。フローがどうなっているか、学習はしやすいか、直感的かどうか、全体的な感触はどうかといったことを確かめるためのテストができるようになったのです。これによりデザイナーは開発者やプロジェクトマネージャー、クライアントと働きやすくなりました。なぜなら彼らは実際に触ってデザインを確かめることが出来るからです。
高まるインタラクションとUXの重要性!2014年はプロトタイプの年になる

ちなみに、GoodpatchさんでもProttというプロトタイピングツールを提供するそうです。楽しみですね!

今後に向けて

これまでお使いいただいていたユーザにとって、せっかく慣れたものがある日突然変わってしまうのは困惑をもたらします。今回のアップデートでは、いかにユーザにストレスを与えることなく、より良いものにするかを重視しました。
また、新しくお使いいただく場合もかんたんに使えるように工夫しています。

ただし、これでUIが完成したわけではありません。これまでも試行錯誤しながら開発してきたように、今後もユーザの反応を見ながら改善していきますので引き続きよろしくお願いします。

Vingowを一緒につくりませんか?

弊社ではVingowを一緒に成長させてくれるエンジニア、デザイナー、ディレクターを募集しています。勢いのある若手エンジニアから、若いチームを引っ張ってくれる経験豊富な方まで、Vingowに興味がある方はぜひご連絡下さい。まずは、気軽にランチでも行きましょう!

ランチに行ってみる
«
»