ランディングページ(LP)コーディング講座 | SkillhubAI（スキルハブエーアイ）
ホーム/講座一覧/ランディングページ(LP)コーディング講座
単品の講座 全32レッスン

ランディングページ(LP)コーディング講座

こんな方へHTML/CSSを学んでいる方

様々なデザインが使用されているランディングページ（LP）のコーディングを通して、お仕事を受けられるレベルのHTML/CSSコーディングを習得する講座です。

この講座で、できるようになること

  • 複雑なデザインをHTMLとCSSでコーディングできる
  • デザイン画からレスポンシブにコーディングができる
  • レイアウトが崩れてしまった時の修正方法が身につく
この講座を申し込む価格：¥138000
ランディングページ(LP)コーディング講座
32レッスン
4章
単品買い切り
ABOUT

この講座について

短期でLPコーディング案件受注可能なコーディングスキル習得を目指す

～ランディングページ(LP)制作を通して、複雑なレイアウトのコーディング方法を学ぶ～

フリーランスとしてWebデザインのお仕事を探したとき、多く見かけるのがランディングページの制作案件。商品やサービスを販売する商業的なWebサイトにとって、ランディングページは必要不可欠なページの一つとも言えます。

コーディング学習やフリーランスデビュー
ハードルが高いと感じていませんか？

HTMLとCSS基礎学習から
レベルアップするには…？

習ったページは作れるけど
自分で考えるのは難しい

コーディング案件受注は
難易度が高そうで不安

情報量の多いLPをコーディングすることで、幅広い表現方法の習得・応用が可能になります

ランディングページは情報量が多く、縦長。ユーザーを飽きさせずに様々な情報を見せるために、デザイン的な表現も多く使われています。そのため極力画像化せずCSS等でデザインを再現しようと思うと、ランディングページのコーディングは難易度が高くなります。

つまり、ランディングページのコーディングができれば、多くのWEBページのコーディングが可能になります。
本講座ではランディングページを作成しながら、よく使われるレイアウトや、複雑な表現を可能にするCSSについてミニマムに学習して頂きます。題材デザインのコーディングができれば、もはや初心者ではありません。
お仕事案件チャレンジへの自信もつき、様々な応用もできるようになりますよ。

本格的なデザインのLPをコーディングしてただきます

レッスン制作イメージ

Skillhub LPコーディング講座の特徴

多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。実際に手を動かしてコーディングを行いながら、考え方や仕組みを学ぶことで、短期間でもコーディングスキルの向上を可能にしています。

1

分かりやすい図解やアニメーションでしっかり理解できる

コーディングの学習はレベルが高くなるほど「正解のコードを見たら分かるよね？」という形式が増える傾向にあります。そのため、なんとなくで作ったり、コピペしたものをアレンジしようとしたらレイアウトが崩れたり、なんて事も……。

本講座では、どういった仕組みでデザインの再現を行っているのかを図解やアニメーションを使ってしっかり解説。検証ツールと組み合わせた解説もあるので、上手く行かない時はどこを見るのか、どのように直すのかのコツも掴むことができます。

2

引き出しを増やし、様々なデザインに応用できるようになる

渡されたデザインからどのように考えて、HTMLとCSSで形作るのか。コンテンツ量や画面幅に左右されない背景画像の設定、疑似要素やlinear-gradient()を使った表現方法なども解説しています。

考え方や活用法を知ることで、レッスン題材だけではなく、様々なデザインをコーディングで再現することが出来るようになります。もう、コピペ可能なコードを探し回る必要はありません。

3

案件数の多いLPコーディングのお仕事に挑戦できる

商的Webサイトでは、ランディングページが多くあります。クラウドソーシングサイトでコーディングでお仕事を探しても、LPコーディング案件の割合はかなりのもの。

ランディングページのコーディングが出来るようになると、エントリーできるお仕事の数が増えます。比例して獲得できるお仕事数や収入も高まっていくでしょう。仕事をこなすほど、Webデザイナー・Webコーダーとしてのあなたの実績も上がっていきます。

本講座の受講に必要なスキル

ランディングページ(LP)コーディング講座では複雑なレイアウトや、デザイン性の高いコーディングを行います。レッスンをスムーズに進めるため、HTMLとCSSの基礎知識が必要となります。

  • HTML,CSSの基本書式を理解している
  • Flexboxでのレイアウトができる
  • positionプロパティを使った絶対位置指定ができる
  • ブラウザ付属の検証ツールが使える

本講座受講でできるようになること

  • レスポンシブなランディングページを作れる
  • 渡されたデザインをWebページで表現できる
  • 表示が崩れてしまっても自己解決できる
  • コーディングのスピートが向上する
  • LPコーディングのお仕事を受注できるスキルが身につく

この講座で学べること

  1. 複雑なデザインをHTMLとCSSでコーディングできる
  2. デザイン画からレスポンシブにコーディングができる
  3. レイアウトが崩れてしまった時の修正方法が身につく
  4. スマホ幅でも横方向のはみ出しゼロでコーディングできる
  5. 実務レベルのコーディング力が身につく
  6. Webコーダーとしての自信がつく

こんな方におすすめです

  • HTML/CSSを学んでいる方
  • 基礎を学んだが「作りたいサイトが作れない」とお悩みの方
  • 実践的なHTML/CSS設計・コーディング方法を知りたい方
  • お仕事レベルのWebコーディングスキルを身につけたい方

受講の前に用意するもの

  • WindowsもしくはMacのパソコンをもっている方。
  • パソコンの基本操作ができる方。
  • HTML/CSSの基礎がわかる方
  • 【推奨】Google Chrome がインストールされている環境 ※他のブラウザでもOKですが、動画と同じ操作画面にするために、同じ環境を推奨します。
CURRICULUM

カリキュラム

4章 全32レッスン 上から順に進めると、最後まで迷わず進めます

1章　本講座の進め方・基本設定2レッスン

  1. 1本講座の進め方と注意点ランディングページ(LP)コーディング講座の進め方と注意点を説明します。
  2. 2初期設定：Webフォント、サニタイズCSSを導入するGoogle fontsとGoogleMaterial Iconsの導入方法を行いましょう。2022年から導入されたGoogle Material Symbolsの基本の使い方も解説します。近年多く使われるようになっているサニタイズC...

2章　PC幅デザインのコーディング23レッスン

  1. 3実習範囲01：ヘッダー部分実習範囲の説明ページです。01ではヘッダーナビゲーションを含む、ヘッダー部分をコーディングして頂きます。
  2. 4解説01：自作グリッドシステムとヘッダー作成実習範囲01のコーディングを解説します。ヘッダーナビゲーションを作成しながら、LP全体で使用するグリッドシステムのためのクラスも作っていきましょう。
  3. 5実習範囲02：ファーストビュー実習範囲の説明ページです。範囲02ではファーストビュー部分をコーディングして頂きます。
  4. 6解説02：ファーストビュー部分の作成実習範囲02、ファーストビュー部分のコーディング方法を解説しています。背景画像上の要素の配置、影をつけたボタン風デザインのコーディングを行います。
  5. 7実習範囲03：問題提起部分まで実習範囲の説明ページです。03では問題提起セクションのコーディングを行っていただきます。吹き出しや、セクションの一部のみに背景色を適用する方法を考えてみてください。
  6. 8解説03：Web起業で～問題提起部分実習範囲03、問題提起部分までコーディング方法を解説します。CSS疑似要素を使って吹き出しを作ったり、背景色を設定してみましょう。
  7. 9実習範囲04：結果セクションとCTA実習範囲の説明ページです。04では結果セクションとCTA部分をコーディングしていただきます。
  8. 10解説04：結果セクション～CTAの作成課題範囲04のコーディングを解説します。CSSで三角形の背景を作る、文字にマーカーをひいたようなデザインを表現するなど、LPに限らず多くのサイトで使われているCSSを書いてみましょう。
  9. 11実習範囲05：Skillhubメソッド部分実習範囲の説明ページです。05ではSkillhubメソッドのセクションを作成しながら、背景画像の位置指定等を行っていただきます。
  10. 12解説05：Skillhubメソッド部分の作成課題範囲05、Skillhubメソッド部分のコーディング方法を解説します。背景画像の複数指定や位置指定が出来るようになると、表現できるデザインの幅が広がります。
  11. 13実習範囲06：学習フロー部分実習範囲の説明ページです。05では学習フローのセクションをコーディングしていただきます。
  12. 14解説06：学習フロー部分の作成実習範囲06、学習フロー部分のコーディング方法を解説します。擬似クラス:nth-child()の仕組みと設定方法も紹介しています。
  13. 15実習範囲07：卒業生の声とCTA実習範囲の説明ページです。07では卒業生の声セクションと2つめのCTAをコーディングしていただきます。
  14. 16解説07：卒業生の声～2つめのCTA作成実習範囲07、卒業生の声セクションのコーディング方法を解説します。このセクションでは要素を“重ねる”レイアウトが多くあります。コーディングの考え方に慣れていきましょう。
  15. 17実習範囲08：特徴セクション・よくある質問実習範囲の説明ページです。08では「SkIllhubアントレの特徴」「よくある質問」をコーディングして頂きます。
  16. 18解説08：特徴セクション・よくある質問の作成実習範囲08、「SkIllhubアントレの特徴」と「よくある質問」セクションのコーディング方法を解説します。クリックで表示・非表示が切り替わるような仕組みがあるときの考え方についても解説しています。
  17. 19実習範囲09：料金プラン実習範囲の説明ページです。09では料金プランの部分をコーディングして頂きます。料金表の部分はtableタグを使ってコーディングしてください。
  18. 20解説09-1：テーブル(表)の基礎知識実習範囲09、料金表を作るために必要なtable要素について解説します。
  19. 21解説09-2：料金プランの作成実習範囲09、料金プラン部分のコーディングについて解説します。tableタグについてはもちろん、列ごとの色分けなどスタイル指定方法も紹介しています。
  20. 22実習範囲10：お問い合わせ実習範囲の説明ページです。10ではフォームを含む、お問い合わせセクションをコーディングして頂きます。
  21. 23解説10：お問い合わせ部分の作成実習範囲10、お問い合わせセクションのコーディング方法を解説します。formタグの使用や、CSSで疑似要素にGoogle Material Iconsを設定する方法も解説します。
  22. 24実習範囲11：フッター作成実習範囲の説明ページです。11でPC幅の作成は完了。フッターをコーディングして、ページ全体を見直してみましょう。
  23. 25解説11：フッター作成と全体の見直し実習範囲11、フッター部分のコーディングについて解説しています。また、ページ全体を見直しつつ、ユーザビリティを高めるためのカーソル表示設定等も行います。

3章　レスポンシブ調整6レッスン

  1. 26実習範囲12～15：スマホ幅表示の調整PC幅のコーディングが出来たら、スマートフォンでも見られるように整えていきましょう。本ページではレスポンシブ化の際の注意点や、ヘッダーナビゲーションの動作見本を紹介します。
  2. 27解説12-1：①大きなはみ出しを無くすスマホ幅向けにCSSを書いていく時、表示領域からのはみ出しや崩れが多いと、手を付けにくいですよね。本レッスンでは、大きな問題点を改善して作業を進めやすくする方法を解説します。
  3. 28解説12-2：②ヘッダーナビゲーションスマートフォン向けの表示でよく使われる、折りたたみ式のナビゲーション作成方法を解説します。仕組みがわかるとビックリするほど簡単に実装できますよ。
  4. 29解説13：③fv ~ 1つ目のCTAまでファーストビューから1つめのCTAまで、スマートフォン幅で表示すると崩れてしまう部分を整えていきましょう。
  5. 30解説14：④Skillhubメソッド～特徴まで「Skillhubメソッド」から「Skillhubアントレの特徴」までをスマートフォン幅でも読みやすいように整えます。
  6. 31解説15：⑤フッターまでよくある質問からフッターまでスマホ幅向けの表示を整え、レスポンシブ化を完了させます。よくある質問の開閉機能も加えましょう。

4章　講座終了課題1レッスン

  1. 32講座終了課題についてランディングページコーディング講座の課題をお伝えします。課題に使用する素材と見本もありますので、ご確認下さい。
START

ランディングページ(LP)コーディング講座

HTML/CSSを学んでいる方に向けた、全32レッスンの講座です。上から順に、1つずつ進めてください。

  • 複雑なデザインをHTMLとCSSでコーディングできる
  • デザイン画からレスポンシブにコーディングができる
  • レイアウトが崩れてしまった時の修正方法が身につく
  • スマホ幅でも横方向のはみ出しゼロでコーディングできる
この講座を申し込む価格：¥138000