【1-3】商品販売のランディングページの制作 -実践編-

INDEX

ここからは、商品販売のランディングページの制作を実践します。
実践編では、教材のワイヤーフレームをもとに、デザインカンプ制作からサイト実装まで習得しましょう。

オリジナルLP制作のウォーミングアップにもなると思いますので、ぜひチャレンジしてみてください。

商品販売ランディングページワイヤーフレーム例

ワイヤーフレーム制作・デザインカンプ・実装に分けて制作時間を計っておくと、ポートフォリオ掲載や、今後の制作における工数計算にも便利ですので、ぜひ制作時間を計っておくとよいでしょう。

先程のワイヤーフレームをもとに、デザインカンプを制作していきましょう。
ワイヤーフレームをベースとして、実際のWEBページ（ランディングページ）の見た目を共有できる完成図となりますのでしっかりと制作していきましょう。

1. ファーストビューで適切な表現が出来ているか
・要件定義書に記載があれば、そのキャッチコピーを使用出来ているか、構成・テキスト制作の内容と相違なく商品の魅力を十分にユーザーに伝えられる内容となっているかを確認しましょう。

2. コンテンツ・CTAの数・動線が自然の流れになっているか
・デザインカンプは完成図ですので、この段階で不自然な区切り方であったり、CTAの数が多すぎたり少なすぎたりという事がないようにユーザーの動線も考えながらデザインカンプを制作していきましょう。

3. 視認性・可読性とトンマナ（トーン＆マナー）の確認
・文字と写真・文字とコンテンツ・文字と図形などの視認性と可読性が悪くなっていないか、不必要な部分が目立っていないか、要件定義書の使用して欲しくない内容などは特に最終確認を実施し制作しましょう。

4. 案が出てきたならば出し惜しみをせず提案
・デザインカンプのみ依頼が来た場合は特に、制作している際に他のデザイン案が出てくる事もあるでしょう
・デザインカンプ案を2-3提案出来る事もデザイナーの仕事のうちです。ぜひ提案しましょう。

その後ランディングページの実装となります。

今回の商品販売ランディングページはWixにて仕上げましたので見本サイトをご確認ください。

商品販売ランディングページの制作工程を理解いただけましたでしょうか？

次は、オリジナルLPの制作（要件定義書の読み込みからデザインカンプ制作まで）を学びます。ここで学んだスキルを活かして、制作しましょう。