スマカクアプリ 年間サイクルUI 第6案

丸のチェックをやめて番号が点灯していく形にし、済みバッジは緑の塗りに白抜きチェック(他と同じ高さ)へ。要対応はN-4の点滅ドットに確定し、右上を1行に収める案と、工程2の見え方を新しく作りました。
丸は点灯・バッジの高さは全状態17pxで統一 第5案 第4案 第3案 第1案
直したところ
丸の中は1・2・3・4・5のままで、進んだ番号が薄い緑に点灯していくだけにしました(チェックは入りません)。済んだ工程のバッジは緑の塗りに白抜きチェックで、高さは他の状態と完全に同じ17pxに揃えています。要対応はN-4(点滅ドット付き)に固定しました。
L

右上を1行に収める

グループ・フェーズ・対象月・提出期限の4つを、見出しの右の1行に収める案です。343pxの幅では4つ全部は物理的に入らないので、どれを右上に残してどれを別の場所へ逃がすかの選択になります。
L-1期限をボタンの上へ逃がす推奨
右上はグループとフェーズだけにして、対象月と提出期限はボタンのすぐ上に1行で置いた案。期限は行動の直前に出るほうが効くので、位置としてもここが自然です。右上は完全に1行、カードの高さも前回とほぼ同じです。
L-2グループを1文字にする
「Aグループ」を丸いAバッジに縮めて、空いた分に期限を入れた案。1行に3つ入ります。Aだけでは何のAか分かりにくいので、マイページ側の表記と併せて覚えてもらう前提になります。
L-3対象月をP2の中へ入れる
いま対応中のフェーズの枠だけ広げて、中に対象月を入れた案。「P2=4〜6月」が同じ箱に入るので、記号と中身が結びつきます。期限はボタンの上です。
L-4見出しを「進捗」に縮める
見出しを2文字にして幅を稼ぎ、グループ・フェーズ・対象月の3つを1行に入れた案。期限はボタンの上です。
L-5見出しをやめて情報だけ
「進捗状況」という見出しを外し、1行を情報だけで使った案。4つすべてが1行に収まります。カードが何のカードなのかは、下のステップ行から読み取ってもらう形になります。
L-6ミニプランでのL-1
フェーズが2つのミニプランでも、L-1のレイアウトがそのまま成立することの確認です。
W

工程2(スマカクの番)に進んだときの表示

ご質問の答えですが、2番は「要対応」ではなく「要待機」になります。緑の背景に白抜きで、押す場所ではないけれど進行中だと分かる形です。ただし緑だと自分の番と紛らわしいという見方もできるので、比較用に4通り作りました。どれも工程1は済み、工程2が進行中の状態です。
W-1緑の塗り「要待機」現行案
いま動いていることが強く伝わります。自分の番(白地に緑枠)とは形が違うので見分けはつきますが、緑が2か所に出ます。
W-2グレーの塗り「対応中」
緑を自分の番だけに使い切る案。画面の中で緑=自分がやること、に統一できます。進行中であることは塗りの濃さで示します。
W-3グレーの枠「対応中」
自分の番と同じ「白地に枠」の形にして、色だけグレーにした案。形が揃うぶん、色の違いだけで役割が読めます。
W-4点滅ドット「記帳中」
自分の番と同じ点滅ドットを、グレーで付けた案。何をしているか(記帳)を工程名で言い直すので、待っている間の安心感は一番あります。
P

番号が点灯していく様子(工程1〜5)

丸にチェックは入れず、済んだ番号が薄い緑に点灯し、いまの番号が濃い緑で光ります。バッジ側だけがチェックに変わります。
M

工程ごとの画面(5パターン)

レイアウトはL-1、要対応はN-4、工程2の表示はW-1で組んでいます。5枚を横に並べるため端末は実寸の8割に縮めています。
E

実装用データ

出典はNotion「資料提出の年間サイクル」(2026-09-14更新)。
プラングループP1P2P3
通常(年3回)Aグループ1〜3月(4月末〆)4〜6月(7月末〆)7〜12月(翌年1/10〆)
Bグループ1〜4月(5月末〆)5〜7月(8月末〆)8〜12月(翌年1/10〆)
Cグループ1〜5月(6月末〆)6〜8月(9月末〆)9〜12月(翌年1/10〆)
ミニプラン(年2回)Aグループなし1〜6月(7月末〆)7〜12月(翌年1/10〆)
Bグループなし1〜7月(8月末〆)8〜12月(翌年1/10〆)
Cグループなし1〜8月(9月末〆)9〜12月(翌年1/10〆)