スマカクアプリ 年間サイクルUI デザイン変案

黒田さんの実装(変更後 156px 版)をベースに、担当表示・期間表示・申告期限カードの3点について別案を作りました。配色・角丸・書体はアプリ正典のトークンをそのまま使っています。
フォーカス:ユーザーは自分の番だけ動けばいい交互制 コンセプト:いま、どっちの番かが一目でわかるホーム 実寸 375px(iPhone 本文幅 343px)
見かた
各セクションの先頭にいまの実装(現状)を置いています。同じ実寸なので、そのまま横に並べて比較できます。推奨のラベルが付いているものが、私が一番いいと思う案です。最後のセクション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現状
資料提出の年間サイクル
P1P2P3
P2 を対応中
ピルとテキストが別々の場所で同じこと(P2)を言っていて、情報が重複しています。
B-1セグメント型
いまの進み具合
第1期7〜12月 第2期1〜6月 第3期申告
3つを一体型のセグメントにして、それぞれの下に対象期間を出す案。タップで切り替えられることが形で伝わります。
B-2進捗バー型推奨
いまの進み具合
123
第2期(1〜6月分)5工程中 1つ目
資料提出記帳仕訳チェック修正反映帳簿確認
期間と進み具合を1か所にまとめた案。「あと何工程で終わるか」が数字とバーの両方で見えます。テキストだけだった行が、そのまま進捗の可視化になります。
B-3ラベル値ペア型
いまの進み具合
123
対象期間 2026年1月〜6月分 第2期
期間を情報ブロックとして独立させた案。何月分の話をしているのかが最もはっきりします。
C

申告期限カード(173日)

日付が主役で日数が右隅の添え物になっている現状に対し、見せ方を変えた4案です。
C-0現状
申告期限まで
2027年3月15日(月)
余裕を持って準備を始めましょう
173
3行のテキストと数字が左右に分かれていて、視線が2か所に散ります。
C-1数字主役型
申告期限まで
173
2027年3月15日月曜日
2026年1月提出期限
日数を主役に逆転させ、日付を右に小さく添えた案。下の細いバーで、申告期間のどこにいるかも同時に見せます。
C-2リング型
173
申告期限まで
2027年3月15日
余裕を持って準備できます
円グラフで残り時間を表した案。いちばんリッチに見えます。「何に対する39%か」が直感では伝わりにくいのが弱点です。
C-3タイムライン型推奨
申告期限まで
173
2027年3月15日(月)
いまは準備を始める時期です
いま
2026年1月提出期限
1年の流れの中で「いまどこか」を示した案。残日数だけでなく、まだ余裕があるという安心まで同時に伝わります。ホームの一番上に置くカードとして情報量がちょうどいいです。
C-4月チップ型
申告期限まで
173
2027年3月15日(月)
10月11月12月 1月2月3月
残り6か月。薄い月は申告直前で慌てやすい時期です
残りを月のマスで見せた案。日数より月のほうが生活感覚に近い人向けです。年をまたぐと少し読みにくくなります。
D

組み合わせた完成形(実寸)

3点をまとめてホーム画面に落とした3パターンです。iPhoneの実寸で並べています。
D-1最小変更案
A-1a + B-1 + C-1。いまの構造を保ったまま、チップ化と期間表記だけを直した案です。実装コストが一番低く済みます。
スマート確定申告
申告期限まで
173
2027年3月15日月曜日
2026年1月提出期限
Coming Soon...
サンプルデータNotion連携後に実データが入ります
いまの進み具合
第1期7〜12月 第2期1〜6月 第3期申告
あなたの番です
収入合計
MF未接続
経費合計
MF未接続
D-2推奨案これが本命
A-3 + B-2 + C-3。交互制が絵で伝わり、いまどっちの番かで迷わない構成です。担当の言葉は各1回しか出ません。
スマート確定申告
申告期限まで
173
2027年3月15日(月)
いまは準備を始める時期です
いま
2026年1月提出期限
Coming Soon...
サンプルデータNotion連携後に実データが入ります
いまの進み具合
123
第2期(1〜6月分)5工程中 1つ目
あなたの番です
収入合計
MF未接続
経費合計
MF未接続
D-3最小高さ案
A-4 + B-3 + C-2。担当ラベルを廃して縦を詰めた案です。卵カードを大きく戻したくなったときに効きます。
スマート確定申告
173
申告期限まで
2027年3月15日
余裕を持って準備できます
Coming Soon...
サンプルデータNotion連携後に実データが入ります
いまの進み具合
123
対象期間2026年1月〜6月分第2期
あなたが動く工程 スマカクが動く工程
収入合計
MF未接続
経費合計
MF未接続
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 月チップ生活感覚に近い年をまたぐと読みにくい