デザインシステムとは？AIで画面を作る前に知るべき基本

何を見るべきか

デザインシステムは、画面の見た目や部品のルールをまとめたものです。AIでUIを作る時代ほど重要になります。

AIは画面を素早く作れますが、ルールがないとページごとに色、余白、ボタンの形がばらつきます。

最小のデザインシステムは、色や余白の値、再利用する部品、操作時の状態、アクセシビリティ条件の4層で作れます。AIへ画面を依頼する前に、この4層を短く決めると出力を比較できます。

色と余白の値、再利用する部品、操作時の状態、アクセシビリティ条件の4層を先に決め、同じルールでAIのUI出力を比較する図

最初から大量の部品を作る必要はありません。button、card、formについて、通常・hover・focus・disabled・errorの状態を決めます。色だけで状態を伝えず、文字やiconも組み合わせます。判断基準はアクセシビリティを品質として扱う考え方で確認できます。

実装と一覧確認にはStorybookの導入、既存部品から始める場合はshadcn/uiの使い方が参考になります。

AIに「いい感じの画面」と頼むと、毎回違う見た目になる可能性があります。デザインシステムがあると、AIにも「このルールに従って」と指示できます。

初心者は、まずボタン、カード、フォームの3つだけでもルール化すると効果があります。

AIへの依頼では、「青を使う」だけでなく、使用するtoken、文字サイズ、余白、必須状態、keyboard操作を列挙します。生成後はAIでUIを作るときの典型的な失敗と照らし、見た目だけでなく操作と状態を確認します。

AIでUIを作るなら、センスよりルールが重要です。デザインシステムは、AIの出力を安定させるための土台になります。