「スピード」と「こだわり」を両立したい！shadcn/uiとTailwind CSSを活用したゼロからのコンポーネントライブラリ構築 - 10X Product Blog

2024/12/17 14 users shadcn コンポー Tailwind CSS SaaS

こんにちは、10X プロダクトデザイナーの日比谷（@suuminbot）です。 現在10Xでは新規プロダクトを複数開発している真っ只中ですが、私もその一環でshadcn/uiとTailwind CSSを活用しつつ、SaaSのサービス画面（管理画面）用のコンポーネントライブラリをゼロから構築していました。 少し前に一通り最低限必要なコンポー... 続きを読む

アクセシビリティが考慮された React Aria のドラッグアンドドロップ

2024/09/07 51 users ドラッグアンドドロップ アクセシビリティ React 設計

アクセシビリティが考慮された React Aria のドラッグアンドドロップ 2024.09.07 React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。 ドラッ... 続きを読む

コンポーネントをアクセシブルに保つ技術

2023/12/21 11 users アクセシブル Ubie Linter コンポーネント 実装

アクセシビリティ Advent Calendar 2023 21日目の記事です。 Ubie株式会社 デザインエンジニアのtakanoripです。 Ubieではデザインシステムの1要素としてコンポーネントライブラリの実装を進めています。その中でコンポーネントをアクセシブルに保つための仕組みをいくつか導入しているので紹介します。 Linter まず一番... 続きを読む

一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog

2023/12/14 11 users 変遷 フロントエンド設計 developers blog

宿泊の管理システムについて 新しい管理システムについて 開発初期のフロントエンド設計 コンポーネントは4レイヤー方式を採用 UIのコンポーネントライブラリを採用 これ以上の設計、方針は決めなかった 初期ローンチ後の課題 改善した内容 1. コンポーネント設計の見直し ディレクトリ構成の変更 大きくなったコンポー... 続きを読む

共通コンポーネントのテスト実装方法にあえてVRTを選択した話 / why do we choose VRT for testing shared components

2022/10/16 5 users VRT リグレッションテスト Chromatic ネンド 概要

共通コンポーネントのテスト実装方法にあえてVRTを選択した話 / why do we choose VRT for testing shared components Vue Fes Japan 2022 の発表内容です https://vuefes.jp/2022/sessions/KushibikiMashu ■ 概要 社内のコンポーネントライブラリに対してStorybookとChromaticでビジュアルリグレッションテストを導入し... 続きを読む

デザインシステムを作る前にデザインのシステムを理解しよう : could

2019/12/26 5 users could システム デザインシステム デザイン 固定概念

UIデザイン デザインシステムを作る前にデザインのシステムを理解しよう コンポーネントライブラリと詳細度の高いガイドラインという固定概念を拭い去り、組織におけるデザインのシステムを改善する取り組みと捉えるとやり方は大きく変わります。 デザインシステムという名の成果物が抱える問題 デザインツール上で UI ... 続きを読む