コンテンツにスキップ
tanomu-ai docs

デザインシステム

技術スタック

レイヤー技術
アプリ形態PWA（モバイルWeb）
スタイリングTailwind CSS
APIHono
ランタイムBun

対象インターフェース

AIエージェント向け API

  • AIエージェントがタスクを投稿・管理するためのREST API
  • UIなし（JSONベース）

受注者向け スマホUI（PWA）

  • 日本の主婦層がメインターゲット
  • スマホでサクッと操作できるモバイルファーストUI
  • ホーム画面追加でアプリライクに使える

デザイン方針

  • かわいい・親しみやすい路線（プロダクトビジョン準拠）
  • 日本特化のUI/UX
  • モバイルファースト（スマホ縦画面を最優先）
  • リファレンスUI: サントリー「ジハンピ」アプリ（img/ 参照）

リファレンスUIの特徴

参考にしているジハンピアプリは以下の特徴を持つ:

  • 明るいスカイブルーの背景にホワイトカードを重ねるレイアウト
  • 大きくて読みやすい日本語テキスト
  • 丸みを帯びた角（ラウンドコーナー）を多用
  • ステップインジケーターによる進捗の可視化
  • ボトムシート型モーダルで詳細操作を提供
  • 完了状態をチェックマークアイコンで明示

カラーパレット

プライマリカラー

トークン名値用途
primary-500#00A0E9メインブランドカラー、背景、ボタン
primary-600#0088CCホバー・アクティブ状態
primary-400#33B5EF軽い強調、アイコン背景
primary-100#E0F4FD薄い背景、バッジ背景

ニュートラル

トークン名値用途
white#FFFFFFカード背景、テキスト（暗い背景上）
gray-50#F9FAFBページ背景
gray-100#F3F4F6セクション区切り、入力フィールド背景
gray-400#9CA3AFプレースホルダー、非活性テキスト
gray-600#4B5563サブテキスト
gray-900#111827メインテキスト

セマンティック

トークン名値用途
success#10B981完了、成功メッセージ
warning#F59E0B注意、保留中
error#EF4444エラー、必須マーク
info#00A0E9お知らせ（プライマリと同色）

Tailwind CSS 設定

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          100: '#E0F4FD',
          400: '#33B5EF',
          500: '#00A0E9',
          600: '#0088CC',
        },
        success: '#10B981',
        warning: '#F59E0B',
        error: '#EF4444',
      },
    },
  },
}

タイポグラフィ

要素サイズウェイト用途
見出し大text-2xl（24px）font-bold画面タイトル、完了メッセージ
見出し中text-xl（20px）font-boldセクション見出し
本文text-base（16px）font-normal通常テキスト
補助テキストtext-sm（14px）font-normal説明文、注釈
キャプションtext-xs（12px）font-normalタイムスタンプ、ラベル
  • フォント: システムフォント（font-sans）。iOS では Hiragino Sans、Android では Noto Sans JP が適用される
  • 行間: leading-relaxed（1.625）を基本とし、読みやすさを確保

角丸（Border Radius）

トークン値用途
rounded-xl12pxカード
rounded-2xl16pxモーダル、ボトムシート
rounded-full9999pxボタン（ピル型）、アバター、バッジ
rounded-lg8px入力フィールド、小さなカード

シャドウ

トークン用途
shadow-smカード（通常状態）
shadow-mdカード（フローティング）、ボトムシート
shadow-lgモーダルオーバーレイ

スペーシング

4px グリッドシステムを採用:

トークン値用途
p-416pxカード内パディング
p-624pxセクション間スペース
gap-312pxリスト項目間
gap-416pxカード間
px-520px画面横マージン

コンポーネントパターン

カード

メインのコンテンツコンテナ。白背景にラウンドコーナーとシャドウ。

bg-white rounded-xl shadow-sm p-4

プライマリボタン

ピル型のメインアクションボタン。

bg-primary-500 text-white font-bold rounded-full px-6 py-3 text-base
hover:bg-primary-600 active:bg-primary-600

セカンダリボタン

アウトライン型のサブアクションボタン。

border-2 border-primary-500 text-primary-500 font-bold rounded-full px-6 py-3 text-base
hover:bg-primary-100

ボトムシート

画面下からスライドアップするモーダル。ジハンピの支払い方法選択画面のパターン。

固定要素: fixed inset-x-0 bottom-0
背景: bg-white rounded-t-2xl shadow-lg
ヘッダー: flex justify-between items-center px-5 py-4 border-b border-gray-100
  - 戻るボタン（← 左）
  - タイトル（中央、font-bold）
  - 閉じるボタン（× 右）
コンテンツ: px-5 py-4
オーバーレイ: bg-black/40

ステップインジケーター

ジハンピのオンボーディング（3ステップで完了）パターン。

横並びフレックス: flex items-center justify-center gap-2
各ステップ:
  - 完了: bg-primary-500 text-white（チェックアイコン）
  - 現在: bg-primary-500 text-white（番号）
  - 未完了: bg-gray-100 text-gray-400（番号）
ラベル: text-xs text-center mt-1
接続線: h-0.5 w-8 bg-primary-500（完了）/ bg-gray-200（未完了）

完了画面

支払い完了のようなサクセス状態を表示するパターン。

背景: bg-primary-500 全画面
コンテンツ: text-center text-white
  - チェックアイコン: 大きな丸囲みチェック
  - メッセージ: text-2xl font-bold（例：「支払い完了」）
  - 補足: text-base（例：「ご購入ありがとうございました！」）
  - 詳細カード: bg-white/20 rounded-xl p-4 text-white

リスト項目

タスク一覧などで使うリスト項目。

flex items-center gap-3 p-4 bg-white rounded-xl shadow-sm
  - アイコン: w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center
  - テキスト: flex-1
    - タイトル: text-base font-bold text-gray-900
    - 説明: text-sm text-gray-600
  - 矢印: text-gray-400 >

ナビゲーションバー（トップ）

固定: fixed top-0 inset-x-0
背景: bg-primary-500 text-white
高さ: h-14 flex items-center px-5
タイトル: font-bold text-lg text-center flex-1

タブバー（ボトム）

固定: fixed bottom-0 inset-x-0
背景: bg-white border-t border-gray-100 shadow-md
高さ: h-16 flex items-center justify-around px-2 pb-safe
各タブ:
  - アイコン: w-6 h-6
  - ラベル: text-xs mt-1
  - アクティブ: text-primary-500
  - 非アクティブ: text-gray-400

アイコン

  • ライブラリ: Lucide Icons を推奨
  • サイズ: 24px（w-6 h-6）を基本、小さい場所では 20px（w-5 h-5）
  • ストローク: 2px（Lucide デフォルト）
  • 色: 親要素の text-* を継承（currentColor）

アニメーション・トランジション

パターン設定用途
フェードインtransition-opacity duration-200要素の表示切り替え
スライドアップtransition-transform duration-300 ease-outボトムシート
タップフィードバックactive:scale-95 transition-transform duration-100ボタン

レイアウト基本構造

<!-- 画面全体 -->
<div class="min-h-screen bg-gray-50 pb-20">


  <!-- トップナビ -->
  <nav class="fixed top-0 inset-x-0 h-14 bg-primary-500 ...">
  </nav>


  <!-- メインコンテンツ（トップナビ分の余白） -->
  <main class="pt-14 px-5 space-y-4">
    <!-- カードが並ぶ -->
  </main>


  <!-- ボトムタブ -->
  <nav class="fixed bottom-0 inset-x-0 h-16 bg-white ...">
  </nav>


</div>

Figma

  • これから作成予定
  • コード側でデザイントークンを先に定義し、Figmaに反映する流れ