複数人でデザインをするときや、依頼してデザインを作成するときに必ず作成するのが「デザイン指示書（コーディング指示書）」です。
ところで、デザイン指示書を作る理由はご存じですか。
何故作成するのか、その必要性を知っておくことで、デザイン指示書を作るときに何を気をつけるべきか理解することにもつながります。
今回の記事のテーマは「デザイン指示書」です。
その必要性や書き方、書くときの注意点についてご紹介します。
ぜひ参考にしてみてください。
目次
デザイン指示書とは？
デザイン指示書とは、「デザインだけでは足りない情報や、制作会社のコーディングルールをまとめた仕様書」です。
なお、デザインだけでは足りない情報は、以下の通りです。
デザインカンプは設計図です。
しかし設計図だけでは伝えきれない情報があるので、それを指示書で補います。
デザインだけで足りない情報
・リンク先
・アニメーション
・カンプより幅を広くしたときのデザインなど
コーディングルールも決めておく
また、コーディングルールの例は以下の通りです。
なお、コーディングルールは、無い場合は書かなくても大丈夫です。
コーディングルール
・class名の付け方（命名規則）
・使用する言語の指定（JavaScriptは素のJS、もしくはjQueryを使用、その他フレームワークは使用不可）
なぜデザイン指示書を書く必要があるのか？
「指示書を書くの、面倒だなあ」
「何ページもあって、できれば書きたくないなあ」
このように考えたことのある方は少なくないはずです。
ここでは、その必要性について考えてみましょう。
早速ですが、「デザイン指示書が無かったら」どうなってしまうでしょうか。
この場合、エンジニアの方にすべて任せることになるでしょう。
しかしエンジニアの方は、もちろんデザイナーの真意を100パーセント理解することはできません。
「ここはただの画像で良いのかな、それともリンクなのかな」
「アニメーションは何が良いのだろう」
以上のように、指示書が無いと一つ一つの行程でつまづいてしまう恐れがあります。
これでは、作業が進みません。
また、完成品も満足のいくものにならないでしょう。
さて、思い通りにならなかった場合は修正が待っています。
そして修正には費用がかかります。
修正には時間もお金もかかってしまうのです。
このように、指示書が無いと無駄な修正につながってしまいます。
一々コミュニケーションをするにしろ、時間的なコストや単純な労力は大きくなってしまうでしょう。
デザイン指示書は、いわば「コミュニケーションを最小化するツール」なのです。
作るのには時間がかかりますが、それでもコストを最小化する物なのです。
そしてデザイン指示書には、もう一つ役割があります。
それは、「自分を守ってくれるもの」です。
たとえばデザイン指示書に書いたあなたの要望が、完成したデザインに反映されていなかったとします。
しっかりデザイン指示書を作っていれば、制作会社に「デザイン指示書に書いてあるようにデザインしてください」と言えますし、修正してもらえるでしょう。
このように、指示書はエビデンスとなってあなたの要望を叶える助けになってくれます。
デザイン指示書の作り方
デザイン指示書を作るときのポイントは、以下の3点です。
デザイン指示書のポイント
・デザインの方針の整理
・カラーイメージ決め
・派手さ決め
デザインの方針の整理
デザインの方針を整理するときは、以下の流れで行います。
1.ユーザに伝えたいことの優先順位を決める
構成案を考えるときには、どこを目立たせるかについて明確にしておく必要があります。
そして目立たせる場所は、「ユーザに伝えたいこと」になります。
もちろん、ユーザに伝えたいことは沢山ある筈です。
そこで、それらの中で優先順位を付けておかなければならないのです。
2.ユーザに一番与えたい印象を決める
ユーザの持つ印象は、サイト全体から決まります。
「ユーザに伝えたいことの優先順位決め」が細かいところを決めるものだとすれば、こちらは広い視点を持って決めるものと言えるでしょう。
カラーイメージ決め
カラーイメージとは、「色の持つ印象」です。
要は、色にどのような修飾語を付けるのか、ということです。
たとえば、ブルーでも「大人っぽいブルー」なのか「明るく爽やかなブルー」なのかによって、雰囲気や見た目は大きく変わります。
反対に単にブルーと伝えると、イメージと異なるものが提案されるかもしれません。
なお、カラーイメージは言語化しにくいため、実際の色のサンプルを見せるのがおすすめです。
決め方ですが、ユーザに与えたい印象から逆算して決めると良いでしょう。
このとき、暖色なのか寒色なのかから考えると考えやすいかもしれません。
また、ここでアクセントカラーについても選択します。
商品やコーポレートカラーを使用すれば、統一感のある印象にできます。
反対にNGの色がある場合は、その点も書いておきましょう。
派手さ決め
ユーザに与えたい印象から全体のカラーイメージとアクセントカラーが決まったら、派手さについても考えます。
派手にするのか、反対に落ち着かせるのかについて決めるので、この点はクライアントとデザイナーで協議する必要があるかもしれません。
指示書作成で気をつけるべきポイントとは？
1つ目：簡潔に記載する
指示書は、誰が見ても分かるようにすることが大切です。
そのため、簡潔な内容で記載するのがポイントです。
また、簡潔でないと指示書の内容理解に時間がかかってしまいます。
これでは作業時間が長くなってしまいます。
もちろん、必要となる情報は載せる必要があります。
内容を過不足伝えられるように、指示書作成のときは気をつける必要があります。
2つ目：迅速に共有する
指示書に限りませんが、情報は素早く共有しなければ、そのままビジネススピードの鈍化につながってしまうでしょう。
そこでおすすめなのが、メールを除くITツールを用いた共有です。
紙媒体の指示書では共有に時間がかかってしまいますし、メールによる共有では漏れが発生してしまいがちです。
3つ目：アクセスしやすいように管理する
作業者は、指示書を見ながら作業します。
そのため、時間や場所を問わずに閲覧できるような指示書がベストです。
デザイン修正ツールmitekakuを紹介します！
今回は指示書の作り方をご紹介しました。
しかし、どんなに気をつけても指示に抜け漏れがあったり、伝達不足が発生したりして、修正につながることもあるでしょう。
修正には時間がかかるため、苦手な方は多いです。
そこでおすすめしたいのが、デザイン修正指示ツールであるmitekakuです。
修正指示を書きこんで行うため直観的に利用できますし、登録不要で利用できるため導入も容易です。
無料で試せるので、mitekakuが気になったという方は、まず一度利用してみてください。
まとめ
デザインの指示書は、「デザインだけでは足りない情報やコーディングルールをまとめた指示書」のことです。
作るのは手間ですが、時間的・費用的コストを削減するためには欠かせません。
前述したように、指示書作成自体にもコストはかかります。
しかし指示書の質によって、完成したものの質が左右されるのも事実です。
そこで本記事が、質の高い指示書作成に役立てば幸いです。
デザイン指示書のポイント
■作るときに決めること
・デザインの方針の整理
・カラーイメージ決め
・派手さ決め
■指示書を作成する際に決めること
・簡潔に記載する
・迅速に共有する
・アクセスしやすいように管理する
