SUI hair atelier — ギャラリー用補正の説明
Codex作成 / 2026-09-19

Claude Designの初稿と初稿のnotes.txtは変更せず保全しています。
ギャラリー用booking.htmlのみ、静的監査で判明した次の3点をCodexが補正しました。
1. 日付の列を最小44px・間隔4pxに変更。PC端末内、375px/390pxスマホでは7列。より狭い表示では折り返して44pxを維持します。
2. 同じステップ内で選択・必須入力エラーを表示した後も、再描画前と同じ操作要素へキーボードフォーカスを戻します。本文のスクロール位置も保持します。ステップ変更時は従来どおり見出しへ移動します。
3. PC用の左右余白を24px、最大コンテナ幅を1040pxに変更し、説明と390px端末が左右に並ぶよう補正しました。

メニュー・料金・担当・固定日付・満席条件・予約計算・状態遷移は原本から変更していません。
notes-original.txtはClaude Design出力の原文です。7列固定とする説明は、今回の補正版では44pxを確保できる幅に限ります。
claude-design-original.zipは初稿の編集用原本です。補正は含まれません。

この作例は架空の予約体験です。実際の予約・送信・保存・通知・決済は行いません。
全ブラウザ・支援技術での動作を保証するものではありません。確認範囲はギャラリーの説明を参照してください。