LPデザインマスタークラスでは、完全未経験からLP制作フリーランスとして活動を始めたい方に向けて、10段階に体系化された独自カリキュラムを用意しています。
本記事では、「LEVEL.3 LP制作の基礎スキル」の内容をご紹介します。
LEVEL.3では、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デザインマスタークラスの特長や全体のカリキュラムについて把握されたい方は、以下の記事を参考にしてみてください。
LEVEL3：LP制作の基礎スキルのカリキュラム
LEVEL3の学習目標
●LP制作に特化したスキルを効率的に学習し「とりあえず１本作れる状態」を目指す
●コーディングの基本的な概念や記述方法を学ぶことで制作仕事を個人完結できる状態を目指す
●LP制作のテンプレートを保有することで他のライバルよりも早く作業を完了できるようになる
レベル3では、LPを実際に形にするためのコーディングスキルを習得します。
ここで注意すべきは、コーディングの苦手意識から外注に最初から頼ってしまうと、成長や利益のスピードが大きく落ちてしまうことです。
LPに特化したコーディングは学習範囲も限られており、AIのサポートも活用できるため、ゼロからでも十分に習得可能です。HTML・CSSの基礎を押さえれば、この先何年にもわたって安定した案件獲得につながる大きな武器となります。ぜひ取り組んでいきましょう。
メインコース
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秒 |
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%}について | -文章のみ |
LP制作メソッド(ベーシック)（22レッスン）
基本的なHTMLとCSSを知り、実際に自分の手で記述することができたら、まず案件にもそのまま使用できるLPテンプレートを自らの手で作成してみましょう。
このテンプレートが作れれば、あとは自分のデザインやライティングを追加していくだけで、様々なLPデザインが思い通りに作れるようになります。
実際に制作するLPテンプレート
サブコース
かたおか以下のコンテンツは全部を消化する必要はございません。ただ、私がこれからLP制作の業務を担当するに辺り、持っていて損はない内容となっております。
ご自身の状況に合わせて自分に必要だと思ったものをピックアップして学習してみてください。
LPデザインテクニック（20レッスン）
LP制作において、コンバージョン率を上げたり、離脱率を減らすために、「ランディングページならではの表現方法や表示テクニック」が多数存在します。
そこで、本コースには「クライアントに頼まれたのでとりあえずでもいいから実装したい」という要望に応えるためのテクニックを収録しています。そのままコピペしたり、細かな部分をChatGPTに編集してもらうなど短時間で実装できる事例が多くなっていますが、ご自身の状況に合わせてぜひご活用してみてください。
| コンテンツタイトル | 収録時間 | ||
| 導入編 | #1 | LPデザインテクニック編を学ぶ上での注意点 | 6分36秒 |
| デザイン全般編 | #1 | Font awesomeでアイコンを表示する方法 | 6分9秒 |
| #2 | GoogleWebフォントを使う方法 | 5分49秒 | |
| #3 | コピーしたテキストに簡単に<p>タグを挿入する方法 | 5分55秒 | |
| #4 | ファビコンを設置する方法 | 3分13秒 | |
| #5 | スマホ閲覧時だけ文章を改行させる方法 | 3分48秒 | |
| ギミック編 | #1 | 下部固定ヘッダーの設置方法について | 6分1秒 |
| #2 | 最も簡単なカウントダウンタイマーの設置方法 | 9分38秒 | |
| #3 | イグジットポップアップの設置方法 | 7分49秒 | |
| フォーム編 | #1 | LPにフォームを埋め込む方法 | 7分48秒 |
| #2 | メルマガ登録フォームを埋め込んでみよう | 13分51秒 | |
| #3 | 一般的な問い合わせフォームを作ってみよう | – | |
| アニメーション編 | #1 | フワフワ&ユラユラするボタン | 4分43秒 |
| #2 | クリックしたらスルスル移動させる方法 | 5分31秒 | |
| #3 | TOPに戻るボタンを途中から出現させる | 5分4秒 | |
| #4 | 自動で流れる画像スライダーを設置する | 3分28秒 | |
| #5 | 特定の位置に来たらアニメーションで出現させる | 5分54秒 | |
| その他編 | #1 | アクセスを別ページに移動させる方法 | – |
| #2 | 期間ごとに表示するページを切り替える方法 | – | |
| #3 | LPが検索されないように設定する方法 | – |
WordPress変換作業（6レッスン）
クライアントからのリクエスト率の高い、HTMLデータで作成したLPをWordPressに変換して納品する方法について、実際に私が現場で使っている方法を解説しています。
本コースでは、作成したランディングページをWordPressに変換して設置する方法についてお伝えします。
初学者でも取り組みやすいように、あえてPHPなどの専門知識は極力必要のない方法にしています。短期間でWordPress変換術を学ぶことで単価アップを目指しましょう。
| コンテンツタイトル | 収録時間 | |
| #1 | WordPress変換編を学ぶ上での注意点 | 17分14秒 |
| #2 | 土台テーマの用意／テーマのサムネイル作成／画像データのコピー | 6分14秒 |
| #3 | header.php/footer.php/style.cssの編集 | 8分28秒 |
| #4 | WordPressの準備/FTP情報でアップロード/絶対パスの書き換え | 11分19秒 |
| #5 | 固定ページで本文公開/トップページに指定する | 6分40秒 |
| #6 | プラグインの活用/URLの切り分け | 10分2秒 |
Photoshop基礎講座（99レッスン）
ゼロからでも、もしくは復習用としても活用できるPhotoshopの基礎講座をご用意しております。
スライドを使って体系的にPhotoshopの機能を理解できるように工夫しておりますので、ぜひPhotoshopスキルの点検や総復習にお役立てください。
| コンテンツタイトル | 収録時間 | |
| 導入編 | ＃1 Photoshopのショートカットキー | 3分54秒 |
| ＃2 片岡のPhotoshopショートカットキー設定 | 11分32秒 | |
| ＃3 ステアーマウスとkeyboard-maestroの設定例 | 7分15秒 | |
| 基本知識編 | ＃1 Photoshopとは？ | 4分05秒 |
| ＃2 Photoshopのワークスペースのコピー | 2分56秒 | |
| ＃3 Photoshopのツールパネルについて | 4分28秒 | |
| ＃4 パネル_パネルドックの基本操作 | 4分21秒 | |
| ＃5 デジタル画像の基礎知識 | 6分20秒 | |
| ＃6 画像解像度とドキュメントサイズ | 6分01秒 | |
| ＃7 ファイルのフォーマットについて | 2分23秒 | |
| 基本操作編 | ＃1〜2 ファイルを開く_ファイルを保存する | 4分09秒 |
| ＃3 ワークスペースの操作 | 2分06秒 | |
| ＃4 画像の表示領域の変更 | 2分59秒 | |
| ＃5 画像の傾きを修正する方法 | 3分34秒 | |
| ＃6 不要な部分をトリミングする方法 | 5分01秒 | |
| ＃7 作業の取り消し | 5分19秒 | |
| ＃8 ガイドとグリットの利用方法 | 4分32秒 | |
| ＃9 画像ファイルの情報を調べる方法 | 3分26秒 | |
| ＃10 カンバスサイズを変更する方法 | 3分20秒 | |
| ＃11 新規ファイルの作成方法 | 4分01秒 | |
| 選択編 | ＃1 選択範囲の基本知識 | 3分54秒 |
| ＃2 選択範囲の基本操作 | 2分34秒 | |
| ＃3 長方形や楕円形の選択範囲を作成する方法 | 7分00秒 | |
| ＃4 複雑な形の選択範囲を作成する方法 | 6分51秒 | |
| ＃5 自動的に選択範囲を作成する | 4分23秒 | |
| ＃6 選択範囲を反転する＆選択範囲を透明にする方法 | 1分33秒 | |
| ＃7 被写体を一瞬で選択する方法 | 2分15秒 | |
| ＃8 アルファチャンネルで選択範囲を変数する | 6分43秒 | |
| ＃9 アルファチャンネルで画像を見ながら編集する方法 | 3分55秒 | |
| ＃10 クイックマスクモードで選択範囲を編集する方法2 | 5分33秒 | |
| ＃11 アルファチャンネルとクイックマスクの違いについて | 1分20秒 | |
| ＃12 カラー範囲で選択する方法(色域指定) | 2分31秒 | |
| ＃13 選択範囲を追加する方法(選択範囲を拡張) | 2分42秒 | |
| ＃14 パスを選択範囲に変換する方法 | 3分11秒 | |
| ＃15 ふわふわな毛並みを正確に選択する方法 | 7分58秒 | |
| ＃16 選択範囲を調整する方法 | 4分44秒 | |
| レイヤー編 | ＃1 レイヤーとは何か？ | 3分54秒 |
| ＃2 レイヤーの基本操作の全体像 | 2分00秒 | |
| ＃3 レイヤーの基本操作①〜表示・非表示/順序変更/新規作成〜 | 5分43秒 | |
| ＃4 レイヤーの基本操作②〜削除/複製/グループ化/リンク〜 | 8分54秒 | |
| ＃5 レイヤーの基本操作③〜結合/選択と移動/整列 | 5分39秒 | |
| ＃6 レイヤーの基本操作④〜変形/ロック | 8分45秒 | |
| ＃7 塗りつぶしレイヤー〜ベタ塗り・グラデーション〜 | 7分07秒 | |
| ＃8 塗りつぶしレイヤー〜パターン〜 | 2分23秒 | |
| ＃9 スマートオブジェクトについて | 5分25秒 | |
| ＃10 スマートオブジェクトについて〜ラスタライズ・置換〜 | 8分02秒 | |
| ＃11 レイヤーの不透明度を変更する(塗りとの違い)- | 3分05秒 | |
| ＃12 レイヤーマスクを編集する方法① | 5分56秒 | |
| ＃13 レイヤーマスクを編集する方法② | 4分36秒 | |
| ＃14 選択範囲に画像をペーストする方法- | 3分28秒 | |
| ＃15 ベクトルマスクを編集する方法 | 5分05秒 | |
| ＃16 クリッピングマスクを使う方法 | 2分37秒 | |
| ＃17 レイヤースタイルで装飾する方法 | 2分32秒 | |
| ＃18 レイヤースタイルの詳細設定 | 4分26秒 | |
| ＃19 描画モードの基礎知識 | 3分40秒 | |
| ＃20 描画レイヤーの合成結果 | 3分25秒 | |
| ＃21 レイヤーをフィルタリングする方法 | 1分42秒 | |
| 色調補正編 | ＃1 色調補正について | 4分18秒 |
| ＃2 調整レイヤーについて | 1分56秒 | |
| ＃3 レベル補正について(明暗を調整する) | 5分54秒 | |
| ＃4 レベル補正をより深く理解しよう | 3分56秒 | |
| ＃5 トーンカーブについて(明暗を調整する) | 2分19秒 | |
| ＃6 トーンカーブをより深く理解しよう | 5分16秒 | |
| ＃7 レベル補正とトーンカーブを使いこなそう | 4分40秒 | |
| ＃8 明るさ・コントラストについて（明暗を調整する） | 6分46秒 | |
| ＃9 色相・彩度を調整する方法 | 8分00秒 | |
| ＃10 カラーバランスを調整する方法 | 4分19秒 | |
| ＃11 レンズフィルターについて | 4分02秒 | |
| ＃12 モノトーン(白黒)について | 6分51秒 | |
| ＃13［階調の反転］と［2階調化］ | 2分44秒 | |
| ＃14 ポスタリゼーションについて | 1分02秒 | |
| ＃15 グラデーションマップについて | 5分38秒 | |
| 描画編 | ＃1 色の基本設定について | 4分39秒 |
| ＃2 色の指定方法について | 6分24秒 | |
| ＃3 ブラシツールについて | 6分01秒 | |
| ＃4 ブラシツールの詳細設定 | 6分01秒 | |
| ＃5 塗りつぶしについて | 3分55秒 | |
| ＃6 グラデーションツールについて | 4分54秒 | |
| ＃7 パターンでペイントする | 5分13秒 | |
| ＃8 消しゴム系ツールについて | 4分21秒 | |
| レタッチ編 | ＃1 コピースタンプツールと修復ブラシツール | 6分43秒 |
| ＃2 スポット修復ブラシツールについて | 2分00秒 | |
| ＃3 パッチツールについて | 5分32秒 | |
| ＃4 修復系ツールの比較 | 3分45秒 | |
| ＃5 コンテンツに応じた移動ツールについて | 4分42秒 | |
| ＃6 コンテンツに応じて拡大・縮小 | 4分08秒 | |
| フィルター編 | ＃1 フィルターとは | 4分09秒 |
| ＃2 アンシャープマスクフィルターとぼかし（ガウス） | 3分17秒 | |
| ＃3 フィルターマスクについて | 5分55秒 | |
| ＃4 ゆがみ・消点フィルター | 3分14秒 | |
| ＃5 フィルターギャラリーについて | 2分07秒 | |
| ＃6 ニューラルフィルターについて | 7分53秒 | |
| 文字シェイプ編 | ＃1 文字ツール・文字パネル・段落パネルについて | 6分20秒 |
| ＃2 文字入力の方法について | 6分50秒 | |
| ＃3 文字入力に関する補足 | 8分09秒 | |
| ＃4 シェイプとパスの基礎知識 | 10分17秒 | |
| ＃5 パスの描画とペンツールについて | 7分03秒 | |
| ＃6 ペンツールの基本操作 | 8分48秒 | |
| ＃7 アンカーポイントについて | 7分44秒 |
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秒 |
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秒 |
ファーストビュー作成動画(10レッスン)
片岡が実際に受けた案件の中で、ファーストビューの作成過程をすべて画面録画したものを配布します。
最初の文字や素材のレイアウトから、最終的な微調整の部分まで、どのようにファーストビューのデザインを作成しているのかぜひ見て学んでみてください。
| コンテンツタイトル | 収録時間 | |
|---|---|---|
| #1 | ファーストビュー作成動画『ツールマン』 | 1時間50分59秒 |
| #2 | ファーストビュー作成動画『THE MATCH』 | 14分24秒 |
| #3 | ファーストビュー作成動画『ハウスクリーニング』 | 1時間30分23秒 |
| #4 | ファーストビュー作成動画『オストビン』 | 39分28秒 |
| #5 | ファーストビュー作成動画『マグネシウムクリーム』 | 1時間30分29秒 |
| #6 | ファーストビュー作成動画『高齢者向けサプリ』 | 35分48秒 |
| #7 | ファーストビュー作成動画『業務代行サービス』 | 36分31秒 |
| #8 | ファーストビュー作成動画『スーパーフードサプリ』 | 47分55秒 |
| #9 | ファーストビュー作成動画『高校生夏期講習』 | 33分14秒 |
| #10 | ファーストビュー作成動画『無料英会話教材』 | 51分03秒 |
LPデザイナーが知っておきたい行動経済学（合計収録時間：1時間10分42秒/スライド23枚）
行動経済学は、経済学と心理学が合わさった比較的最近になって現れてきた学問ですが、人間の購買心理や購買行動を多角的に分析できるという点で、LPデザイナーが一度は学んでおいて損はないものです。
そこで、行動経済学の基本的な歴史から、プロスペクト理論やヒューリスティック、ナッジなどの重要キーワード、そしてLPデザインやビジネスにそれらの考えがどのように活かされているのか、ザッと学べるセミナーとなっています。
写真素材の選択テクニック（合計収録時間：1時間57分8秒/スライド２9枚）
原稿と同じように、依頼したクライアントがLPデザインに必要な写真や素材を完璧に用意してくれるとは限りません。
ただ、写真素材の選択次第で、最終的な成果物のクオリティも変わってきますし、それでデザイナーの評価が分かれてしまうケースも少なくありません。
そこで本セミナーでは、片岡が普段どのように写真素材を収集したり、文章に合った素材をどのように探し当てているのか、今すぐ使える具体的なテクニックベースでお伝えしています。
LPデザインの思考法（合計収録時間：54分25秒/スライド２7枚）
日々LPデザインを教えている中で、多くの方に共通する改善点をベスト10にしてまとめています。
LPデザインに100％の正解はありませんが、かといって説得力や根拠のないデザインばかりしていると、どうしても現場で通用するデザイナーにはなれません。
そこで効率的にクライアントに喜ばれるLPデザインをする上で、押さえておきたい重要な思考法や発想について具体的な事例を通じて言語化することに努めたセミナーとなっています。
キャッチコピーの基礎知識（合計収録時間：1時間29分/スライド36枚）
キャッチコピーの重要性について理解しているLPデザイナーは多いですが、「どのようにすれば集客に効果的なキャッチコピーを書けるのか？」という点を理解し、実際に実践できているデザイナーは決して多くはありません。
効果的なキャッチコピーの作り方について改めて習得しておくことは、LPデザイナーにとっては特にファーストビューやバナーを制作する際に大きなメリットを受けることができます。
そこで、そもそも駄目なキャッチコピーの例や、最低限確実に機能させるためのキャッチコピーの考え方について、ワーク形式を通じて学んでいきます。
LPデザインのラフスケッチテクニック(合計収録時間：54分14秒/スライド19枚)
ラフスケッチとは、LPをデザインする前に、どのようなデザインにすればいいのかあたりをつける作業です。
片岡流ラフスケッチは、単なる枠だけを書いて終わりのワイヤーフレームとは異なり、より具体的な情報構造とストーリー展開を詳しく事前にノートを使って記載していきます。
このセミナーでは、ラフスケッチをする際に気をつけるポイントや、実際の事例を用いたワークを通じて、製作者も発注者も的確なディレクションができるように、土台となるスキルを築いていきます。
LPデザインで使える認知心理学(合計収録時間：38分22秒/スライド18枚)
LPデザインを考える上で、認知心理学の観点を取り入れることは、非常に大きな武器となります。
そこで、本セミナーでは、心理学という学問の入り口からスタートして、どのように「LPデザインに心理学を応用していくのか」について体系的に網羅しています。
認知心理学の世界を紐解くことで、目の前のデザインの内在的論理(＝目には見えないルール)を知る方法を習得していきましょう。
ファーストビュー構築講座(合計収録時間：40分06秒/スライド20枚)
ランディングページ制作の中で最も重要である「ファーストビュー」の構築方法について、これまでデザイナーとして制作をしてきた中でもっとも有効である６つのルールについて解説をしています。
LPを自作するにせよ、制作会社に発注するにせよ、ファーストビューの骨組みを自分でコントロールすることができれば、運用後の改善もA/Bテストもやり放題です。
「大きな方向性を外さないファーストビュー」をどのように考えていくかという思考プロセスを学んでください。
LEVEL3の関連資料・データ
業界業種別LPデータ50選
私がこれまで担当してきた案件の最終納品データ(HTML)を取りまとめてダウンロードすることができます。
ひとまずこの位のレベルでLPを作ることができれば、十分収入を得るチャンスがあるという参考基準に活用して頂ければと思います。
| LPの業界・ジャンル | 配布するデータの業種・テーマ |
|---|---|
| BtoB商材系LP | 360°評価システムLP |
| 社員管理アプリLP | |
| 不動産管理システムLP | |
| 業務可視化&改善ツールLP | |
| データセンターLP | |
| オプトイン・メルマガ系LP | セミナー募集LP |
| 注文住宅LP | |
| 妊活LP | |
| 物販セミナーLP | |
| 英会話講座LP | |
| 物販セミナーLP | |
| 不動産投資LP | |
| サービス系LP | 花配達LP |
| 鍵トラブルLP | |
| 相続税LP | |
| 塗装LP | |
| 仲介手数料無料賃貸LP | |
| 工具買取サービスLP | |
| 漫画制作サービスLP | |
| MLM商品買取LP | |
| 求人系LP | 建築求人LP |
| 新卒求人LP | |
| 整体求人LP | |
| サプリ系LP | 口臭サプリLP |
| 高齢者向けプロテインLP | |
| スーパーフードサプリLP | |
| 男性向け精力サプリLP | |
| 女性用黒髪サプリLP | |
| 情報商材系LP | うつ病LP |
| 資産運用LP | |
| 睡眠障害LP | |
| FX情報商材LP | |
| トイトレ情報商材LP | |
| 婚活ノウハウ情報商材LP | |
| 通販系LP | 液体だしLP |
| フィットネス器具LP | |
| 食器用洗剤LP | |
| メッキスプレーLP | |
| 店舗教室系LP | 英会話教室LP |
| イラスト教室LP | |
| スポーツジムLP | |
| 整体LP | |
| ジム店舗LP | |
| 整体LP | |
| 学習塾LP | |
| ビューティーサロンLP | |
| 美容系LP | クレンジングLP |
| ボディクリームLP | |
| 化粧品LP | |
| 黒大豆LP | |
| 竹塩石鹸LP | |
| 竹美容液LP |
