「“気づかない”くらいがいいデザイン」ユーザーストーリーに沿ったUIの可能性を追求する| グッドパッチ

ペロンパ田中


「“気づかない”くらいがいいデザイン」ユーザーストーリーに沿ったUIの可能性を追求する| グッドパッチ

UI/UXデザインについて、企画コンセプトから実装までを手がける株式会社グッドパッチ。キュレーションアプリ「グノシー」のUI設計で脚光を浴びた同社ですが、それにとどまらず、2014年10月には自社開発のプロトタイピングツール「Prott(プロット)」をリリース。今やDeNAやヤフーなどのリーディングカンパニーをはじめ、世界140ヶ国以上、約5万人に使用されているツールとなっています。

2015年のグッドデザイン賞を受賞するなど、まだまだ加速を続けるProttですが、正式リリースまでは「悪戦苦闘が続いた」と当時の開発メンバーは振り返ります。今回は、同ツールの開発経緯やコンセプトについて、開発チームに在籍するエンジニアのひらい氏、フロントエンドエンジニアの吉田氏、UIデザイナーの小林氏にお話を伺いました。

グッドパッチ様_ひらい様 人物紹介:ひらい さだあき氏
2015年1月にグッドパッチ入社、2015年12月にCTO就任。これまではSIerでJavaを使った開発やLinuxのインフラ構築などを経験し、前職の食べログでは使いインターネット予約サービスの開発に携わる。現在はCTOとして組織作り、技術選定、環境整備、エンジニア採用などを行っており、プライベートではhtml5jというコミュニティのスタッフとして活動し、執筆と登壇活動を行っている。
Poole:アイコン03 人物紹介:吉田 真麻氏
中学時代にガラケーでモバイルサイトを作ったことがきっかけでHTML/CSSコーディングの面白さを知り、Web開発の世界へ飛び込んでプログラミングの楽しさに目覚める。現在は株式会社グッドパッチのフロントエンドエンジニアとして自社サービスProttの開発を担当。社外ではschoo WEB-campusでのJavaScriptの授業や、執筆・登壇などを行っている。著書として『HTML5/CSS3 モダンコーディング』がある。
グッドパッチ様_小林様 人物紹介:小林 幸弘氏
大学卒業後にアプリケーション制作の魅力に惹かれ、独学でデザイン、マークアップを学ぶ。その後、代表の土屋のブログをきっかけに2012年10月にデザイナーとしてグッドパッチに入社。受託業務を経て、自社サービスProttのデザイナーとしてUIデザインすべてを担当している。

自分たちが使いたくないプロダクトには意味がない

グッドパッチ様_記事002

現在は25名以上のスタッフがProttを開発しているProduct Divisionに所属していますが、開発当初はたった3名でのスタートだったそうです。

小林
そのうちの1人が僕だったんですけど、Prottは最初からコンセプトがガッチリ固まって立ち上がったものではなかったんです。

というのもその当時、僕らもアプリ開発で他社のプロトタイピングツールを使っていたんですけど、自分たちのワークフローにフィットしない部分があって。そうなるとうちもデザインをやっている会社なので、自社サービスをそろそろ作ってみようかというのを、代表の土屋と話して決めたんです。

「シンプルに僕たちが使いやすいものを作ろう」という、極めてユーザー目線の発想ありきでした。

開発がスタートしたのは2013年の初秋。当初は年内にオープンベータ版のリリースを目標としていたそうですが、ゼロから立ち上げたはじめての自社ツール開発はなかなか前に進みませんでした。

小林
固たる開発スキームがないので、実地で作りながら改良していく、という流れだったんです。レクチャーで煮詰まるよりも、モノを作ってから議論したほうが更新しやすいし、みんなでコンセプトも共有しやすいと思って。ですが、年が明けて2014年4月にベータ版をローンチする予定が、その1ヶ月半前にすべて作り直すことになったんです。

理由は「単純に触ってみて使いづらかったから」と小林氏は話します。最終的なストップの決断は代表の土屋氏にあったそうですが、直前のリテイクはメンバーのモチベーションが低下することはなかったのでしょうか。

小林
「えーっ!」みたいな感じにはならなかったですね。触ってみてやっぱり使いづらかったので、そこはみんな素直に受け入れて。すでにその頃は日々の議論を経て、3名の信頼関係もかなり強固になっていたのでチームの雰囲気も崩れませんでした。“徹底的に議論する”うちの社風というか、いつもトコトン話し合っている仲間だったからだと思います。

またProttのチームだけではなく、ほかのアプリ開発のメンバーの意見も大いに役に立ったそうです。

小林
まずは自分たちが使いやすいものを作る、ということで社内でユーザービリティテストを行って、いろいろなスタッフに話は聞きました。貴重な意見をもらえたし、そもそも自分たちが作ったツールなのに同じ会社の人たちが使ってなかったら、それ自体がウソになるじゃないですか。
吉田
あと、うちは毎週月曜日にプロジェクトレビューを行っているのが大きいと思います。よくある話ですが、同じ会社のメンバーとはいえ、忙しそうだとレビューをお願いしにくい雰囲気ってあるじゃないですか。でもグッドパッチでは毎週決められたレビューの機会があることで、忙しさに左右されず定期的に社内からのフィードバックをプロダクトに反映させることができています。

転職した当初、グッドパッチに根付いているレビュー文化には本当に驚きました。フィードバックを求める姿勢や意見を受け止める姿勢が一人ひとりにきちんとあって、厳しい意見でも“自分への攻撃”と捉える人が誰もいない。そういった土台があってはじめてフラットで率直なフィードバックを交わせるのだと思います。

「このアニメーション心地よいですね」なんて同業種だけの意見

グッドパッチ様_記事001

1ヶ月半の間に改良を重ねて、Prottは2014年4月にベータ版をリリースします。しかし、ユーザーの反応は想定とはかけ離れたものでした。

小林
出せるところまでは改良はしたんですが、それでもバグがむちゃくちゃ多かったんです。「いやー、これ現場では使えないっす」みたいなことも社内で言われて、作り手としてはつらかったですね。

周囲の反応は鈍かったものの「そこで一発逆転を狙うようなことは考えなかった」と小林氏は話します。

小林
正式版リリースまでは大きな機能追加はしなかったですね。それより細かい動きのデザインやバグの改善とか、とにかく地道にアップデートを重ねていきました。多機能性とかの要素以前にコアの部分が使いづらかったら、そもそもユーザーは使ってくれませんから。

学んだのは、ユーザーは使いにくいと思ったときに“声が出る”ということ。「これ、使いやすいですね」なんて100%言いません。とくに「このアニメーション動作心地よいですね」なんて同業種だけの意見なんですよ。だから理想は違和感なく、黙々と自然に使ってもらえるところにあるんです。

もちろん、グッドパッチらしいカッコイイ雰囲気を伝えるために、カラーについては意識しました。いわゆるツール系アプリは青色が多いんですけど、グッドパッチらしい雰囲気を伝えるには何だろうって考えて、黄色を選んで。楽しさであったり、高揚感だったり、新しくモノ作りをするために必要な感情をプッシュするようなイメージです。

そのほかの細かい更新については、「ほとんど覚えていない」という小林氏。思い出すことすら難しい、気が遠くなるほど回数を重ねたブラッシュアップの背景には「ベータ版でもいいから、出してからが勝負と思っていた」という制作に対する考え方があったそうです。とはいえ、気づけばチーム立ち上げから1年が経過しても、まだ正式版のリリースすらない状態に、焦りやプレッシャーはなかったのでしょうか。

小林
焦りはありましたよ。受託制作と違ってまだマネタイズはできていないし、もちろん結果を出さないといけないんですけど、それ以上にクオリティについてはこだわりを捨てませんでした。

正式版まで時間をかけたのも、むしろ採算性よりユーザー目線を最優先して考えた結果だし、そうさせてくれたのも代表の土屋でした。彼も一緒になって作っていたので、変な肩身の狭さみたいなものは感じずに済みました。でも、売上面でそれを支えてきたのは受託制作のメンバーだったりするし、今思えば社内全体で、うちのチームが満足のできるものを作るという環境を作ってくれていたのだと思います。

Prottはチームのコミュニケーションの質を高めるツール

グッドパッチ様_記事0001

紆余曲折を経て、Prottは2014年10月に正式版がリリースされます。開発当初から国内発のプロトタイピングツールとして、アプリ開発者の間で話題となりましたが、一方で「開発チームは、誰も満足はしていなかった」と小林氏は話します。

小林
話題にはしてくださるんですけど、正直なかなか継続的に使ってくれないなとは思っていましたね。だからその後も細かいブラッシュアップを含めて、コンポーネントの追加とかワイヤーフレームの追加とか改良は重ねています。「まだまだ改善の余地があるな」という感触は、当初も今も変わらず持ち続けていますね。

また、ユーザビリティの追求について「自社サポートが欠かせない要素」だとエンジニアのひらい氏は説明します。

ひらい
プロトタイピングツールはほかにもあるのですが、とくにProttはユーザーサポートのレスポンスが早いほうだと思います。

ユーザーサポートって、一番UXに関わる要素だと考えています。「ツールが良ければそれでいい」ではなく「サポートも含めてProttというサービスを提供したい」という思いを、みんな持っているんです。だからサポートも外注ではなく、今でもうちのチームメンバーが直接対応しているんですよ。

吉田
日本語での迅速なサポートは、国内発のツールの強みでもありますしね。我々としてもユーザーの声は改善のヒントにつながることも多いので、今後も力を入れて取り組んでいく予定です。

あと、他社ツールとの差別化でいうと、やはりチームでコミュニケーションが取りやすいのも特徴だと思います。誰でも設計機能が使えるから、エンジニアやデザイナーという職能の壁を越えて、実装ナシでデザインやレビューができるんです。

エンジニアとデザイナーの壁は完全には取り払えない。でも、良質なアプリ開発には両者の連携が絶対に必要。Prottで提案したいのは、役割ごとの垣根を取り払ったコミュニケーションそのものだとも思っています。

チーム内でコミュニケーションの質が高くなると、作業の効率化は劇的にスピードアップします。制作のサイクルが早くなることで、チーム全体が次のフェーズへ制作レベルを進め、結果的に良質なアプリ開発につながるとグッドパッチは考えます。

小林
単純に「手軽にプロトタイプを作りたい」という目的だったら、「Flinto」とか、ほかの選択肢もあると思うんです。でもチームレベルで導入したとき、Prottだとほかのメンバーとのコミュニケーションの取りやすさで差が出ると思うし、最初からずっとそこを意識して作ってきた。そういった特徴が、個人のアプリ開発者だけでなく、色々な企業で導入していただいている理由になっていると思います。

今後はプロトタイピングツールも「スピードだったらFlintoで、チームで導入するならPrott」とか、使い分けを前提に選ばれるようになっていくと思います。

フレックス制度は“あえて”取り入れない

グッドパッチ様_記事00

Prottチームに限らず、制作現場ではさまざまな役割のメンバーの連携が必要になります。では、グッドパッチのチーム全体のタスクマネジメントはどのように行われているのでしょうか。

ひらい
今は私がProttチームのエンジニアのマネジメントを担当しているのですが、入社当初はサーバサイドのプログラミングに携わる予定だったんです。ただ、そのころはチーム全体のタスク管理があまり機能していないような状況でした。グッドパッチはいいエンジニアが何人もいたので、ちゃんとマネジメントする人がいれば、プロダクトをもっとよくできると思ったんですね。入社して1ヶ月が過ぎたころから、この役割を担うことになりました。

以前から看板と付箋でタスクを見えるようにはしていたのですが、優先順位も分からないし、連携も取れていない。開発現場でバグの処理やサポート対応で日程が後ろにズレることはよくあるじゃないですか。そこで必要なのはきちんと優先順位をつける人間だと思っていて。一人で解決しようとすると、どうしても綻びが出てきますから。

吉田
バグ処理があったりしたとき、きちんとリスケを提案する人が自分以外にいることって、エンジニアにとってはすごく助かるんですよ。自分のなかで何とかやりくりしようと抱え込まなくて済むので、目の前の作業に集中できるんです。

また、近年多くの企業が取り入れているフレックス制の働き方についても、グッドパッチでは自分たちの働き方を考えた上で取り入れていません。

ひらい
決して猛反対とかではなくて「ダラダラ会社に残っているより、スキルアップのために自分の時間を大切に使ってね」ということですね。
吉田
入社前に土屋が「勤務時間中に自分の仕事をきちんと終わらせて、夜は早く帰って家族を大切にする自分のスキルアップや勉強時間に充てたほうがいい」と話していたのを聞いたとき、とても共感しました。

実際に入社後も業務時間外に積極的な活動をする余裕が持てています。社外での活動で自分が成長できれば社内での開発時にそれを活かすことができるし、個人のスキルアップを応援する風土は会社にも個人にも良いことだと実感しています。

案件やプロダクトだけではなく働き方についても設計意識を持つグッドパッチ。彼らが求める人物像についても伺いました。

吉田
自分で積極的に学ぼうとする姿勢は大前提として、あとは“デザインの力を信じる人”でしょうか。ここでいうデザインっていうのは、表面的なギミックだけでなく、具体化したい対象や情報があって、それがきちんと設計されているという意味です。というのも、いいデザインと悪いデザインの違いって、“何のためのデザインか”という目的が、具体化されているかどうかだと考えていて。その認識の共有はけっこう大事ですね。
ひらい
あとグッドパッチには最近、行動指針ができたのですが、その中にもあるように仕事にオーナーシップと情熱を持つ人と一緒に働きたいですね。経営に対する当事者意識や、ユーザーに対しても自分ごと化できる、自発的な人が今のグッドパッチにも多いように思います。

同様の機能を持つサービスでも、デザインによってユーザー体験は大きく左右されます。その体験を左右する“デザインの力”における差とは“なぜそうなっているのか”というデザインの意図が「あるべきユーザーストーリーに沿っているのかである」と彼らは考えます。

今やUIだけでなく、デザインプロセスにコミットしているグッドパッチの存在が、開発現場を始め、すべての人の“デザイン”に対する意識を今後変えていくのかもしれません。


furture_bnr

ペロンパ田中
この記事を書いた人

関連記事