Web制作講座の漫画LPを制作しました

Web制作講座の漫画LP

https://candid-seahorse-db0f3e.netlify.app/

目次

プロジェクト概要

制作範囲

企画・構成設計 / コピー設計 / 漫画・ビジュアルディレクション / LPデザイン / HTML・CSS・JavaScript実装 / レスポンシブ対応 / CTA導線設計 / Netlify公開設定

制作期間

企画から公開まで約1ヶ月

参考予算

約15万円

使用技術

HTML / CSS / JavaScript / レスポンシブデザイン / Netlify 等

制作戦略

背景と課題

今回は、未経験からWeb制作を学び、自分らしい働き方を実現したい女性へ向けたWeb制作講座の漫画型ランディングページを制作しました。

対象となる方は、働き方を変えたい気持ちはあるものの、「未経験から仕事にできるのか」「学んだ先にどのような未来があるのか」といった不安を抱えています。

そこで、講座内容を一方的に説明するのではなく、ユーザー自身を重ねられる主人公の物語を通して、不安から希望へ気持ちが変化していく構成としました。

制作の意図

今回の制作では、「Web制作を学ぶこと」が単なるスキル習得ではなく、自分で働き方を選べる未来につながることを伝える点を重視しました。

ファーストビューで悩みを抱える女性へ呼びかけ、その後に現在の不安、転換点、実務的な学び、目指せる未来の順でストーリーを展開しています。

ユーザーの感情に沿って情報を配置することで、講座への理解を深めながら、自然に相談ボタンへ進める導線を設計しました。

デザインの根拠

デザインでは、女性向け講座としての華やかさと上品さを表現するため、ワインレッド・ピンク・ゴールドを基調にしています。

漫画表現を中心にすることで、長い説明文を読まなくても主人公の悩みや感情の変化を直感的に理解できるようにしました。

スマートフォンでの閲覧を前提に、縦方向へ物語が自然につながる構成とし、重要な場面では余白・色・装飾を使って視線を誘導しています。

相談ボタンは周囲とのコントラストを高め、ストーリーを読んだ直後に行動へ移りやすい配置としています。

活用イメージ

本LPは、スクール・講座・コーチング・キャリア支援など、サービスを受ける前後の変化を伝える必要がある事業に適した制作例です。

特に、「サービスの魅力を文章だけでは伝えにくい」「初めての方の不安を和らげたい」「ストーリーで共感を生み、相談につなげたい」といったケースに向いています。

漫画とランディングページを組み合わせることで、内容理解・感情移入・行動喚起をひとつの流れとして設計できます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次