コーディング指示書の書き方を調べると、入れるべき項目のリストは多く見つかります。ただ、項目を並べただけの指示書を受け取っても、実装する側はすぐには手が動きません。そこに書かれた言葉が、実装の一手に変換できる粒度になっているかどうか。そこが手戻りの分かれ目です。

この記事では、指示書を受け取って実装する側の視点から、何があれば迷わず着手でき、何が欠けると手が止まるのかを具体的にまとめます。デザインデータはFigmaを前提に書きます。

実装者は「静止画」ではなく「決めごと」を読んでいる

私が指示書を開いてまず探すのは、きれいなデザイン画そのものではありません。その画面を作るために決まっていること、つまり数値・状態・書き出しルール・確認先です。

デザインカンプは、たいてい一番整った「通常時の一枚」です。ですが実装は、そこに描かれていない部分まで全部コードにしないと動きません。余白が何pxか、押せないボタンはどう見せるか、画像はどの形式で出すか。ここが指示書で決まっていないと、実装者は二択を迫られます。推測で作ってズレるか、質問して手を止めるか。どちらもプロジェクトの時間を削ります。

だから良い指示書とは、項目が多い指示書ではなく、実装者が推測しなくて済む指示書です。次の6項目は、受け取る側として「これが書いてあると即着手できる」と感じる要素です。

コーディング指示書に入れてほしい6項目（対応範囲・フォント余白・状態指定・画像書き出し・挙動アニメ・確認の窓口）

即着手できる指示書の6項目

上から順に、なぜ実装者がそこを見るのかを添えます。

  • 対応範囲 ― どのページを、どの画面幅まで作るか。ここが曖昧だと見積もりも実装も始まりません。「PCとスマホ」ではなく、対象ページと対応する画面幅の下限・上限まで書いてあると助かります。
  • フォント・余白の数値 ― 「いい感じの余白」では実装できません。上下32pxのように数値で。Figmaなら数値は入っているので、「感覚で調整せずカンプの数値どおりに」と一言あるだけで、私は迷いなく写せます。
  • 状態の指定 ― hover・focus・error・空・送信中など、動いたときの見た目。ここは特に抜けやすく、抜けると必ず確認の往復が起きます。
  • 画像の書き出し ― どれをSVGで、どれを写真として出すか。形式・倍率・ファイル名の付け方まで決まっていると、書き出しで止まりません。
  • 挙動・アニメーション ― どこが動くのか、どのくらいの速さで。参考にしたい既存サイトのURLが1本あると、言葉より早く伝わります。
  • 確認の窓口 ― 迷ったとき誰に、どのくらいで返事がもらえるか。これが決まっているだけで、実装者は止まらずに質問を投げられます。

すべてを完璧に埋める必要はありません。埋まっていない箇所は「ここはお任せ」と一言あれば、こちらで決めて確認しながら進められます。困るのは、決まっていないのに決まっているように見える状態です。

同じ内容でも、書き方で手戻りは変わる

同じことを伝えるのでも、言葉の粒度で実装のしやすさは大きく変わります。左のように書かれると推測が入り、右のように書かれると推測せずに済みます。

手戻りが増える指示と即着手できる指示の書き方の比較（余白・端末・状態・画像・質問先）

たとえば「スマホでは縦に」は、その「スマホ」が何pxまでを指すのかが人によってずれます。画面幅で「640px以下のとき縦」と書いてあれば、実装はそのまま一意に決まります。この考え方はレスポンシブ指示を画面幅で渡す話に詳しくまとめています。

状態についても同じで、通常時だけのカンプだと、hoverやエラーの見た目を実装者が勝手に決めることになります。渡す前に主要な状態を洗い出しておくと後戻りが減ります。これは実装前に返したい状態の抜けチェックリストで具体的に扱っています。

Figmaなら、指示書は「補足」でよくなる

FigmaのDev Mode（開発者向けの表示モード）では、要素を選ぶと寸法・余白・CSSの値を確認できます。フレームに「Ready for Dev」の印を付けたり、注釈を添えたりもできます。つまりFigmaを渡してもらえるだけで、数値の多くは指示書に書き写さなくても実装者が読み取れます。

だからFigma前提なら、指示書の役割は「カンプから読み取れないこと」に絞れます。具体的には、動きの意図、状態の見せ方、画像をどう書き出すか、そして優先順位です。

画像の書き出しは補足しておくと親切です。Figmaが標準で書き出せるのはPNG・JPG・SVG・PDFで、WebPは標準では出せません（プラグインを使えば可能です）。またSVGの書き出しは等倍のみとされているため、写真は用途に応じた倍率を指定してもらえると、こちらで書き出しの判断に迷いません。ロゴやアイコンはSVG、写真はPNGやJPG、といった振り分けを一言添えてもらえるだけで十分です。

デザインデータの渡し方そのものはFigmaからのコーディング依頼で見ているポイントにもまとめています。

指示書は「完璧」でなく「決まっている」がゴール

まとめると、手戻りの少ない指示書は、項目が網羅されている指示書ではありません。実装者が推測せずに一手を打てる状態まで、数値・状態・書き出し・確認先が決まっている指示書です。

私自身、粒度の細かい指示書をいただいた案件ほど、質問の往復が少なく、仕上がりもカンプに近づくと感じています。逆に、決まっていない部分は無理に書き込むより「ここは相談」と明示してもらえたほうが、こちらから提案しながら埋められます。

指示書の粒度から一緒に整えたい、今ある資料で実装に足りるか見てほしい——そんなときはお問い合わせからお気軽にご相談ください。実装者の目線で、どこを足すと着手が速くなるかをお伝えします。

本記事は2026年7月時点の情報です。Figmaの機能や書き出し仕様、CSSフレームワークの初期設定は変わる場合があるため、最新の情報もあわせてご確認ください。