5月20日にリリースされたGunosy2.0は、GoodpatchがUIデザインを担当しています。これまでの紺色をベースとした重めのデザインから大きく変わって、白を基調とした明るいデザインとなりました。そこで今回はリニューアルを担当したGunosyのエンジニア松本さん、弊社代表の土屋、UIデザイナーの貫井の3人に、どういった経緯でリニューアルすることになったのか、どんなことを考えてUIを作っていったのか、その裏話をたっぷりと語ってもらいました！

Gunosy UIリニューアルの経緯

――ではまず、そもそもどうして今回GunosyのUIを全面的にリニューアルすることになったか教えてもらえますか？

松本
前回のデザインは、紺色で重めの男性的なデザインでした。最初のターゲットはアーリーアダプターやギークだったし、実際にスタート時は女性のユーザーはかなり少なかったのでそれでも良かった。だけどこれからGunosyっていうサービスをもっと広めて年内にユーザーを100万人にするためには、女性もターゲットに入れて考えていかなければいけない。そこで裾野を広げるために白を基調に作り替えたいと思って、今回全面的にUIをリニューアルすることになりました。

土屋
それで前回に引き続き、今回もUIをGoodpatchに依頼してもらったわけですが、うちのような外部の会社に頼む上でどんなことを期待していました？

松本
やっぱり外からの意見がすごく欲しかったんですよね。社内だと向いている方向がみんな同じになってしまう。僕たちが当たり前だと思っていることでも、そもそも普通のユーザーからすると全然当たり前じゃなかったりするから、そういう意味で客観的に見てくれる人が欲しかった。それでGoodpatchさんにお願いして、結果的にすごく良かったです。期待以上のことをしてもらったし、僕自身がどういう風な考え方でUIが出来ていくのか学べたので。

 

記事を邪魔しないUIにしたかった

――今回リニューアルするにあたって、どんなことを意識していましたか？

松本
最初から考えていたのは、情報の構造を整理する、ということでした。今までのデザインだと前日の記事を見るときなどは日付を横に移動していたけど、Gunosyは縦にスクロールするのが基本です。だから時間軸通りに全部縦に並べて、横には違う性質のものを置くと決めていました。で、そうやって情報を縦に整理したあとに、スワイプで動かせるともっと気持ちいいよねって考えて、お気に入りの移動や設定画面へはスワイプでも移動できるようになっています。基本的にはタップでどこでも進めるんですけど、アニメーションを組み込んでスワイプも出来るということを意識してもらえるようにしました。

土屋
2パターンのやり方を作るのは大事だよね。スワイプだけでしか行けない場所があってはいけないし、タップでも辿り着けないといけない。

 

――では他にこだわったポイントなどを教えてください。

貫井
うちは質感を出すタイプのデザインをする会社なんだけど、Gunosyからフラットやりたいと言われたので、ほぼ初めてフラットデザインに挑戦しました。質感を出すためのグラデーションをかけちゃいけなかったり、淡いシャドウだったり、いつもと違うからしんどかったね（笑）。でもやってみてすごく勉強になった。フラットだけど前面に重なってべたーってなるのは変だから、奥行きが出るようにして。こだわったポイントだと、お気に入りを押したときの星の動きかな。「『しゃららん』って星を動かしたい」って言ったんだけど、Gunosyの松本くんに「わかりません」って言われちゃった（笑）。だからグッドパッチのインタラクションデザイナーの松本に、俺が手の動きでイメージを伝えたんだけど、彼はFlashでその動きを作ったんだよね。で、swfで書き出して、Gunosyの松本くんに｢こういう動きにしてください｣って投げて、実装してもらったっていう。最近はそういうやり方でFlash使うのねって面白かった（笑）。

土屋
久しぶりにswfファイルがチャットで送られてきて吹き出したね（笑）。

松本
フラットにしたかった理由はしっかりとあったわけじゃないけど、Gunosyはメディアなので、写真と文字のコンテンツが一番良く見えて、それ以外を抑えたかったんです。ユーザーに最適な情報を届けるのだから、見せ方も最適にしたいし、記事を邪魔しないUIにしたかったので、そう考えるとフラットを採用してよかったと思います。あとは今回新しい機能として、カレンダーを追加しました。ユーザーのレビューなどを見ると、カレンダーが欲しい、遡って昔の記事を読みたいという意見もあったので、あると便利かなと。今回のリニューアルで過去の記事に移動しやすくなったと思います。他にも「あわせて読みたい関連記事」を追加しました。中のロジックが上手くいっているから、結構面白い記事が集まるはず。

貫井
UIは苦労したけどね（笑）。関連記事をどこから出せばいいかはすごく考えたし、アイコンも最適なものがなかった。ここはこれからユーザーの反応を見ながら変えていくポイントだね。

土屋
Gunosyは1回に25記事っていう制約があって、それが良いっていう人もいるけど、もっと読みたいっていう人もいる。だからもっと記事を読みたいっていう人にとっては関連記事が表示されるのは良いかもしれないね。

貫井
あとはアイコン。新しいのは真っ白で女性受けもいいんじゃないかなと思う。

土屋
うん、これは「おっ！」って思った。

松本
昔のアイコンを女性のユーザーがホーム画面に置くイメージがどうしてもなかったんですよね。今は女性ユーザーの割合が15%だから、それが今回のリニューアルで変化したらなぁと。

 

メインツールはKickoff、Git、Slicyの3つ

――どういうワークフローで作っていったんですか？

松本
基本はKickoffでタスクを管理していて、出来たものに対してチャットでフィードバックをもらって、その中から新しいタスクを追加して、っていうのを繰り返してました。あとはデザインをGitで管理して、貫井さんからもらったpsdをSlicyで切り出して。Kickoff、Git、Slicyの3つをメインのツールとして活用してましたね。

土屋
Kickoffは大活躍だったね。チャットでコミュニケーションを取りながら出てきたタスクを追加できるし。今回みたいにタスク量の小さい短期決戦の開発には最適だったと思う。あとはGitも活用してたけど、デザイナーがGitを使ってデザインを管理するのは結構珍しいよね。

貫井
もともと過去に戻れるようGitにデザインをコミットしてたんだけど、松本くんにpsdをいちいち渡すの面倒臭いし、だったらGitで共有しようという話になって。コミットのコメントに毎回変更点を書いているから、わざわざ「松本くんお疲れさまです今回の変更点は……」とか書かずにコミットしたことだけ伝えればいいから、すごく楽だった。

松本
こっちももらったpsdをSlicyでスライスするだけだったのですごくスムーズでした。もらったデータをぱっとSlicyで書き出せるのは楽ですね。

 

リリース1週間前にコードが50%置き換わった

 

――では次にUIを作り上げるまでにあった苦労話を教えてください。

土屋
みんなゴールデンウィークがなかったことだよね（笑）。

貫井
うん、普通に会社来てた（笑）。でも休みだから他の仕事はやらなくて良かったし、Gunosyにだけ集中できる期間があったのは逆に良かった。

松本
朝も夜も関係なく24時間コード書いてましたからね。夜中1時くらいに「ここが気になる！」って言われて2時に修正飛ばしたりとか。

土屋
あれをやっていると開発の一体感みたいなものがあるよね。遠隔地でも全然関係ない。でも松本くんのタスク量は本当にすごいことになってて、俺だったらあれ見て卒倒してたと思う（笑）。

松本
駆逐してやりました（笑）。

貫井
今コンプリートタスクみるとすごいことになってるからね。どれだけスクロールしても終わりが見えないっていう（笑）。

松本
ゴールデンウィークの頃は、今回のリニューアルで今まで下にあったボタンがなくなったんですけど、ボタンがないとわからないという意見と、スワイプの方が良いという意見の間で板挟みになったりしてた時期ですね。どういうUIに落ち着けるかっていうのを色々と相談して。実はメニューをどう入れるか決めたのもゴールデンウィークでした。もともとお気に入りを入れていた場所にメニューを入れることにしたから、50%くらいコードが置き換わった（笑）。でも今後の拡張性を考えるとあれで良かったかも。どんなコンテンツを追加しても縦に積んでいけばいいので。

貫井
今回地味に辛かったのは、ベータ版でテストしてるときにわざわざ選んでられないから一番上の記事のいいねを押したりお気に入りにいれたりしてたんだけど、Gunosyがどんどん頭悪くなっていったこと（笑）。配信される記事が全然興味ないものばかりになっちゃって。でもちゃんと学習しているんだってわかったけど（笑）。

 

ユーザーの反応を見ながらUIはどんどん変えていく

――では最後に今後について教えてください。

土屋
これでUIが完成したわけじゃない。試行錯誤しながら作ったけど、今回は時間があまりなくて十分にユーザーテストも出来なかったから、今後ユーザーの反応を見ながらGunosyのUIはどんどん変わっていくし、これからが大切。

松本
今後iPad版を作ろうっていう話は出てて、今回のiPhoneのデザインを踏襲してデザインを作っていけたらと思っています。あとはやっぱり、100万人に最適な情報を届けられるようなサービスとすることが目標。iPhoneは画面が小さいから、今後も情報を最適化して、ユーザーにとって必要な情報だけを表示したいし、そのためにUIは邪魔をせずに自然に操作できるものであって欲しい。これから色んな切り口で情報を配信するかもしれないけど、情報を最適化するっていうことは貫いていきたいですね。

 

パーソナルニュース Gunosy 〜あなたにあったニュースを推薦するスマートなPersonal News Reader〜 2.0.0（無料）
カテゴリ: ニュース, 仕事効率化
販売元: Gunosy Inc. – Gunosy Inc.（サイズ: 6.8 MB）
2020年7月追記：最新のバージョンはこちらからダウンロードしてみてください！

 

いかがでしたでしょうか？最後に土屋も言っていたように、Gunosy2.0のUIはこれで完成ではありません。ユーザーの皆様からのフィードバックを受けて、もっと良いものになるよう改良していきますので、何か気になる点などございましたら、ぜひ弊社までお気軽にご意見をお寄せください！また今回のリニューアルで使用したKickoffやSlicyも本当に便利なツールなので、ぜひこちらも試してみてくださいね。

 

Slicy 1.1.4（￥2,600）
カテゴリ: グラフィック&デザイン, 開発ツール
販売元: MacRabbit – MacRabbit

 

Kickoff – Chat and Tasks for Teams 2.0（￥2,450）
カテゴリ: 仕事効率化, ビジネス
販売元: Michael Villar – Michael Villar

Share on

Goodpatch
Goodpatch公式アカウントです。