七転八倒しながらデザイン負債に向き合い、スタイルガイド作成に至った話 - LIFULL HOME'S Android App Style Guide 1
不動産ポータルサイト・LIFULL HOME'S Androidアプリのプロダクトデザイナーを務める山田和代です。先日、同じチームで働くデザイナーの森 裕恵さんと一緒に、Androidアプリの運用に用いる LIFULL HOME'S Android App Style Guide を作成したので、その作成までの経緯について（森さんと山田の小気味良い？ 会話を交えながら…）ご紹介したいと思います。
また、次回公開される記事では、具体的なStyle Guideと作成経緯について紹介する予定ですので、合わせてお楽しみいただけたらうれしいです！
🤯 突如Androidアプリのデザインを担当することになったら、どんなことがあるか
🌪️ 異常に頑固なデザイナーが、立ちはだかる「デザイン負債」に真っ向から対面するとどのような状況になるか
🔦 その中からどんなふうに解決の道筋を立てたのか
この記事は非常に長いですが、上記について生々しく面白がることができるかなと思います。日々、デザインの運用で奮闘されている方の誰かお一人にでも「自分も引き続きがんばってみるか」と感じていただけるといいなと思っています。
神の啓示によりアプリのデザインをすることに
私はLIFULLに入社して以来、長くLIFULL HOME'Sのウェブサイトの改善をするチームで働いていたのですが、2020年の4月にLIFULL HOME'Sのアプリチームへ異動となり、前任のデザイナーからAndroidアプリのデザイン業務を引き継ぐことになりました。まさかこの自分がモバイルアプリのデザインをする人生になろうとはな...と口をあんぐり開けつつ、チームへジョインします。
LIFULL HOME'S Androidアプリは、GoogleのMaterial Designを適宜取り入れながらUIを構成していますが、ジョイン当時、Material Designの知識も乏しく、モバイルアプリの技術に関しても知見ほぼゼロで異動してきた私が、右も左もわからないまま残されたドキュメントとデザインデータと格闘する日々が始まりました。
👩🦰森：山田さんがアプリチームにきた時ってこんな感じだったんですね、全然知らなかったです
🧑山田：気づいたら3年経ってた…怖！
LIFULL HOME'SのAndroidアプリチームは非常にフレンドリーなメンバーで構成されていて、異動先がここで本当にラッキーだったと思っています。しかしながら、そんな環境に恵まれていたにもかかわらず、一人のデザイナーとしては毎日強烈な不安に襲われるようになりました。
先述した通り、モバイルアプリのデザインをするには自分は知識も経験も乏しすぎる、異動に伴った他業務も多く圧倒的に自分の作業時間が逼迫している。かつ時はコロナ禍、全社的にリモートワークに切り替えたタイミングで、ちょっとした疑問や質問もチームメンバーに聞きづらいという状況でした。
前任のデザイナーが残してくれたデータを改編することが怖い。ただただ怖い。これが無くなったら全てが終わる。この状況をどうにかしたい、どうしたらいいんだろうと悩みながら毎日UIを扱うことは正直、当時の私にとって非常にしんどかったです。
少しずつチームとプロダクトに慣れ、その状況をどうにかしたいと思う心境に
そんな中、がむしゃらに業務をおこなっていくにつれ、アプリデザイン歴が浅い私でも実際にリリースされているUIに対して「これは少しあしらいに違和感を感じるな、なぜだろう？」と感じとるようになります。
例えば、コンポーネントの見た目の印象とテキストの表示内容が食い違っている、などと感じてチームに相談すると、Material Design で提供されているコンポーネントを施策の特異性に応じ改造の上利用してしまっているものだったりする。その原因には、Material Design の理解度にばらつきがあるということがあるんだなぁ、そんなことを感じるようになりました。
当たり前の話でお恥ずかしいのですが...Material Design はGoogleから提供されているデザインシステムのため、今まで使えていたものもGoogleによるアップデートなどにより今後は使えなくなるといった可能性もあり、コンポーネントに特殊に依存した使い方をしていた場合などには、解消のために別途改修が必要になるなど、後の負債になります。
実際の業務でそういった事態に差し当たることもあり、なぜこういうことが起こるのか、に重点を起き「現在のデザイン運用の問題点」をチームで深堀りする機会を設けました。
以前書いたこちらの記事でも触れたんですが、「運用の精度」が重要になるサービスデザインにおいて問題を見つけた時、私は「その問題はなぜ起きたのか」「この手当で、本質的な課題解決になるか」を追求することを非常に大事にしています。
その理由は、（もともと性格が粘着質で頑固だということもありますが...）それを手段として選択しなければならない状況だったとしても、表層的な課題解決ではプロダクトに遺恨を遺したままだし、いつかまた似たような問題が引き起こされる可能性が高い。未来のそのタイミングで実現したいことの妨げ（＝負債）になる。
そんな仕事は、サービスを運用するデザイナーとして非常に不誠実な在り方だと考えているからです。ユーザーとクライアントに対してもそうだし、チームに対しても不誠実だと感じています。何より、長い運用の歴史を持っており今後もその役目を終えるまで半永久的に運用・持続されるサービスにおいて、「持続可能なデザイン運用」は最も重要な要件だと捉えているからです。
プロダクトの歴史に基づく功罪といえる「暗黙知」
これまで、LIFULL HOME'S Androidアプリは極めて少数のデザイナーで運用・改善されてきました。引き継ぎを受けた当時も、このプロダクトにとってそのフェーズで、それに適したチームのサイズなのだという理解をしていました。
しかしながら、少人数でメンテナンスしていることから自然発生していた「暗黙知」「慣習」があったことも事実で、自分がどれだけデザインへの意識が高いメンバーに恵まれていても、オーナーシップを持てる環境だったとしても、これまでの「暗黙知」「慣習」への理解がおぼつかずこれだけ悩むということは、これまで以上にUIの採択や運用方針について深く考え、他職種から協力を仰ぎ「プロダクトとチームの課題」を体系的に解決するタイミングなのでは。それが、自分がこのチームにジョインした意義なのでは。と徐々に感じ始めます。
じゃあどうする？ 職種横断でディスカッションしながら、実際に歩ける道筋を探す
LIFULL HOME'Sアプリの開発チームは、サービス企画・デザイナー・エンジニアで構成されていますが、その各職種の観点を網羅した上で解決策を模索したい、という動機から三職種から全て立ち会ってもらってさらなる深堀りを行いました。
単純な「ずれている！」という観点や指摘だけを頼りにしては、「なぜずれているのか」＝ サービス特性や要件を加味した上での妥当性があるか明らかにできないため、原因をさらに深堀りするために当時のドキュメントを探る必要があります。しかしそれが困難だった場合、どん詰まりになります。そんなふうに思考停止に陥り全てが頓挫してしまうことを恐れた私は、チームでの発散を経ることでまずはメンバーの感情や習熟度をつかみつつ、解決の現実的なラインを探ろうと考えました。
また、そもそも何が起きている？ 何に困っている？ というメンバーの実際の状況を他職種からも発散してもらうことで、取り組みの意義を感じ取り、力を貸してもらいやすいムードをつくろうとしたのだと思います。
メンバーから出してもらった困っている事象（黄色のふせん）に対して、それはなぜ起こっている？ をしつこく遡ることができるようファシリテーションし、普段はちょっと言いづらいチームの問題点などもあえてどんどん発露していきます。そして、いくつかの項目の共通している要素をピックアップします。すると、
じゃあ何を基準にする？ がない。どれが正しいデザインなのかを判断できない
量が多すぎてMareial Designをどうやって学べばいいかわからない。その結果、必要な時に見に行くだけになっている
都度考えて決めている。だから迷う
などなど、少々耳の痛い言葉が重要そうなものとして思えてきます。
これらの深堀りを経て、レベル感を問わず「叩き台」の限りだったとしても、何かしら「基準」にできるものを作り始める必要があるということと、チームメンバーがその「基準」へ気軽に・インタラクティブにアクセスできる環境、が重要であるように思えてきました。
👩🦰森：このへんのやりとりとかドキュメント、Style Guideが完成してから見せてもらいましたよね。こういう経緯があったんですね！
🧑山田：実作業に入る前に先に見せるべきでしたよね...ほぼ忘却してました！ でも、これがスタートになったんだと思うとちょっと泣けてきてしまう。ちょうど2022年の冬頃に施策振り返りの延長としてやったんだけど、ここから1年がかりでStyle Guide策定に至ったかと思うと本当に感慨深い...泣く...
とはいえ、ユーザーとクライアントへの価値提供のために日々施策は動いているわけで、デザイン負債の解消だけに自分の全コストを払うわけにもいかず、「最低限のコストで、一番意味のあるアプローチは何か」ということを執拗に模索していきます。頑固！
そうこうしているうちに、Material Design 3発表！ 踏襲を試みるも...
そんなことを考えながら日々の運用に携わっているうち、Googleから正式に「Material Design 3」が発表になりました。チームでも「ぜひMaterial Design 3 適用をやりたい」という声があがり、私も賛同の上、試しにMaterial Design 3 を適用したらどうなるのかを隙間時間で検証するようになりました。
しかし、着手してみて想像するその工数たるや...！ Material Design 3 を適用するために発生するだろう既存機能の改修と、その実施可否を問うていく工数を思うと、気が遠のいていくようでした。
自分がプロダクトデザイナーを務めるチームで新しいデザインスキームを導入する機会に恵まれるとは非常に幸福なことだが、「これが今一番自分がやるべきことなのだろうか...」という漆黒の闇に自ら再度突入していきます。Material Design 3のことを考える前に、根幹にある問題を解決しないといけないのではないか。それを為さない限り Material Design 3 適用も早期に頓挫するのではないか、とも感じました。
👩🦰森：ちょいちょい漆黒の闇に突入していきますよね、山田さん
🧑山田：根が暗くて...
その運用に愛はあるのか？ と自問自答しながら、上長に誘われ、ようやく実働開始
「Material Design 3 のことはいったん、いったん忘れよう！」そう思い切った矢先、上長から「LIFULL HOME'S Androidアプリにおける、デザインのガイドラインのようなものを作成してはどうか？」と提案されました。
前任者は非常にていねいにデザインデータを受け渡ししてくれましたが、それでも自分の知見不足により非常に苦労していたところもあって、Material Design と、LIFULL HOME'Sの在り方を合体させた、手軽に扱えるルール集のようなもの。そんな類の必要性は十分理解できていたので、「考えてみます...」と生返事をしつつも「どんなものがあったらいいのかなあ〜」ということを薄らぼんやり考え始めました。
考え始めたものの...これは長く運用されているサービスあるあるだと思いますが、基準を模索しようにも実際にリリースされているUIが正なのか、残されたデザインデータが正なのか、その差異の事由がわからないことにただ毎日悩み、それは自分の知識と技術が足りないからだと過剰に自己嫌悪に陥り、さらに何周か回って再度その問題点に執着する自分の頑固さにもナーバスになっていました。暗い。
一人で頭を燻し続ける私を見かね、上長から「あくまで、これから基準にするものなので、既存実装と差異があっていいのではないか？（汗）」とアドバイスされるも、私は「それで本当に運用に乗るのか？ 拡張性や妥当性を担保の上、破綻せず持続可能な運用になるのか？」「チームへ適用できず効用が乏しいのにデザイナーだけが満足するそれっぽいものをつくる、という一番嫌いな手段に自分が手を出すことにならないか？」という考えに囚われていきます。頑固の二乗！
それでも、日々の運用で「なぜここの処理がずれているのかわからない」と感じるたびに、「揃えたい……......一年かけて、ズレというズレを揃えるだけでチームのKPIも改善するんじゃないか……......」という情熱が毎日のように湧きあがります。さらにこの頃、採用活動にも携わっていたために、「自分が辛かったことをいずれの後継に残したくない」という思いを募らせながら日々仕事をこなすようになりました。
少しずつでもいいから前に進もう！ となんとか思い直し、実際にエンジニアに公開バージョンの実装をみてもらって、デザインデータとのずれを洗い出してみたり、考えが進んだらドキュメントに残して、過去引き継いだデザインに関するドキュメントの再整理・棚卸しなどを続ける日々が続きました。
新規デザイナージョインにより、あらゆることが加速する！
そんな矢先！ 努力が実って同じチームに中途採用のデザイナーさんがジョインすることになります！
ジョインしてくれた森さんは私にない魅力を持ち合わせた人で、たびたび私が自ら漆黒の闇に突入しようとしている際に、明るく「こんなやり方はどうですか？」といつも手を差し伸べてくれる人でした。
森さんもAndroidアプリのデザインの経験はなかったため、一緒に学んでいくつもりでデータを共有したりルールめいたわずかなドキュメントやティップスを共有するうち、やりづらい点、デザイン運用の不明瞭な点も再確認できるため「やっぱり今のうちに基準をつくらないと…、今なら、今ならまだ間に合う！」という前向きな気持ちが湧いていきます。
本来ならば、森さんがジョインしてくれるまでにガイドラインの類が用意できていたらよかった。しかし、現実問題それは難しかった。そんな風に自分を情けなく思いながらも、森さんに「実は、ガイドラインのようなものを作ろうとしているんだけど、力を貸してもらえませんか...？」と相談したところ、「やりましょうよ！」と快諾！ 感激した私は、「森さんとなら、きっとやれる...！」と強く感じられたのでした。
以上、非常に冗長的に書いてしまいましたが、冒頭書いた通り、日々奮闘されているデザイナーの誰かお一人にでも「自分も引き続きがんばってみるか」と感じていただけるといいなと思っています。お読みいただき、ありがとうございました。
次回は、実際のStyle Guide作成のプロセスについて、詳しくご紹介しようと思います。一部、Style Guideの実際の中身についても触れる予定ですので、引き続きお読みいただけたら嬉しいです！
クリエイティブ本部 デザイン部 サービスデザインユニット
サービスデザイン4グループ 山田 和代
デザインプロダクション数社に勤務、多くクライアントワークに従事したのち2015年LIFULLに入社。入社以来主にLIFULL HOME’S 賃貸物件領域のサイトデザイン担当などを経て、現在LIFULL HOME'Sアプリのデザインを担当。（2023年6月時点）
LIFULL HOME'S アプリのご紹介はこちら iOS Android
この記事が気に入ったらサポートをしてみませんか？