実装前にデザイナーへ返したい「状態の抜け」チェックリスト

デザインをいただいて実装に入るとき、私がまず確認するのは「静止画として整っているか」ではありません。その画面が動いたとき、どう見えるかです。ボタンに触れたとき、フォームを送信している最中、入力を間違えたとき、一覧に何もないとき。こうした「状態」がデザインに描かれていないと、実装者は二択を迫られます。推測で作ってズレるか、質問して手を止めるか。どちらもプロジェクトにとっては損失です。

この記事では、実装に渡す前にデザイナーへ返したい「状態の抜け」を、実装者目線でチェックリスト化しました。結論から言うと、主要な状態を一覧で先に決めておくだけで、後戻りの多くは消えます。

なぜ「状態の抜け」で実装が止まるのか

デザインカンプは、多くの場合いちばん綺麗な「通常時」の一枚です。ですが実際のブラウザ上では、要素は常に何らかの状態を持っています。

• ボタン：通常 / hover（カーソルを乗せた） / focus（キーボードで選択された） / active（押している） / disabled（押せない） / loading（処理中）
• フォーム入力：空 / 入力済み / focus / error（不正な値） / disabled
• 一覧・カード：データあり / 空（empty） / 読み込み中 / 読み込み失敗

これらが指定されていないと、実装者は自分の判断で色や余白を決めることになります。すると、レビューで「hover の色が違う」「エラーの見せ方が想定と別」と差し戻しが起きます。手戻りの多くは、実装のミスではなく渡す前に決まっていなかったことが原因だと感じています。

実装者が特に困る「抜けやすい状態」

すべてを網羅する必要はありません。経験上、抜けていると特に困るのは次の4つです。ここが埋まっていると、実装は一気に迷わなくなります。

• フォームのエラー：どの位置に、どんな色・文言で出すか。入力欄の枠を赤くするのか、下にメッセージを添えるのか。私は自分のサイトのお問い合わせフォームで、送信に失敗したときのエラー表示や、送信中はボタンを押せなくする無効化まで実装しています。だからこそ、この見た目が決まっていないと最後まで組み切れないのを痛感しています。
• loading（処理中）：送信ボタンを押してから結果が返るまでの数秒、画面はどう見えるか。ボタン内にスピナーを出すのか、文言を「送信中…」に変えるのか。ここが無いと、ユーザーは二度押ししてしまいます。
• 空（empty）：検索結果ゼロ件、投稿がまだ無いページ。「まだ何もありません」の一言と、次に何をすべきかの導線があるだけで、体験が大きく変わります。
• disabled：押せないボタンをどう見せるか。薄いグレーにするのか、理由を添えるのか。これが未定だと、実装者は「それっぽい薄さ」を勝手に決めるしかありません。

こうした状態を用意してもらえると、推測で作らずに済みます。逆に一つでも欠けると、その一箇所のために確認の往復が発生し、私の手が止まります。

こう渡してもらえると、迷わず組めます

「全状態を毎回フルで描いてください」というお願いではありません。現実的に、これくらいで十分助かります。

• 主要コンポーネントだけ状態を並べる：ボタン・入力欄・リンクといった繰り返し使う部品は、hover / focus / disabled / error を一箇所にまとめておく。個別ページ全部に描く必要はありません。
• 色や余白は変数（トークン）で：hover 時の色を「この変数」と決めておくと、実装側でも同じ名前で管理でき、後からの一括変更が効きます。私の実装も色は変数で持たせているので、名前で揃っていると転記のズレが起きません。
• 文言もデザインの一部として：エラーや空状態のメッセージは、実装者が即興で書くとトーンがぶれます。短くて構わないので、実際に出す言葉を入れておいてもらえると助かります。
• 迷ったら「この状態はどう見せますか」の一行を残す：完璧に描けなくても、コメントで意図が分かれば推測は不要になります。

私は、こうした状態まわりの面倒な作り込みを引き受けることを強みにしています。Figmaのカンプに忠実に、かつ描かれていない状態は「決めて確認する」プロセスとして回します。デザインデータの渡し方についてはFigma・XDからのコーディング依頼で見ているポイントでも触れていますし、CMSと組み合わせた実装の考え方はAstro＋ヘッドレスCMSの実装を外注するにまとめています。

状態の抜けは、責められるべきミスではありません。静止画のカンプという道具の性質上、どうしても漏れるものです。だからこそ、実装に入る前に一緒に洗い出せると、後戻りが減り、完成物の質も上がります。

「状態まで含めて安心して任せたい」「今あるデザインで実装に足りるか見てほしい」——そんなときは、お問い合わせページから気軽にご相談ください。現状のデザインを拝見して、どの状態を足すと実装がスムーズになるか、実装者の目線でお伝えします。

本記事は2026年7月時点の情報です。ツールの仕様や名称は変わる場合がありますので、最新の情報もあわせてご確認ください。