プロダクトエンジニアリング部の海老澤です。 普段は LIFULL HOME'S の賃貸領域のフロントエンド開発をしています。
今回はLIFULL HOME'S の UI 構築を手助けするコンポーネントカタログ（以下「カタログ」）を作った取り組みについて紹介します。
最初にお断りしておくと、この「カタログ」はいわゆる 「デザインガイドライン」「デザインシステム」のことではありません🙇
背景
LIFULL では日々プロダクトの改善を行っており、UI の改修もそのひとつです。 しかし以前から複数のフロントエンドエンジニアが開発生産性と品質面での課題を感じていました。
開発生産性の課題
LIFULL HOME'S の UI はすべて、サービスのベースとなる「LIFULL HOME'S デザインガイドライン」をもとに設計されています。
このデザインガイドラインは現在 Adobe XD で公開されており、コードベースのものはありませんでした。 LIFULL HOME'S ではマイクロサービス化が進んでいるため、必然的に各リポジトリで同じような HTML/CSS をゼロから再生産しています。 共通利用できるコードがあれば開発生産性の向上にもつながるのに、それがないのはもったいないと感じました。
品質面の課題
UI の改修のすべてをフロントエンドエンジニアで受け持っているわけではなく、普段あまり HTML/CSS を触らないエンジニアが担当することもあります。 そのためマークアップやスタイリングの品質がまばらでレビュアーの匙加減で決まっているところがありました。
また、アクセシビリティ品質の担保にも課題がありました。 社内ではアクセシビリティを重視する文化が定着しており、LIFULLアクセシビリティガイドラインに準じてコーディングをしています。
しかしその品質をすべてのエンジニアが担保するのは非常に難易度が高いです。 フロントエンドエンジニアが改修する場合でも、複雑な js とアクセシビリティ要件が絡むコンポーネントの場合は開発に時間がかかってしまいます。
このような問題を解消するため、「誰もが汎用的に使える実装リファレンス集」がほしいと考えました。
実現したいこと
このカタログで実現したいことは以下です。
- プロダクトの技術スタックに依存せずコピー&ペーストできる
- マークアップとアクセシビリティの品質を備えていること
- カスタマイズに制約は設けないこと
1. プロダクトの技術スタックに依存せずコピー&ペーストできる
コンポーネントの展開方法には大きく分けて2つあります。 npmパッケージを配布して利用箇所でimportするやり方と、ファイルまたはコードのコピー&ペーストで展開するやり方です。
今回はコピー&ペーストを採用しました。
パッケージ化のデメリット
パッケージ化は以下の理由から開発生産性を損ねる可能性が高いと判断しました。
- カスタマイズの自由度が制限される
- サービスごとに多様な意思決定・UI 個別最適を行っているため、微調整がしづらくなる
- しくみが複雑化する
- カスタマイズ用のパラメータを追加し続けるとコンポーネント自体の使い勝手が悪くなる
- 改修の意思決定のためのコストがかかり、スピード感が損なわれる
コピー&ペーストであればコードだけ持っていって各サービスへの最適化もしやすいですし、必要な機能だけのせていけるため複雑化も避けられます。
採用技術とコピー&ペーストの親和性の高さ
LIFULL HOME'S はマイクロサービスが進んでおり、フロントエンドではさまざまな技術選定がされています。 ただ Tailwind CSS と Stimulus はほとんどのプロダクトで採用されており、既存の技術構成に後載せすることも比較的容易です。 そのためこれらをベースにコードを掲載していくことにしました。
Tailwind CSS は付与されたクラスから自動的に CSS を作成してくれるため、サービスに合わせてスタイリングの微調整が可能です。 Stimulus も以下のような特徴からコピー&ペーストとの親和性がとても高いです。
- バックエンドのフレームワークを問わない
- 依存関係がなくビルドシステムを必要としない
- アタッチも HTML に data 属性を付与するだけで良い
- 汎用的な振る舞いを切り出したコントローラの組み合わせで作れる
これらの理由からコピー&ペーストの方が開発生産性の向上のアプローチには良いと考えました。
2. マークアップとアクセシビリティの品質を備えていること
コンポーネントカタログに掲載されるパーツは、最低限のマークアップとアクセシビリティの品質を備えていなければなりません。
品質の高いものがコピー&ペーストできることで、利用するプロダクトの品質レベルが底上げされます。 アクセシビリティ要件を満たす実装はしばしば難しく知識と経験を要しますが、コピー&ペースト元のコードがアクセシブルであることで、ジュニアレベルのエンジニアでもアクセシブルなプロダクトづくりに貢献することができます。
3. カスタマイズに制約は設けないこと
使用にあたって改変の制限はありません。
このカタログでは 素 HTML + Tailwind CSS + Stimulus をそのまま載せているので、スペーシングや振る舞いの調整も容易です。 そこからコンポーネント化するのは各サービスの開発者に委ねており、特に縛りは設けていません。
このカタログはあくまでも「実装リファレンス集」としての機能のみを提供し、UI 実装の初動を速く正確に行うことを目指しています。
成果物
こうしてできあがったのが LIFULL HOME'S Frontend Recipes です。 開発は社内の有志3名で行いました。
フレームワークは Astro を使っています。 軽量かつ mdx でサクサク書けるためカタログサイトにはぴったりのフレームワークでした。
現在は以下のコンテンツを配信しています。
- Foundation
- カラートークン、アイコン、フォントなど最小限の要素
- Objects
- ボタン、カード、リスト、フォームパーツなどの Component
- role, aria-* の付与のほか、フォーカス時や強制カラーモード時でも見やすい状態を担保
ちなみに英語で作成されていますが、これは近年海外拠点にある子会社と一緒に開発することが増えているためです。
ポイント
コード出力形式の設定が可能
プロダクトに合わせて以下の設定が可能です。
- HTML <-> JSX の切り替え
- インデント形式の指定
- タブ or スペース、およびその数
- Tailwind CSS の prefix の指定
- 後から Tailwind CSS を入れたリポジトリで prefix を指定しているパターン があるため
アクセシビリティに関する注意事項の記載
コードをコピー&ペーストするだけでなく、見て学べるような作りにしました。
フォーカスリングの可視性や強制カラーモード時の表示など、ピンと来にくいものはサンプルコードで比較できるようにしています。
デザインガイドラインに掲載されていないコンポーネントも掲載
たとえばこちらの Q&A 方式のコンポーネントですが、デザインガイドラインには載っていません。
しかし実際の業務ではたびたび見かけるパターンのため、カタログには収録しています。 とにかくあるあるなパターンを集めていくことで開発生産性の向上を狙っています。
ちなみにガイドラインに記載されているコンポーネントについてはラベリングを行っていますので、そこで区別は可能です。
終わりに
カタログの公開後に自分でも使ってみましたが、どんな環境であろうとコピー&ペースト→クラス微調整だけで済むためかなりスピーディなコーディングができました。 既存のプロダクト改修はもちろんですが、新規のプロジェクトでプロトタイプをさっと作る時にも役立ちそうです。
今後は DatePicker などの難易度の高いコンポーネントや、 Behavior としてコンポーネントのスタイルに依存しない Stimulus Controller を拡充していく予定です。
最後に、LIFULL ではともに成長していける仲間を募集しています。よろしければこちらのページもご覧ください。
