Project事例

支給デザインLP
見た目と確認結果を、同じ品質で届ける

デザインをただ写すのではなく、指定されていない画面幅と操作状態を補い、代理店やデザイナーが確認しやすい形で公開する進め方です。

進め方の例
対象
確定デザインを公開ページへ移す実装工程と品質確認
提供目安
素材受領後5営業日
相談の種類
HP・LP制作
事例一覧へ戻る

Summary 要点と証拠

最初に記録の要点を見る

完成済みのデザイン、文章、素材を受け取り、デスクトップとスマートフォンの間で崩れないルールを先に決めます。共通部品へ分けて実装し、主要画面幅、操作、リンクを確認した記録と一緒に納品します。

表示確認 6画面幅

320 / 375 / 414 / 768 / 1280 / 1440px

共通部品 再利用できる構造

同じ変更を複数箇所へ重ねない

確認記録 画面幅・場所・期待状態

修正判断を揃える3項目

Method 課題と進め方

困りごとを分けて触る範囲を決める

扱った課題

  • 確定デザインにない中間幅や長い文章の状態を、意図を壊さず補う必要があった。
  • 見た目だけでなく、代理店やデザイナーが修正箇所を短時間で判断できる確認記録が必要だった。

進め方と判断

  • 色、文字、余白、角丸を共通ルールにし、同じ意味の部品を一度だけ実装した。
  • 指定画面と実装画面を重ねて差分を確認し、中間幅は文章と画像の優先順位から補った。
  • 修正依頼を画面幅・場所・期待状態で記録できる確認表を用意した。

Record 詳しい記録

何が起きてどう確かめたか

背景

デザイン支給案件では、完成画像をそのまま再現するだけでは足りない。画面の横幅は連続して変わり、文章量や画像比率も実データによって変化する。指定されていない状態を、デザインの意図から補う必要がある。

制約

  • 文章、画像、PC・スマートフォンのデザインが確定していること
  • 大きな構成変更や文章変更は対象外
  • 未知のシステムへの組み込みは事前確認が必要

判断

画面をセクション単位で写すのではなく、色、文字、余白、ボタン、カードを共通ルールに分けた。これにより、確認時に見つかった差分を一箇所直せば、同じ意味の場所へ反映できる。

確認の渡し方

「何となく違う」で往復しないよう、画面幅、場所、期待する状態の3点で修正依頼を受ける。納品時には確認済みの画面幅と、対象外にした環境を明記する。

Handover 残したもの

作業のあとに使える形を残す

完成後に残るもの

  1. 01

    支給デザインに沿ったレスポンシブLP

  2. 02

    共通部品と変更しやすい表示ルール

  3. 03

    主要画面幅・操作・リンクの確認記録

担当した範囲

  • デザイン確認
  • 部品設計
  • レスポンシブ実装
  • 表示確認
  • 納品記録

使用した技術と道具

  • Figma
  • Astro
  • TypeScript
  • CSS

Related 頼むなら

似た困りごとを相談するときに

同じ進め方がそのまま当てはまるとは限りません。今の状況を聞いて、必要な範囲から決めます。

完成済みFigmaを5営業日で公開するLP実装

確定したデザインを、主要な画面幅と操作を確認した公開ページへ変えます。

Contact相談

困っている作業のことを 聞かせてください

何を頼めばいいか、決まっていなくても大丈夫です。通常2営業日以内を目安に返信します。

どの話から始めますか?

相談する