デザインデータは、すべてをWeb用に整えてから渡す必要はありません。どこまでが確定デザインで、どこからを実装側で調整してよいかを共有できれば、Illustratorを起点にした案件でも進められます。画像の書き出しやスマートフォンの組み替えを任せたい場合は、その範囲だけ先に決めておくのが実務的です。
最初に確定部分と相談部分を分ける
受け取った側が迷いやすいのは、デザインの完成度ではなく判断の境界です。色、書体、余白、写真のトリミング、見出しの改行位置など、必ず合わせたい部分を明示します。一方で「スマホでは読みやすい順に並べ替えてよい」「画像は適切な形式で書き出してよい」といった相談可能な部分も伝えます。
- 見た目を厳密に合わせる箇所
- 実装上の調整を任せられる箇所
- 発注者様への確認が必要な箇所
- 公開後に更新される箇所
Illustratorではアートボードとレイヤーを確認する
ページや画面ごとにアートボードが分かれていると、対象範囲を確認しやすくなります。レイヤー名はすべて整っていなくても構いませんが、共通ヘッダー、本文、ボタン、背景、書き出し対象が判別できる状態だと作業が進みます。非表示レイヤーに旧案が残っている場合は、採用する案を指定します。
Adobe Illustratorの「スクリーン用に書き出し」は、複数のアートボードやアセットをPNG、JPEG、SVG、WebPなどの形式・倍率で出力できます。元データを支給し、実装側が用途に応じて書き出す運用も可能です。ただし、ロゴ、写真、イラストの利用範囲や、編集してよい素材かどうかは別途確認が必要です。
フォントと画像は入手方法まで共有する
フォント名だけでなく、Webフォントとして利用できるか、ライセンスを誰が契約するかを確認します。代替フォントを使う場合は、文字幅が変わるため見出しの改行も変化します。画像はリンク切れを避けるため元データと一緒にまとめ、写真の高解像度版、ロゴのベクターデータ、代替テキストに使える説明も用意します。
動きと状態は静止画の外にある
静止画だけでは、メニューの開閉、ボタンのホバーやフォーカス、スライダー、フォームのエラー、読み込み中の表示までは分かりません。必要な動きをコメントや別紙で示します。指定がない動きは、実装側が操作性と保守性を見て提案し、確認を取ってから組み込む方が手戻りを抑えられます。
スマホ版がない場合は優先順位を渡す
スマートフォン用の完成デザインがなくても、情報の優先順位が分かれば設計できます。「最初に伝えたい内容」「横並びを縦にする順番」「省略してよい装飾」「ボタンを押しやすくする」といった判断材料を共有します。レスポンシブWebデザインは、単にPC版を縮小する作業ではありません。画面幅に応じて文章、画像、余白、列数を組み替え、実機で読みやすさと操作性を確認します。
着手前に確認したい引き継ぎ一覧
- 対象ページと採用するアートボード
- 共通パーツとページ固有パーツ
- フォント名・契約・代替方法
- 画像、ロゴ、アイコンの元データと利用条件
- リンク先、ボタン、フォームなどの動作
- スマホ表示の情報優先順位
- 実装側で調整してよい範囲
- 確認担当者と検収方法
GreenCodingでは、Adobe Illustratorをはじめ、Figma・Adobe XD・画像などの支給デザインを確認し、必要に応じて画像書き出しやスマートフォンのレイアウトを相談しながら実装します。データが完全に整理されていない段階でも、まずは制作会社様向けのコーディング支援からご相談ください。