WP-LOAD

LESSON / WP LOAD

デザイン画像からLPの実装計画を作る

完成見本の画像から、ページ構成、共通部品、文字、色、余白、画像、レスポンシブ時の変化を整理します。

目安 45分 コース進捗 0 / 12

GOAL

このレッスンでできるようになること

  • デザイン画像をセクションに分けられる
  • 共通部品とデザインルールを整理できる
  • 実装前に必要な画像と確認事項を洗い出せる

このレッスンでは、支給された完成見本の画像を見て、コードを書く前の実装計画を作ります。

最初から細かなCSSを書き始めるのではなく、ページ全体を大きなまとまりに分けることが目的です。

完成見本の画像から分かること・分からないこと

完成見本の画像からは、ある画面幅での見た目を確認できます。一方で、正確なフォント名、要素間の数値、ホバー時の変化、スマートフォンでの並び方までは分からない場合があります。

次の図では、「完成見本の画像から分かること・分からないこと」の仕組みや関係を確認できます。

「完成見本の画像から分かること・分からないこと」の仕組みや関係を示す図
「完成見本の画像から分かること・分からないこと」の仕組みと関係

分からない内容を勝手に確定せず、「画像から確認できたこと」「実装上の判断」「確認が必要なこと」に分けてメモします。実案件では、このメモがデザイナーや依頼者への質問になります。

最初にページ全体を上から確認する

最初に完成見本を大きな領域へ分け、各セクションの役割と実装順を整理します。

LP完成見本をヘッダー、ファーストビュー、特徴セクションへ分解した画像
LP完成見本をヘッダー、ファーストビュー、特徴セクションへ分解した画像

完成見本を上から下まで見て、ヘッダー、メインビジュアル、各セクション、フッターの順番をメモします。

  • ページの目的と最も目立つ行動ボタン
  • 繰り返し登場する見出しやカード
  • 背景色が切り替わる場所
  • PCとスマートフォンで並び方が変わりそうな場所

内容のまとまりからセクションを決める

背景色が同じ範囲だけでセクションを判断すると、内容の関係を誤ることがあります。見出しと本文が何を説明しているか、前後の内容が同じ話題かを見て区切ります。

  • この範囲には内容を表す見出しがあるか
  • 1つの話題として説明できるか
  • 別ページでも再利用できる部品があるか
  • 見た目がなくても読む順番が自然か
  • 行動ボタンのリンク先と目的が明確か

レイアウトをHTMLのまとまりへ置き換える

見た目の箱をそのままdivへ置き換えるのではなく、内容の役割からheader、main、section、footerを考えます。

次の図では、「レイアウトをHTMLのまとまりへ置き換える」の仕組みや関係を確認できます。

「レイアウトをHTMLのまとまりへ置き換える」の仕組みや関係を示す図
「レイアウトをHTMLのまとまりへ置き換える」の仕組みと関係
header
main
  section.hero
  section.features
  section.cta
footer

共通する見た目を整理する

複数箇所で同じ見た目が使われている場合は、共通部品として扱います。ボタン、見出し、カード、コンテンツ幅などを先に決めるとCSSの重複を減らせます。

  • 本文色、背景色、アクセント色
  • 見出しと本文の文字サイズ
  • セクション上下の余白
  • ボタンの高さ、角丸、ホバー時の変化
  • コンテンツの最大幅

デザイントークンを実装メモへまとめる

繰り返し使う色、文字サイズ、余白、角丸、コンテンツ幅をデザイントークンとして整理します。最初からCSS変数へする必要はありませんが、同じ見た目に別の数値を使わないよう基準を作ります。

  • 色：本文、補助文、背景、境界線、アクセント
  • 文字：大見出し、小見出し、本文、注釈
  • 余白：セクション上下、要素間、カード内側
  • 幅：ページ全体、本文、カード、ボタン
  • 状態：通常、ホバー、フォーカス、無効

画像を書き出す前に用途を決める

完成見本を画面ごと1枚の画像にして貼るのではなく、内容として必要な写真やロゴを個別のファイルとして用意します。文字は原則としてHTMLで表示し、検索や読み上げ、画面幅の変化へ対応できるようにします。

表示サイズの2倍程度を目安に画像を用意する場合でも、元画像を無制限に大きくしません。縦横比、画質、ファイル容量を見ながらWeb向けに圧縮します。

画像とレスポンシブ時の判断を整理する

写真は内容を伝えるための画像、アイコンは意味を補助する画像として分けます。写真はJPEGやWebP、透過が必要な画像はPNG、単純な図形やロゴはSVGが候補です。

次の図では、「画像とレスポンシブ時の判断を整理する」の仕組みや関係を確認できます。

「画像とレスポンシブ時の判断を整理する」の仕組みや関係を示す図
「画像とレスポンシブ時の判断を整理する」の仕組みと関係

スマートフォン用の完成見本がない場合は、文章を読みやすい順番に保ち、横並びを縦並びへ変え、タップしやすい大きさを確保します。判断した内容は実装メモへ残してください。

レスポンシブ時の判断に優先順位を付ける

スマートフォンでは、PCの見た目を小さく縮めるだけでは読みにくくなります。情報の優先順位を保ち、横並びを縦並びにし、文字と操作領域を確保します。

次の図では、「レスポンシブ時の判断に優先順位を付ける」の仕組みや関係を確認できます。

「レスポンシブ時の判断に優先順位を付ける」の仕組みや関係を示す図
「レスポンシブ時の判断に優先順位を付ける」の仕組みと関係
  • 見出しと本文の順番を変えない
  • 重要な行動ボタンを見失わない
  • 画像が文章より先に必要か後に必要か判断する
  • 装飾が内容を圧迫する場合は縮小または非表示を検討する
  • メニューを折りたたむ場合もキーボード操作を保つ

実装する順番を決める

  1. HTMLでページ全体の内容と順番を作る
  2. 共通CSSで文字、色、余白を整える
  3. セクションごとのレイアウトを作る
  4. スマートフォン表示を調整する
  5. JavaScriptで必要な動きを加える
  6. 完成見本と見比べて差を修正する

実装計画は正解を当てるためのものではありません。作業中に判断が変わったら、理由と一緒に更新します。

実装前レビューを行う

HTMLを書き始める前に、セクション一覧、共通部品、画像一覧、デザイントークン、レスポンシブ時の変更点を上から読み返します。完成見本にある要素が漏れていないことを確認してから実装へ進みます。

CHECK POINT

完了条件