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