Project事例
支給デザインLP
見た目と確認結果を、同じ品質で届ける
デザインをただ写すのではなく、指定されていない画面幅と操作状態を補い、代理店やデザイナーが確認しやすい形で公開する進め方です。
進め方の例 事例一覧へ戻るSummary 要点と証拠
最初に記録の要点を見る
完成済みのデザイン、文章、素材を受け取り、デスクトップとスマートフォンの間で崩れないルールを先に決めます。共通部品へ分けて実装し、主要画面幅、操作、リンクを確認した記録と一緒に納品します。
320 / 375 / 414 / 768 / 1280 / 1440px
同じ変更を複数箇所へ重ねない
修正判断を揃える3項目
Method 課題と進め方
困りごとを分けて触る範囲を決める
扱った課題
- 確定デザインにない中間幅や長い文章の状態を、意図を壊さず補う必要があった。
- 見た目だけでなく、代理店やデザイナーが修正箇所を短時間で判断できる確認記録が必要だった。
進め方と判断
- 色、文字、余白、角丸を共通ルールにし、同じ意味の部品を一度だけ実装した。
- 指定画面と実装画面を重ねて差分を確認し、中間幅は文章と画像の優先順位から補った。
- 修正依頼を画面幅・場所・期待状態で記録できる確認表を用意した。
Record 詳しい記録
何が起きてどう確かめたか
背景
デザイン支給案件では、完成画像をそのまま再現するだけでは足りない。画面の横幅は連続して変わり、文章量や画像比率も実データによって変化する。指定されていない状態を、デザインの意図から補う必要がある。
制約
- 文章、画像、PC・スマートフォンのデザインが確定していること
- 大きな構成変更や文章変更は対象外
- 未知のシステムへの組み込みは事前確認が必要
判断
画面をセクション単位で写すのではなく、色、文字、余白、ボタン、カードを共通ルールに分けた。これにより、確認時に見つかった差分を一箇所直せば、同じ意味の場所へ反映できる。
確認の渡し方
「何となく違う」で往復しないよう、画面幅、場所、期待する状態の3点で修正依頼を受ける。納品時には確認済みの画面幅と、対象外にした環境を明記する。
Handover 残したもの
作業のあとに使える形を残す
完成後に残るもの
- 01
支給デザインに沿ったレスポンシブLP
- 02
共通部品と変更しやすい表示ルール
- 03
主要画面幅・操作・リンクの確認記録
担当した範囲
- デザイン確認
- 部品設計
- レスポンシブ実装
- 表示確認
- 納品記録
使用した技術と道具
- Figma
- Astro
- TypeScript
- CSS
Related 頼むなら
似た困りごとを相談するときに
同じ進め方がそのまま当てはまるとは限りません。今の状況を聞いて、必要な範囲から決めます。





