[ 制作実績 ] LP
キャリアコーチの無料講座LP
「このままでいいのかな」と迷う20〜30代に、7日間の無料講座をLINEで届けるLP。構成・デザインから実装・公開まで、まるごと担当しました。
- お客さま
- キャリアコーチ様（個人向けコーチング）
- 種類
- LP（オンライン講座の集客）
- 目的
- 7日間の無料講座への LINE 登録を増やす
- 対象
- 仕事やこれからに迷う20〜30代
- 担当
- 構成・デザイン・コーディング・公開・計測の設定
- 期間
- 2026年10月 公開
[ 全体のデザイン ] DESIGN
全体のデザイン
枠の中をスクロールすると、ページの最後まで見られます。
[ 担当したこと ] SCOPE
担当したこと
- 構成
- 読む人の気持ちの流れ（共感 → 気づき → 講座の中身 → 講師 → 申し込み）にそって組み立て
- デザイン
- PC（1440px）とスマホ（375px）を Figma で制作
- コーディング
- HTML / CSS で実装。タブレットの幅も崩れないように組む
- 公開
- お客さまのサーバーへのアップロードと、公開後の表示の確認
- 計測と共有
- Googleタグマネージャーの設置、SNS で共有したときの画像（OGP）の制作
- そのほか
- プライバシーポリシーのひな形づくり
[ 制作の流れ ] PROCESS
制作の流れ
- 01
ヒアリングと構成
お客さまの講座・届けたい人・言葉づかいを整理し、ページの流れを決める
- 02
デザイン
Figma で PC とスマホのデザインを作り、お客さまと確認して確定
- 03
コーディング
デザインを HTML / CSS に。PC・タブレット・スマホの各幅でデザインと見比べながら仕上げる
- 04
テストページで確認
お客さまに実際の画面で、表示・動画・LINE ボタンを確かめてもらう
- 05
公開と計測
本番のサーバーに公開し、計測タグと共有画像を設定。公開後の表示の速さまで見直す
[ こだわったところ ] POINTS
こだわったところ
最初の一言で「自分のことだ」と思ってもらう
「このままでいいのかな」という、読む人の心の声をそのまま見出しに。仕事・キャリア・パートナー・家族・自分の時間という悩みを手書きの文字で添えて、人のぬくもりが伝わるようにしました。
デザインどおりに、細かいところまで
写真の切り抜き、手書きの文字、吹き出しの位置まで、デザインと実装を幅ごとに見比べて合わせました。数字の円グラフは、見えたときに 0 から 49.5% まで伸びる動きをつけています。
タブレットでも読みやすく
デザインは PC とスマホの2つ。その間の幅でも文字が小さくなりすぎないように（本文は 14px 以上）、流れる配置で組みました。
開いてすぐ表示される
写真を表示の大きさに合わせて軽くし、最初の画面で読み込むファイルを約61個から約16個に減らしました。スマホで開いてもすぐ写真が出ます。
申し込みまで迷わせない
LINE 登録のボタンを、ページの流れの中で3か所に。お客様の声は「続きを見る」で開ける形にして、ページを長くしすぎないようにしました。
