inFablic | Fablic, inc. Developer's Blog.

フリマアプリ フリル (FRIL) を運営する Fablic の公式開発者ブログです。Fablic のデザイナー・エンジニア・ディレクターが情報発信していきます。

デザイナーとエンジニアの連携をスムーズにする8つの思いやり

こんにちは!デザイナーのkobachiです。
普段は主にキャンペーンLPのデザインとコーディングをしています。
Fablicはデザイナーとエンジニアの距離が近いことが魅力の1つでもあり、エンジニアに協力してもらうことが多いです。
今回は、エンジニアと連携を取りながらスムーズにキャンペーンLPをリリースする方法を紹介します。せんべいとか食べながら読んでいただけると幸いです。

Fablic Advent Calendar 17日目の記事です。いつの話だ!

デザイナーとエンジニアのスムーズな連携が必要

Fablicでは、デザイナーがマークアップやコーディングをして、エンジニアにコードレビューを依頼しています。 特にキャンペーンLPは公開の期日が決まっており、かつ期間も短い場合が多いです。
そのため、LPの公開にあたってデザイナーとエンジニアのスムーズな連携は必要不可欠です。

概要

レビュー依頼編

  1. レビュワーはbotに選んでもらう
  2. レビュー依頼は案件が決まったらすぐに行う
  3. レビュー期間は余裕を持って2〜3営業日ほど取る
  4. エンジニアに伝わりやすい言葉を使う

わかりやすいプルリクエスト編

  1. タイトルに期日を書く
  2. どういう状態か明確にする
  3. スクリーンショットによるBefore→Afterを載せる
  4. PRを出したあとは担当レビュワーに一言かける

レビュー依頼のしかた

1.レビュワーはbotに選んでもらう

f:id:kobachicchi:20171228152423j:plain

friltanというbotに「えらんで」とお願いすることでレビュー担当者を選んでいます。
これは特定のエンジニアに負荷が偏らないようにするためです。

2.レビュー依頼は案件が決まったらすぐに行う

このレビュワー選抜の儀は、キャンペーンの実施が決まったタイミングで依頼しています。
いきなり前日に依頼されてもタスクの調整ができないですし、選ばれたエンジニアがびっくりしてしまいます。

3. レビュー期間は余裕を持って2〜3営業日ほど取る

コードレビューは、メインのタスクの合間に見てもらっています。
そのため、余裕をもった期間を設定して依頼しています。

4. エンジニアに伝わりやすい言葉を使う

スムーズなコミュニケーションのため「デプロイ」「リリース」など、エンジニアに伝わりやすい言葉を使っています。
そうすることで、「あ〜、多分あれのこと言いたいのかな?(察し)」のような、相手の察し力に頼る属人化したコミュニケーションになることなく進められます。

わかりやすいプルリクエスト

エンジニアが見て、わかりやすいプルリクエスト(PR)を書くように心がけています。
実際のPRの様子はこちら。

f:id:kobachicchi:20171228173209p:plain

意識している点は4点。

1.タイトルに 【◯月◯日まで】 と期日を記載する(画像にないけど)

タイトルに期日記載して、〆切を明確にするとわかりやすく事故が防げます。

2.どういう状態か明確にする

「◯◯は調整中なので、それ以外をレビューしてください」等、見てほしいところと見なくてもいいところを明確に伝えるようにします。
本当は完全にFIXした状態で渡せるのがベストですが、どうしてもそうすることができない場合も少なからずあります。
そういった場合は、ちゃんと伝えることでエンジニアの時間を無駄にしません🙏

3.スクリーンショットによるBefore→Afterを載せる

f:id:kobachicchi:20171228181048p:plain

LP自体のスクリーンショットのほか、明確にどこが変わったのかBefore→Afterで載せています。

f:id:kobachicchi:20171228181423p:plain

また、if文などの分岐を使って「◯◯のときはこうなって、△△のときはこうなる…」といったように、ステータスによって見た目が違う場合などは視覚的な情報として残すと特にわかりやすいです。

4.PRを出したあとは担当レビュワーにSlackで声を掛ける

こうすることで、レビュワーが気付かなかった…ということが防げます。
Githubのメンションだけでは見落としてしまったり、他タスクを持っていて忙しかったりするので、適宜リマインドしてあげると平和です。

レビューからデプロイまでの流れ

PRの内容に問題がなければ、レビュワーからイケてる画像とともにLGTMをいただきます。

f:id:kobachicchi:20171228192409p:plain

いよいよ作業ブランチをmergeします。
そのあとはさきほど登場した friltan というbotに「friltan release 作業リポジトリ名」と声を掛けると…

f:id:kobachicchi:20171228193650p:plain

リリース用のプルリクエストを作ってくれます!friltan、やるじゃん

デザイナーは本番デプロイの権限がないため、このあとの本番デプロイ作業はレビュワーのエンジニアにお願いしています。 本番デプロイが完了すれば、作業は完了です!(本番確認作業などはありますが今回は割愛!👏 )

まとめ

  • LPの公開にはデザイナーとエンジニアのスムーズな連携が必要
  • エンジニアの負荷やレビュー期間を考慮して依頼するべき
  • エンジニアがわかりやすいようにプルリクエストを書いている。思いやり👏

もっと良い方法やアドバイスなどがあったらぜひご紹介ください!