2025年9月27日 本日は、LP（ランディングページ）作成に向けてワイヤーフレーム作成にとりかかりました。
本日のアジェンダ
1限目
学科 ECサイトデザイン基礎④
Webサイト・LPについて
2限目
学科 ECサイトデザイン基礎④
ワイヤーフレームについて
3限目
学科 ECサイトデザイン基礎④
レイアウトのポイントについて
4限目
学科 ECサイトデザイン基礎④
制作に向けての準備
5限目
学科 ECサイトデザイン基礎④
制作に向けての準備
LPとは
LP（ランディングページ）とは、WEB上での営業活動のようなもので、1枚ペラの長いページを使って商品やサービスを「いかがですか？」と訴えかけ、購入や申し込みへと導くためのものです。
これまでバナーやサムネイルを作成してきましたが、それらはLPへ誘導するための入り口に過ぎません。実際にお客様を優良顧客として獲得するためには、LPそのもののクオリティが重要です。
WEBデザイナーにとってバナー制作はできて当たり前のスキルですが、LPをしっかり作れることは就職活動において強みになります。
なぜかというと、LPを制作するということは、その会社の商材をきちんと理解し、ユーザー視点で設計できる力を示すことになるからです。さらに、デザインを考える段階から「コーディングのしやすさ」を意識して設計することも大切です。
LP作成のポイント
LPを作成する際は、上から下へ自然に読み進められるよう、ストーリー性を意識してデザインしましょう。
基本的な流れは次の４ステップに分けられます。
- 掴み
ページ冒頭で訪問者の興味を引く部分です。バナーの世界観とリンクさせながら企画全体の意図を伝えます。「キラーコンテンツ」や「ファーストビュー」とも呼ばれ、第一印象を決める大切な部分です！ - 説明
商品やサービスについて詳しく伝える段階です。5W1H（いつ・どこで・誰が・何を・なぜ・どのように）を意識して構成します。ここをしっかりとまとめることで、顧客に信憑性や安心感を伝えることができます。自己満足的な説明ではなく、信頼性を重視することが大切です。 - 魅せる
商材の「売り」をアピールする段階です。商材への理解を深め、自信のある点や実績、メリットを整理し、相手に刺さるPRを行う。 - 目的
最終的に顧客に行動してもらう段階です。お問い合わせや購入、アプリのインストール、SNSのフォロー、会場や店舗への案内など、目的に合わせたゴールに誘導します。
また、LPは単体で存在するのではなく、さまざまな入り口から訪問者が来ます。WEBサイトのバナー、メルマガ、検索結果、動画コンテンツなど、どの導線から訪れてもスムーズにつながるように意識して設計することも大事！
ワイヤーフレームとは
ワイヤーフレームとは、WEBページのレイアウトを決める「設計図」のことです。業界によっては「デザインカンプ」と呼ばれることもあり、制作のたたき台の役割です。
作成のポイント
ワイヤーフレームを作る際は、まずはいろいろなデザインを参考にして流れを学ぶことが効果的です。基本的な構成は「掴み → 説明 → 魅せる」という流れで、設計するためには商品やサービスについて深く理解していることが大事です！
作成のステップ
- 情報整理
サイトの目的を明確にし、それに沿った情報を収集・整理します。たとえば「購入してもらう」「登録してもらう」など、目的に応じて必要な要素を洗い出します。 - 目的からの逆算
ページ全体のストーリーを意識し、最終的な目的から逆算して構成を考えます。 - 目的への誘導
バナーや広告からの流入を想定し、「掴み → 説明 → 魅せる → 目的達成」という流れを設計します。この流れで、訪問者を優良顧客へと導く。
その他意識すること
ワイヤーフレームはLP作成の土台となるため、最初の準備をしっかり行うことが重要です。途中で大きな修正が入ると時間のロスにつながるため、計画段階で完成度を高めておくことが重要！
確認すべきポイントとしては、文字や写真のサイズ感、権利表記、必要な対策などです。
コメント