一貫性
色、文字、余白、操作の意味を画面横断で揃え、同じ場面では同じ見え方と振る舞いを保ちます。
全体像
イヌコミ全体の色、文字、余白、部品、体験パターン、運用ルールを一貫させるための公開デザインシステムです。
デザインシステムは見た目のルール集ではなく、プロダクト全体の判断を再利用できる運用基盤です。
イヌコミでは、画面の美しさだけでなく、部品、状態、操作、アクセシビリティ、更新時の品質確認までを一つの体系として管理します。
基礎設計
色、文字、余白、角丸、影、動きの判断を同じ土台へ集約します。
共通コンポーネント
ページ、カード、フォーム、ナビゲーションを再利用できる単位へ整理します。
体験パターン
探す、比べる、申し込む、管理する流れを画面横断で揃えます。
ブランド
イヌコミらしさを、言葉、写真、余白、信頼表現まで含めて管理します。
運用と品質
公開後に崩れないための管理範囲、検証、更新ルールを定義します。
変更履歴
利用者に影響する主な更新内容を時系列で案内します。
再利用性
ページごとの個別実装ではなく、部品、パターン、固定ページテンプレートとして次の開発へ渡せる形にします。
アクセシビリティ
色、フォーカス、読み順、キーボード操作を、見た目の調整と同じ重要度で扱います。
運用で崩れない
ページごとの個別実装に頼らず、共通部品と利用ルールで更新後の品質差を防ぎます。
継続改善
代表状態、アクセシビリティ、画面幅ごとの表示を確認し、改善後も同じ品質を維持します。
コンポーネント一覧
目的に合う部品をすぐ見つける
入力、選択、ナビゲーション、フィードバックなど、イヌコミで使うUI部品を確認できます。
15 / 15 件
- 部品 · CompactSearchBar検索バー検索導線、状態、選択パネル、モバイル全画面選択含まれる部品: CompactSearchBar仕様を見る
- 部品 · Buttonsボタン共有Buttonのvariants、sizes、実装済み状態含まれる部品: Button、SectionMoreButton仕様を見る
- 部品 · Cardカード共有Cardの構造、密度、action配置、実利用状態含まれる部品: Card仕様を見る
- 部品 · Form Controlsフォームコントロール入力、選択、説明、エラー、無効状態の共通仕様含まれる部品: FormSubmitFooter、Form、Input、Label、Select、Textarea仕様を見る
- 部品 · Feedbackフィードバック通知、状態ラベル、読み込み、確認ダイアログ含まれる部品: ContentWarningNotice、Alert、Badge、Dialog、GlobalAlertDialog、Skeleton、Toaster仕様を見る
- 部品 · Navigation Patternsナビゲーションパターンタブ、開閉、区切り、二値切替の共有挙動含まれる部品: Accordion、AnimatedRadialMenu、Separator、Tabs仕様を見る
- 部品 · Data Displayデータ表示表、アバター、状態ラベルの比較可能な表示含まれる部品: Avatar、SortableTableHead、StarRating、Table仕様を見る
- 部品 · Selection Controls選択コントロールチェック、単一選択、範囲、即時設定の共通契約含まれる部品: PostTypeSelector、Checkbox、RadioGroup、Slider、Switch仕様を見る
- 部品 · Overlays and Menusオーバーレイとメニューメニュー、補足面、コマンド検索、ドロワー、スクロール領域含まれる部品: ResponsiveModal、Command、Drawer、DropdownMenu、HelpTooltip、Popover、ScrollArea、Tooltip仕様を見る
- 部品 · Content Structureコンテンツ構造セクション、見出し、パンくず、整形本文、写真バナーの読み順含まれる部品: ImageCaptionLabel、MarkdownText、StoreImageSlider、HybridTiptapRenderer、Breadcrumbs、ContentBanner、SectionHeader、SectionWrapper仕様を見る
- 部品 · Specialized Inputs特殊入力コード、複数メール、画像、音声を扱う入力契約含まれる部品: ImageUploader（医療記録）、ImageEditorModal、ImageUploader（投稿）、CodeEditor、EmailChipInput、ImageUploader、VoiceInputButton仕様を見る
- 部品 · Technical Documentation技術資料ビューア構造化された技術情報を読みやすく確認する資料画面含まれる部品: SwaggerUIWrapper仕様を見る
- 部品 · CategoryBannerカテゴリーバナーカードトップページで実際に使う写真バナー含まれる部品: CategoryBannerCard仕様を見る
- 部品 · AI Counselorわんちゃんの相談室相談開始と会話の画面構成含まれる部品: AiDataTransmissionConsentDialog、ChatInterface、ChatStartClient、ChatWidget、MessageBubble、PetSelector、ProductRecommendation仕様を見る
- 部品 · Data visualizationデータ可視化チャートの色、状態、凡例、仕様値含まれる部品: SearchVolumeChart、WeightSparkline仕様を見る
ドキュメント総覧
基盤、部品、体験、ブランド、運用、履歴を同じ入口からたどれるようにする
細かなトピックは子ページのアンカーへ集約し、固定ページの階層を増やしすぎず、実装と運用の参照先を保ちます。
基盤
色、文字、余白、動きなど、すべてのUIが参照する土台です。
コンポーネント
固定ページ、カード、フォーム、ナビゲーションを再利用単位で扱います。
体験パターン
ユーザー行動を画面横断の型として整理します。
ブランド
言葉、写真、信頼表現、犬らしさを同じブランド判断として管理します。
運用
公開後も品質を戻せるように検証、変更手順、例外管理を定義します。
変更履歴
利用者に影響する公開済みの主な変更を案内します。
基礎
色、文字、余白を感覚ではなく契約として扱う
ブランド色、状態色、文字、余白を共通の役割として整理し、画面全体の表示を一貫させます。
ブランドカラー
主要導線、選択状態、強調表示はアクセント色へ集約します。
--color-st-accentリンクカラー
テキストリンク、ホバー、補助CTAはリンク色を基準にします。
--color-st-link補助背景
区切りのあるセクション、説明領域、淡い帯背景で使用します。
--color-secondaryフッター背景
サイト共通フッターと著作権領域のコントラストを担保します。
--color-footer-bg原則
新しい画面でも、既存画面の改善でも、同じ順番で判断する
再利用できるものを先に使い、例外は理由を残し、運用で崩れない状態を優先します。
共通基盤を先に使う
ページ単位の個別装飾より、固定ページテンプレート、共通ヘッダー、共通フッター、UI primitiveを先に使います。
操作の意味を揃える
ボタン、リンク、フォーム、カードの見た目と振る舞いを用途ごとに固定し、迷いと実装差分を減らします。
運用で崩れない
ページごとの例外を増やさず、共通部品と利用ルールで公開後の品質差を小さくします。
確認して改善する
アクセシビリティ、画面差分、性能、導線を同じ観点で確認し、属人的な判断を減らします。
運用
固定ページ、コード、サイトマップを同じ変更単位で扱う
共通部品、状態、画面幅、アクセシビリティを同じ確認項目として扱います。
- 対象
- 色・文字・余白・動き
- 登録数
- 5グループ / 70トークン
- 配布形式
- CSS変数 / JSON
- 品質確認
- 可読性・操作・画面幅
- トークン
- 色、文字、余白、角丸、影、動きを意味のある名前で管理し、関連する部品へ一貫して反映する
- カタログ
- 代表部品の初期、選択、無効、読込、エラー、完了状態を継続して整備する
- アクセシビリティ
- 自動検査と手動キーボード確認を組み合わせ、読み上げと操作の問題を品質上の不具合として扱う
- 視覚差分
- 主要画面のスクリーンショット差分で意図しない崩れを止める
- 例外管理
- 場当たり的な上書きを避け、状態、トークン、部品の責務で解決する
- 公開導線
- 概要、各領域、個別仕様へ同じナビゲーションから到達できる状態を保つ
読みやすさ
見出し、本文、補足、数値の役割を分け、長い日本語でも読みやすい行間を保ちます。
性能
画像、レイアウト、装飾のコストを意識し、見た目の品質と表示速度を同時に管理します。
文書化
判断軸、例外、更新手順をページとして残し、将来の拡張時に同じ基準へ戻れるようにします。