デザインの意図を伝えるには？コーディングを外注するときの共有メモ

デザインは渡せるけれど、どこまで説明すれば意図が伝わるのか分からない。

コーディングを外注するときは、見た目のデータに「変えたくない点」と「画面だけでは分からない動き」を添えると、確認する場所がはっきりします。

長い仕様書を一から作る前に、気になる箇所からメモしてみてください。

変えたくない部分を、理由と一緒に伝える

「デザイン通りにお願いします」に加えて、特に見てほしい場所を挙げます。

たとえば「この見出しは2行で読ませたい」「商品の写真は端が切れないように見せたい」といった指定です。

理由もあると、画面幅が変わったときに判断しやすくなります。

「2行目を強調したいので、ここで改行している」のように、見せたい意図を伝えます。

スマホでは別の見せ方にしてよい部分も分かれば、PCの配置をどこまで引き継ぐか相談できます。

クリックしたあと、どうなるかを書く

ボタンやメニューは、静止したデザインだけでは動作を決められません。

「問い合わせボタンを押すと、同じページのフォームへ移動する」

「よくある質問は、質問を押すと回答が開く」

このくらいの短い説明でも、確認に使えます。

参考ページがある場合は、どのボタンや動きを参考にしたいのかまで指定してください。

ページ全体を見せるだけだと、色や配置を参考にするのか、動きを参考にするのかが曖昧になります。

仮の文章・画像と、確定した素材を分ける

デザインに仮の文章や画像が残っているなら、差し替える場所を示しておきます。

文章量や写真の縦横比が変わると、改行位置や配置も変わることがあります。

「この文章は確定」「この写真は差し替え予定」と分かれば、どこまで仕上げてよいか確認できます。

Figma・XDなら内容を確認できる共有リンク、Illustrator・PSDなら編集できる元データがあると、文字や余白、使われている素材を確認できます。

フォントの指定や支給素材も、どれを使うか分かるようにまとめます。

決まっていないことも共有する

メニューの動きやスマホ表示が未確定なら、そのまま伝えて大丈夫です。

指定する箇所と任せたい箇所を分けると、全部を自分で決めてから依頼する必要がなくなります。

既存サイトに合わせる場合は、そのサイトのコードやコーディングルールも確認します。

AQUALOGでは、支給デザインを見ながら実装前の確認事項を整理します。

デザインとページ数、希望納期に、こだわりたい箇所や未確定の点を添えてご相談ください。

https://coconala.com/services/4455167