【1-4】ランディングページを制作しよう!
ランディングページ、ウォーミングアップ編の制作、お疲れさまでした!
制作時間はどれくらいでしたでしょうか?今後の制作時間の目安にしていくと共に、何に時間をかけてしまったのか、など今後の改善点も考えておくと良いでしょう。
では、次は実践編のランディングページ制作です。
今回は要件定義書の空欄の部分もご自身で考え、ワイヤーフレームはランディングページの構成要素を参考にしながら、一から制作して頂きます。
その後は、ご自身で実装して頂く流れとなりますので、楽しみながら制作していきましょう! 以下にWordpressで制作したランディングページ制作実践編の見本も掲載しておきますが、今回はあくまで実践編ですのでご自身の力で制作していってくださいね!
ランディングページ専門の制作会社のランディングページを制作する
要件定義書 ・実践編
ワイヤーフレーム・デザインカンプ 実践編
今回はご自身で記載した要件定義書をもとに、ワイヤーフレームもデザインカンプも自分で考え制作して頂きます。 デザインツールを使用し、ご自身でワイヤーフレーム・デザインカンプ制作を実施していきましょう!
要件定義書にも記載していますが、ウォーミングアップ編と同じく、ワイヤーフレーム制作・デザインカンプ・実装に分けて制作時間を計っておくと、ポートフォリオ掲載や、今後の制作における工数計算にも便利ですので、ぜひ制作時間を計っておきましょう。
実装・ランディングページ実践編
デザインカンプを見ながら、実装していきましょう。
見本はWordpressで制作し、テーマはTwenty Twenty-Fourを使用していますが、Wixで制作・HTML/CSSなどコーディングでの実装も出来る方は実施してみましょう。
見本に関しては、アニメーション効果を使用することや、ポップアップを使用しクリック率を高める効果を高めたLP制作を実装しています。
LP制作におけるトレンドや最新情報なども収集しながら制作していく事も重要です。
💡AIを活用したLP制作ツールの紹介
現在ではAIを活用したLP制作が出来るツールがあります。 アイデアが全く浮かばない、制作の工程が進まないという方は、参考になさって頂けると良いかと思います。
Mixo.ioとは?AIウェブサイト制作サービス「Mixo.io」の使い方や料金を紹介
完成出来ましたら、ぜひ、コーチに確認頂きましょう。
これで「ランディングページLP制作の手順を学ぼう!」の解説を終わります。
お疲れ様でした!
