デザイン負債を返済する - クラシルのデザインの展望2020
こんにちは、プロダクトデザイナーのミカサ(@acke_red)です。
クラシルはリリースから3年半が経過し、2000万ダウンロードを超えるアプリに成長してきました。しかし一方で、この3年半できちんと取り組めていなかったことがあります。それはデザイン負債の返済です。
そのアプローチとして、2019年の後半からデザインリニューアルの設計・実装を進めており、来年の2020年にかけてクラシルのデザインでは大きな取り組みの１つなっているので、本記事ではそのことについて紹介していきます。
この記事は dely Advent Calendar 2019 の13日目の投稿です。
12日目はsakuraさんの「初めてPMっぽいことやって失敗した件」でした。
デザイン負債とは？
デザイン負債について簡単な定義をしておきます。デザイン負債を2種類に分けると、内部一貫性の欠如と外部一貫性の欠如に分かれます。
内部一貫性の欠如
同じプロダクトの中に、意味合いは同じなのに形の異なるボタンがたくさんあることを想像してみると分かりやすいかもしれません。複数いるデザイナーが毎回どのボタンを使えばよいのかわからない、エンジニアもどれを実装上で使い回せばよいのかわからない、といった非効率が生じます。
この状態は、プロダクトで使われているあらゆるUIコンポーネントが、ルールに従って定義されていないことを意味します。
クラシルの場合、あらゆるUIコンポーネントをルールベースで定義できておらず、エンジニア・デザイナー間の共通言語もなく、生産性が高い状態を作れているとは言えませんでした。
外部一貫性の欠如
こちらは、いわゆるトレンドからの遅れを意味します。UIグラフィックの見た目の部分の話もありますが、コンポーネントの構造部分についても当てはまります。
クラシルの場合、リリースから3年半の間ではUIトレンドにも大きな動きがありました。iOSではFluid Interfacesの登場、Material DesignはもはやAndroidのためのガイドラインではなく、全プラットフォームにおけるデザインシステムを作るためのデザインシステムとして生まれ変わったメジャーアップデートもありました。
このような時代の流れにうまく適合させていかなければ、その時々で最適な設計ができなくなってしまいます。
デザイン負債の返済によって得られるもの
上記のようなデザイン負債を返済するべく、クラシルではUIコンポーネントを刷新することによるデザインリニューアルに着手し始めました。
負債を返済することによって得られるメリットは、クラシルであれば大きく以下の2つを挙げることができます。
プロダクトの拡張に備える
クラシルは食と暮らしの中にある課題を今後より広く解決していくプロダクトとして変化していきます。
新しい機能を追加する上で、既存のコンポーネントの枠組みの中で作ろうとすると、どうしても最適な設計ができなくなってしまうという弊害があります。ベストな設計をするには、一度既存の枠組みを取っ払って、すべて0からUIコンポーネントの構造を作り直すしか解決策はありません。
今後のプロダクトのスケールに耐え得るデザインを生み出すことができるといった点で、デザイン負債の返済をすることは大いに価値があります。
開発チームの拡大に備える
クラシル開発チームは徐々に拡大してきています。
今後より人数が増えてきたとしても、品質を落とさずに、効率良くデザイン・開発を進めることができるように、集団生産性の向上がより求められるようになってきました。負債を返済することで、より品質の高いものをよりスピード感を持ってデザイン・開発することが可能になります。
どうやって取り組んでいるか
まだリニューアルプロジェクトはデザイン・実装段階ではありますが、現時点での取り組みの事例をいくつか紹介します。
コンポーネント刷新・リファクタリングへのリソース配分
開発部全体のロードマップとして、コンポーネント刷新・リファクタリングに十分なリソースを割けるように策定されています。一番はじめのコンポーネント定義は細部の作り込みや全体最適を丁寧に考えることが必要ですが、そこには一定の工数と時間がかかるものなので、十分なリソースが割けることは重要な要素の1つです。
デザインシステム
今回のコンポーネント刷新に伴い、デザインシステムの構築を始めました。カラーやタイポグラフィのベース要素、コンポーネントライブラリ、デザインガイドラインなど、リニューアル作業と同時に整備を進めています。（来年のどこかで、このことについてもブログで書けたらと思います。）
Sketch→Figma
2019年からSketchからFigmaに完全移行しました。複数人のデザイナーが作業しやすいように、綺麗なデータを作れるように制作しています。また、エンジニアチームとのUI・コンポーネントの共有もFigmaでリアルタイムで行えるようになり、連携がスムーズになったと感じています。
コンポーネント設計の方向性
コンポーネントのカテゴリ分類、命名規則、汎用性の持たせ方など、iOSエンジニア、Androidエンジニア、デザイナーの1名づつでコアな方向性を探りながら、コンポーネント定義を進めています。iOS/Android/Webでサービス展開するクラシルでは、全プラットフォームを横断できるコンポーネント定義を目指しています。
デザイン原則
コンポーネント定義については、Material Designの原理原則を大いに参考にしていますが、そこをベースに、どういったUIがクラシルのユーザーさんにとってベストなものなのか、クラシルらしい表現なのか、工数をかけてでも実現する価値があるのか、といったことを踏まえて新コンポーネントを考えています。そのためにも、クラシルならではのデザイン原則を徐々に言語化して確立していく必要性を感じています。
2020年に向けて
ここまでクラシルで取り組んでいるデザイン負債の返済、それに伴うデザインリニューアルについて話してきました。現在、デザイン・実装中のものも含めて来年にかけてのリリースを目指し、チーム一丸となって開発しています。
来年の大きなテーマとしては、デザインリニューアルをすることでデザイン負債を返済し、将来のスケールに耐え得るデザインシステムの基盤を構築することです。それにより、今より品質の高いプロダクトをより効率良く、ユーザーさんに届けられるようになります。
そして、今より使いやすく、より美しいデザインを提供することで、ユーザーさんの料理体験をもっと快適で便利なものにできるよう、2020年も引き続き注力していきたいと思います。
宣伝：一緒にクラシルを作りませんか？
クラシルを運営するdely開発チームではエンジニア・デザイナー全方面で募集をしています。ご興味のある方はこちらをご覧ください。
dely Advent Calendar 2019 の13日目は、サーバーサイドエンジニアの高橋さんが投稿してくれます。お楽しみに！