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