見かた
各セクションの先頭にいまの実装(現状)を置いています。同じ実寸なので、そのまま横に並べて比較できます。推奨のラベルが付いているものが、私が一番いいと思う案です。最後のセクションDに、3点を組み合わせたホーム画面の完成形を3パターン置いています。
A
担当表示(あなた/スマカク)
「あなた」「スマカク」が5つ横に並んで同じ言葉が反復する問題と、枠で囲みたい・スマカク側を緑にしたいという2点への回答です。
A-0現状
担当がベタ文字で5つ並ぶため、工程名と担当名のどちらを読めばいいか迷いやすい状態です。
A-1aチップ型(あなた=緑)
枠で囲んでチップにした最小の変更案。動くべき「あなた」をブランド緑にして、待つだけのスマカクをグレーに落としています。言葉の反復は残ります。
A-1bチップ型(スマカク=緑)
ご指示どおりスマカク側を緑にした版。あなた側は要対応が伝わるアンバーにしています。緑=自社という見え方になるぶん、ユーザーが動く場所の目立ちは A-1a より弱くなります。
A-2アイコン型
担当を人アイコンとスマカクのマークに置き換え、文字の反復をなくした案。凡例を1行だけ下に置きます。初見のユーザーは凡例を読む必要があります。
A-32レーン型推奨
上下2本のレーンに分け、「あなた」「スマカク」を左端に1回ずつ出すだけにした案。交互に手番が渡っていく構造そのものが絵で伝わります。高さが現状より約40px増えます。
A-4円の塗り分け型
いまの進み具合
あなたが動く工程
スマカクが動く工程
担当ラベルを完全になくし、丸の塗り(白抜き=あなた/グレー=スマカク)だけで区別する案。いちばん軽く、高さも現状より縮みます。色と形だけなので伝達力は弱めです。
A'
ボタンの言い方
「あなたの番:資料提出へ」のコロン連結をやめた案です。上に小さく状態を置き、ボタンには動作だけを書きます。
A'-0現状
状態と動作がコロンでつながっていて、読点のない1文を読まされる形になっています。
A'-1ラベル分離型推奨
状態を小さいラベルに逃がし、ボタンは動作だけ。既存画面のボタン表記とも揃います。
A'-2バッジ内包型
ボタン1個で完結させたい場合の案。行数が増えないぶん、カードを短く保てます。
A'-3スマカクの番(待機中)
スマカクが記帳を進めています
完了したら通知でお知らせします
待ち状態のとき。「お待ちください」という指示ではなく、通知が来るという約束に変えています。
B
期間の表示(P2 を対応中)
テキストが置いてあるだけでUIとして弱い点への回答です。あわせて P1/P2/P3 という社内の言い方を、ユーザーに伝わる期間表記へ寄せています。
B-0現状
ピルとテキストが別々の場所で同じこと(P2)を言っていて、情報が重複しています。
B-1セグメント型
いまの進み具合
第1期7〜12月
第2期1〜6月
第3期申告
3つを一体型のセグメントにして、それぞれの下に対象期間を出す案。タップで切り替えられることが形で伝わります。
B-2進捗バー型推奨
第2期(1〜6月分)5工程中 1つ目
資料提出記帳仕訳チェック修正反映帳簿確認
期間と進み具合を1か所にまとめた案。「あと何工程で終わるか」が数字とバーの両方で見えます。テキストだけだった行が、そのまま進捗の可視化になります。
B-3ラベル値ペア型
期間を情報ブロックとして独立させた案。何月分の話をしているのかが最もはっきりします。
C
申告期限カード(173日)
日付が主役で日数が右隅の添え物になっている現状に対し、見せ方を変えた4案です。
C-0現状
申告期限まで
2027年3月15日(月)
余裕を持って準備を始めましょう
173日
3行のテキストと数字が左右に分かれていて、視線が2か所に散ります。
C-1数字主役型
申告期限まで
173
日
2027年3月15日月曜日
日数を主役に逆転させ、日付を右に小さく添えた案。下の細いバーで、申告期間のどこにいるかも同時に見せます。
C-2リング型
申告期限まで
2027年3月15日
余裕を持って準備できます
円グラフで残り時間を表した案。いちばんリッチに見えます。「何に対する39%か」が直感では伝わりにくいのが弱点です。
C-3タイムライン型推奨
2027年3月15日(月)
いまは準備を始める時期です
2026年1月提出期限
1年の流れの中で「いまどこか」を示した案。残日数だけでなく、まだ余裕があるという安心まで同時に伝わります。ホームの一番上に置くカードとして情報量がちょうどいいです。
C-4月チップ型
10月11月12月
1月2月3月
残り6か月。薄い月は申告直前で慌てやすい時期です
残りを月のマスで見せた案。日数より月のほうが生活感覚に近い人向けです。年をまたぐと少し読みにくくなります。
D
組み合わせた完成形(実寸)
3点をまとめてホーム画面に落とした3パターンです。iPhoneの実寸で並べています。
D-1最小変更案
A-1a + B-1 + C-1。いまの構造を保ったまま、チップ化と期間表記だけを直した案です。実装コストが一番低く済みます。
申告期限まで
173
日
2027年3月15日月曜日
Coming Soon...
サンプルデータNotion連携後に実データが入ります
いまの進み具合
第1期7〜12月
第2期1〜6月
第3期申告
あなたの番です
D-2推奨案これが本命
A-3 + B-2 + C-3。交互制が絵で伝わり、いまどっちの番かで迷わない構成です。担当の言葉は各1回しか出ません。
2027年3月15日(月)
いまは準備を始める時期です
2026年1月提出期限
Coming Soon...
サンプルデータNotion連携後に実データが入ります
あなたの番です
D-3最小高さ案
A-4 + B-3 + C-2。担当ラベルを廃して縦を詰めた案です。卵カードを大きく戻したくなったときに効きます。
申告期限まで
2027年3月15日
余裕を持って準備できます
Coming Soon...
サンプルデータNotion連携後に実データが入ります
対象期間2026年1月〜6月分第2期
あなたが動く工程
スマカクが動く工程
E
比較表
| 論点 | 案 | 得られるもの | 引き換えに失うもの |
| 担当表示 | A-1a/A-1b チップ | 枠で囲むだけなので実装が軽い | 言葉の反復は残る |
| A-3 2レーン | 交互制が絵で伝わる。担当の言葉は各1回だけ | 高さが約40px増える |
| A-2 アイコン | 文字の反復が消えて軽く見える | 凡例を読まないと意味が分からない |
| A-4 塗り分け | いちばん高さが縮む | 伝達力が弱く、色覚差にも弱い |
| 期間表示 | B-1 セグメント | 切り替えられることが形で伝わる | 進み具合は分からない |
| B-2 進捗バー | 期間と残り工程を1か所で見せられる | 要素が増えるぶん少し複雑 |
| B-3 ラベル値ペア | 何月分の話かが最もはっきりする | UIとしての動きは出ない |
| 申告期限 | C-1 数字主役 | 残日数が一撃で入る | 期間全体の位置は弱め |
| C-2 リング | 見た目がいちばんリッチ | 何に対する割合かが伝わりにくい |
| C-3 タイムライン | 残日数と「まだ余裕がある」を同時に伝えられる | 横幅を使うので文言を短くする必要がある |
| C-4 月チップ | 生活感覚に近い | 年をまたぐと読みにくい |