Image may be NSFW.
Clik here to view.
こんにちは、メディアプロダクト開発部のデザイナ若月 ( id:puzzeljp ) です。
現在関わっている、一緒につくれるクックパッド | cookpadTVのアプリ開発上のチーム間のやりとりについて今回は書きたいと思います。
cookpadTV は料理上手な有名人や料理家がクッキング LIVE を生配信しているサービスです。クッキング LIVE を見られるのは、iOS アプリ・Android アプリ・FireTV アプリとなっています。
cookpadTV のデザインデータを Figma に乗り換えました
Image may be NSFW.
Clik here to view.
cookpadTV に私がジョインしたのは、今年の8月です。 cookpadTV アプリがリリースされたのは3月なので、デザインを引き継ぐ形でジョインをしました。 私がジョインしたタイミングで、社内で Figma が使われる事例が増えてきたので、 Figma に移行を行ってみました。 ただし、デザイナは私一人なので、同時編集は行っていないので今回の記事では触れません。
移行についてはスムーズに行えました
- cookpadTV のデザインデータ (Sketchファイル) は、iOS の物しかなく、比較的移行がしやすかったこと
- デザインに関心があるチームメンバーが多かったこと
チームメンバーには Figma の プロジェクトへの View 権限のみ渡し、 Figma の使い方をレクチャーすることで、問題無く運用することができました。
結果としては、Figma に移行して良かったです。
その理由について紹介していきます。是非 Figma を導入しようと思っている方に参考にしてもらえればと思います。
移行して期待していたこと: チーム間でデザインの共有が楽になること
Image may be NSFW.
Clik here to view.
今までは、Sketch で、 Marvel と Zeplin 、画像の書き出しを行いプロトタイピングから実装までをやりとりしていました。
Figma にしてからは、Figma のプロジェクトをURLを共有するだけで、デザイン・プロトタイピング・実装に必要な要素が揃うようになりました。
チームではブラウザで確認できることやリアルタイムで変更が確認できることが良かったと意見を貰っています。
※完全なプロトタイピングはまだできてないので、詳細なインタラクションやアニメーションについては口頭でコミュニケーションを取っていました。
不要なコミュニケーションが減った
Image may be NSFW.
Clik here to view.
一番良かったと感じたこと、パーツ画像の書き出しについてでした。
今まではデザイナが画像の書き出しを行っていましたが、現在はエンジニアが画像を書き出して開発を行っています。
デザイナが書き出しをするとどうしてもパーツの書き出し漏れがでてきてしまい、足らない場合エンジニアから都度書き出してくださいという依頼が来ます。
エンジニア側も「依頼・画像を待つ」、デザイナは「書き出し・共有」を行っておりこの時間が無くなります。
エンジニアが画像を書き出すことで、やや時間がかかりますが、文章を書いて依頼するよりは素早く作業を続行することができ、エンジニアからデザイナに頼まなくても自分でデータを書き出せることは便利だったり、このデザインデータ新しい？、どこにデザインあるんだっけ？っていうのが、「Figma みて」というだけでそういった確認なしに Figma を開いてすぐ会話が始められることも良かったと言ってもらえました。
最新版のデザインの共有が楽になった。
Sketch の場合、プロトタイピングツールや指示書などを共有しようとすると、別のツールに対して同期をしなくてはいけないですが、ミスして同期をしていなかった場合、最新のデザインデータを見ることができないことがたまにありましたが(汗)
同じように、デザインデータの確認で個別に PNG に書き出したり、遷移図をPNGに書き出すこともありますが、そのとき同様のことがありました。
Figma でプロトタイピングやデザイン・遷移図を確認できるので、最新版ではない！のミスをなくすことができました。
コメント機能は今のところ活用し切れてない
Image may be NSFW.
Clik here to view.
画面に対してコメントが残せる機能がありますが、実際あまり使う機会がありませんでした。
メモとして残すことはありますが、ディスカッションをすることはありませんでした。
理由としては、席が近いのでそこでコミュニケーションを取ってディスカッションすること方がまだスムーズに開発ができていました。
まとめ
今回は、Sketch から Figma に移行してチーム間でのコミュニケーションがしやすくなった話を書きました。 結果的に、デザイナはもちろん、チーム間での開発中の確認の手間が減り、開発がスムーズになった感覚がチーム間でありました。 Sketch データからの移行も簡単なので、Figma を使ったことがない方はすぐ始められる・操作方法もさほどかわらないので、使って見ると良いと思います。 チームメンバーに話をしてみると興味を持ってもらえるかもしれません。
cookpadTV は、料理上手な有名人や料理家がクッキングLIVEを生配信しています。 是非ダウンロードしてクッキングLIVEを楽しんでみて下さい！
