LPデザインマスタークラスでは、完全未経験からLP制作フリーランスとして活動を始めたい方に向けて、10段階に体系化された独自カリキュラムを用意しています。
本記事では、「LEVEL.9 LP制作ディレクションスキル」の内容をご紹介します。
本講座ではここまで、「個人でLP制作を高速でこなす体制」 を構築してきました。
しかし実績と単価が上がった今、次のステージは 「自分でやらないことを増やす」 ことです。
- 1件25万〜30万円以上になったら、コーディングなどの定型業務は信頼できるワーカーへ外注
- 自分は構成・デザイン設計など本質的な仕事に集中し、時間と自由を生み出す
- 経験値があるからこそできる、「的確な発注」と「無駄のないディレクション」を磨く段階へ
外注は“楽をする”手段ではなく、“自分のリソースを最適化する”戦略。
「できるけれど、あえて自分ではやらない」という選択で、あなたの働き方を劇的に変えていく方法を学んでいきましょう。
LP DESIGN MASTER CLASS 講師
片岡 亮太 Ryota Kataoka
株式会社KATAOKA DESIGN MARKETING 代表取締役
LP専門Webデザイナー / Webコンサルタント・セミナー講師
1986年生まれ。札幌市在住。早稲田大学教育学部社会学科社会科学専修卒業（社会学専攻）。フリーランスとして『LP制作集客代行サービス』を通じてこれまで通算実績450件以上のLP制作案件を担当。著書に『Web制作フリーランス入門講座』『みるみる成果が上がる！ランディングページ制作入門講座』（ともにソーテック社）。公式Xアカウント（フォロワー3.7万）
なお、LPデザインマスタークラスの特長や全体のカリキュラムについて把握されたい方は、以下の記事を参考にしてみてください。
LEVEL.9 LP制作ディレクションスキルのカリキュラム
LEVEL9の学習目標
●個人体制で単価UP＆売上向上を狙いながら一部の作業を外注して精神的・時間的余裕を生み出す。
●外注先のワーカーと良好な関係を築くことに加えて、質の高いワーカーを見つけるスキルを習得
●定型仕事を外に割り振ることで、より価値の高い非定型仕事に割くためのリソースを確保する。
本講座では、個人体制でLP制作を効率的に受注・遂行するメソッドを重視してきました。
ただ、ある程度の実績を積むことに成功し、1案件当たり単価が上がってきたら外注を活用して自分はディレクションに回ることで、時間と精神の自由を手にしていくと良いでしょう。
レベル９に到達したあなたは、すでに数々の制作実績を通じて十分なLP制作スキルと知見を兼ね備えているはずです。今後はそれらを活かし、外注先への適切な指示出し＝ディレクション力を磨いていきましょう。
「自分ができることをあえてやらない」ことで、フリーランスとしての働き方は一気にレベルアップします。
構成や設計など本質的な仕事に集中し、定型作業は信頼できるワーカーと分担する――そんなチーム体制を築いていきましょう。
メインコース
LP制作ディレクションコース（14レッスン）
ある程度のレベルまで実績を蓄積して、単価アップを実現できたら、更に収入アップを目指すべくディレクション業務にもチャレンジしていきましょう。
プレイヤーとして時間を切り売りする働き方＝受託ビジネスに加えて、ディレクターの立場として柔軟にワーカーさんを活用して委託ビジネスを取り入れることで、さらに自分の仕事の可能性が増えていきます。
また、後半では複数ページで特定のコンバージョンへとユーザーを誘導する「マイクロサイト型LP」をクライアントにどのように提案していくべきか？といった話も盛り込んでいます。
| No | コンテンツタイトル | 収録時間 |
|---|---|---|
| #1 | LP制作事業ディレクション編を受講する上での注意点 | 7分15秒 |
| #2 | 「受託ビジネス」と「委託ビジネス」と「コンテンツビジネス」の違い | 9分01秒 |
| #3 | 「受託ビジネス」と「委託ビジネス」をミックスする | 4分37秒 |
| #4 | 案件獲得戦略とLPのタイプ別相違点の復習 | 2分38秒 |
| #5 | プレイヤーポジションからディレクターポジションに移行する上での全体像 | 14分44秒 |
| #6 | 【着目点①】LP制作をどのように切り分けて外注するか？ | 8分43秒 |
| #7 | 【着目点②】ワーカーさん活用方法と実際のクラウドワークス活用事例 | 7分57秒 |
| #8 | 【補足】制作工程の一部をアウトソーシング・自動化する上での考え方 | 3分21秒 |
| #9 | 【着目点③-1】「マイクロサイト型LP」はどのように提案すれば良いのか？ | 4分21秒 |
| #10 | 【着目点③-2】どのような「クライアントの現状」の場合に提案すべきか？ | 6分53秒 |
| #11 | 【着目点③-3】クライアントの「リクエスト」に対して、適切な媒体を「デリバリー」しよう | 6分23秒 |
| #12 | 【着目点③-4】マイクロサイト型LPの案件を担当した片岡の事例 | 5分35秒 |
| #13 | 【着目点③-5】「マイクロサイト型LP」を作る上での３つのポイント | 5分50秒 |
| #14 | 【着目点③-6】Elementorではなければいけないのか？STUDIOは？ | 3分39秒 |
サブコース
LP制作に特化したCSS（応用）
本コースでは、基本的なCSSの知識を押さえた上で、BEMなどのCSS設計やDart Sassを用いたモダンなCSSコーディングについて学んでいきます。
個人で完結する縦型1ページのLP制作では出番の少ない知識となりますが、これらの概念や理屈を学ぶことでコーディングスキル全体のレベルアップや、コーディングを外部に発注する際の指示を的確に行えるようになり、LP制作における仕事の可能性が大きく広がります。
実際にVisual Studio Codeを使ってDart Sassを記述しながら、Sassの基本的な機能（ルールセットのネスト、変数、@mixin＆@includeなど）を学んでいく初学者でも取り組みやすいカリキュラムとなっています。
| Section1: CSS設計 | ||
|---|---|---|
| No | コンテンツタイトル | 収録時間 |
| #1 | CSS設計の重要性について(目的・理由・必要性) | 6分30秒 |
| #2 | CSS設計の目的 | 4分12秒 |
| #3 | CSS設計の種類① OOCSS | 5分40秒 |
| #4 | CSS設計の種類② SMACSS | 3分50秒 |
| #5 | CSS設計の種類③ FLOCSS | 7分53秒 |
| #6 | CSS設計の種類④ BEM | 9分23秒 |
| Section2: BEM | ||
|---|---|---|
| No | コンテンツタイトル | 収録時間 |
| #1 | BEMの「B」 | 4分54秒 |
| #2 | BEMの「E」 | 5分31秒 |
| #3 | BEMの「M」 | 6分15秒 |
| #4 | BEMのメリットとデメリットを整理しよう | 6分00秒 |
| Section3: Sass | ||
|---|---|---|
| No | コンテンツタイトル | 収録時間 |
| #1 | Sassとは | 4分59秒 |
| #2 | Sassのメリット | 5分36秒 |
| #3 | Sassの導入方法(Dart Sass) | 10分21秒 |
| #4 | Sassの機能① 変数(＄) | 5分17秒 |
| #5 | Sassの機能② ルールセットのネスト化（&） | 13分48秒 |
| #6 | Sassの機能③ @mixinと@include | 7分58秒 |
| #7 | Sassの機能④ 引数 | 13分27秒 |
| #8 | Sassの機能 @content | 9分26秒 |
| #9 | Sassの機能⑤ 演算 | 11分56秒 |
| #10 | Sassの機能⑥ @useと@forward | 12分53秒 |
| Section4: CSS関数 | ||
|---|---|---|
| No | コンテンツタイトル | 収録時間 |
| #1 | CSS関数① calc()関数を使ってみよう | 4分41秒 |
| #2 | CSS関数② min()関数を使ってみよう | 4分25秒 |
| #3 | CSS関数③ max()関数を使ってみよう | 3分58秒 |
| #4 | CSS関数④ clamp()関数を使ってみよう | 8分56秒 |
| Section5: CSSに関する周辺知識 | ||
|---|---|---|
| No | コンテンツタイトル | 収録時間 |
| #1 | CSSカスタムプロパティ | 4分37秒 |
| #2 | 擬似クラス「:is()」と「:where()」について | 4分34秒 |
LP制作に特化したJavaScript
本コースでは、LPに動きを施す上で必要となるJavaScriptの基礎知識を学ぶことができます。
おそらくコーディング初学者にとって、最も取っ付きにくい代表がこのJavaScriptでしょう。特に慣れていない場合、コードを読み解くこと自体に困難を感じるかもしれません。
ただ、昨今jQueryによる実装が非推奨になる時代背景の中で、特定のライブラリに依存しない素のJavaScript（Vanila JS）をあらかじめ理解しておくことは、今後のWeb制作のトレンドについていくためにも重要となります。
そこで、本コースは「ローディング画面」や「画像を順に表示させる」「スクロールアニメーション」といった制作物のクオリティや世界観に直結する表現を実現する方法を優先的に学ぶカリキュラムを採用しています。
※本コースはテキスト解説のみとなっております。
| No. | Section0： 導入 |
| #1 | LPにおけるJavaScriptを学ぶ上でのポイント |
| No. | Section1:基礎 |
| #1 | JavaScriptとは |
| #2 | JavaScriptの基本的な記述方法 |
| #3 | JavaScriptの基本書式 |
| #4 | コンソールの使い方 |
| #5 | DOMについて |
| #6 | JavaScriptで学ぶべき知識を整理しよう |
| No. | Section2:HTML要素の取得と変更 Part.1 |
| #1 | JavaScriptを記述する準備をしよう |
| #2 | 要素を取得する querySelector() |
| #3 | テキストを変更する .textContent |
| #4 | テンプレート文字列 ` ` |
| #5 | 定数 const |
| No. | Section3:イベント |
| #1 | イベント addEventListener()を理解しよう |
| No. | Section4:関数 |
| #1 | アロー関数とfunction構文の記述方法について |
| #2 | 関数のその他の使い方（引数） |
| #3 | 関数を使ってCSSを変更する .style |
| No. | Section5:条件分岐 |
| #1 | 条件分岐「if文」「else文」「else if」 |
| No. | Section6:HTML要素の取得と変更 Part.2 |
| #1 | JavaScriptにおけるイベントとは？(復習) |
| #2 | クラスの追加・削除 .classList.add/remove |
| #3 | クラスの切り替え .classList.toggle |
| #4 | 文字数カウント .length |
| #5 | 真偽値 ture false |
| No. | Section7:スクロール |
| #1 | CSSでプログレスバーを実装する |
| #2 | スクロール量を取得する（scroll,scrollY） |
| #3 | 全体を取得する（scrollHeight,clientHeight） |
| #4 | スクロールの割合を計算する（算術演算子） |
| #5 | プログレスバーの幅に設定する |
| No. | Section8:配列 / 繰り返し処理(for文) |
| #1 | insertAdjacentHTMLでHTMLを挿入する |
| #2 | JavaScriptにおける配列の基本と記述方法 |
| #3 | 配列の中にある画像を表示する |
| #4 | 繰り返し処理(for文)を理解する |
| #5 | for文で画像を一覧表示する |
| #6 | 変数letと定数constの違いを理解する |
| No. | Section9:オブジェクト |
| #1 | オブジェクトの基本と記述方法(プロパティ・キー・値) |
| #2 | オブジェクトの情報を取得する |
| #3 | 配列とオブジェクトを組み合わせる |
| #4 | for文と組み合わせて一覧表示する |
| #5 | 分割代入でコードをスッキリさせる |
| No. | Section10:アニメーション part.1 |
| #1 | Web Animations APIとは？ |
| #2 | 透明の見出しを徐々に表示させる |
| #3 | 複数のアニメーションを加える |
| #4 | アニメーションの動きに詳細を加える |
| #5 | 色々な見出しアニメーションを作ってみる |
| No. | Section11:アニメーション part.2 |
| #1 | 複数の画像を順番に表示する |
| #2 | 画像の表示を1個ずつ遅延させる |
| #3 | 色々な画像アニメーションを作ってみる |
| No. | Section12:スクロール×アニメーション |
| #1 | Intersection Observerの仕組みついて |
| #2 | Intersection Observerの記述方法 |
| #3 | 監視している交差状態の情報を確認する |
| #4 | 動作する内容にアニメーションを追加する |
