Yahoo!フリマのダークモード実装におけるデザイナーとエンジニアの協働プロセス
こんにちは、Design Executive Center CX部CX2チームのRisaです。
今回の記事では、Yahoo!フリマに追加されたダークモード機能(背景を暗くして目の負担を減らし、バッテリーを節約する機能)についてコマースカンパニーリユース統括本部の皆様にインタビューし、ダークモード導入の背景や、デザイナーとエンジニアがどのように協力してこの機能を実現したのか、さらに業務を進めるうえでの効率的な管理方法や円滑なコミュニケーションのための工夫についてお話を伺いました。
Risa:Yahoo!フリマの業務にあたり各メンバーの役割について教えてください。
菅野 : Androidチームのリーダーを務めています。このプロジェクトでは、ダークモードの設計方針の決定と作業の割り振りを担当しました。また、技術面でサポートを提供し、プロジェクト全体の進行を管理しました。
照井: デザインチームのリーダーを務めています。イラストやアニメーションの作成、そしてダークモード対応に際して必要なバナーなどの販促クリエイティブのガイドライン改訂を行いました。必要に応じてマーケティングチームやYahoo!オークションなどの他部署との連携を図り、プロジェクトがスムーズに進行するよう動きました。
加藤:デザインチームの一員として、プロダクトのUI/UXガイドラインの推進を担当しています。ダークモードの最適化においては、特に色の調整と視覚的なバランスに注力しました。
惣元:Yahoo!フリマのフロントエンド領域の部長を務めています。プロジェクトのリリースタイミングを管理しました。また他部署との調整を行い、プロジェクトが円滑に進むようにサポートしました。
ダークモード実装のきっかけとツールを活用したコミュニケーション
Risa:では、早速ですが、Yahoo!フリマにダークモードを実装することになったきっかけについてお聞かせいただけますか?
菅野:以前からAndroidのさまざまな機能開発に関わっていたのですが、その中で、他社のフリマアプリや社内のサービスがダークモードに対応しているのを知り、興味を持ちました。そこで、ダークモードを実装してみたいと考え、上長の惣元に相談したことがきっかけです。また、デザイナーチームにも相談したところ、非常にやりたいという前向きな声があったため、本格的に実装に向けて動き出すことになりました。
Risa:そうなんですね。さまざまな要因はあるとは思いますが、競合の存在がヒントになったという感じでしょうか?
菅野:そうですね。はい。
Risa:なるほど。プロジェクトを進めるにあたり、さまざまな方とやり取りをされたと思いますが、エンジニアとデザイナーのコミュニケーションで、何か工夫した点はありますか?文字だけでは伝わりにくい部分もあったと思いますが、工夫したことがあれば教えてください。
菅野:そうですね。ダークモード対応はアプリ全体のテーマを変更する必要があるため、各画面がきちんとダークモードに対応しているか確認する必要がありました。そのため、Slackに加え、Microsoftのタスク管理ツールである「Planner」を活用しました。アプリの各画面をタスク化し、その中にダークモード対応後のスクリーンショットを添付することで、デザイナーがレビューやチェックを行う際に、証跡がきちんと残るようにしました。この方法を各タスクごとに徹底しました。
Risa:このプロジェクトは何人くらいで進めたんですか?Slackのグループでやり取りしていた感じですよね。
菅野:はい、そうですね。エンジニアが6名で行いました。
照井:デザイナーも5名程度で進めていました。
Risa:それぞれ担当に分かれて作業していたのですね。
菅野:そうですね。Androidチームはタスクを事前に作成していたので、各メンバーがそのタスクを取って対応しました。タスクが終わったら、デザイナーにチェックをお願いする形で進めました。
照井:デザイナーは、まず全体の画面をFigmaのバリアブル機能を使いダークモードカラーに適用して見え方を確認しました。この際に使用したダークモードカラーの設定は加藤さんに中心となって進めていただきました。全ての画面にバリアブルカラーが適用されているかどうかや、見え方におかしなところがないかなどの不具合の確認は5人のデザインチームメンバーで分担し、効率的に確認ができたと思います。
Risa:デザインが上がるのが早かったですね。事前に準備していたのですか?
惣元:そうですね。デザイナーからダークテーマ対応のデザインが早く上がってきました。準備されていたのでしょうか?
照井: 2023年11月のYahoo!フリマのリブランディングの際にダークモードのリリースも想定して出来るところから準備をしていたので、カラーパレットも用意していました。
加藤:そうですね。ダークモードを取り入れたいと常に考えていたので、それを見越してリブランディング時にカラーの構成も一緒に考えていました。そのベースがあったおかげでスムーズに進みました。
Plannerを活用したタスク管理方法について
Risa: Plannerについてお話しいただきましたが、具体的にタスクはどのように管理されていましたか?
菅野:タスク管理はPlannerで行い、実際のコミュニケーションはSlackで行っていました。Plannerは過去にYahoo!フリマのリブランディング対応にも使用しました。その際、デザイナーとのやり取りでラグが発生したり、添付画像の枚数制限など課題点もありましたが、タスク管理自体は非常にやりやすかったです。今回はPlannerでタスク管理を行い、やり取りやスクリーンショットの共有はSlackで行うことで、その課題を改善しました。ただ、Microsoft365の利用環境の変更で、Plannerが今後使えなくなるため、別のツールを検討しています。
Risa:このツールは、皆さんがプロジェクトや案件で普段から使っていたものですか?
照井: 普段の案件ではJiraでタスクを管理しているのですが、リブランディングなどの大きなプロジェクトが発生した時には、Jiraとは別で管理するためにPlannerを使うことがありました。タスク状況をカンバンボードやグラフ機能などで追いやすいので、こういったたくさんの人数で動くプロジェクトではとても便利でしたね。 ただ、Plannerを毎日細かくチェックする習慣がSlackに比べて薄かったので、その点は課題でしたね。
Risa:やはりそういった側面はありますよね。
照井:その点Slackは毎日確認するものなので、修正のやり取りを漏らしにくいというメリットがあります。普段使っているツールなので、やり取りも慣れていて進めやすかったですね。併用して進めて良かったと思います。
業務の通常案件とダークモード対応の作業バランスについて
Risa:通常業務もやりながらダークモード実装のプロジェクトも進行されていたかと思いますが、作業バランスはどのような割合で進められたのでしょうか?
菅野:そうですね。メンバーそれぞれでバランスが異なりますが、基本的にはサービス戦略に基づいたビジネス案件を優先的に進めなければなりませんでした。そのため、通常案件に比べてダークモードの優先度は低く、稼働率も低かったのですが、空いた時間を有効に使ってダークモードを早くリリースするように心がけました。
Risa:このプロジェクトはどれくらいの期間で完成したのでしょうか?
菅野:今年4月に「やりたい」と言い始めて、リリースできたのが10月中旬くらいだったので、約半年かかりましたね。
Risa:なるほど、やはり通常の業務もありながらだと大変ですよね?
菅野:そうですね。アプリのリリースは2週間おきに行っていますが、バージョンごとに タスク量の波があるため、そのバランスを取るのが大変でした。すべてのバージョンに対応できたわけではありませんが、案件のタスク量的に余裕があるバージョンではできるだけ対応するようにチームへの声かけを行いました。
惣元:通常のビジネス案件とは異なり、エンジニアやデザイナーが「この機能をやりたい」と発信してプロジェクトを進めたので、バランスを取りながら開発を進めることができたのではないかと思います。
Risa:計画通り、約半年で進められたのですか?
菅野:そうですね。目標としていたバージョンにはリリースできましたが、初期の見積もりが甘く後半にかけてダークテーマへの対応に多くのリソースを割いてしまいました。次回はこの点を改善したいと考えています。
デザイン修正発生画面の管理方法について
Risa:その意欲は素晴らしいですね。では、デザインの修正が必要になった画面の管理方法について教えていただけますか?
照井: 主にSlackを使って管理していました。発生した修正に関してデザイナー同士でこまめにコミュニケーションを取り、対応に時間がかかるものなどについては別途チケット化してタスクを可視化することを心がけました。これにより対応漏れや期限切れがないように進めることができました。
加藤:そうですね。修正に関してもSlackを使うことで連携が取りやすくなったと感じています。以前よりも漏れが少なくなり、改善できた点だと思います。
照井:さらに時間の制約もあったので、定例ミーティングが早く終わった際などの隙間時間を活用して全員でダークモード対応に取り組む時間を設けました。そうすることで作業がかなり進みましたし、各自の進捗の確認や疑問点の解消もできました。
Risa:コミュニケーションが活発で、素晴らしいですね。ダークモード作業にかける時間の使い方で、特に効率的で良かったなと思うものはありますか?
菅野:Androidメンバーは普段、ペアプログラミングを行っています。ペアプログラミングでは毎日メンバーをシャッフルしてペア決めを行っています。メンバーは全員で6名ですが、日によってペアが組めないメンバーがいる場合には、一人で対応することもあり、その時間をダークモード対応に充てました。ペアプログラミングを取り入れることで、知識を共有しながら効率よく作業を進めることができました。
Risa:二人一組での作業はどのように進めているのですか?
菅野:普段のビジネス案件では、ZoomやTupleといったツールを使って画面共有しながら一人が指示を出し、もう一人が実装する形で作業しています。役割はタスクごとに交代するようにしています。
Risa:それは興味深いですね。
菅野:そうですね。ソロの人が偏らないようにしながら、さまざまなメンバーにダークモード対応をしてもらいました。役割を交代することで、知見を共有できるメリットがあります。
Risa:そのやり方だといろいろなアイディアが出てきそうですね。
菅野:一人で作業するよりも、誰かと会話しながら進める方が良いですね。
ダークモード最適化とカラービジュアル刷新によるユーザー体験の向上
Risa:次に、イラストとアニメーションの追加とビジュアルの刷新について教えてください。
照井: 私がメインで担当しました。ダークモードに対応する前の画面では、イラストが説明の補足情報としてうまく機能せず少しわかりにくい部分がありました。加えてイラストのトンマナも画面ごとにバラバラだったりという課題もありました。そういった課題を解消するために全画面のイラストを洗い出して見直し、必要な部分はすべて描き直しを行いました。そして、イラストに関してもダークモードカラーの適用が必要だったため、イラストのダークモード用カラーパレットも合わせて作成しました。
また今回、購入や出品などのユーザーアクションが発生する画面にはアニメーションを導入しました。アニメーションを入れることでよりフィードバックが直感的になりますし、視覚的にもワクワク感や期待感を演出することができると考えたためです。
Risa:イラストはどのくらいの点数を描きましたか?
照井:アニメーションも含めて、60点ほど描き直しました。
Risa:すごいですね。カラーのダークモード最適化についてはどうですか?
加藤:リブランディングの時にダークモードを見越してカラーシステムを組みましたが、実際の画面で不都合が生じた部分がありました。例えば、プライマリーカラーの赤はそのままでもアクセシビリティ上は問題ないのですが、実際はダークモードに適用すると目にチカチカした印象を与えてしまうため、ライトモードとは少し違う色味に調整する必要がありました。
こういった調整が必要な箇所がないか、全画面をひとつひとつ確認していきました。アクセシビリティを考慮しながら目に優しい配色を実現できたと思います。
Risa:かなり大変な作業ですね。
加藤:コンポーネントは共通化されていますが、全画面を見て調整するのには時間がかかりました。しかし、数値だけではわからない見え方や、色が画面に与える印象にも気を配ることができました。
Risa:この比較や検証はどのくらい重ねたのですか?
加藤:具体的な回数は数えていないのでわかりませんが、いくつかの案を出し、周囲とコミュニケーションを取りながら調整しました。
Risa:最終的にはどのように決定しましたか?
加藤:難しいところではあったのですが、チームの意見を尊重しつつサービスとしてのあるべき姿・目指したい姿に立ち返りながら考慮し、総合的に判断しました。
リリース後の作業ふりかえりについて
Risa:リリース後のふりかえりはどのように行いましたか?
菅野: 作業のふりかえりでは、負担の偏りが問題として挙がりました。もともとは自由にタスクを取るルールでしたが、個人で作業するタスクはダークモード対応以外にも多々あります。そうなるとどうしてもダークモード対応のタスクを優先的に着手することができていなかったため、途中からタスクをメンバーに均等に 期限をつけて割り振ることで改善しました。
また、今回のダークモード対応についてSNSでのつぶやきなどのうれしい反響がありました。この記事をきっかけにさらに多くの方に使っていただけると嬉しいです。
照井: デザイナーも同様で、他の業務と並行しながら進める必要があり、優先度が下がりがちな面もありました。特定の作業時間を設けて全員で対応することや、リマインドをまめに行うなどのコミュニケーションを図ることで少しずつ改善しながら対応することができました。
加藤:リモート作業だからこそ、声かけが大事だと感じました。想定していたバージョンでリリースできたのは良かったです。
惣元: 普段のビジネス開発ではチームメンバー以外とを実施する機会は少ないものの、今回はデザイナーチームと共にを行い、次回に繋げることができたと感じています。ふりかえりの中で、個々の作業負担が偏ることがあると気づき、これを改善するために途中からタスクを具体的に割り振り、リモート環境でのコミュニケーションを重視しました。KPT(Keep, Problem, Try)を活用してプロジェクトをふりかえり、次回のプロジェクトに活かすことを目指しました。
リモートワークの中で、効率的なコミュニケーションの重要性を再認識し、より良いチームワークを築くことで、チームの成長と次なる成功へのステップとしました。今回のように自ら機能を提案し、それを形にする文化を大切にしながら、チームとしての力をさらに高めることを目指しています。
Yahoo!フリマのダークモード対応プロジェクトを見て、各メンバーが自分の役割をしっかり果たし、チーム全体で協力しているのがすごく素敵だなと思いました。このプロジェクトを通じて得た経験を活かして、これからもどんどん良いものを作っていくんだろうなと感じます。彼らのチームワークと前向きな姿勢が、これからの開発にもさらに良い影響を与えていくと思いました。
取材依頼等のお問い合わせ
LINEヤフーDesignは随時、取材のご依頼をお待ちしております。公式XのDMにお問い合わせください。
https://x.com/lydesign_jp