副業で稼ぎたい！
色々調べてみると、プログラミングが稼げるらしいです。
手に職的な。一度マスターすれば、稼いでいけるよと言われています。
ということで、色々あるプログラミングの中から今回は、
LPと呼ばれる【ランディングページ制作】に手を出してみます。
前回作った、ECサイトの商品ページに応用できそうなので、LP制作にしました。
ECサイト作成については、以下ページにて記載しています。
前回記事：ネット販売で副収入！ECサイトを作って商品を販売してみる
LP制作以外のプログラミングが必要になった時には、その時に記事にするので、お楽しみに。
今回もまたまた、調べながら、作りながらのログページとなります。
なので、専門的に学びたい方は、他の人のページを参考にしてください。
「LP制作」で検索すると、たくさん出てきますよ～。
LP制作のスタートとゴール
LP制作というコースに立ったので、そのゴールを目指すために、まずはスタート地点に立ちます。
何を作るか分かってないと、どうしようもないので、LPについて少しお勉強です。
LPとは、「ランディングページ（LandingPage）」の略で、
直訳すると「着陸ページ」となります。
最初に見てもらうページ、その情報を見たくてクリックして表示されるページ、
要するに、「ネット上のチラシ」のことです。
注目して見てほしいモノやサービスに絞った、宣伝広告のようなインターネット上のチラシを作ります。
今回のLPの目的は、紹介する商品のチラシを見て、買いたいと思ってもらい、実際に買ってもらうことです。
作り方次第で、売り上げが増減する広告を作ると思うと、ちょっとドキドキわくわくですね。
LP制作は何から始めるのか
さあ、LPを作るぞ。
と思い立っても、実際なにをしなければいけないのか、チンプンカンプンです。
なので、LPの構造をまとめておきます。
大まかに以下４つで構成されていますが、それぞれで、また細かな設定等はあるようです。
１．キャッチコピー
２．ボディーコピー
３．クロージング
４．コール・トゥ・アクション
見出しでバーンと目を引いて（キャッチコピー）
魅力を説明して（ボディーコピー）
買うための行動を起こしてもらう（クロージング）
最後にお問合せにも対応しますよ（コールトゥアクション）
の流れです。
LPは作り変えが必要なモノとの認識が一般的のようですね。
作って反応みてダメなら手を加える。
どんな作業にも試行錯誤は必要ということですね。
構成も分かったので、さっそく作っていきたいと思います。
自分の好きな商品の広告を出してみよう
なにはともあれ、LP制作の練習です。
とりあえず、好きな商品を選んでみましょう。
私はこうして記事作成している間にも、お世話になっているモノがあります。
水分補給と、心の安らぎを与えてくれるサーモスマグの広告を出してみようと思います。
普段使っているので、色々書きやすいかなとも思っています。
LP制作を請け負う場合は、文章や画像は、用意してもらうのが一般的です。
今回は自分で用意しないといけないので、身近な書きやすいモノを練習台とします。
LP制作に便利なツール
LPとはテキストファイルにマークアップ言語と呼ばれるHTMLを書いて出来上がるのですが、このHTMLを書く際に便利なツールがあります。
「Brackets」というテキストエディタです。
様々なテキストエディタがありますが、今回私は、「Brackets」を使用しています。
プログラミングがしやすくなるテキストエディタは、様々ありますので、自分に合ったツールを探すのも面白いですよ。
以下リンクより、ダウンロードできるので、ダウンロードしてみて下さい。
リンク：Bracketsダウンロード
使い方は、以下リンクより、分かりやすく説明してくれているので、参照してください。
リンク：Brackets使い方
Bracketsと相性の良い、GoogleChromeも作っているLP確認時に必要となります。
以下ページよりダウンロードが可能です。
リンク：GoogleChromeダウンロード
Brackets初回起動セキュリティーエラー
「Brackets」をダウンロード、インストール、起動をすると
「このアプリの機能のいくつかがWindows Defender ファイアウォールでブロックされています。」
のメッセージがでます。
「発行元：Node.js」はWebページ制作時に必要となる機能javaScriptの環境のことです。
パブリックネットワーク（非推奨）のチェックを外し、
プライベートネットワークにチェック付けて
「アクセスを許可する」と問題なく使えます。
作業フォルダ用意
作業フォルダを用意
今回は、「サーモスマグ」フォルダとしています。
その下に、３つのフォルダと１つのファイルを用意しておきます。
「css、img、js」フォルダ、「index.html」ファイル
imgフォルダに使用する画像を入れていきます。
cssフォルダはスタイルシート、
jsフォルダはJavaスクリプト
index.htmlにLPとなる広告内容を記載していきます。
LPを作るマークアップ言語「HTML」を理解する
先ほど作成した「index.html」は、HTMLと言われるマークアップ言語で記載していきます。
LP制作は、HTMLの理解が必要不可欠です。
HTMLはWebページを表示するために必要な言語です。
Webページにボタンなどで動きを付ける言語がJavaScriptと言われるプログラム言語となります。JavaScriptに関しては後程記載します。
htmlファイルの構造は、タグで箱を作っていくイメージです。
大枠「html」の箱の中に以下２つの箱が入っています。
１．ヘッダー
２．ボディー
ヘッダーの箱にページ情報を入れ、ボディーの箱に広告内容を入れていきます。
お決まりの文言もありますので、覚えておきましょう。
以下、htmlファイルのお決まり構造です。
1行目でHTMLコードで書きますよの宣言。
2行目が大枠のhtmlで”ja”（日本語）で書きますの宣言。
3行目～6行目がヘッダ情報部分。文字コードとタイトルを指定します。
7行目～9行目がボディ情報部分。広告として見える部分を記載します。
尚、ヘッダ情報はコンピュータ側への指定文言となるので、広告としては見えない情報となります。
今の状態で保存してウェブブラウザで開くと、ボディ情報部分に記載した
「保温保冷バツグンのサーモスマグで、心休まるひと時を！」
のみが表示されます。
広告となるボディ情報を記載していく
ボディには、さらに小さな箱３つを作ることができます。
のちのち必要となるので、作っておいたほうが良いでしょう。
<header>、<main>、<footer>の３つです。
8～10行目の<header>にタイトルをしていします。
11～13行目の<main>に本文を書いていきます。
14～16行目の<footer>にコピーライトを入れます。
商品紹介情報を作成
広告の本文、商品を紹介する情報を記載していきます。
記載場所は<main>タグ内
ここまでのhtmlファイルをウェブブラウザで表示すると、以下のようになります。
改行と段落、見出しを付けて読みやすくする
<h1>、<h2>は、見出しに使われます。<h1>が一番文字が大きく数字が増えるにつれ、小さくなります。数字は、1～6までで、入れ子の見出しによって使い分けます。
<br>は改行です。htmlでは、改行をしていしないと1行の分とみなされます。
<p>で段落を指定します。
文章の体裁を整えるタグはたくさんある
htmlには文章の見た目を整えるためのタグがたくさん用意されています。
「html タグ」で検索すると参考にできるページがたくさんありますので、自分の使いやすいページや必要な表現方法を探して、LPに反映させましょう。
文字の大きさ、色、引用、配置とたくさんありますので、どんな表現方法があるのか一度見てみるのもいいですよ。
表現の幅が広がります。
ｈｔｍｌタグを駆使して、見栄えの良い、魅力的なページをつくりましょう。
今回は練習なので、適当に見繕って作ってみます。
ウェブブラウザ表示はこちら↓
色見と画像が無いと、殺風景な感じがしますね。
それに読みにくいです。
デザインって大事なんですね。
LP制作に必要なスキルが多い
上記の様に、ここまで文章だけですが、HTMLを駆使してLPを作ってきました。
ここからさらにLPを作り込んでいくのですが、HTML以外にも様々なスキルを駆使して制作していかなければならないことが分かりました。
文字の色や大きさ、体裁を整えるデザインを、まとめて管理できるスタイルシート。
画像の貼り方、大きさ、場所の指定方法。
動画の貼り付け、引用。
それぞれの著作権について。
LP制作を行うにつれ、様々なスキルが必要になることが分かります。
一朝一夕にはいきませんね。
それだけ技術がいるから稼げる副業というわけなのでしょう。
色々学べるので、スキルアップは目指せそうです。
ここまでのまとめ
制作方法のパターンを覚えるとともに、様々なスキルの応用が必要なことが分かりました。
これに加えて、LP制作の仕事の受け方と進め方、見積の仕方もスキルに入ってくることでしょう。
LP制作の仕事って大変なんですね。
すぐすぐ出来るものではありません。
地道にスキルアップ目指しながら、やっていこうかと思います。
ここまで作ってきたLPの続きが出来上がり次第、続きとして別の記事に書いてみます。
LP制作についての概要と構成、HTMLの初歩的な使い方が学べただけで、今回は良しとしましょう。
LP制作については、分かりやすくまとめてあるサイトもありますので、そちらを参考にしてください。
それでは、また次回。
1件のコメント