デジタルエンジニアリング部 Eビジネスエンジニアリング課の小枝です。 普段はUIデザインやフロントエンドを担当することが多く、二足のわらじなポジションです。
アプリを運用・更新していると、Figma上のデザインと実際に使われているコンポーネントの差異がどうしても発生します。 最初はFigmaでデザインして実装しますが、細かい修正はコードだけで済ませることが多いです。
なのでFigmaのデザインを更新するのは二重管理になりがちです。更新する人員やコストもなかなか割けないケースも多々あります……。
コンポーネントカタログを用いたら負担が減って良さそうです。 しかし、これまでの案件でStorybookを使った事がありません。
最近はAIで環境構築が簡単にできるようになったので、試してみます。
Storybookは、UIコンポーネントやページを個別に構築できるフロントエンド開発ツールです。数千ものチームがUI開発、テスト、ドキュメント作成に利用しています。オープンソースで無料です。
出典：Storybook公式サイト（原文より日本語訳）
Storybookとは引用にある通り、フロントエンドでUIコンポーネントを構築・開発できるツールです。
コードで実装したコンポーネントがそのままカタログに登録できるので、Figmaとの二重管理から解放されます。
デザイナーが作ったデザインとコードが一致することによって、コンポーネントが共通言語になり意思疎通がしやすくなります。
カタログの登録や更新等の管理コストがかさむデメリットがありますが、AIに肩代わりしてもらえるのでさほど気になりません。
では実際に環境構築から動作するところまでClaude Codeにやってもらいます。
ついでに、デジタル庁デザインシステムのテーブルコンポーネントを、Storybookに登録してもらいます。
環境構築用のプロンプトを作ってもらいました。
以下の環境をゼロから構築してください。
## やりたいこと
ReactとStorybookの新規プロジェクトをゼロから作成する。
デジタル庁デザインシステムのテーブルコンポーネントをStorybookに登録するところまでを目標とする。
## 環境条件
- パッケージマネージャー: npm
- フレームワーク: React + TypeScript
- Storybook: 最新版
## 手順
以下の順番で進めてください。
1. Vite + React + TypeScript で新規プロジェクトを作成する
2. Storybookを導入する
3. Storybookが起動することを確認する
4. デジタル庁デザインシステムのReact版コンポーネントを導入する
- GitHubリポジトリ: https://github.com/digital-go-jp/design-system-example-components-react
5. テーブルコンポーネントのStoryファイルを作成する
6. Storybookでテーブルコンポーネントが表示されることを確認する
## 注意事項
- 各ステップが完了したら、動作確認の方法を教えてください
- エラーが発生した場合は原因と対処法を説明してください
- コマンドは1つずつ実行するように指示してください
特に詰まる事もなく、環境構築は完了です。
環境構築の段階で導入済みの、デジタル庁のデザインシステムを簡単に解説します。
デジタル庁では「誰一人取り残されない、人に優しいデジタル化を。」の実現を目指し、ウェブサービス・ウェブアプリケーションの使い勝手や情報の探しやすさ、アクセシビリティ等の向上に取り組んでいます。その一環として、「デザインシステム」の構築を推進し、官民問わずすべての方が参照できる形で公開しています。よりよいデザインの普及・啓発に向けて拡充と更新を継続的に行い、あらゆる人がデジタル化の恩恵を享受できる社会に貢献します。
デジタル庁が2021年の設立以降に整備した、政府・自治体のWebサービスを統一するためのデザインシステムです。
JIS X 8341-3:2016のAA準拠を目標と明記されており、ウェブアクセシビリティも考慮された良いシステムです。無償で使えて、公的機関が維持しているのが強いです。
税金で作ったものをちゃんと公開して還元している、その姿勢が好ましい。
テーブル／データテーブルを登録してあります。
Storybookの画面
コンポーネントを確認すると、アクセシビリティの警告が出ていました。
アクセシビリティの警告
Claude Codeに修正してもらいました。
アクセシビリティは大事。
アクセシビリティ警告の修正後
修正が完了したので、各バリエーションの一覧です。
基本テーブル、ストライプテーブル、コンパクトテーブル、行と列のボーダーです。
各バリエーション
アクセシビリティの修正を挟みましたが、プロンプトにざっくり指示するだけで登録できてしまいます。便利すぎる。
現時点ではソースコードが公開されていない、テーブルコントロールコンポーネントも登録してみます。
こちらはFigmaのデザインだけが公開されているので、スクリーンショットを元にClaude Codeにプロンプトを作ってもらいます。
テーブルコントロールのデザイン
作ってもらったプロンプト
以下のコンポーネントをReactで実装し、Storybookに登録してください。
## 実装するもの
デジタル庁デザインシステムの「テーブルコントロール」コンポーネント。
実際に動作するものではなく、Storybookでの見た目確認が目的なので、
モックデータを使ってUIを再現する程度で構いません。
## デザイン仕様（Figmaより）
### 検索エリア
- テキスト入力 + 検索ボタン
- 件数表示（例：1200件）
- リセットボタン（検索後に表示）
### テーブル本体
- ヘッダー行あり
- ステータスバッジ（要連絡=赤、完了=緑、進行中=青）
### ページネーション
- 前後ナビゲーションボタン
- 現在ページ / 総ページ数の表示
- 表示件数切り替え（10件・50件・100件）
### 空状態
- 「該当する項目がありません」の表示
## Storybookのストーリー
以下のバリエーションで登録してください。
1. 検索前（デフォルト）
2. 検索後（件数が絞られた状態）
3. 該当なし（空状態）
## 注意事項
- デジタル庁デザインシステムのデザイントークン（CSS変数）を使うこと
- モックデータはハードコードで構いません
- 実際の検索・ページネーション動作は不要です
こちらも特に問題なくカタログの登録ができました。
テーブルコントロールのカタログ登録完了
コンポーネントを確認すると、こちらにもアクセシビリティの警告が出ていました。
アクセシビリティの警告
Claude Codeに修正してもらいました。
アクセシビリティは大事。（2回目）
アクセシビリティ警告の修正後
修正が完了したので、各バリエーションの一覧です。
検索前（デフォルト）、検索後（件数が絞られた状態）、該当なし（空状態）です。
各バリエーション
こちらもアクセシビリティの修正を挟みましたが、簡単な指示で登録・修正完了しました。
今回プロンプトを投げるしかしていないのに、無事環境構築からカタログ登録、アクセシビリティの修正までをClaude Codeにしてもらいました。
他のカタログ登録も、デザインのスクリーンショットからでも簡単に行えました。 いつもは実装を踏まえてデザインを考えています。実装の難易度が高いデザインは避けがちでしたが、これからはのびのびとデザインできます！
また、Storybookは今回初めて扱いましたが、カタログの対応・更新はAIにほとんどお任せできるので、コストもさほどかからず運用できそうです。 カタログがあればAIに読ませてもいいですしね。