スマカクアプリ　年間サイクルUI 確定版

ホーム画面の進捗状況カードと申告期限カードの確定デザインです。実寸で並べています。
1

進捗状況カード

見出しの右にグループとフェーズ、対応中のフェーズの枠の中に対象月が入ります。ステップの丸は番号のままで、進んだ番号が点灯していきます。
自分の番工程1・資料提出
左の丸い期限バッジは常に明滅します。ボタン文言は16pxで中央に置きます。
スマカクの番工程2・記帳
押せる緑のボタンが消えて、グレーの待機帯に変わります。バッジも濃いグレーの「待機」になります。
途中工程3・仕訳チェック
済んだ工程は番号が薄い緑に点灯し、バッジがチェックに変わります。
フリーランス上期／下期の2枠
for フリーランスはP1P2P3を使わず「上期／下期」の年2回です。枠が2つになっても同じレイアウトで収まります。
ひとり法人決算月ベース（3月決算の例）
法人はグループではなく決算月でサイクルが決まります。右上のチップが「3月決算」に変わり、対象月も事業年度に合わせて動きます。
狭い端末画面幅320pxの端末
幅が足りない端末では、ボタン文言が自動で短いほうに切り替わります。同じコードで、カードの幅を見て勝手に入れ替わる作りです。
2

工程バッジの5状態

すべて高さ18px・枠1px・文字8.5pxに固定しています。工程が進んでもバッジと文字の位置は動きません。
3

工程ごとの画面

1サイクルが進むときの画面の変化です。iPhoneの実寸（375px）で表示しています。
4

実装用データ

サービスごとに区切り方が違います。ECセラーはP1〜P3、フリーランスは上期と下期、ひとり法人は決算月起点です。出典はNotion「資料提出の年間サイクル」（2026-09-14更新）と「【法人用】マイページ テンプレート（決算月ベース）」（2026-09-10更新）。
スマカク for ECセラー　暦年（1〜12月）で、所属グループによって区切りが1か月ずつずれます。ミニプランだけP1がありません。
プラングループ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〆）
スマカク for フリーランス　P1／P2／P3は使わず、上期と下期の年2回です。こちらもグループで1か月ずつずれます。
グループ上期下期
Aグループ1〜5月（6月末〆）6〜12月（翌年1/10〆）
Bグループ1〜6月（7月末〆）7〜12月（翌年1/10〆）
Cグループ1〜7月（8月末〆）8〜12月（翌年1/10〆）
スマカク for ひとり法人　グループではなく決算月で決まります。事業年度を4か月ずつ3分割する形です。
フェーズ対象期間提出期限
P1期首から4か月目まで期首から5か月目の末日
P2期首5か月目〜8か月目期首から9か月目の末日
P3期首9か月目〜12か月目（決算月を含む）決算翌月の10日
決算月の例P1P2P3
3月決算（4/1〜3/31）4〜7月（8月末〆）8〜11月（12月末〆）12〜3月（4/10〆）
12月決算（1/1〜12/31）1〜4月（5月末〆）5〜8月（9月末〆）9〜12月（翌年1/10〆）
9月決算（10/1〜9/30）10〜1月（2月末〆）2〜5月（6月末〆）6〜9月（10/10〆）
5

実装メモ

フェーズ数は固定で書かない
サイクルの決まり方がサービスで違います。個人は暦年＋グループ（A・B・C）、法人は決算月起点の事業年度で、右上に出すチップも「Aグループ」と「3月決算」で変わります。さらにミニプランはP1がなく年2回です。フェーズの数と対象月は必ずユーザーのサービス・プラン・グループ（法人は決算月）から組み立ててください。3つ固定で書くとミニプランで崩れます。
申告期限カードの見出し
「申告期限まで」だと下の日付と文がつながらないので、「確定申告の期限」＋「2026年分」のタグにしました。何年分の申告かがここで分かります。残り日数は右のリングが担当するので、見出し側に「まで」は入れていません。日付は15pxに上げ、曜日だけ小さくしています。
バッジの外形をそろえる
工程バッジは全状態で高さ18px・枠1px・文字8.5pxです。枠を2pxにすると中身の領域が上下に削られて文字が下がるので、太く見せたい「要対応」は内側の影（inset box-shadow）で描いています。下パディング1pxは、日本語グリフが下寄りに見える分の相殺です。
ボタン文言は幅で切り替える
基本は「資料を提出する」「仕訳をチェックする」「帳簿を確認する」です。iPhoneの標準的な画面幅（375px）なら、そのまま余裕を持って収まります。
画面幅320pxのいちばん狭い端末だけ、長い文言が矢印や期限バッジに食い込むので、そのときだけ「資料を提出」「仕訳チェック」「帳簿を確認」に自動で切り替わります。切り替えの境目はカード内側の幅280pxです。
この画面ではCSSのコンテナクエリで実装していますが、アプリ側では画面幅を取って出し分ける形で問題ありません。判定に使うのはカード本体の幅（画面幅から左右の余白を引いた値）です。
点検中…
確認したいこと
グループの呼び方が資料によって違います。アプリのベースラインHTMLのマイページは「グループA（毎月8日締切）」、Notionの業務側は「Aグループ」で語順が逆で、締切も月末と食い違っています。この画面は丸バッジの「A」なので語順は回避していますが、マイページ側と揃えるときに確定が必要です。