現状を見る ›
15pxの見出しと右端の件数、外枠のない表、区画間20pxの余白を再現。比較の基準です。
区画：bg・text・line／件数：status-neutral-tint・text-2、danger-tint・danger、warning-tint・warning
「今日の対応」区画の見せ方
幅1366pxのノートPCを想定した比較用の見本です。4画面とも同じ10件を表示しています。人物・取引先・対応内容はすべて架空です。
案A｜区画ごとに枠 ›
ほかの画面と同じCardの形。白い見出し帯に区画名と件数を並べ、表と下部の区画を枠で囲みます。
区画：bg・line・text／下部：数値ボックスを同じ枠にそろえ、2つの開閉欄も白い見出し帯に統一
案A＋色の帯 ›
案Aの枠のまま、見出しの帯を区画の状態の色にします。期限切れ＝薄い赤、期日なし＝薄いオレンジ、今日・先の予定・下の区画＝薄い灰色。件数の札は白地にします。
区画：bg・line・text／帯：danger-tint・warning-tint・hover（件数の札と同じ系統の色）
案B｜灰色帯と左の線 ›
灰色の見出し帯と3pxの左線で区画を強調。見出しを16pxにし、横に短い説明を添えます。下部も同じ形です。
区画：bg・hover・line・text・text-2／左線：期限切れ＝danger、期日なし＝warning-line、今日・先の予定・下部＝line-strong
案C｜1つの表に区画の帯 ›
列見出しを一番上の1回にまとめ、区画の始まりに灰色の帯を置きます。下部も1つの枠と同じ灰色帯でそろえます。
区画：bg・hover・line・text／件数と状態の札は現状と同じ色。列見出しの重複を省いて縦の長さを抑制
全案で共通にしたもの
左メニュー、上の題名、右上のアカウント、絞り込み行、期日の札、本文14px、表の列幅・行の余白、状態の札。期限切れ3件・今日3件・期日なし2件・先の予定2件。全体の数は0・2・0・1・0です。
見本内の絞り込み・候補者・ログアウトなどは表示のみです。「お知らせ」「最近完了した対応」の開閉と、全体の注意への移動は使えます。
使った色とフォント
共通色：bg / text / text-2 / line / line-strong / accent / accent-tint / accent-text / danger / danger-tint / warning / warning-tint / status-neutral / status-neutral-tint / owner-us / owner-us-tint / owner-client / owner-client-tint / success
B・Cの追加：hover／Bの左線に追加：warning-line。ロゴはCRMの既存画像をHTML内に埋め込み。
色はglobals.cssの@theme、フォントは同じOS標準の指定です。各HTMLにCSSとロゴを含め、外部ファイル・外部通信を使いません。