こんにちは。WEBデザイナーのおだぎりです。
今回は１年前に作ったサンプルLPのリメイクをしました。
制作機会の多いセミナー申し込み用のLPです。
申込フォームやサンクスページも設定したので、お申込み完了までイメージしやすいかと思います。
それではどうぞ^^ ※架空の案件です
こちらのリンクから完成ページを見る事ができます。
ファーストビュー
セミナーに参加する事で得られる幸せな未来（ベネフィット）”人生が劇的に好転します”が目に入るようデザインしました。
”不動産投資に興味があるが怖くて一歩踏み出せない”ターゲットに向けて、誠実かつ気軽に参加しやすい雰囲気を意識しました。
画面が横長のPCと縦長のスマホ、両方で最適な表示ができるよう、画像をそれぞれ作成しています。
視覚的にイメージしやすくするため、特典のガイドブックの画像をつくりました。
すでにお客様自身でご用意がある場合はそちらを使用します。
ない場合は、こちらで表紙のイメージを作ることも可能です。
特典が動画の場合は、パソコンやスマホのモックアップにキャプチャ画像をはめ込む事もできます。
日程表
背景にセミナー風景の画像を固定表示しました。
主張しすぎないよう、ぼかし＆暗くしています。
表の部分は画像ではないので、納品後も簡単に編集可能です。
Visual Studio Codeなどのコードエディタでindex.htmlファイルを開き、編集・上書き保存してから、サーバーにアップロードしてください。
ハイスピードプラン以外は、アフターサポート期間が８週間あります。
上記のような軽微な修正を何度でも承ります^^
問題提起
LPでおなじみの”こんなお悩みありませんか？”のセクションです。
ターゲットが抱えている問題を指摘し、サービスの必要性を高めます。
ODAGIRIデザインでは、見出し以外の文章は基本的にテキスト化しています。
画像で書き出してしまうと、「文章の一部分だけ修正したい」という場合に、illustratorファイルを開いて再度画像を書き出す…と手間がかかります。
上の図ですと、赤い線で囲ってある部分が、画像（編集不可）、青い線で囲ってある部分がテキスト（編集可）です。
LPをメンテナンスしながら長く使いたい場合は、変更の可能性があるところをあらかじめデザイナーに伝えておくと安心です。
解決策提示
さきほどあげた問題の解決策を提案します。
セミナーなので、黒板をイメージしたデザインにしました。
実際のページでは、サンプル動画（YouTube）を埋め込んでいます。YouTubeサムネイルの作成も承っています。
プロフィール
シンプルな飾り枠を使い、誠実なイメージに仕上げました。
背景は合成しています。サービスの内容に合った背景がおススメです。
写真の加工も料金内で承ります（明るさ補正、背景合成、切り抜き、シミ・シワ等の修正）
お客様の声
お客様の声を載せる事により、信頼性を高める効果が期待できます。
PC表示では横並び（３✕２列）になっていますが、スマホでは縦１列になります。
こちらはタイトル部分も編集できます。
３つの理由・料金・追伸
よくあるご質問
今回は実装していませんが、アコーディオン機能（別途見積が必要です）で回答部分を折りたたむ事もできます。質問が長い場合は特におススメです。
ボタン
スマホでは、画面最下部に申し込み用のボタンが固定表示される仕様になっています。
ボタンを押すと…
ボタンを押すと、フォーム画面（外部サイト）に遷移します。
フォームをLPに埋め込むこともできますが、フォームの項目を変更すると、LPのデータも変更する必要があります。
フォームを埋め込む場合は、埋め込み用のHTMLタグをお送りください。
私はフォームメーラーというフォーム作成サービスを使っています。当サイトのお問い合わせフォームもこちらで作成したものです。無料のプランもあります。
”確認画面へ”を押すと…
確認画面（外部サイト）になります。
今回はサンプルなので、何も入力がなくても送信できます。
”送信する”を押すと…
完了画面に遷移します。
自動返信メールを設定しておくと、申し込みが正常に行われた事がユーザーに伝わり、安心です。
また、送信完了後のURLに、サンクスページのURLを設定しておくと、そのページが表示されます。
設定しない場合は、フォームサービス会社の完了画面が表示されます。
今回は、サンクスページでLINE公式アカウント登録の訴求も行っています。
左はPC、右はスマホ表示です。
PCの場合はQRコードとIDを表示。スマホの場合は登録ボタンをタップする仕様になっています。
※サンクスページはこちらから直接見られます。
いかがでしょうか。
ぜひこちらから実際のページをご覧ください。
フォームのボタンを押しても大丈夫です（何も入力せずにボタンを押してください）
流れをリアルにイメージして頂けると幸いです。
