デザインデータはそのまま実装の元になります。整っていないデータは、確認のやり取りが増え、そのぶん納期も費用も増えます。ここに挙げたものは、デザイナー側で数十分あれば整えられるものばかりです。

共通で見るところ

• PC とスマホの両方のデザインがあるか
• アートボードの幅が決まっているか（PC 1440px / SP 375px が多い）
• ページごとにアートボードが分かれているか
• レイヤーに名前が付いているか、グループ分けされているか
• 非表示レイヤーや作業途中の要素が残っていないか
• フォント名とウェイトが特定できるか

一番多いのは「スマホのデザインが無い」ケースです。PCだけで発注されると、スマホの見た目は制作側の判断になります。意図と違う形になっても、それは指示が無かったためです。

フォント

使っているフォントが Web で使えるものかどうかを確認してください。

• Google Fonts … そのまま使えます
• Adobe Fonts … 契約があれば使えます（誰の契約で使うのか要確認）
• モリサワ等の有料Webフォント … 別途契約が必要です
• 端末にしか入っていないフォント … Webでは再現できません

最後のケースでは、画像にするか、似た Web フォントに置き換えることになります。デザインの段階で決まっていると安全です。

文字

• 文字が画像として貼られていないか（テキストレイヤーになっているか）
• 行間・字間が数値で読み取れるか
• 実際の原稿が入っているか、ダミーのままか

ダミーテキストのまま入稿されると、実際の原稿を入れたときに1行が2行になり、レイアウトが崩れます。文字数が大きく変わる箇所は、実際の分量で作っておいてください。

画像

• 写真の元データが書き出せる状態か（リンク切れになっていないか）
• 解像度が足りているか（表示サイズの2倍が目安）
• ロゴやアイコンがベクターで入っているか

ロゴは SVG で書き出せると、拡大してもぼやけず、ファイルも小さくなります。元データがあるなら一緒に渡してください。

動きの指定

デザインデータには動きが写りません。次のものは別途伝える必要があります。

• ホバー時の変化
• スライダーの動き方と速度
• アコーディオンの開閉
• スクロールで出てくるアニメーション
• ハンバーガーメニューの開き方

参考サイトのURLを1つ挙げてもらうのが、言葉で説明するより早いです。「このサイトのこの部分と同じ感じで」で十分伝わります。

可変する部分の指定

WordPress で更新する箇所は、中身が増えたり減ったりします。

• お知らせが0件のときの見え方
• タイトルが長いときに折り返すか、省略するか
• 一覧に表示する件数
• カードが3つ並ぶ枠に4つ入ったらどうなるか

ここが決まっていないと、運用が始まってから崩れます。デザインでは全部の枠が埋まっているので気づきにくい部分です。

ワプラボの場合

当社では入稿されたデータを確認し、不足している情報を一覧にしてお返ししています。整っていないから受けられない、ということはありません。

Figma・Adobe XD・Photoshop・Illustrator のいずれにも対応しています。デザイン自体からのご依頼も承っています。