Lesson6 3.お金のナースLP

制作内容

■ 商材
お金のナース・無料LINEへの誘導

■ 制作内容
・PC版・スマホ版、両方の制作
レスポンシブデザインに変更するやり方を学びます

・ボタンリンク
https://forms.gle/d9J5nmXx3MSNeVh48

皆さんのお手元に、LPの素材とテキストをお渡ししていますので、
ファイルを解凍して開いてください。
※実際のページとは少し変更しています。

■ ページタイトル・リンク
ページタイトル：L6-1課題
リンク：l6-lp1

素材一覧

■ LPテキスト
https://docs.google.com/document/d/1jxryWc8NknXT2zXMg3WkkdyczB4DQkMccWGo5RC7eoI/edit?usp=sharing

■ 素材

制作手順

制作方法を決める

今回作成するLPも基本画像のみを実装します。
元となったサイトはHTMLで制作しましたが、今回はElementorで制作します。
それではWordPressの管理画面から、実装の準備に入ります。

実装の準備

■ 画像の切り出し
今回はLPの制作ということで、画像を切り貼りしていきます。
Photoshopで作ったカンプも添付していますので、切り出した位置を確認してください。
小さなブロックごとに画像を切り取っています。
色々な方法がありますが、平原はPhotoshopに縦幅の小さい部品.psdを用意して、そこで切り出しています。

実装

いよいよ実装していきましょう。
PC・タブレット・モバイルと順番に解説します。

細かい調整

実装後に行います。

実装

PC・SP双方の実装

事前準備が終わったら、いよいよ実装していきます。

これで実装は完了です。

細かい調整

リンクは間違っていないですか？
幅はみやすい幅になっていますか？
最後に確認をしておきましょう。

まとめ

LPなので、基本は画像を切り出して制作しました。
LPの実装のコツは掴めたかと思います。

デザインカンプも添付していますので、どのように画像を切り出しているのか。
というところもぜひチェックしてみてください。
HTMLで制作する場合にも役立ちます(^^)

また、今回制作したLPは難易度としては超初級です。
操作のスピード感としては1時間をまず目指しましょう。
1時間でも作れたら次は45分、、、とドンドン、スピードを高めていきましょう。

添削が終わったら、次にHPを制作します。

課題提出方法

チャットワークにて、作ったサイトのURLとWordPressのログイン画面URLと、ID・PWを共有してください。

<提出フォーマット>
課題サイトURL：https://〜〜

Word Press 
ログイン画面URL： https://〜〜
ID: ebc_l6_〇〇
PW: ebc_kadai_〇〇