この記事ではサブスク管理人のデザインシステムとUI実装についてまとめています。
概要
デザインシステムは、全体のデザインルールとデザインを実現するコンポーネント群をまとめた資料のことです。FigmaとFigma makeを使用して作成しました。
サブスク管理人のデザインシステムは以下になります。
デザインシステムの構成
カラー
ブランドを象徴するメインカラーを定義しています。
| 種類 | 役割・用途 |
|---|---|
| Primary | 信頼感を表現するネイビー（#00406C） |
| Accent | ワクワク感を演出するピンクレッド（#E24075） |
| Success/Danger | 完了やエラーを示すカラー |
信頼感のあるネイビーをベースにしつつ、アクセントにピンクレッドを入れることで堅実さと明るさを両立させています。
タイポグラフィ
タイポグラフィの基本構成を定義しています。
| 項目 | 設定値 |
|---|---|
| Font stack | 'DM Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif |
| Font weight | Regular, Medium, Bold |
| Base size | 14px, 1.5 (Line-height) |
| Small size | 12px |
フォントはモダンで癖の少ない DM Sans を選択しました。サンセリフ体の幾何学的な美しさにより管理しやすく洗練された印象を狙っています。
ボタン
直感的な操作を促すためボタンのバリエーションを整理しました。
バッジ
サブスクリプションのステータスを一目で判別するための要素です。
フォーム要素
アラート
処理結果や重要な通知を伝えるためのコンポーネントです。
アイコンと色を組み合わせて内容を認識しやすくしています。
カード
ダッシュボードにおける情報の基本単位です。
スペース
一定のリズムを作るため一般的な8pxを基本単位としたスペーシングを採用しました。
シャドウ
UIの実装
Claudeへ指示しながらUIの実装を進めました。
CSS変数による管理
色やスタイルを指定する際、CSS変数を指定することで後からコードを変更しやすくしています。
:root {
--primary: #00406C;
--accent: #E24075;
--surface: #FFFFFF;
--border: #E2E8F0;
--radius: 8px;
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
}
レスポンシブ対応
画面幅に合わせてレイアウトがスマホとPCに最適化されるよう調整しています。
/* 基本は1列、画面が広くなれば3列に */
.subscriptions-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 960px) {
.subscriptions-grid {
grid-template-columns: repeat(3, 1fr);
}
}
操作のフィードバック
ユーザーが操作した際、正しく要素が反応していることを伝えるためのフィードバックを大切にしています。
.btn:active {
transform: translateY(1px); /* 押した時に少し沈む演出 */
}
.sub-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
終わりに
デザインシステムによりAIの生成結果に対する迷いが減り、UIデザインを短期間で実装できました。
関連記事
- サブスク管理人という個人サービスをリリースしました
- 【サブスク管理人】デザインシステムとUI実装←本記事
- 【サブスク管理人】データベースの設計
- 【サブスク管理人】APIの設計と開発(準備中)
- 【サブスク管理人】インフラ設計と構築(準備中)
- 【サブスク管理人】データ分析基盤の整備(準備中)