ブログ

  1. トップ
  2. ブログ
  3. コーディングの指示書の書き方と指示出しに使いやすいツールご紹介

Web制作

コーディングの指示書の書き方と指示出しに使いやすいツールご紹介

皆さま、こんにちは。
今回は「コーディングの指示書」とは?ということと、その指示書作りやコーダーさんへの指示出しにも使えるツールについてご紹介します。

コーディング作業の前には、制作会社さんやWEBデザイナーさんからコーダーさんへデザインデータへのお渡しとともに、どういうコーディングをしたいか?を説明して依頼をすると思います。

そのときに、「コーディング指示書」を作ってほしいと依頼されることもありますし、逆にお作りすると作業がスムーズに進むことがあります。

くまWEBではコーディング依頼時に指示書は必須ではありませんが、コーダーさんによっては制作の流れで必要となることがあります。

その指示書に書いておくとよいことと、伝える際に使えるツールをまとめてご紹介します。

1.コーディング指示書に記載する内容

WEBデザインデータを渡しただけではわからない、デザインデータからではわからない情報を”コーディング指示”として出します。

<例>
・リンク先(サイトマップでわかりづらい場合)
・動き(アニメーション、スライドショーなど)
・文字のテキスト/画像の区別
・hタグの指定
・画像のaltタグ
・classなどの命名ルール
・グローバルメニューなどのホバー

デザイナーさんがカラーガイドやアニメーションなど、コーディング時の作業がわかりやすいように作ってくださっていたとしても、念のため、抜けないようにするのがコーディング指示書の役目でもあります。ちょっとした指示でもコーダーさんが便利になることもあります。

デザインデータを見て、「ちょっとわかりづらいかな?」と思うところや、「こうしてほしい」とはっきりした希望のあるところは指示しておくと間違いがおきづらく、結果として修正回数が減って早く仕上がるので、Win-Winになります。

■特に動きをつけたいWEBサイト制作のときは細かめな指示出しが必要

・ボタンにポインタを載せたときに色が変わるようにしたい!
・目立つように動く線が出るようにしたい!
・スライドショーを5枚でゆっくり左から右へ!画像をクリックでリンクが飛ぶように!

そんなときは「左側から背景が赤に変わる」などちょっとコメントを入れておくと、漏れなくコーディングされます。

具体的な指示の出し方は別途記事を作成し、公開しています。合わせてチェックください。

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

コーディング指示の出し方ですが、デザインデータを印刷してペンで描いた(後にスキャン)り、PDFの上に書き込んだり、スクリーンショットをパワーポイントに貼り付けて書き込んだり…と、いろいろな方法があります。

ただリンク先などコピーできたほうが便利なこともあります。

・PDFの上にコメント機能を使って書き込む
・指示入れの専用ツールを使う

などによって作業効率がアップします。
PDFのコメント機能もなかなか便利です。

ただ1枚のPDF上に入れたコメントの総数はわかりますが、それぞれのコメントに番号が振られないので管理しづらいなどデメリットもあります。

専用ツールはやはりうまくできているので便利です。
無料で登録もせず使えるツールがありますので、1つご紹介します。

3.指示出しツールはやはり専用だけあって使いやすい!

これまでも修正指示&校正ツール「AUN」修正指示&校正ツール「MONJI」をご紹介しました。

コーディングの指示出し以外にも使える「mitekaku」という無料ツールがあります。もともとはデザインの修正に使うために開発されているようです。

https://mitekaku.com/about
画像をアップロードしたり、URLからスクリーンショットを生成してくれたりして、指示を入れるベースが作られます。それに自由に書き込んで使います。

指示を入れた部分は吹き出しが出て、ファイルを添付したり、吹き出しと吹き出しを関連させたりと、指示を出す側にはありがたい機能が整っています。

仕上がったらURLを共有して確認してもらう仕組みです。コーダーさん以外にもデザイナーさん、ディレクターさんなど複数人に送るのも簡単です。

■無料/登録をしないで使える機能
・保存期間:7日間
・アップロード容量:20M
・修正指示機能:無制限
・パスワード保護付き
・一度保存すると修正できない

保存期間が短いなどデメリットはありますが、指示を入れる機能は無制限なので、使いやすさは十分です。

このような専用ツールは複数あり、無料で使えるものもたくさんありますので、まずは無料で登録せずに使えるもので試してみてください。

4.依頼をしっかり出せば短い期間で修正が少なく仕上がる

コミュニケーションが不足すると、どうしても行き違いが生まれて作業に無駄が出ます。

くまWEBでは経験が豊富なことや、しっかりと担当者が聞き取ること、オンラインのお打ち合わせなども行うことで依頼にしっかり対応するように心がけております。そのため指示書は不要とお客様にはお伝えしております。

ただ、なかなか口で表現しづらいことがあったり、「言ってもいいのかな」と遠慮されてしまったり、WEBディレクターさんが指示を出すときに全体像が見えていなくて整理したいタイミングがあったりなどすると思います。

そんなときはマイペースに全体をみながら指示を書き込めるツールも便利なものです。皆さんの使いやすいように上手くツールも使いながら作業を進めていただけると幸いです。

まとめ

コーディングの指示出しと書いてしまうと難しいイメージがあるのですが、「こうしたい」という要望がコーディング担当者に伝われば結果OKなので、書くのが大変な方は口頭でお伝えするのも良いと思います!

作業効率化を考える方は、指示が抜けなく伝わりやすく、書いた文字がコピペできるなど作業が重複せずに行える配慮された専用ツールのご利用をご検討くださいませ。