【大学生が独学で習得】LPを作れるようになる方法

こんにちは！

なのかです！

「LP（エルピー）やHP（ホームページ）を自分で作れるようになりたい」「web制作は興味があるけど、スクールに行くのはちょっと抵抗感がある」「コードが書けるようになってみたい」などと、思ったことがあるのではないでしょうか？

ITやwebに関する社会の関心が高まる中、自分たちは知識を持たずに社会に出ていくことへの不安や、webに対する興味関心が強かったりと、さまざまなな心境だと思います。

そんなあなたに、今回は内容が理解しやすく、かつ、習得までの時間が短い、LP制作ができるようになる方法をご紹介します。

わたしはこれまでPythonやC言語、R言語、HTML、CSS、Javascriptなど、多くのコードを書く言語に触れてきました。

（のちほど言語についても触れますので、🔼で書いてある言語の読み方がや何を書いてあるのかわからなくても、大丈夫なので、安心して読み進めてくださいね😌）

この中でもわかりやすく、成果物としてクオリティ高くできるのがHTML、CSS、Javascriptを使った、LP制作でした。

また、コードを書くような言語のイメージとして、「何が書いてあるかわからない」「コードを見ただけで、頭がこんがらがってしまう」というようなものがあり、大丈夫かと悩まれる人もいるかと思います。

今回はこのような悩みも踏まえて、LPとは何かというところから、LP制作を独学で進める方法まで、丁寧に解説していきますね。

※今回独学の定義は、自分で教材などを調べたり、計画を立てて、勉強することとします。講師やメンターなどがいたり、計画に則って進めていくものではないものとしています。

あなたの不安が少しでも解消されたり、参考になる部分がありましたら、幸いです✨

LPや言語について理解しよう

まずは、今回のテーマであるLPについて解説していきます。あなたがこの記事を読んで進める制作物を知っておいていただきたいです。

LPとは、ランディングページ（Landing Page）の略称です。具体的にいうと、サービスや商品の内容がwebページ1枚にまとめられているサイトのことです。よく見かけるもので言うと、SNSの広告のリンクを踏むと、縦にスクロールしていくページに遷移すると思います。それがLPです。

似たものとして、HPがありますが、複数のページから構成されており、さまざまな情報が集結しているものです。

今回LPを扱う理由としては、①言語の内容を理解しやすい、②習得までの時間が短く、継続できる可能性が高いという2点です。

言語の説明

ここからLPを扱う理由をお伝えするときに使う言語が頻繁に出てくるので、ここで少し解説しますね。

LP制作で使う言語はHTML（エイチティーエムエル）、CSS（シーエスエス）、Javascript（ジャバスクリプト）の3つです。

※HTMLとCSSは、厳密にいうとプログラミング言語ではありません。Javascriptはプログラミング言語なので、プログラミングに触ってみたいという人もLPをつくることをおすすめします。

他にも使える言語はありますが、この3つで作ること自体はできるので、今回はこの3つに絞って解説します。

HTML

HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）のことで、WEBページを作成するためのマークアップ言語です。文章の構成などをコンピュータに理解してもらうために書きます。

CSS

CSSとは、Cascading Style Sheets（カスケーディングスタイルシート）のことで、文章や背景などを装飾するためのスタイルシート言語です。

Javascript

Javascriptとは、Webページ上で動きや機能をつけるためのプログラミング言語です。

①言語の内容を理解しやすい

1つ目は、内容を理解しやすいという点です。

LP制作で基本的に扱う言語が、上記で書いたHTML、CSS、Javascriptの3つです。

わたしの体感では、プログラミングに抵抗がある人や不安感を持っている理由は、「プログラミング言語で書いてあるコードがよくわからないから自分にはできないと思う」からだと思っています。

しかし、上記の3つ（特にHTMLとCSS）は理解しやすいので、安心して読み進めて欲しいです。

わたしがすべてに共通している理解しやすい観点が、以下の3つです。

1. 覚えることが少ない
2. 体系的にわかりやすい構造になっている
3. 他の言語と混同する可能性が低い

1つ目の覚えることが少ないということに関しては、最低限のものをつくるために必要な文法の数が少ないということです。

他の言語だと、ルールとなる文法に細かい指定があったり、覚えるべき文法が多い印象です。しかし、HTMLやCSSなどは、細かい指定が同じものが多多かったり、文法も少ないです。

コードをこれまで書いたことがなかったり、不安感がある人は、なるべく覚えることが少なくても始めることができ、挫折しにくいものが良いと思うので、HTMLやCSSははじめに勉強する言語としては最適です。

2つ目の体系的にわかりやすい構造になっているということに関しては、コードの配列が視覚的にわかりやすくなっているということです。

特にHTMLに関しては、コードで打ち込んだ順番通りにLP上でも表示されるため、上から表示したい順番に書けばよいので、順番を機にする必要もありません。

ここまでがよくわからないという人もいると思いますが、詳しくは下記で説明するので、ここでわかっていなくても大丈夫です🙆‍♀️

3つ目の他の言語と混同する可能性が低いということに関しては、他の言語の文法を転用したり、文法を混ぜて記述するというエラーが起こる原因の1つを排除できるということです。

例えば、PythonやC言語にはfor文という文法があるのですが、以下は同じ動作の実行ですが、書き方が異なります。

• Python

for i in range(6):
print(i)

• C

int i;
for (i = 1; i <= 6; i = i + 1)
  printf(%d\n",i);

このように異なった文法を使用すると、エラーが出て、実行できなくなります。エラーが続くと、挫折したり、やる気が失せてしまう人もいます。

しかし、HTMLやCSSでは、違う言語の文法を使ってしまうといったミスは起きにくいので、指定した内容が出力されないということは起きにくいでしょう。

②習得までの時間が短く、継続できる可能性が高い

言語の内容が理解できたら、実践で習得していきます。実践のスパンが短いため、習得できるまでの時間も短く済みます。

PythonやC言語などのプログラミング言語で実装するものは、アプリや自動化ツールなどです。そういったものは実行するのに必要なコードの量や分岐が多いため、その1つの実践の中で得られる量は多いですが、1つを作り終えるまでにも膨大な時間がかかります。

その中でプログラミングに対する抵抗がなかったり、時間も忘れられるぐらいやり続けられるという人は問題ありませんが、なかなかそういう人ばかりではありません。

特にこの記事を読んでいただいているあなたのように不安感を持っている人は、エラーもたくさん出て、終わりが遠いものは継続できる可能性が低くなります。そのため、1つ作り終えるまでにそれほど時間がかからず、完成した達成感を得られるものから始めると良いでしょう。

LP制作の勉強について

それでは、LPについてや言語の基礎知識を知ったところで、ここから独学でLPを制作する方法について解説します！

使った教材

わたしが、LP制作ができるまでに使った教材は以下の2つです。

1. Udemyの講座
2. 書籍

上記の教材を使って、進めた勉強方法は以下の通りです。

勉強方法

わたしがおこなった勉強をもとにおすすめするのは以下の通りです。

※書籍のみが良いという人は、STEP1を飛ばして、STEP2に時間をかける。

Udemyとは？

Udemyとは、ビジネスやIT関連のスキルを学ぶための動画教材のプラットフォームです。

自分の持つスキルや知識を教えたい人が動画を作成しアップロード、スキルや知識を得たい人が動画を見て学ぶというものです。

Udemyの講座は有料ですが、高頻度でおこなわれるセールのときは講座によっては数千円で購入できるものもあるので、リーズナブルな価格で実施可能です。

ここでわたしが勉強したときに壁に当たったところについて解説します。

1. STEP3：デザインの勉強
2. STEP4：自分で作って、実践

①デザインの勉強を中途半端なまま進めてしまった

コードを書くということに憧れて、やってみたいと思い、勉強をし始めました。

コードを書くことしか考えていなかったので、当初はデザインの勉強はほとんどしていませんでした。

しかし、コードを書く過程は描いたデザインをwebで表示できるようにするための方法にすぎません。コードを書くためにはデザインが必要になります。

そのデザインの勉強をおろそかにしてしまっては、本末転倒です。

デザインの勉強は進めましょう。

わたしが当時使ったデザインの本は、デザイン入門教室という本です。この本は、webデザイン用の本ではないのですが、文字のフォントや配列の仕方、余白の作り方など、デザインの基本を学ぶことができる1冊です。

デザインの勉強とは、どういうこと？デザインはセンスで決まるのでは？とはてなが頭に浮かんだ人もいると思います。

わたしも最初はデザインは芸術的センスがある人ができるもの、絵がうまい人ができるものだと思い込んでいました。

しかし、Webデザインに使う「デザイン」は、センスではありません。余白の取り方や配置、配色を学ぶことで、いわゆる「センスがいい」デザインをつくることが可能です。

②見切り発車で作り始めてしまった

実践で作ってみようと思ったときは、ワクワク感で、はやく作りたいという気持ちが勝っていました。しかし、何も決めていなかったので、最初の基本的な部分と文章を書くだけで、まったく進みませんでした。その結果、時間だけがすぎていきました。

それでは時間がもったいないので、実践で作る際には、下記のことを決めてから始めましょう。

• どんなサービスやイベント内容を記載するのか
• サイトのデザインはどのようにするのか

勉強する中で知っておくべきこと

勉強する中で以下の5つは必ず習得しましょう。

1. サイト上の文字の出力のさせ方（HTML）
2. 色の書き方（CSS）
3. 位置の指定の仕方（CSS）
4. ボタンの作り方（CSS）
5. レスポンシブデザインの仕方（CSS）

LP制作に関するよくある質問

独学のメリットとデメリットは？

独学のメリットは、「お金があまりかからない」、「自分で調べる力が身につく」の2点です。

独学で行う場合、教材の部分は書籍や安価な動画教材で可能なので、料金はそれほどかかりません。わたしも教材にかかったお金は、1万円もかかっていません。今回わたしが使っていたUdemyは、1講座数千円でした。スクールなどに通うと、十万円弱はかかるそうです。

また、LP制作の勉強は、基本的に最初はわからないことだらけです。たとえば、こんなボタンをつくりたいと思っても、つくり方がわからないというようなことです。そういったときに、書籍やWebサイトで調べますが、ほしい情報を得るためには正しく調べることが重要になります。正しく調べなければ、膨大な情報があふれる現代で自分がほしい情報を適切に得ることができません。

たとえば、グラデーションの色でボタンを作りたいと思ったときに「ボタン グラデーション css 関数」と調べると、グラデーションに設定ができる関数についての記事が出てきます。自分が知りたいと思うことを適切に得られる調べ方を身につけることができます。

独学のデメリットは、「モチベーションが続かない」、「挫折しやすい」の2点です。

独学だと、勉強方法や学習ステップが明確であるわけではないため、効率の良さや最短での学習は難しいです。そのため、時間をある程度かける必要はありますが、モチベーションが続かなかったり、成果物が完成せず、挫折する人も多いです。

スクールは行くべき？

これは人によります。

独学でやる自信がない人や質問ができる環境などがほしい人は、スクールの方が合っているかもしれません。

わたしの場合は、「自分のペースですすめたかった」「スクールにみっちりと通うほど時間がなかった」という理由で、一旦独学ではじめてみて、難しければスクールを考えようかと思っていました。そのまま独学で進められそうだったので、自分で進めていました。

自分で調べて考えるのが楽しかったということと、疑問は書籍などで十分解消できたという点で、独学で進められましたが、疑問がずっと残るという人は質問できる環境があるものを選ぶと良いでしょう。

まとめ

最後まで読んでいただきまして、ありがとうございました！

興味がある人は、一度書籍を読んでみたり、Udemyの講座を見てみてくださいね。

LP制作は、コードを書くことができるようになりますし、実際にWebサイトがどのように作られているのかを理解することができます。ITやWebの知識をつけておくのは、意義がある経験になるかと思います。

大学生の間に挑戦してみるのは良いかと思います。

この記事が、あなたがLP制作をしてみたいと思ったときに、少しでも役に立てれば幸いです。

nanoka

女子大学生

Contact

難関国立大学に通う女子大生。

高校時代は勉強に多くの時間を割き、大学に現役合格。

大学時代はイベント運営や長期インターンなど様々なことに取り組み、現在は資格勉強に奮闘中。

これまでの経験から大学生ならではの視点で発信していきます！