こんにちは、kraftの岡田です。
私は構築担当(フロント側)として案件に参画する機会も非常に多いです。
案件を対応していく中で、「この情報があると効率よく作業ができるな」と感じたものを今回ご紹介してきたいと思います。
この記事を読んでいただければ、コーダーが作業しやすい仕様書・指示書を作成しやすくなると思います。
是非ご参考にしてみてください。

本記事で定義する仕様書の意味合いについて

今回は、イメージがしやすいように「デザイン仕様書・指示書」という名前を使っています。
デザイナーがコーダーにデザインについてまとめて送る行為自体を指す形で執筆しておりますので、その点ご了承ください。

何故デザイン仕様書を作るのか

1つ1つデザインの仕様や情報をまとめる事は、正直時間がかかったりして大変です。
では何故手間をかけてまで仕様書と作成するのでしょうか。

仕様書を作らない場合

もし仕様書がない場合、コーダーはデザインデータを見てこのような疑問を持つ可能性が高いです。

• ボタンにマウスカーソルを当てた時のスタイルは変えるのかな？
• ヘッダーは固定するのかな？
• 動きをつけてほしいと言われているけど、どんな動きを希望しているのかな？
• コンポーネントを作りたいけど、どの要素が共通要素として使われているのかな？
• メインカラーはどれだろう？

上記はどれもデザインデータを検証したり直接確認することによって解決ができます。
しかし、確認作業に時間がかかりすぎてしまいます。

仕様書をしっかりと作っている場合

しっかりと仕様書を作っておくことにより、コーダーはデザインをパッと見ただけでおおよその仕様を把握することができます。
したがって、確認作業に時間をかけずにすぐコーディング作業に入ることができます。

デザイン仕様書は何にまとめたらよい？

一般的には以下の項目が挙げられます。

• Microsoft Excel
• Microsoft Word
• Figma
• XD
• Illustrator
• Photoshop ...など

「絶対にこのツールを使う必要がある」というルールはありません。
しかし、個人的な意見としてはデザインデータの隣に仕様を記述することをオススメしています。

例えば、Figmaを使ってデザインを作成したとしたらそのFigma内に仕様を記述します。
情報が多すぎて見づらくなる場合は、仕様用のページを作成してそこにまとめる形でもよいでしょう。

最低限書いておきたいデザイン情報

デザインによって書いておくべき内容は異なります。
したがって、今回は最低限この辺りの情報は書いておくとコーダーが助かる内容を挙げていきます。

共通要素

サイト内で使いまわしている要素があれば、１ヶ所にまとめておきましょう。

●指示例

フォント情報

サイト内で使っている文字情報をまとめておきましょう。

フォント情報とは？

• 文字サイズ(PC/SP)
• フォントの種類
• 行間
• 文字間

●指示例

ヘッダーの挙動

スクロールした時にヘッダーが固定になるのかなど記載しておきましょう。
スマートフォンメニューが開く挙動なども併せて記載できると尚良いです。

●指示例

カラーパレット

サイト内で使っているカラーを１ヶ所にまとめておきましょう。

●指示例

カラーの下にHexなどを一緒に書いておいても良いですね。

インナー幅・ブレイクポイント情報

デザインによりますが、一般的にはインナー幅などを設けているケースが多いと思います。
こちらも記載しておくと非常に助かります。

●指示例

ホバー情報

リンクなどマウスホバーした際の挙動をまとめておきましょう。
コンポーネント毎に作成できればベストです。

●指示例

アニメーションの挙動

アニメーションの指示は、言葉だけで表現するのは難しいです。
なので、似たイメージのアニメーションや参考サイトを一緒に記載しておくと齟齬なく実装してもらうことができます。

●指示例

動的箇所の改行時の表示

WordPressなどクライアント側でお知らせやブログを更新する仕様だと、どのくらいの文字量が入るかわからないケースがほとんどです。
タイトルが多い時・少ない時など様々なケースを想定してその時々にどんな表示になっているのが正解なのかしっかりと記載しておきましょう。

●指示例

フォームのエラーメッセージ

ユーザーインターフェース観点からフォームのエラーメッセージもしっかりと作り込むべきです。
このエラーメッセージも考え、記載しておくと良いでしょう。

●指示例

まとめ

デザイン仕様書の作り方をメインテーマに扱っていきました。
案件を行っていく上で相手が困らないように制作を進めていく事は非常に大切です。
今回ご紹介した項目だけでも最低限抑えておくだけでコーダーの作業効率が変わってきます。
是非積極的に取り入れてみてください。

構築案件について随時募集中

kraftでは、構築のスポット対応も行っております。
CMSを活用した動的なサイト制作〜リッチなアニメーション表現まで対応可能ですので、是非ご相談ください。
ご相談はこちら