WEBデザイン
【1-4】ランディングページを制作しよう!
INDEX
目次

【1-4】ランディングページを制作しよう!

ランディングページ、ウォーミングアップ編の制作、お疲れさまでした!

制作時間はどれくらいでしたでしょうか?今後の制作時間の目安にしていくと共に、何に時間をかけてしまったのか、など今後の改善点も考えておくと良いでしょう。

では、次は実践編のランディングページ制作です。

今回は要件定義書の空欄の部分もご自身で考え、ワイヤーフレームはランディングページの構成要素を参考にしながら、一から制作して頂きます。

その後は、ご自身で実装して頂く流れとなりますので、楽しみながら制作していきましょう! 以下にWordpressで制作したランディングページ制作実践編の見本も掲載しておきますが、今回はあくまで実践編ですのでご自身の力で制作していってくださいね!

ランディングページ専門の制作会社のランディングページを制作する

実践編では、ランディングページの制作を専門としている制作会社用のランディングページを制作して頂きます。
要件定義書内の商材はランディングページ制作で決定しているので、まずは訴求ポイントを含めた補足情報の茶字の部分の内容を考え、記載していきましょう。

要件定義書 ・実践編

 (10600)


ワイヤーフレーム・デザインカンプ 実践編

今回はご自身で記載した要件定義書をもとに、ワイヤーフレームもデザインカンプも自分で考え制作して頂きます。 デザインツールを使用し、ご自身でワイヤーフレーム・デザインカンプ制作を実施していきましょう!

要件定義書にも記載していますが、ウォーミングアップ編と同じく、ワイヤーフレーム制作・デザインカンプ・実装に分けて制作時間を計っておくと、ポートフォリオ掲載や、今後の制作における工数計算にも便利ですので、ぜひ制作時間を計っておきましょう。


実装・ランディングページ実践編

デザインカンプを見ながら、実装していきましょう。

見本はWordpressで制作し、テーマはTwenty Twenty-Fourを使用していますが、Wixで制作・HTML/CSSなどコーディングでの実装も出来る方は実施してみましょう。

見本に関しては、アニメーション効果を使用することや、ポップアップを使用しクリック率を高める効果を高めたLP制作を実装しています。

LP制作におけるトレンドや最新情報なども収集しながら制作していく事も重要です。

💡AIを活用したLP制作ツールの紹介

現在ではAIを活用したLP制作が出来るツールがあります。 アイデアが全く浮かばない、制作の工程が進まないという方は、参考になさって頂けると良いかと思います。

基本を知った上でのAI活用が必須ではあると思いますので、今回はアイデアを参考にし、制作が出来た後でAIをどんどん活用していきましょう!
完成出来ましたら、ぜひ、コーチに確認頂きましょう。

これで「ランディングページLP制作の手順を学ぼう!」の解説を終わります。

お疲れ様でした!

WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH