コーディングを依頼する前に準備しておきたい5つのこと

「デザインは完成したけれど、コーディングを依頼するときに何を渡せばよいか分からない」

Webデザイナー様や制作担当者様から、このようなご相談をいただくことがあります。

必要な情報が最初に整理されていると、見積りの確認が早くなり、制作中の認識違いや追加作業も減らしやすくなります。

今回は、デザインデータからHTML・CSSコーディングを依頼する前に、準備しておきたい内容を5つにまとめました。すべて完璧に揃っていなくても問題ありません。分かる範囲から確認してみてください。

【1．デザインデータと閲覧権限】

まず必要になるのが、実装のもとになるデザインデータです。

Figmaの場合は共有URLと閲覧権限、XD・Photoshop・Illustratorの場合は元データをご用意ください。画像で書き出したカンプだけでなく、余白・文字サイズ・色・使用画像などを確認できるデータがあると、デザインをより正確に再現できます。

Figmaのリンクを共有する場合は、依頼先がデータを開ける設定になっているかも確認しておくと安心です。

【2．ページ数とページの種類】

「全部で何ページあるか」だけでなく、ページの種類も分かると見積りがしやすくなります。

例えば、次のように整理します。

・トップページ：1ページ

・共通レイアウトの下層ページ：3ページ

・お問い合わせページ：1ページ

・お知らせ一覧・詳細ページ：各1ページ

同じレイアウトを使うページと、個別に作るページでは作業量が異なります。未確定の場合は、デザインデータに含まれている画面を一覧で伝えるだけでも大丈夫です。

【3．パソコン・スマートフォンそれぞれのデザイン】

スマートフォン用のデザインがある場合は、パソコン用とあわせて共有します。

スマートフォン用のデザインがない場合は、コーダー側の判断で調整してよいのか、参考にしたいサイトや表示ルールがあるのかを事前に確認しておくと、完成後の認識違いを防ぎやすくなります。

タブレット表示について希望がある場合も、この段階で伝えておくとスムーズです。

【4．原稿・画像・フォントなどの素材】

デザイン内で使用している文章、写真、ロゴ、アイコン、フォントなども確認します。

特に、デザイン上は仮の文章や画像になっているケースがあります。仮素材のままコーディングするのか、正式な素材へ差し替えてから進めるのかを決めておくと、後から大きな修正が発生しにくくなります。

有料フォントや購入素材を使用している場合は、Webサイトで利用できるライセンスかどうかも確認が必要です。

【5．必要な動き・納品方法・希望納期】

見た目だけでは判断しにくい動きや機能は、できるだけ具体的に伝えます。

例えば、次のような内容です。

・ハンバーガーメニュー

・アコーディオン

・スライダー

・スクロールに合わせた表示

・お問い合わせフォーム

・WordPressで更新したい箇所

あわせて、HTML・CSS一式での納品、既存サイトへの組み込み、WordPress化、サーバーへの反映など、希望する納品方法も共有します。

希望納期は「公開したい日」だけでなく、社内確認や修正に必要な期間も含めて考えておくと安心です。

【まとめ】

コーディングを依頼する前に、次の5つを確認しておくとやり取りがスムーズになります。

1．デザインデータと閲覧権限

2．ページ数とページの種類

3．パソコン・スマートフォンそれぞれのデザイン

4．原稿・画像・フォントなどの素材

5．必要な動き・納品方法・希望納期

まだ決まっていない項目があっても、最初に「未確定」と共有しておけば、確認しながら作業範囲を整理できます。

YOSHI CODEでは、Figma・XD・Photoshop・Illustratorなどのデザインデータをもとに、HTML・CSS・Sassでのコーディング、レスポンシブ対応、基本的なJavaScript実装をご相談いただけます。

デザインデータ、ページ数、ご希望納期を分かる範囲でお知らせいただければ、必要な作業と金額を整理してご案内します。

▼ コーディングサービスはこちら