@やまP's Blog

ゆっくりしていってね。

LPコーディングとは【失敗しない勉強方法と解説】

プログラミングを勉強していると目にする「LPコーディング」。。。

クラウドソーシングの案件でも多い「LPコーディング」ですが、具体的に何をするんだろう、、、

「結論:これができればプログラミングでお小遣いが稼げます。」

 

本記事では「LPコーディング」「LP」「コーディング」について解説した後、「LPコーディング」の学習方法について触れていきたいと思います。

 

本記事を理解すればグッとプログラミングで収益を得ることに近づくので、ぜひお付き合いください。

 

 

【LPコーディングとは】

 

まず簡単に説明すると「LPコーディングとはLP(ランディングページ)をコーディング(仕様書に沿ってプログラムを書くこと)することを指します。

 

例えば、ある企業が「商品をネット上で売り出したい。」そうなった時にWeb制作会社に作りたい商品サイトのイメージを伝えます。Web制作会社はそれを元に大まかなサイトの設計図を作成します。出来あがった設計図に沿ってコードを書いて、イメージ通りにWebサイトに表示させる仕事がLPコーディングということです。

(1)LPについて

ランディングページとは(landing page=着地ページ)と言う意味を持っていて、ユーザーが検索エンジン(Google、Yahooなど)から最初にアクセスしたページのことです。

 

Webサイトにおける「集客」「入り口」の役割を持ち、1枚のページで構成されているページを指します。

 

また、反対に複数のページで構成されているページを「HP(ホームページ)と呼びます。

 

ざっくりと、LPはユーザーに対して「行動の動機付け」HPはユーザの対して「情報提供」と覚えておきましょう。

 

↓にLPとHPのリンクを貼ります。

クリックでLPサイトの例を確認する。

クリックでHPサイトの例を確認する。

何となくイメージが掴めればOKです。

(2)コーディングについて

コーディングとは本来、プログラミング言語を使ってソフトウェアの設計図を作成することを言いますが、Webサイト制作(企業の案件はほとんどこれ)におけるコーディングは、HTMLやCSSのようなマークアップ言語を使って、デザイン通りの見た目になるようにコードを記述することです。

【必要なプログラミング言語は?】

LPコーディングに知っておくと便利な言語は【HTML/CSS  JavaScript PHP jQuery】です。

「うわっ多いなぁ。。。」と思うかもしれませんが、この中で特に難しいのはJavaScriptぐらいです。

 

中にはJavaScriptを使わない案件もあったりするので、スキルUPの為に今使える知識を最大限に利用してトライ&エラーしてみるのもオススメです。

 

プログラミングの勉強方法の記事でも紹介した『Progate』では、上記の言語を全て学習できるのでこちらもチェックしてみてください。

関連記事:2020年版 プログラミング【オススメの勉強方法】

www.chonbo4645.site

 

 

【コーディングの学習方法】

まずは『Progate』のHTML/CSSのレッスンの道場編を全てクリアしてみましょう。多分相当、苦労するはずです。

次にネット上で実際にあるLPを模写してみましょう。ステップは簡単「①見本となるLPを選ぶ、②LPを模写コーディングする、③見本通りになっているかチェックする」

模写する際は【ハンバーガーメニュー、問合せフォーム、固定ヘッダー、画像を丸くする、Twitter、FBなどのロゴやリンクがある、背景の透過、余白】など実際の案件でも頻出するデザインが多く使われているLPを選ぶことで、より実践的にスキルを身に着ける事ができます。

また、初心者プログラマーに大人気のコーディング練習方法をまとめた『くりのすけ』さんのnoteのリンクも貼らせていただきます。https://note.com/kurinosuke32

 

 

【最後に】

 

最後までこの記事を読んで頂いてありがとうございます。この記事を読んでいる方のほとんどは、LPコーディングについての理解を深めたい方や、どうやってLPをコーディングを練習すれば良いのかわからない人たちだと思います。 闇雲に知識を学ぶ前に、何を学んでいて、それをどう利用していくのかを理解する事で、学習している内容が頭に入ってきやすくなりスキルUPに繋がるので、まずはLPコーディングの基礎をしっかりと身に着けましょう。そしたら次はいよいよ、プログラミングのスキルを活かして報酬を得る、案件の受注をしてみましょう!

この記事が少しでも読者様のお役に立てれば幸いです。