直したところ
要対応バッジのアンバーは全廃しました。ステップ内はティール塗り、ボタン内は白系3通りに差し替えています。担当の言葉は「自社/ご自身/MY」をやめ、「自分で」と「おまかせ」を軸にしました。記帳代行という中身に合っていて、二人称も出ません。フェーズ表示はセクションBに6案あります。期限カードはC-7の細い線にC-6の数字を入れた形(C-8)です。
B
フェーズ表示(P1/P2/P3)と進捗のコンパクト表示
見出しの右にフェーズを置き、その左の空きに進捗表現を入れた6案です。B-8からB-10はフェーズの形を揃えて進捗表現だけ変えたもの、B-11からB-13はフェーズの形そのものを変えたものです。担当表記はすべて A-11(自分で/おまかせ)で固定しています。
B-8セグメント + 工程カウント推奨
フェーズの左に「いま何工程目か」を数字で置いた案。3期のどこにいるか(P2)と、その期の中でどこまで来たか(1/5)が、右上だけで両方読めます。文字なので幅を食わず、余白も残ります。
B-9セグメント + ドット
工程数を小さな丸5つで表した案。数字を読まなくても進み具合が形で入ります。下のステップ番号と情報が重なるので、少し冗長に見える場合があります。
B-10セグメント + 極細バー
52pxの短いバーを1本だけ添えた案。いちばん静かで、見出し行がすっきりします。細かい進み具合までは読み取れません。
B-11独立ピル + 対象期間
フェーズを独立した丸ピル3つにして、左に対象期間を添えた案。Pが何月分かがその場で分かるので、初見のユーザーに一番親切です。済んだP1に枠線を残して、通過したことを示しています。
B-12フェーズをつなぐ
P1からP3を線でつないで、下のステップ行と同じ文法で表した案。年間の3フェーズも1本の流れだと分かります。下のステップ行と見た目が似るので、階層が伝わりにくくなる可能性があります。
B-13タブ型(下線)
箱をなくして下線だけで現在地を示した案。いちばん軽く、余白が広く取れます。タップできることが分かりにくいので、切り替え操作をさせるなら不向きです。
A
担当の見せ方(言い換え)
「あなた」「自社」「ご自身」「MY」をやめ、やることの性質で言い換えた案です。フェーズ表示はすべて B-8 で固定しています。
A-11自分で / おまかせ推奨
誰かを名指しせず、やり方で分けた案。「おまかせ」は記帳代行というサービスの中身そのままなので、ユーザーが払っている価値が画面に出ます。二人称も社名の反復も消えます。
A-12いま動く工程だけ色を反転
A-11の「自分で」のうち、いま動く工程だけをティール塗りに反転させた案。黄色を使わずに、探している1個だけが浮き上がります。
A-13色ドットのみ
文字を完全にやめて、工程名の下の小さな点だけで担当を示した案。横に言葉が並ばないので、いちばん静かです。凡例が1行必要になります。
A-142レーン
上下に分けて、担当の言葉を左端に1回ずつだけ出す案(第1案のA-3を今回の配色で作り直したもの)。手番が上下に行き来する形そのものが、交互制を説明します。高さが約40px増えます。
A-15丸の形で区別
ステップの丸そのものを塗り分けた案(白抜き=自分、グレー=おまかせ)。ラベル行がまるごと消えるので、カードの高さが最小になります。
A'
ボタンのバッジ(黄色をやめた3案)
アンバーをやめて、緑のボタンに馴染む白系で作り直しました。目立たせ方は色ではなく、明滅(パルス)で出します。
A'-8白ベタ
白地にティール文字。緑のボタンの中で最もはっきり読めます。アンバーのような異物感はありません。
A'-9半透明白 + パルス推奨
ボタンに溶け込む半透明の白に、ゆっくりした明滅を足した案(この画面でも動いています)。静止画では馴染んで見え、実機では動きで気づける組み合わせです。
A'-10白枠のみ + パルス
塗りをやめて細い白枠だけにした案。いちばん軽く、ボタンの文字と同じ重さで並びます。
A'-7待機中の表示採用
スマカクが記帳を進めています
完了したら通知でお知らせします
スマカクの番のときはボタンを出さず、この帯に差し替えます。押せる緑が画面から消えるので、いま何もしなくていいことが形で伝わります。
C
申告期限カード(C-7の線 × C-6の数字)
ご指定どおり、C-7の細い線と内側の薄塗りに、C-6の数字レイアウト(数字を大きく、単位を下)を合わせたものがC-8です。右の2つはリングの意味を変えた比較用です。
C-8確定形これ
申告期限まで
2027年3月15日(月)
余裕を持って準備を始めましょう
細い線(3px)と内側の薄塗りはC-7のまま、中の数字はC-6のように大きく取り、単位の「日」を下に落としました。カードの高さは現状のままです。
C-9リングを残り日数に反転
申告期限まで
2027年3月15日(月)
余裕を持って準備を始めましょう
C-8と見た目は同じで、リングの意味だけ逆にした案。残っている時間を白い弧で表します。期限が近づくと弧が減っていくので、数字と動きの向きが揃います。
C-10線をさらに細く
申告期限まで
2027年3月15日(月)
余裕を持って準備を始めましょう
線を2pxまで落として、数字をさらに主役にした案。リングは輪郭に近い存在になります。
D
組み合わせた完成形(実寸)
左が自分の番、右がスマカクの番です。同じ画面が手番によってどう変わるかを並べています。
D-6自分の番のとき
A-11 + B-8 + A'-9 + C-8。押せる緑のボタンが1つだけ画面にあり、そこに要対応バッジが明滅します。
申告期限まで
2027年3月15日(月)
余裕を持って準備を始めましょう
Coming Soon...
サンプルデータNotion連携後に実データが入ります
D-7スマカクの番のとき
同じ画面で工程2に進んだ状態。ボタンが待機の帯に変わり、押せる場所が画面から消えます。
申告期限まで
2027年3月15日(月)
余裕を持って準備を始めましょう
Coming Soon...
サンプルデータNotion連携後に実データが入ります
スマカクが記帳を進めています
完了したら通知でお知らせします