LPの画像・文字・色・余白を整理する

支給されるものが完成見本の画像だけの場合、正確な数値や元画像が分からないことがあります。見えている情報と推測した情報を分け、実装中に調整できる記録を作ります。

このレッスンでは、画像、文字、色、余白を整理し、LP全体で再利用する値へまとめます。

画像から分かることを記録する

• ページ全体のセクション順
• コンテンツのおおよその最大幅
• 背景色が切り替わる位置
• 見出し、本文、注釈の文字の差
• ボタンやカードで繰り返される見た目
• スマートフォンで並び替えが必要な箇所

画像だけでは、正確なフォント名、ホバー時の変化、画面幅の途中での挙動は判断できません。推測した内容を実装メモへ残します。

次の図では、「画像から分かることを記録する」の仕組みや関係を確認できます。

必要な画像を一覧にする

各画像について、使用場所、内容、候補となる形式、必要な代替テキスト、PCとスマートフォンで同じ画像を使うかを記録します。素材が支給されていない場合は、仮画像でレイアウトを作り、最終画像へ置き換えます。

次の図では、「必要な画像を一覧にする」の仕組みや関係を確認できます。

• 写真：JPEGまたはWebP
• 透過が必要な画像：PNGまたはWebP
• ロゴや単純な図形：SVG
• 装飾のみの画像：空のaltを検討する
• 内容を伝える画像：意味が分かるaltを付ける

デザインルールをCSSへまとめる

実装前に画像、文字、色、余白を整理すると、ページ内の指定を統一しやすくなります。

繰り返し使う色、コンテンツ幅、余白、角丸をCSSカスタムプロパティへまとめます。値を後から調整するときも、LP全体を一貫して変更できます。

:root {
 --color-text: #1f2937;
 --color-background: #ffffff;
 --color-accent: #dc2626;
 --content-width: 1120px;
 --space-section: 80px;
 --radius-card: 16px;
}

文字の役割を整理する

ページタイトル、セクション見出し、本文、注釈、ボタンの文字を分け、サイズ、太さ、行間を記録します。画像を見て1px単位で当てる前に、役割ごとの大小関係をそろえます。

次の図では、「文字の役割を整理する」の仕組みや関係を確認できます。

本文は装飾より読みやすさを優先します。小さすぎる文字や狭すぎる行間を、見本どおりという理由だけで採用しないでください。

実装前に確認する

1. セクションごとに必要な文章と画像がそろっているか確認する
2. 共通する部品と値を一覧にする
3. 不明な点と仮定した点を分けて記録する
4. PCとスマートフォンで変わる箇所を整理する
5. 実装後に見本と比較する基準を決める