【1-2】商品販売のランディングページの制作 -基礎編-

WEBデザイン

INDEX

前の章に戻る次の章に進む

1. 要件定義書読み込み（ヒアリング）

要件定義書は依頼者によって内容が違うためまずはしっかり読み込み、解らない点や知りたい点が要件定義書に組み込まれていない場合はヒアリングを実施しましょう。

では、早速ですが以下の要件定義書を読み込んでいきましょう。

要件定義書・商品（飲料水）販売ランディングページ

上記要件定義書を読み込んで、実際であれば解らない部分・質問事項のヒアリング実施となりますが、今回は要件定義書のみで進めていきましょう。

2. 構成・テキスト原稿の制作

実際の作業で、重要となるのが、構成・テキスト原稿の制作となります。

今回は要件定義書内のキャッチコピーとマイクロコピーを使用しても良いと記載されていますが、実作業では、ベースとなるこの部分もデザイナーが考える事も多く、最も力をかけるべきところといっても過言ではありません。

構成・テキスト原稿の制作で確認すべき内容と思考工程

分析をし、根拠を掘り下げて構成・テキスト原稿を制作：
- ユーザーが最初に目にする、ファーストビューやCTA（コールトゥーアクション）周辺は特に企業分析を実施し、顧客の行動や気持ちを洞察し根拠を掘り下げ、そこから得られる隠れた本音や動機を考えながら構成を考え、テキスト原稿を制作していきましょう。
参考サイトの確認
- 参考サイトや参考LPを探し、最低でも5個以上参考LPをリサーチした上で構成
- テキスト原稿の制作に取り掛かると、ランディングページ（LP）制作を初めたばかりの方は特に制作しやすくなります。
ユーザーのために必要なコンテンツの確認
- 上記2つを終えた後に、よくある質問やQ＆A・お客様の声など、必要と思われるコンテンツの素材やテキストが無い場合にはクライアントに依頼をしなくてはいけません。
- そのため、必要なコンテンツはこの段階で確認し依頼をしておく必要があります。

3C分析

3C分析とは「Company（自社）」「Customer（顧客）」「Competitor（競合）」の視点から戦略を立てるフレームワーク

まず自社がどんな強みや独自性（USP）を持ち、どんな価値を提供できるかを整理します。
次に顧客が抱える問題や要望を掘り下げ、具体的なニーズや購買動機を把握します。
競合との比較では、価格帯やサービス内容、集客チャネルなどを確認し、差別化ポイントを見極めます。

3C分析を踏まえると、LPで強調すべき魅力や訴求角度が明確になり、コンバージョン向上に直結しますので、定期的に市場動向をチェックし、分析結果を更新しましょう。

ターゲティング

ターゲットを明確化する第一歩として、年齢・性別・職業などのデモグラ情報を整理します。
続いて行動パターンや利用シーンを想定し、商品・サービスがどのような場面で役立つかを分析します。
SNSや口コミサイト、検索キーワードなどを調べ、リアルな声やトレンドを掴むのも有効です。
ターゲットが抱える潜在的な課題や欲求を洗い出し、「自分にも当てはまる」と思わせる訴求を用意することで、LPの構成やコピーライティングの考える際に活用できます。

ペルソナ設定

ペルソナ設定とは、具体的な「理想顧客像」を設定することで、発信内容を最適化する手法です。
年齢や職業だけでなく、価値観、ライフスタイル、趣味など内面的な要素を深堀りする点が、ターゲティングとの違いです。
「忙しい朝でも時短でケアしたい」「オーガニック志向」など、潜在的な欲求や悩みをあぶり出します。
こうした内面のリアルな動機に合わせたコピーやデザインは、共感を呼びやすく説得力が増します。
ペルソナ設定を丁寧に行うと、LP全体のメッセージが「自分ごと」として捉えられやすくなります。

3. ワイヤーフレームの制作

ワイヤーフレームとは、今回制作するランディングページ（LP）の構成やレイアウトを視覚的に解るようにする設計図ということです。

パソコンとスマートフォンで同じものを使用する場合もありますが、各デバイスに合わせたレスポンシブ仕様にすることもありますので、実際のお仕事ではこちらも確認しておきましょう。（今回は同じものを使用と考えてワイヤーフレームは1つで制作します。）

ワイヤーフレーム制作のポイントは、ランディングページをしっかりと表現するというより最低限のテキスト/構成/レイアウトが解るように配置する程度にすることです。

ワイヤーフレームの制作はCanva・Figma・illustrator・Photoshopなどを使用すると良いでしょう。

💡補足

要件定義書・ワイヤーフレーム制作までをクライアントが実施し、次のデザインカンプからデザイナーが実施するという事も多くあります。

ワイヤーフレームを自身で作らず、クライアントの作成したものであれば、要件定義書同様、ヒアリングで解らない事はしっかり確認しましょう。

ワイヤーフレーム制作で確認すべき内容と思考工程

1. 図形やイラスト・写真を使用
・必要なポイントを図形やイラストで制作し、このような写真を使用して欲しい（使用したい）という場合はイメージ写真も添付しておく事が大切です。

2. 必要コンテンツの再確認
・構成の段階で提案した必要なコンテンツや素材が集められているのか、変更が必要なコンテンツであるのかもこの段階で確認しておきましょう。

3. 購入ボタンの設置場所の再確認
・購入ボタンは、上中下の3箇所に設置するか、フローティングボタンで常に追尾するようにしておくと良いでしょう。
・CTAボタンは目立つ色や大きさを用い、ユーザーの視線を自然に誘導しましょう。
・購入や問い合わせを促す文言は、短く行動をイメージしやすいフレーズが理想です。（例：「今すぐ試す」など）

4. メールフォームの最適化
・フォームは入力項目を絞り、なるべく短時間で完了できるようにしましょう。さらに、エラー表示や入力補助（郵便番号自動入力、スマホ最適化など）を整え、離脱を防義ましょう。
・フォーム送信後のサンクスページやフォローメールで、追加情報や特典を提示すると効果的です。定期的なABテストで、ボタンデザインやフォーム項目を検証し、コンバージョン率を高めましょう。