コーディング指示書の書き方と注意点

今回はコーディング開始前に無くてはならないコーディング指示書について書いていきたいと思います。
コーディング指示書の内容は制作会社によってかなりバラつきがあるので、この記事を読んでその重要性と必要性を感じて頂ければと思います。

コーディング指示書とは？

コーディング指示書とは、デザインだけでは足りない情報や制作会社のコーディングルールをまとめた仕様書になります。
デザインだけでは足りない情報とは、

など色々あります。
デザインカンプは設計図ですが、設計図だけでは伝えられない事は色々あります。

コーディングルールについては、

などがあり、もしなければ書かなくても大丈夫です。
また、納品方法についても対応可能か確認しておきましょう。

なぜ指示書が必要なのか今回はコーディング開始前に無くてはならないコーディング指示書について書いていきたいと思います。
コーディング指示書の内容は制作会社によってかなりバラつきがあるので、この記事を読んでその重要性と必要性を感じて頂ければと思います。

なぜ指示書が必要なのか

コーディング指示書がないとどうなるかと言うと、

などなど、デザインカンプだけでは分からない事がたくさん出てきます。

コーダー側としてはこれらの情報がないと全て確認しないといけなくなり、やり取りの数が増えて無駄に時間を消費してしまいます。
特に制作会社の場合は土日祝は休みで返信が来ないケースが多いので、やり取りの回数が増えると全ての疑問を解消するのに数週間かかってしまう事もあります。

こういったコミュニケーションコストを下げる為にも、指示書は最初にしっかりと作り込む事が重要です。
もしコーディング指示書がない場合、コーダーはコーディングを始める前にデザインカンプを全て確認し、全ての疑問をまとめて伝えましょう（それでもコーディング中に新たな疑問点は出てくるとは思います）
ちゃんと確認しないままコーダーが自分の判断で作業を進めてしまうと、認識の齟齬が発生してのちのち修正地獄になりかねません。
多少時間がかかってもコーディング指示書をしっかりと用意する事で、無駄なコストが発生することを防ぐことが出来ます。

コーディング指示書の書き方

それではこの記事の本題であるコーディング指示書の書き方を解説していきたいと思います。

フォーマット

コーディング指示書のフォーマットは特に決まりはないので制作会社によって様々ですが、

などがあります。

Microsoft Officeの場合は、

と言う感じになります。

デザインカンプの場合はデザインの補足したい箇所に注釈として記入されている事が多いので、場所がすぐ分かると言うメリットがありますが、一覧として確認しにくいと言うデメリットもあります。
見やすい書き方としては、色やhoverアニメーションなど全体共通の物に関しては表などでまとめ、部分的に補足したい箇所はデザインカンプの該当箇所に書くと分かりやすいと思います。

また、jpgやPDFなどコピー出来ないような指示書はやめた方がいいでしょう。
hover時のカラーコードなどコピペ出来ないと手入力でミスする可能性もありますし、修正指示の場合はテキストがコピー出来ないと非常に大変です。

修正について

今回のテーマとは少し異なりますが、指示書とは別に作業が進んできたら修正表を作成します。
修正表についてはGoogleスプレッドシートが一番見やすいかと思います。

スプレッドシートは入力内容がリアルタイムで反映されますし、指示内容や修正内容が一覧で表示されるので分かりやすいです。
記載する内容は主に以下になります。

特に重要なのはセクション名やスクショになります。

たまに修正依頼でページ名も書かれてなく、

「テキストの〇〇を〇〇に変更して下さい」

という書き方をされる場合がありますが、これではどのページのどの部分か分かりません。

この場合コーダーは全てのページの全ての箇所を探さないといけないので、最低でもページ名とセクション名、あとはテキストでは伝わりにくいと思う場合はスクショも貼っておくと親切です。

指示書に必要なこと

指示書に必要なことは主に以下になります。

リンク先

コーポレートサイトの場合、ヘッダーメニューなどは下層ページを見れば大体分かりますが、遷移先がページ内のセクションだったりすると少し分かりにくい場合があります。

また外部リンクの場合はURLを書いておかないと分からないので、URLと「外部リンク」と書いてあると親切です。

アニメーション

アニメーションに関してはデザインだけ見ても当然分からないので、アニメーションのまとめサイトなどを貼って「ボタンアニメーションの何番」という指定をしたりします。

あとは参考サイトのこのアニメーションと同じようにして下さい、といった書き方もあります。
アニメーションに関してはテキストだけで伝えようとするとほぼ確実に上手く伝わらないので、必ず実際の動きを見せられるようなアニメーションにしましょう。
またhoverして色が変わる時は動きだけでなく、変化した後の色もちゃんと書いておきましょう。

スライダーやフェードインの時間

これはコーディング指示書に書く必要はないかと思いますが、スライダーはスライドの切り替え時間や表示時間の指定があるのが理想です。

ただしここに関しては実際に動いている状態を見てみないと分からないと思います。
ここで言いたいのは、修正するときに「もう少し早く」とか「もう少し遅く」と言われるとコーダーは「少しって何秒？」と思ってしまうので、「スライドの表示時間は現在の3秒から4秒に変更」など具体的な数字で伝えるといいでしょう。
これに関してはアニメーションやフェードインに関しても同様です。

固定する箇所

ヘッダーやバナーなどスクロールしても固定させたい箇所はあると思いますが、これも指示書に書いておかないとデザインだけでは判断できません。

ヘッダーは大抵固定だと思いますが、ここも念のため書いておくといいと思います。
また、少しスクロールしてから出現させて固定といったバナーなどの箇所についても書いておきましょう。

CMS情報

代表的なCMSはWordPressになりますが、WordPressはカスタマイズすれば管理画面からクライアントが簡単に作業出来ることが沢山あり、この辺の情報も書いておきましょう。

例えば、

など。

あとはWordPressのログイン情報なども作業前に必ず必要な情報ではありませんが、分かっていれば書いておきましょう（ログイン情報はコーダーがローカル環境構築の際に必要になりますが、ユーザー名とパスワードは後からでも変更可能なので）

サイトタイトル、ディスクリプション

ディスクリプションはサイトの説明になりますが、サイトタイトル含めコーダーが決める所ではないのでここも書いておきましょう（WordPressの場合はクライアントが管理画面から設定することもあります）

SNS情報

例えばWordPressでInstagramのタイムラインを表示させる際にはInstagramのログイン情報が必要になります。
あとは単純に各SNSのURLを入力する場合はURLを書いておきましょう。

対応ブラウザ

対応する必要があるブラウザも書いておきましょう。
はっきり言ってしまうと、IEの対応が必要かどうかは最低書いておきましょう。

IEの対応が必要かどうかで工数は大幅に変わりますし、制作会社によっては費用も変わるポイントです。
最近のコーダーは特に指示がない限りIE対応はしていないケースが大半だと思うので、IE対応の場合は必ず対応可能か事前に確認しましょう。

フォント

フォントについては有料フォントやAdobe Fontsのように埋め込みタグが必要なものもあります。

また、例えばヒラギノはWindowsには入っていないので、Windows用のフォントを書いておくなど必要になります。
フォントについて最初から指示をくれる方はほとんどいないので、この辺をしっかり書いておくと親切です。

投稿ページ

投稿ページには関連記事など表示させる場合がありますが、こういう場合はどういった条件で表示させるか書いておきましょう。
例えば「現在開いているページと同じタグを関連記事に表示する」といった感じです。

あとはダミー記事を入れてレイアウトが崩れていないかチェックして貰うようにするといいでしょう。
特に画像は潰れたり両端がはみ出ていたり、投稿時に設定した通りに配置されていない場合があります。
また、

などなど、デザインが崩れる可能性のある色々なケースが存在します。
これらを全て手入力で投稿するのは大変ですが、テーマテストユニットデータを使うと色々な種類の投稿をしてくれるので便利です。

Google mapの埋め込み

Google mapはただ埋め込むだけであれば問題ありませんが、カスタマイズする場合にはAPIキーが必要になります。
そしてAPIキーを使って表示させる場合、条件次第では有料になるケースがあるのでご注意下さい。

有料になるケースについては以下の記事を参照下さい。
無料はどこまで？Googleマップの課金範囲

SPデザインがない場合

何らかの理由でSPデザイン（スマホデザイン）がない場合、コーダーは「スマホコーディングはよしなにお願いします」と言われる事があります。
よしなに、つまりコーダーにお任せするという事ですね。

ただ横並びのものを縦にするだけならお任せでも大丈夫ですが、例えば画像とテキストが横並びの場合は縦にした時どちらを上にするなど指示しないとコーダーは困ってしまいます。
また、横並びにしただけではない凝ったデザインの場合はコーダーにお任せするというのは無理があるので、セクション単位でもいいのでデザインを用意するとコーダーは助かります。

報告について

コーディングとは直接関係ありませんが、報告についても念のため書いておくといいかも知れません。

例えば10ページのコーポレートサイトの場合、10ページ全て終わるまで途中経過の報告をしてこないコーダーもいるかも知れません。
なので、

のどちらかが一般的かと思います（1日1回は多いかも知れないので、2日に1回や3日に1回でもいいかと思います）

特に初めましてのコーダーの場合、作業スピードやスキル感が掴めないと思いますし、途中で飛んでしまう・・・という不安もあると思います。
出来ればテストサーバーを用意して、そこにページ単位でアップして貰えると確認がしやすいと思います。
テストサーバーは用意するコーダーもいますが、Basic認証（アクセス制限）はちゃんとかけて貰いましょう。

以上になります。
投稿ページのダミー記事や報告などは書かなくても対応してくれるコーダーもいますが、初めて仕事をする方の場合はなるべく細かく書いておくといいと思います。

ビー・コーディングでは、セマンティックコーディングや構造化データを使用したコーディング代行でSEOに強いサイトを制作いたします。
簡単お見積りシステムでおおよその金額をライブでご確認いただくことも可能です。
コーディング代行なら弊社にお任せください。