1. ブランドアイデンティティ
デザインの原則
モバイルファースト
スマートフォンでの使いやすさを最優先に設計し、直感的で快適な操作体験を提供
直感的UI/UX
中学生でも迷わず使える分かりやすいインターフェース設計
VANTANカラー
学校のブランドイメージに合わせた統一感のあるカラースキーム
シンプル思考
必要な機能に絞り込んだミニマルで洗練されたデザイン
ビジュアルスタイル
VANTAN文化祭アプリ
文化祭をもっと楽しく、もっと簡単に
2. カラーパレット
プライマリカラー
VANTAN Blue
メインブランドカラー
VANTAN Purple
セカンダリカラー
Deep Blue
アクセントカラー
Deep Purple
サブアクセント
ファンクショナルカラー
Success
成功・完了
Warning
注意・警告
Error
エラー・削除
Info
情報・案内
Neutral
背景・枠線
グレースケール
#1a202c
#2d3748
#4a5568
#718096
#a0aec0
#cbd5e0
#e2e8f0
#f7fafc
3. タイポグラフィ
フォントファミリー
Inter（プライマリ）
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
英数字・UI要素に使用
ヒラギノ角ゴ / Noto Sans JP
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
日本語テキストに使用
フォント読み込み
font-family: 'Inter', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
タイポグラフィスケール
見出し1 (36px/Bold)
メインタイトル・ページヘッダー
見出し2 (30px/Semibold)
セクションタイトル
見出し3 (20px/Medium)
サブセクション
見出し4 (18px/Medium)
カード・コンポーネントタイトル
本文 (16px/Regular)
メインコンテンツ
小文字 (14px/Regular)
補足情報・キャプション
4. UIコンポーネント
ボタン
カード
○○学部カフェ
食べ物A棟 2F 205教室
手作りコーヒーと軽食を提供しています。
スタンプ進捗
5/12ナビゲーション
タブナビゲーション
ボトムナビゲーション
ホーム
スタンプ
マップ
QRスキャン
フォーム要素
5. レイアウトシステム
グリッドシステム
12カラムグリッド
スペーシング
4px (xs)
8px (sm)
16px (md)
24px (lg)
ブレークポイント
| デバイス | 幅 | Tailwind | 用途 |
|---|---|---|---|
| スマートフォン | 〜640px | default | メインターゲット |
| タブレット | 640px〜 | sm: | 横向き・小型タブレット |
| ノートPC | 768px〜 | md: | 管理画面・詳細表示 |
| デスクトップ | 1024px〜 | lg: | 大画面対応 |
6. インタラクション・アニメーション
ホバー・タップ状態
ボタンホバー
カードホバー
ホバー可能なカード
マウスオーバーで浮き上がります
ローディング状態
スピナー
ドット
プログレスバー
画面遷移
フェードイン
新しいコンテンツがフェードインで表示
スライドイン
サイドから要素がスライドイン