このサブコースでは、LPの「デザイン」に特化したコンテンツをまとめています。
配色やレイアウト、フォント選びといったデザインの基本から、思わずクリックしたくなるファーストビューの作り方、成果につながるデザインの考え方まで、感覚ではなく”根拠のあるLPデザイン”ができるようになるためのヒントが詰まっています。
メインカリキュラムで学んだ内容を、さらに深く、実践的に磨き上げるためにご活用ください。
気になるコンテンツから、ぜひご覧ください。
LP DESIGN MASTER CLASS 講師
片岡 亮太 Ryota Kataoka
株式会社KATAOKA DESIGN MARKETING 代表取締役
LP専門Webデザイナー / Webコンサルタント・セミナー講師
1986年生まれ。札幌市在住。早稲田大学教育学部社会科社会科学専修卒業（社会学専攻）。フリーランスとして『LP制作集客代行サービス』を通じてこれまで通算実績450件以上のLP制作案件を担当。著書に『Web制作フリーランス入門講座』『みるみる成果が上がる！ランディングページ制作入門講座』（ともにソーテック社）。公式Xアカウント（フォロワー3.7万）
なお、LPデザインマスタークラスの特長や全体のカリキュラムについて把握されたい方は、以下の記事を参考にしてみてください。
【サブコース】②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秒 |
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 | 動作する内容にアニメーションを追加する |
ファーストビュー作成動画(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デザインをする上で、押さえておきたい重要な思考法や発想について具体的な事例を通じて言語化することに努めたセミナーとなっています。
LPデザインで使える認知心理学(合計収録時間：38分22秒/スライド18枚)
LPデザインを考える上で、認知心理学の観点を取り入れることは、非常に大きな武器となります。
そこで、本セミナーでは、心理学という学問の入り口からスタートして、どのように「LPデザインに心理学を応用していくのか」について体系的に網羅しています。
認知心理学の世界を紐解くことで、目の前のデザインの内在的論理(＝目には見えないルール)を知る方法を習得していきましょう。
ファーストビュー構築講座(合計収録時間：40分06秒/スライド20枚)
ランディングページ制作の中で最も重要である「ファーストビュー」の構築方法について、これまでデザイナーとして制作をしてきた中でもっとも有効である６つのルールについて解説をしています。
LPを自作するにせよ、制作会社に発注するにせよ、ファーストビューの骨組みを自分でコントロールすることができれば、運用後の改善もA/Bテストもやり放題です。
「大きな方向性を外さないファーストビュー」をどのように考えていくかという思考プロセスを学んでください。
添削！LPデザインビフォーアフター(合計収録時間：１時間14分/スライド38枚)
講座参加者の方に、あらかじめ提出して頂いたデザインを、私の方で添削したものをレビューしたセミナーです。デザインを習得するためには、自分のデザインのどこに問題があるのかをしっかりと可視化・言語化する訓練が必要です。
このセミナーを見ることで、どのように自分のデザインを改善していけばいいのか、プロと初心者の違いは何なのかを肌感覚で掴むことができるでしょう。
業界別LPデザイン分析ワーク(合計収録時間：1時間2分/スライド17枚)
LPデザイナーが、それまで担当したことのないテーマの商材を扱う際、その業界・業種のトーンアンドマナーを短時間で的確に把握して、実際の制作物に活かすということは案件を担当していく上で非常に重要です。
そこで、キーワード検索をベースにした業界別のトーンアンドマナー別のリサーチ方法や、トーンアンドマナーをつかんだ後でどのようにLPデザインにリサーチ結果を活用するのかなど、具体的な事例を挙げながら解説しています。
LPデザイナーが押さえておくべきスマホファースト(合計収録時間：48分02秒/スライド22枚)
この10年でスマホというテクノロジーは驚異的な発展を遂げ、いまやクライアントから「スマホ対応」や「スマホ優先」でデザインをしてほしいというリクエストは、ごく普通で当たり前のものになりました。
しかし、ことLPデザイナーの立場に立ってみると、自分が作ったLPはほぼスマホで閲覧される可能性が高いにも関わらず、そもそもスマホという機器そのものや、スマホが社会に与えている影響について改めて考える機会は少ないことでしょう。
そこで、スマホユーザーとPCユーザーの違いなどから、私たちがLPを作る際に、スマホユーザーをどのように意識すればいいのかについてまとめています。
LPデザイン瞬発力トレーニング(合計収録時間：1時間41分28秒)
勉強会参加者に対してLPデザインの課題を出して、短時間での作業における各自のアウトプットの違いから、「わかりやすい」「見やすい」デザインを作るためにはどうすればいいのか、ワークの模様を収録しました。
このワークを実際に自分もトライしてみることで、他のデザイナーとの思考や発想の違いに気がつくことができて、より普段のデザイン作業の幅を広げることができるでしょう。
LPデザイン改善提案トレーニング(合計収録時間：1時間29分47秒/スライド31枚)
クライアントから「既存のLPでうまくいかない」という相談を受けた際、どのように対応すればそのまま案件獲得につなげられるのか、実際に私がこれまで受けてきた500以上を超える問い合わせメールのデータを元に解説しています。
クライアントに「このデザイナーにぜひ任せたい」と感じてもらえるように、具体的なメールの書き方や着眼点を体系的にまとめています。
LPデザイン改善実践トレーニング(合計収録時間：1時間00分14秒/スライド24枚)
改善提案トレーニングを踏まえて、次の段階として実際にどのようにデザインを修正して提案すれば、クライアントの満足度を向上させることができるのか、実際に私が受けた案件を題材に、ワークを通じて学んでいきます。
自分で取り組んだワークと、私が実際に納品した作品を比べて、どのような視点でデザインを改善していけばいいのか、具体的なポイントを解説しています。
LPデザイナーが知っておきたいレイアウトの基礎知識(合計収録時間：59分/スライド21枚)
LPデザインに取り組む上で、Webデザイナーとして知っておきたいレイアウトに関する基礎知識を解説しています。
レイアウトは「論定的条件」と「感情的条件」を満たしてやる必要がありますが、そうした切り口から「良いレイアウト」と「悪いレイアウト」の両面をゼロから丁寧に把握していくことで、どんなテーマの案件でも使えるレイアウトとは何かを学ぶことができるセミナーとなっています。
フォントの基礎知識(合計収録時間：1時間15分34秒/スライド44枚)
Webデザイナーが知っておきたいフォントの基礎知識についてまとめられたセミナーです。
フォントにまつわる専門用語を整理しながら、代表的なフォントメーカーの紹介、実際のデザインの場面においてどのようにフォントの印象をコントロールするのかなど具体的な事例を元に解説をしています。
ヒアリングの極意(合計収録時間：48分41秒/スライド15枚)
片岡は普段クライアントとほぼメールのみでやり取りをしますが、その一般的な業界から見ると特殊なヒアリングの工程の中に、どのような意図や目的があるのかについて詳しく解説しています。
ヒアリングの定義を見失って、不必要に時間を浪費しているうちは、フリーランスとして稼ぐことはできません。
ぜひこの動画を通じて、自身のヒアリングメソッドを確立するきっかけにして頂ければと思います。
LPのバナー制作の基礎知識(合計収録時間：1時間29分47秒/スライド33枚)
Webデザイナーが勉強をスタートすると、必ずといって言いほど取り組むのが、「バナーデザイン」です。
しかし、いくらバナーを綺麗に作れたところで、そこにマーケティングの視点が欠けていては、実際の制作現場でなかなか活躍することはできません。
そこでこのセミナーでは、マーケティング活動の一環である「広告」という領域から逆算して、どのようにLPデザイナーがバナーを制作すればいいのか、具体的な作成方法も合わせて網羅的に解説しています。
LPデザイナーが押さえておくべきスマホファースト(合計収録時間：48分02秒/スライド22枚)
この10年でスマホというテクノロジーは驚異的な発展を遂げ、いまやクライアントから「スマホ対応」や「スマホ優先」でデザインをしてほしいというリクエストは、ごく普通で当たり前のものになりました。
しかし、ことLPデザイナーの立場に立ってみると、自分が作ったLPはほぼスマホで閲覧される可能性が高いにも関わらず、そもそもスマホという機器そのものや、スマホが社会に与えている影響について改めて考える機会は少ないことでしょう。
そこで、スマホユーザーとPCユーザーの違いなどから、私たちが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が検索されないように設定する方法 | – |
