LPデザインマスタークラスでは、完全未経験からLP制作フリーランスとして活動を始めたい方に向けて、10段階に体系化された独自カリキュラムを用意しています。
本記事では、「LEVEL.4 LP制作＆運用基礎スキル」の内容をご紹介します。
LEVEL.4では、LPを自ら実装するための「コーディングスキル」やLP公開後の「計測方法」を習得していきます。
「コーディングが苦手…」「データ計測が苦手…」という理由で最初から他人に任せていては、経験も実績もなかなか積み上がりません。LPに特化すれば学習範囲は絞れるため、未経験でも習得は十分可能です。
今はAIの力を借りながら学べる時代です。それゆえHTMLやCSSの基本、データ計測の基本を押さえておけば、クライアントのリクエストやトラブルの多くは自己解決できるようになります。
この最低限の制作スキルは、LPデザイナーとして長く活躍していくための“最強の武器”です。ここでしっかり身につけていきましょう。
LP DESIGN MASTER CLASS 講師
片岡 亮太 Ryota Kataoka
株式会社KATAOKA DESIGN MARKETING 代表取締役
LP専門Webデザイナー / Webコンサルタント・セミナー講師
1986年生まれ。札幌市在住。早稲田大学教育学部社会科社会科学専修卒業（社会学専攻）。フリーランスとして『LP制作集客代行サービス』を通じてこれまで通算実績450件以上のLP制作案件を担当。著書に『Web制作フリーランス入門講座』『みるみる成果が上がる！ランディングページ制作入門講座』（ともにソーテック社）。公式Xアカウント（フォロワー3.7万）
なお、LPデザインマスタークラスの特長や全体のカリキュラムについて把握されたい方は、以下の記事を参考にしてみてください。
LEVEL4：LP制作＆運用基礎スキルのカリキュラム
LEVEL4の学習目標
●LP制作に特化したスキルを効率的に学習し「とりあえず１本作れる状態」を目指す
●コーディングの基本的な概念や記述方法を学ぶことで制作仕事を個人完結できる状態を目指す
●タグ設置・計測といったLP運用に必要な基礎スキルを押さえ、制作後の改善まで対応できるようになる
レベル４では、LPを実際に形にするためのコーディングスキルや、実際にLPを運用する上で必要となるツールの使用方法や計測方法を習得します。
ここで注意すべきは、コーディングの苦手意識から外注に最初から頼ってしまうと、成長や利益のスピードが大きく落ちてしまうことです
LPに特化したコーディングは学習範囲も限られており、AIのサポートも活用できるため、ゼロからでも十分に習得可能です。HTML・CSSの基礎を押さえれば、この先何年にもわたって安定した案件獲得につながる大きな武器となります。ぜひ取り組んでいきましょう。
LEVEL4-#1 Figma基礎講座（23レッスン）
Figmaの基本操作を短時間で学習するコンテンツとなります。
FigmaはPhotoshopとIllustratorとAdobeXDが混ざりあったようなツールとなりますが、これまで他のデザインツールを触ったことがある人であれば習得にそこまで時間はかかりません。
LP制作の場合は、例えば自分のデザインだけを作成して、コーディングは外部に回すといったケースにFigmaが使えたら便利な場合が多いです。
| コンテンツタイトル | 収録時間 | |
| Section:0 導入 | #1 Figmaの概要 | 6分00秒 |
| #2 ファイルの新規作成（おすすめプラグイン） | 2分42秒 | |
| Section:1 編集画面 | #1 ツールバーについて（上部） | 5分23秒 |
| #2 左サイドバーについて | 3分53秒 | |
| #3 右サイドバーについて | 1分54秒 | |
| Section:2 基本操作 | #1 ズームイン・ズームアウト | 1分04秒 |
LEVEL4-#2 LP制作に特化したHTML(40レッスン)
LP制作に特化したHTMLを学べるコースです。ただ、基本的に必要なHTMLの知識の範囲に関しては、LPでもHPでもそこまで違いはありません。今一度しっかりと体系的にHTMLを理解することは今後LP制作を続けていくための土台となり、あなたを助けてくれるでしょう。
| SECTION0:導入 | 収録時間 | |
| #1 | LP制作におけるHTMLを学ぶ上でのポイント | 7分10秒 |
| Section1:HTMLの基本 | 収録時間 | |
| #1 | HTMLとは何か？ | 1分21秒 |
| #2 | HTMLタグの基礎知識 | 1分32秒 |
| #3 | HTMLの基本構造① 基本構造と入れ子構造 | 3分40秒 |
| #4 | HTMLの基本構造② html/head/title/body/要素 | 2分45秒 |
| #5 | HTMLの属性 | 2分12秒 |
| #6 | HTMLのバージョン | 1分57秒 |
| #7 | HTMLのDOCTYPE宣言 | 2分37秒 |
| #8 | HTMLの文字エンコーディング | 3分03秒 |
LEVEL4-#3 LPに特化したCSS(基礎)（46レッスン）
LP制作に特化したCSSの基礎を学べるコースです。CSSが使えることによって、それまで画像で処理していたデザインをコーディングで実現することが可能になり、創作の選択肢が広がります。特にレイアウトを自由自在に作成できるようになることで、LP制作におけるCSS学習の大きな一歩です。
| Section0：導入 | 収録時間 | |
| #1 | LPにおけるCSSを学ぶ上でのポイント | 6分34秒 |
| #1 | CSSとは | 3分52秒 |
| #2 | CSSの基本書式 | 3分10秒 |
| Section1：基本 | 収録時間 | |
| #1 | CSSとは何か？(CSSを記述する目的) | 3分52秒 |
| #2 | CSSの基本書式 | 3分10秒 |
| Section2：CSSのセレクタ | 収録時間 | |
| #1 | CSSのセレクタの種類 | 0分55秒 |
| #2 | 要素・クラス・IDによるセレクタ | 3分38秒 |
| #3 | 属性によるセレクタ | 5分02秒 |
| #4 | 擬似クラス・疑似要素によるセレクタ | 2分23秒 |
| #5 | 結合子を使用したセレクタ | 7分59秒 |
| Section3:CSSのプロパティ | 収録時間 | |
| #1 | 文字関連のプロパティtext | 11分09秒 |
| #2 | 高さと幅を指定するプロパティ | 4分23秒 |
| #3 | 間隔と余白を指定するプロパティ | 5分49秒 |
| #4 | 境界線を書くプロパティ | 3分27秒 |
| #5 | 背景に関するプロパティ | 9分01秒 |
| Section4： CSSの値（単位と色) | 収録時間 | |
| #1 | CSSの単位①（相対と絶対） | 8分06秒 |
| #2 | CSSの単位②（角度・時間・画像） | 1分55秒 |
| #3 | CSSの色の指定（キーワード・RGB） | 3分55秒 |
| Section5：リセットCSS | 収録時間 | |
| #1 | リセットCSS(ノーマライズ・サニタイズ) | 8分06秒 |
| Section6：CSSのカスケード・継承・詳細度 | 収録時間 | |
| #1 | CSSの適用方法 | 3分38秒 |
| #2 | CSSのカスケード・優先度・詳細度 | 6分18秒 |
| #3 | CSSスタイルの継承 | 1分57秒 |
| Section7：ボックスモデル | 収録時間 | |
| #1 | ボックスモデル | 6分41秒 |
| #2 | マージンの相殺 | 5分02秒 |
| #3 | ブロックボックスとインラインボックス | 2分26秒 |
| Section8:ディスプレイプロパティ(display) | 収録時間 | |
| #1 | displayプロパティの種類について | 3分18秒 |
| Section9：ボックスレイアウト | 収録時間 | |
| #1 | ボックスレイアウトの全体像 | 1分31秒 |
| #2 | ボックスレイアウトの違いを理解する | 5分52秒 |
| #3 | ボックスレイアウトを使い分ける | 3分08秒 |
| Section10：フロートレイアウト(float) | 収録時間 | |
| #1 | floatプロパティの基本と使い方 | 9分14秒 |
| Section11：ポジショニングスキーム(position) | 収録時間 | |
| #1 | floatプロパティの基本と使い方 | 12分38秒 |
| #2 | position:sticky と z-index | 5分14秒 |
| Section12：フレキシブルボックスレイアウト | 収録時間 | |
| #1 | Flexboxとは | 8分02秒 |
| #2 | Flexコンテナ(親要素)に使うプロパティ | 6分26秒 |
| #3 | Flexアイテム(子要素)に使うプロパティ | 5分05秒 |
| Section13：グリッドレイアウト(CSSgrid) | 収録時間 | |
| #1 | CSSグリッドとは | 5分58秒 |
| #2 | CSSグリッドレイアウトの使い方 | 16分10秒 |
| #3 | CSSグリッドレイアウトの単位(fr) | 5分59秒 |
| #4 | CSSグリッドレイアウトの関数 | 12分05秒 |
| Section14 : CSSアニメーション | 収録時間 | |
| #1 | CSSアニメーションの種類 | 1分48秒 |
| #2 | トランジションアニメーション (transition) | 6分48秒 |
| #3 | キーフレームアニメーション（keyframes） | 7分35秒 |
| Section15：レスポンシブウェブデザイン | 収録時間 | |
| #1 | レスポンシブウェブデザインとは | 2分28秒 |
| #2 | ブレイクポイントについて | 3分54秒 |
| #3 | メディアクエリ(@media)について | 1分49秒 |
| Section16：その他 | 収録時間 | |
| #1 | ベンダープリフィックスについて | 2分47秒 |
| #2 | ユーティリティクラスについて | 3分34秒 |
| #3 | {font-size:62.5%}について | -文章のみ |
LEVEL4-#4 LP制作メソッド(ベーシック)（22レッスン）
基本的なHTMLとCSSを知り、実際に自分の手で記述することができたら、まず案件にもそのまま使用できるLPテンプレートを自らの手で作成してみましょう。
このテンプレートが作れれば、あとは自分のデザインやライティングを追加していくだけで、様々なLPデザインが思い通りに作れるようになります。
実際に制作するLPテンプレート
LEVEL4-#5 WordPress×elementor無料版LP構築
WordPressのプラグインであるelementor無料版を使って、あらかじめ用意されたLP画像データを元に実際に簡易的なLPをひとつ作成します。基本的なelementorの操作方法も含めて短時間で学べるように工夫をしています。
| No | コンテンツタイトル | 収録時間 |
| Section1 | elementorの初期設定からヘッダー作成まで | |
| #19-1 | 今回構築するLPデザイン | 1分07秒 |
| #19-2 | elementorのプラグイン有効化 | 2分59秒 |
| #19-3 | その他のプラグインを有効化 | 1分53秒 |
| #19-4 | Astraのテーマ有効化と固定ページ設定 | 3分02秒 |
| #19-5 | 画像ファイルのアップロード | 1分50秒 |
| #19-6 | ロゴと電話番号・ボタンを配置する | 4分00秒 |
| Section2 | ファーストビュー構築からボディ部分の作成名前の変更 | |
| #20-1 | ファーストビューを配置する | 2分29秒 |
| #20-2 | CTAボタンを配置する | 1分29秒 |
| #20-3 | 悩みエリア配置・特徴タイトル配置 | 1分43秒 |
| #20-4 | コンテナで３つの特徴ボックス作成 | 5分26秒 |
| #20-5 | ３つの特徴エリア複製＆背景画像＆モバイルで順序を変える | 4分42秒 |
| Section3 | フォームの埋め込みとスマホ閲覧時の調整 | |
| #21-1 | 残りの画像配置・フォームエリア作成 | 2分17秒 |
| #21-2 | コンタクトフォームの埋め込み | 6分08秒 |
| #21-3 | 全体のデザインを調整する | 2分40秒 |
LEVEL4-#6 LPワイヤーフレーム作成基礎講座( ※準備中)
このレッスンでは、LP制作の設計図となる「ワイヤーフレーム」の作り方を学びます。
いきなりデザインに入るのではなく、情報の優先順位やコンテンツの流れを先に固めておくことで、制作スピードとLPの成果は大きく変わります。クライアントとの認識合わせにも欠かせない工程です。
構成の考え方から実際の作成手順まで、実務でそのまま使える流れで解説していきます。
LEVEL4-#7 AI×LPコーディングテクニック( ※準備中)
このレッスンでは、生成AIを活用したLPコーディングのテクニックを学びます。
「コーディングは苦手」「時間がかかりすぎる」という方こそ、AIの恩恵を最も受けられる領域です。指示の出し方(プロンプト)のコツから、生成されたコードの確認・修正の流れまで、実践的な手順を解説します。
AIに任せる部分と、人が判断すべき部分の切り分けを身につけて、コーディングの時間を大幅に短縮しましょう。
LEVEL4-#8 Googleタグマネージャー基礎講座( ※準備中)
このレッスンでは、Webサイトやコンバージョンの計測に欠かせない「Googleタグマネージャー(GTM)」の基礎を学びます。
GTMを使えば、HTMLを直接編集することなく、計測タグや広告タグを一元管理できます。LP納品後の計測設定まで対応できるLPデザイナーは、それだけでクライアントからの信頼度が変わります。
アカウントの開設からタグ設置、動作確認まで、初めての方でも迷わない手順で解説していきます。
LEVEL4-#9 Googleアナリティクス4基礎講座( ※準備中)
このレッスンでは、アクセス解析ツール「Googleアナリティクス4(GA4)」の基礎を学びます。
LPは「作って終わり」ではなく、公開後にどれだけの人が訪れ、どんな行動をしたかを把握することで、はじめて改善につながります。GA4はそのための必須ツールです。
初期設定から、LPデザイナーが最低限見るべき指標、レポートの読み方まで、実務に必要なポイントに絞って解説します。
LEVEL4-#10 Googleサーチコンソール基礎講座( ※準備中)
このレッスンでは、Google検索からの流入を把握・改善するためのツール「Googleサーチコンソール」の基礎を学びます。
どんなキーワードで検索されているのか、検索結果で何回表示されクリックされたのか。サーチコンソールを見れば、検索エンジンからの”生の評価”がわかります。
登録・設定の手順から、基本的なデータの見方、LPやサイト改善への活かし方まで解説していきます。
LEVEL4-#11 MyASP×追客システム構築( ※準備中)
このレッスンでは、メール配信システム「MyASP(マイスピー)」を使った追客システムの構築方法を学びます。
LPで獲得した見込み客に、ステップメールなどで継続的にアプローチする仕組みを作れるようになると、「LPを作る人」から「売れる仕組みごと提案できる人」へと提供価値が広がります。
アカウント設定からフォーム作成、ステップメールの組み方まで、実際の画面を見ながら一緒に構築していきましょう。
LEVEL4-#12 LPO×ヒートマップ基礎講座( ※準備中)
このレッスンでは、LPの成果を改善する「LPO(ランディングページ最適化)」と、その分析に欠かせないヒートマップツールの基礎を学びます。
ヒートマップを使えば、ユーザーがどこまで読んだか、どこをクリックしたかが視覚的にわかります。感覚や思い込みではなく、データに基づいた改善提案ができることは、LPデザイナーの大きな差別化ポイントです。
ツールの導入方法から、データの読み解き方、改善につなげる考え方まで解説していきます。
次の記事：LEVEL5のカリキュラムはこちら
