ランディングページ(LP)コーディング講座
様々なデザインが使用されているランディングページ（LP）のコーディングを通して、お仕事を受けられるレベルのHTML/CSSコーディングを習得する講座です。
レベル
ふつう
32レッスン
0日間
短期でLPコーディング案件受注可能なコーディングスキル習得を目指す
～ランディングページ(LP)制作を通して、複雑なレイアウトのコーディング方法を学ぶ～
フリーランスとしてWebデザインのお仕事を探したとき、多く見かけるのがランディングページの制作案件。商品やサービスを販売する商業的なWebサイトにとって、ランディングページは必要不可欠なページの一つとも言えます。
コーディング学習やフリーランスデビュー
ハードルが高いと感じていませんか？
HTMLとCSS基礎学習から
レベルアップするには…？
習ったページは作れるけど
自分で考えるのは難しい
コーディング案件受注は
難易度が高そうで不安
情報量の多いLPをコーディングすることで、幅広い表現方法の習得・応用が可能になります
ランディングページは情報量が多く、縦長。ユーザーを飽きさせずに様々な情報を見せるために、デザイン的な表現も多く使われています。そのため極力画像化せずCSS等でデザインを再現しようと思うと、ランディングページのコーディングは難易度が高くなります。
つまり、ランディングページのコーディングができれば、多くのWEBページのコーディングが可能になります。
本講座ではランディングページを作成しながら、よく使われるレイアウトや、複雑な表現を可能にするCSSについてミニマムに学習して頂きます。題材デザインのコーディングができれば、もはや初心者ではありません。
お仕事案件チャレンジへの自信もつき、様々な応用もできるようになりますよ。
本格的なデザインのLPをコーディングしてただきます
Skillhub LPコーディング講座の特徴
多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。実際に手を動かしてコーディングを行いながら、考え方や仕組みを学ぶことで、短期間でもコーディングスキルの向上を可能にしています。
分かりやすい図解やアニメーションでしっかり理解できる
コーディングの学習はレベルが高くなるほど「正解のコードを見たら分かるよね？」という形式が増える傾向にあります。そのため、なんとなくで作ったり、コピペしたものをアレンジしようとしたらレイアウトが崩れたり、なんて事も……。
本講座では、どういった仕組みでデザインの再現を行っているのかを図解やアニメーションを使ってしっかり解説。検証ツールと組み合わせた解説もあるので、上手く行かない時はどこを見るのか、どのように直すのかのコツも掴むことができます。
引き出しを増やし、様々なデザインに応用できるようになる
渡されたデザインからどのように考えて、HTMLとCSSで形作るのか。コンテンツ量や画面幅に左右されない背景画像の設定、疑似要素やlinear-gradient()を使った表現方法なども解説しています。
考え方や活用法を知ることで、レッスン題材だけではなく、様々なデザインをコーディングで再現することが出来るようになります。もう、コピペ可能なコードを探し回る必要はありません。
案件数の多いLPコーディングのお仕事に挑戦できる
商的Webサイトでは、ランディングページが多くあります。クラウドソーシングサイトでコーディングでお仕事を探しても、LPコーディング案件の割合はかなりのもの。
ランディングページのコーディングが出来るようになると、エントリーできるお仕事の数が増えます。比例して獲得できるお仕事数や収入も高まっていくでしょう。仕事をこなすほど、Webデザイナー・Webコーダーとしてのあなたの実績も上がっていきます。
本講座の受講に必要なスキル
ランディングページ(LP)コーディング講座では複雑なレイアウトや、デザイン性の高いコーディングを行います。レッスンをスムーズに進めるため、HTMLとCSSの基礎知識が必要となります。
- HTML,CSSの基本書式を理解している
- Flexboxでのレイアウトができる
- positionプロパティを使った絶対位置指定ができる
- ブラウザ付属の検証ツールが使える
本講座受講でできるようになること
- レスポンシブなランディングページを作れる
- 渡されたデザインをWebページで表現できる
- 表示が崩れてしまっても自己解決できる
- コーディングのスピートが向上する
- LPコーディングのお仕事を受注できるスキルが身につく
レッスン内容
-
1
ランディングページ(LP)コーディング講座の進め方と注意点を説明します。
-
2
Google fontsとGoogleMaterial Iconsの導入方法を行いましょう。2022年から導入されたGoogle Material Symbolsの基本の使い方も解説します。近年多く使われるようになっているサニタイズCSSの導入も行います。
-
3
実習範囲の説明ページです。01ではヘッダーナビゲーションを含む、ヘッダー部分をコーディングして頂きます。
-
4
実習範囲01のコーディングを解説します。ヘッダーナビゲーションを作成しながら、LP全体で使用するグリッドシステムのためのクラスも作っていきましょう。
-
5
実習範囲の説明ページです。範囲02ではファーストビュー部分をコーディングして頂きます。
-
6
実習範囲02、ファーストビュー部分のコーディング方法を解説しています。背景画像上の要素の配置、影をつけたボタン風デザインのコーディングを行います。
-
7
実習範囲の説明ページです。03では問題提起セクションのコーディングを行っていただきます。吹き出しや、セクションの一部のみに背景色を適用する方法を考えてみてください。
-
8
実習範囲03、問題提起部分までコーディング方法を解説します。CSS疑似要素を使って吹き出しを作ったり、背景色を設定してみましょう。
-
9
実習範囲の説明ページです。04では結果セクションとCTA部分をコーディングしていただきます。
-
10
課題範囲04のコーディングを解説します。CSSで三角形の背景を作る、文字にマーカーをひいたようなデザインを表現するなど、LPに限らず多くのサイトで使われているCSSを書いてみましょう。
-
11
実習範囲の説明ページです。05ではSkillhubメソッドのセクションを作成しながら、背景画像の位置指定等を行っていただきます。
-
12
課題範囲05、Skillhubメソッド部分のコーディング方法を解説します。背景画像の複数指定や位置指定が出来るようになると、表現できるデザインの幅が広がります。
-
13
実習範囲の説明ページです。05では学習フローのセクションをコーディングしていただきます。
-
14
実習範囲06、学習フロー部分のコーディング方法を解説します。擬似クラス:nth-child()の仕組みと設定方法も紹介しています。
-
15
実習範囲の説明ページです。07では卒業生の声セクションと2つめのCTAをコーディングしていただきます。
-
16
実習範囲07、卒業生の声セクションのコーディング方法を解説します。このセクションでは要素を“重ねる”レイアウトが多くあります。コーディングの考え方に慣れていきましょう。
-
17
実習範囲の説明ページです。08では「SkIllhubアントレの特徴」「よくある質問」をコーディングして頂きます。
-
18
実習範囲08、「SkIllhubアントレの特徴」と「よくある質問」セクションのコーディング方法を解説します。クリックで表示・非表示が切り替わるような仕組みがあるときの考え方についても解説しています。
-
19
実習範囲の説明ページです。09では料金プランの部分をコーディングして頂きます。料金表の部分はtableタグを使ってコーディングしてください。
-
20
実習範囲09、料金表を作るために必要なtable要素について解説します。
-
21
実習範囲09、料金プラン部分のコーディングについて解説します。tableタグについてはもちろん、列ごとの色分けなどスタイル指定方法も紹介しています。
-
22
実習範囲の説明ページです。10ではフォームを含む、お問い合わせセクションをコーディングして頂きます。
-
23
実習範囲10、お問い合わせセクションのコーディング方法を解説します。formタグの使用や、CSSで疑似要素にGoogle Material Iconsを設定する方法も解説します。
-
24
実習範囲の説明ページです。11でPC幅の作成は完了。フッターをコーディングして、ページ全体を見直してみましょう。
-
25
実習範囲11、フッター部分のコーディングについて解説しています。また、ページ全体を見直しつつ、ユーザビリティを高めるためのカーソル表示設定等も行います。
-
26
PC幅のコーディングが出来たら、スマートフォンでも見られるように整えていきましょう。本ページではレスポンシブ化の際の注意点や、ヘッダーナビゲーションの動作見本を紹介します。
-
27
スマホ幅向けにCSSを書いていく時、表示領域からのはみ出しや崩れが多いと、手を付けにくいですよね。本レッスンでは、大きな問題点を改善して作業を進めやすくする方法を解説します。
-
28
スマートフォン向けの表示でよく使われる、折りたたみ式のナビゲーション作成方法を解説します。仕組みがわかるとビックリするほど簡単に実装できますよ。
-
29
ファーストビューから1つめのCTAまで、スマートフォン幅で表示すると崩れてしまう部分を整えていきましょう。
-
30
「Skillhubメソッド」から「Skillhubアントレの特徴」までをスマートフォン幅でも読みやすいように整えます。
-
31
よくある質問からフッターまでスマホ幅向けの表示を整え、レスポンシブ化を完了させます。よくある質問の開閉機能も加えましょう。
-
32
ランディングページコーディング講座の課題をお伝えします。課題に使用する素材と見本もありますので、ご確認下さい。
もっと見る
ランディングページ(LP)コーディング講座
様々なデザインが使用されているランディングページ（LP）のコーディングを通して、お仕事を受けられるレベルのHTML/CSSコーディングを習得する講座です。
| 講座名 | ランディングページ(LP)コーディング講座 |
|---|---|
| 料金 |
151,800 円（税込） |
| サポート期間 | 30日間 |
| マンツーマンサポート | 2回 |
| レッスン数 | 32 |
| 質問回数 | 無制限 |
有料20講座ウケ放題！お得なプレミアムサービス
無料申し込み期限
12月8日まで
募集
人数
7名 （残りわずか）
