デザインパターン

Thinca Design System を組み合わせて、カイクラの典型的な業務画面を構築するための型。コンポーネント単体ではなく、複数のコンポーネント・情報・操作をまとめた粒度で扱う。

視覚設計

画面全体の視線誘導・情報の積み方・グルーピングの原則。後続のすべてのパターンの土台になる。

グーテンベルク図・F型の2パターン。操作を完了させる領域と、目的の項目を探す領域に使い分けるための原則を解説する。

余白・矩形・罫線を使って関連要素をまとめる手法。ゲシュタルト心理学の法則を起点に、セクション・ブロックの作り方を解説する。

ヘッダー・サイドバー・メインコンテンツの配置と、画面幅に応じたレイアウトの組み方。

コンポーネント間・セクション間・ページ外周の余白の基準と、トークンの使い分け。

一覧データを表示する場面の型。業務画面で最も頻出するパターン群。

ソート・選択・行アクションを持つ業務テーブルの構成。カラム幅・省略・空値の扱い方。

複数行を選択して操作する UI。チェックボックス・選択件数の表示・アクションの配置。

ユーザーが意思決定・入力・確認を行う場面の型。

モーダルな UIComing soon

Dialog・Sheet・Popover の使い分け基準と、それぞれのフォーカス管理・閉じ方。

ウィザードComing soon

複数ステップに分けた入力フローの組み方。ステップ表示・戻る・中断時の状態保持。

デフォルト値Coming soon

フォームの初期値をどこから引くか。前回値・ロール別初期値・空値の使い分け。

送信・確定など取り消しできない操作の前に挟む確認のパターン。

処理結果・空状態・非同期処理中など、通常とは異なる画面状態の伝え方。

Toast・Banner・インラインエラーの使い分け。成功・失敗・警告の表現と消えるタイミング。

未入力・未取得・該当なしの区別と、それぞれに適したプレースホルダーの表現。

バックグラウンド処理Coming soon

AI 要約・通話テキスト化など、結果が即時に出ない処理の進捗と完了通知の設計。

ユーザーのロールによって表示・操作が変わる場面の型。

権限による表示制御Coming soon

閲覧不可・操作不可・非表示の使い分けと、権限がないことをユーザーに伝える方法。

権限設定Coming soon

ロール・権限を編集する UI のパターン。チェックボックス群の構成と保存フロー。

似た役割を持つコンポーネントを場面ごとに使い分けるための判断基準。

選択コンポーネントの使い分けComing soon

Select・Combobox・RadioGroup・Checkbox の使い分け基準。選択肢の数・検索の有無・複数選択の観点で整理する。