Shopifyのデザインカンプを作るだけでも構築はできますが、仕様書があることで構築者の工数の削減に繋がります。
今回は仕様書を作る理由を整理した上で、仕様書に書く内容について解説させていただきます。
そもそも仕様書とは
仕様書とは、デザインカンプの補足をまとめたものです。
構築者への「指示書」や「デザインのカイドライン」と呼ばれることもあります。
仕様書にはデザインカンプを見ただけでは判断が難しい内容や、デザインカンプの中で共通しているルールを書きます。
しょうこデザインカンプとファイルはわけず、デザインカンプを作成したファイルの中に仕様書用のフレームを作ってその中に必要事項を書いていきます。
仕様書を作る理由
仕様書は工数の削減に繋げるため、構築時に不明点が生じないようにするために制作します。
仕様書なしでデザインカンプを納品することも可能ですが、デザインカンプのみで納品をすると構築をする際に迷いが生じる可能性があります。
「ここはどのように構築するんだろう？」といった疑問が生じると構築者からデザイナーに確認をする必要がでてきてしまい、確認の手間をとらせてしまいます。
そのようなやり取りをしなくても構築ができるように、仕様書を作るようにしましょう。
仕様書に書く内容
仕様書には主に以下の内容を掲載します。
配色
・デザインカンプ内で使用している色
・使用している色のカラーコード
・色を使用している場所
フォント
・使用しているフォントの種類
・使用しているフォントの太さ
・フォントの配布先URL
共通している要素
・見出し文字の大きさ
・本文文字の大きさ
・ヘッダー、フッター内の文字サイズ
・行間
・文字間隔（初期値から変更している場合のみ）
・コンテンツ幅（インナー幅）
・セクション上下内側の余白
ボタン、テキストリンク、アイコン
・通常時の様子
・ホバー時の様子
※必要に応じて、アニメーションが変化する時間を書くようにしましょう。（例：transition:0.5s）
※アニメーションは、参考となるURLも掲載すると認識の相違を防ぐこともできます。
ページネーション
・1ページ目を開いている様子
・ホバー時の様子
・最後のページを開いている様子
シャドウ
・場所
・値
※シャドウを入れている部分をスクリーンショットして貼り付けると、わかりやすくなります。
アニメーション
・適用箇所
・動きのイメージと参考URL
※デザインカンプ内にアニメーションが入っている箇所にコメントを入れておくと、どこにアニメーションが入っているのかよりわかりやすくなり認識の相違も防ぐことができます。
※テーマの初期値の状態から変更しない場合は、その旨を仕様書に書いておきましょう。
チェックボックス、ラジオボタン
・クリックしていない様子
・クリックした様子
フォーム
・入力時の様子
・エラーメッセージ
テーマ設定のスクリーンショット
テーマ設定で編集した設定は仕様書にスクリーンショットを貼り付けておきましょう。（一つ一つ書く必要はなく、わかるようにスクリーンショットを貼るだけでOKです。）
色、ボタンの文字サイズ、アニメーション、コンテンツ幅が書いている箇所のスクリーンショットを貼っておくと、よりスムーズに構築を行うことができます◎
しょうこテーマ設定を明らかにしておくことで構築が時短になりますので、必ずテスト環境で作ったストアのテーマ設定を仕様書に貼り付けておきましょう！
（例）
セクション上下パディング
ヘッダーと他のセクション上下のパディングも書いておきましょう。
ほとんどのテーマがPC版のパディングを設定するとSP版も連動して設定されるため、PC版とSP版それぞれパディングを設定できるテーマ以外はPC版のみ記載を行います。
しょうこパディングの値が2パターン以上ある場合は、パターンの数分記載しておきましょう。
商品売り切れ時の様子、セール時の様子、在庫わずかの時の様子
商品が売り切れになっている時の様子やセール時の様子、在庫わずかの時の様子もわかるように書いておきましょう。
（例）
案件によっては、もうすぐ販売する商品を予告するデザインを作るケースもあります。
そのような案件では「coming soon」の様子が必要な場合もあるので、必要な案件では仕様書に書いておきましょう。
（例）
仕様書の例
以下のようにフレームにまとめていきましょう。
しょうこ基本的にどのような案件でも仕様書は作りますが、ノーコードの案件ではテーマ設定のスクリーンショットを貼り付けるだけでも問題ありません。
テーマ設定の中でセクション上下の余白（パディング）の調整ができないテーマに関してはテーマ設定を貼り付けるだけでは余白がいくつかすぐに判断できないので、仕様書に書いておきましょう！
デザインカンプの仕様書原本
デザインカンプとセットで制作する仕様書の原本です。
「.fig」形式ですので、Figmaにインポートしてご活用ください。
https://drive.google.com/drive/u/4/folders/1EiySn3o3VOHtdl3tiFLpiHBigqdczqmK