納期がある開発で、機能を最大限盛り込む UI の構築
こんにちは、CookpadTV 株式会社のデザイナーの若月です。クッキング Live アプリ「cookpadLive」のデザインをしています。
先日、クックパッドで行われたクックパッドはサービスの作り手を採用したいんです。で発表を行った内容の詳細を書きます。
なにをしたのか
アプリのリニューアル(アプリ名変更・機能追加)を 1ヶ月という納期がある中で、ユーザの体験を損なわずに必要な機能を最大限盛り込むために、開発を行うために、ユーザ体験と開発のスピードのバランスを取りながら UI を作りました。
リリースするまでのフロー
1. 問題発見 / ワイヤーフレーム
現状アプリの問題発見の洗い出し・リニューアル後の理想の姿を考えることをまず考えました。まとめたものをリーダーやチームメンバーに壁当てしつつ、ワイヤーフレームを組み立てます。
2. 仕様整理
ワイヤーフレームを元に、仕様表を作成します。
目的は、開発に関わるエンジニア全員に対して、リニューアルの規模感をしってもらうこと、仕様を考える段階でスケジュール的に開発が難しいものを把握するためです。
ただし、開発が難しいと判断された仕様がリニューアルにおいて必須の仕様だった場合はリニューアルを行う理由が変わってしまうため、仕様表に優先度を決めました。MTG で仕様表を共有しながらにエンジニアとざっくり開発スケジュールを作ります。
3. UI に着手
仕様が Fix したので、UI に着手するのですが、コンポーネントを意識した取り外し可能な UI を構築するために、以下の3つの UI を作って行きます。
・ワイヤーフレームをベースとして全仕様を盛り込んだ実装コスト高「理想のUI」
・機能の優先度と納期を考慮した実装コスト中「実装可能なUI」
・最低限の機能と体験が出来る実装コスト小「リリース可能なUI」
3種類のUIを作りますが、できるだけ「リリース可能なUI」ではなく「理想のUI」を目指して、「実装可能なUI」をエンジニアの実装コストも踏まえ作って行きます。ここで作った UI は issue 上で常に更新しているので、エンジニア・ディレクターなどが見られる状態になっています。
コンポーネントを意識した取り外し可能な UI とは
実装フェーズで UI 変更が必要になったときや、事情により表示しているものがリリース時点で表示出来ない場合に、コンポーネント単位で取り外しても機能が不自由なく使える・見た目がくずれているように見えない UI のことを指しています。
実装フェーズで UI 変更に対応できる
実装時間が限られた中で実装中に実装が難しくなったり、期限に間に合わなくなったときに UI を一から考えるのではなく、エンジニアと Figma を見ながら、コンポーネント単位で取り外しを行います。
気をつけたことは、「理想のUI」「実装可能なUI」「リリース可能なUI」の UI にあるもの以外のコンポーネントを取り外したり、付けることはしませんでした。そのルールを作ることで、仕様で機能の優先度やデザイン時に考えた体験を変えることなく開発ができます。
リリース直後は「取り外した状態のUI」
運用上の理由でリリースの直後は一部が入稿が出来ないことが開発中にわかりました。何が起きるかというと、アプリ上でカラの部分が生まれてしまいます。リリース後少し経つと、「実装可能なUI」にはなるが、リリースの直後は別の UI になるため、「実装可能なUI」をベースとして、「リリース直後のUI」というものを作り、基本的にはレイアウトは変わらない表示・非表示ができる状態がの UI を作りました。UI を作っている時に基本的に何か動かしても違和感が無いように作っていたというのも、この対応がスムーズに行えた理由です。
メリット
一番のメリット限られた時間の中でスピードを落とさず実装が出来たことでした。
●デザイナは、一から UI を作成することなくなく、取り外し（時には増やし）することで UI を作ることが出来ます。
●エンジニアは、UI のパターンを共有されているので、完成 UI を待たずに実装の準備が出来る、UI が完成するまでの時間が短い為すぐに実装に入れるとのことです。
●全体では、運用、制作、デザイナー、開発で順序の制約が少なく出来たことです。
デメリット
基本的には、大きなデメリットはないです。ただ、以下がデメリットに当たるかもしれませんが、想定しながら作っているのでデメリットとして感じてはいません。
● UI を3パターン用意する必要があること
そもそも3パターン作るのがメリットだと思っているので、デメリットにはないかなと思います。
● デザインが途中で変わること
「理想のUI」を作った時点で、本当に実現したいものが表現できているので、３つ UI のなかでコンポーネントが増減してデザインが変わったり、新しいデザインになるのは想定できる範囲のデザインが完成できます。
まとめ
「納期がある開発で、機能を最大限盛り込む UI の構築」について書きました。納期が決まっている場合は大活躍しましたが、普段から頭の中を整理するために3パターンのUIを作ったり、UI を取り外すして見ることで逆に洗練された UI が生まれることもあり、リニューアル後から積極的にコンポーネントを意識して取り外し可能な UI を作るように心がけています。
3パターンのUIを作るのはちょっと作業負担が増えるかもしれませんが、実装フェーズの時のことを考えると、3パターンのデザインは作っておいて損はないと思っています。
cookpadLive アプリで UI/UX を担当しているのは自分一人なので、もしこの note を読んでサービス開発のやり方に興味ある方いましたらよろしくお願いします！
クックパッドのデザイナーがマガジンとして note を書いています！是非そちらもご覧ください！
この記事が気に入ったらサポートをしてみませんか？