ルールが揃っていない支給デザインを、分担可能な実装仕様へ変える

ご要望は、支給されたデザインをもとに、限られた期間で公開可能なサイトへ仕上げることでした。デザインデータには必要な画面が含まれていても、余白、同じ部品の差、スマートフォン時の並び、公開環境など、実装判断に必要な条件がすべて明文化されているとは限りません。

複数の担当者が各ページを実装すると、画面ごとの見た目を個別に合わせるだけでは、同じボタンや見出しに異なるコードが生まれます。医療分野の原稿確認は制作上のルールとは別の承認も必要です。デザインの未定義部分、実装共通化、原稿の確認責任を分けることが課題でした。

最初に代表画面を選び、見出し、余白、ボタン、画像、注記、フォームなどを共通部品と例外へ分けました。画面ごとの数値をそのまま採用する案ではなく、複数画面に共通して使える値を基本ルールとし、意図がある差だけを例外として確認しました。

複数担当へ分ける前に、HTML構造、クラス名、共通CSS、画像書き出し、レスポンシブの切替を共有しました。公開環境も着手前に確認し、利用できる言語や納品形式に合わせています。

医療表現の適否を制作側だけで判断せず、顧客側の確認対象と、FHWが確認する表示・リンク・注記を区別しました。この方式は支給デザインを分担実装する場合に有効ですが、デザイン変更が続く場合は、先に代表部品の承認を取る必要があります。

支給デザインを否定的に評価するのではなく、実装で繰り返し使う判断を抽出しました。同じ役割の見出し、ボタン、注記で差がある場合は、どれを基本にするか、差に意味があるかを確認しています。

スマートフォン画面がない箇所は、PC版を単純に縮小せず、情報の順序、画像の焦点、操作領域を基準に再構成しました。医療に関する注記や補足は、装飾へ埋もれず、関連する説明と一緒に読める位置を保ちました。

複数担当へ渡すため、完成画面に加えて、共通部品の状態、文字量の上限、画像なしの場合、例外ページを整理しました。デザインの再現性を、個人の読み取り能力へ依存させないことを重視しました。

代表ページでDOM構造と共通クラスを作り、見出し、ボタン、余白、画像、注記を再利用できる形にしました。担当者ごとに似たCSSを追加する方法は避け、共通変更が全ページへ反映される構成を採用しています。

分担前に、ファイル構成、命名、画像パス、ブレークポイント、確認環境を共有しました。統合時には、個別ページが表示できるだけでなく、共通部の差分、重複CSS、端末表示、フォームやリンクを確認しています。

公開環境の条件は実装後に合わせるのではなく、着手前のチェック項目へ戻しました。支給デザイン案件では、不足を推測で埋めるより、共通ルールと確認が必要な例外を可視化し、最初の一ページで合意することが手戻りを防ぎます。