こんにちは。UI/UXデザイナーの城です。
前回の記事では、山﨑による「Design Ship 2020でスポンサー登壇しました - Yappli Tech Blog」をお伝えしました。今回はその翌々週に行われたDesignship 2020 Extra Stageのパネルディスカッションで城が登壇した報告をさせていただきます。
【現在のセッション🤝】 freee 山本 伶氏・サイボウズ 樋田 勇也氏・ヤプリ 城 由美氏・ ヤフー 廣橋 孝紀氏・sakito氏（モデレーター） ／デジタルプロダクトにおける「デザインシステム」導入と運用#Designship2020extra pic.twitter.com/OjWkeZhMvw
— Designship (@Designship_jp) November 8, 2020
デジタルプロダクトにおける『デザインシステム』導入と運用
Designshipは様々なデザイン領域を超えて学び合い、国民の創造性向上に寄与することを目的としたカンファレンスです。出演したパネルディスカッションのテーマは「デジタルプロダクトにおける『デザインシステム』導入と運用」ということで、デザインシステムを導入して実際の運用がどうなっているかや、チーム全体で共有されている思想などをお話ししてきました。
ヤプリ以外では、ヤフーさん・freeeさん・サイボウズさんが参加されていました。会社の規模は違うものの、デザインシステムの運用の難しさなど共感する内容が非常に多かったように感じます。
Yappli CMS管理画面のデザインシステムについて
パネルディスカッションでお話しした内容をベースに、Yappli CMS管理画面のデザインシステムについて簡単にご紹介します。
デザインシステム導入の経緯
Yappliは2013年の会社創業以来、様々な状況の変化に対応しながら大きく成長してきました。その過程において、設計思想が統一できず担当メンバーがそれぞれの考えで手を入れてきたこともあり似たようなコンポーネントが乱立していました。結果として開発コストが高くなり小さな機能追加すらままらないような状態に陥っていました。 そこで、開発効率を上げ、且つユーザーの使い勝手を向上させるという目的のもと、CMSの土台を作り直すリプレイスプロジェクトが立ち上がりデザインシステムを導入することになったのです。
デザインシステムを作成するまでの流れ
このCMSのリプレイスプロジェクトでは、デザインシステムを作成する前にCMSの利用体験を整理する必要がありました。 Yappliには40種類以上の機能が存在します。それらの機能の設定をCMS上で行えるわけですが、レイアウトに特化した機能やデータ管理のみができる機能、またはその両方の要素を含む機能など様々です。1つの機能だけで独立したサービスができてしまうようなものばかりなので、一辺倒な整理をしてデザインシステムに落とし込んでしまうと体験を大きく損ねる可能性があります。そのため、各機能の使われ方を関係者と確認しながら議論を重ね、画面をどのように整理していくべきかをモックを作りながら詰めていきました。そこからUI要素を分解していき、最終的にデザインシステムに落とし込んでいったわけです。
デザインシステムのスコープと原則
Yappli CMS管理画面のデザインシステムは、変化を前提に構築しています。概してデザイナーは完璧なデザインシステムを作りたくなりがちですが、ガチガチに固めてしまうとプロダクトの方向性が少し変わっただけで対応できなくなる可能性があります。デザインシステム自体がサービスの成長を引っ張ってはいけないと考えているので、プロダクトのフェーズに合わせ、「ユルさ」を取り入れた設計を意識しています。
今後に向けて
プロダクトのメンバーが増えても開発スピードを落とさないように、UI/UXガイドラインやフローの整備を現在進めているところです。プロダクトの成長に柔軟に対応しながらも、よりよい体験を提供するためにUI/UXの強化をしていきたいと思います！
