ランディングページの作り方を勉強する超おすすめ方法｜プロが徹底解説

など、悩まれる方が多いと思います。結論からお伝えすると、ランディングページは学ぶ事が多いですが、制作だけなら初学者でも作れるようになっていきます。

記事前半では勉強すべきスキルについて、後半では勉強方法５ステップについて詳しく解説していきます。

ぜひ、読んでみてください。

ランディングページは悩みを解決するサイト

ランディングページは「オシャレなデザイン制作」ではない

オシャレなデザインを作りたいで始める方が多いですが、本質は「ランディングページに訪れた方に良い商品をお届けする」ページです。それは、訪れたユーザーは「デザインを求めに来ている」訳ではなく「悩みを解決したい」ために訪れるからです。

グーグル検索で「ゲーム　攻略」と検索した時、一番解決できそうなタイトルを押しますよね？
訪れたら、すぐに解決できそうな「中身」を見に行きます。
その時「デザインを意識します？」と１００人に聞くとおそらく、２人くらいしか返答が無いです。
それだけユーザーは「悩みを解決したい」為に検索をしているのです。

勿論デザインは大事ですが、求めるべき事は「分かりやすく、見やすく、訪れた方に的確な動線が引かれている」事です。

勉強すべき４つのスキル

デザインスキル：デザインについての知識

最低限必須なスキルは「デザインの基礎スキル」です。
デザインの基礎スキル無しで、デザインをするのは、米の炊き方も知らずに炊くのと一緒です！

最低限覚えていてほしい内容として

となります。
まずは上記の基礎的な知識を学びましょう。

ツールスキル：Photoshop

デザインを作れるツールは、Photoshop・Illustrator・XD・Figmaと色々ありますが、Photoshop一つをまずは学びましょう！むしろ一つあれば、十分です。
よくあるパターンで、「Photoshopを学んだし、次はIllustratorを学ぼう」と学びの連鎖をし続ける人です。

あなたが、よく行くコーヒーショップで、「ドリップもあり、サイフォンもあり、フレンチプレスもある。。」なんて店はあるでしょうか？恐らく無いです。

Photoshopを長年したのちに、Photoshopでは出来ない技術を使いたいなら学ぶのありですが、「初学者の段階では１つのツール」で十分です。

設計図スキル：ワイヤーフレーム

ランディングページを作る上で、ワイヤーフレームを作るスキルも必須となります。
設計図を作らずに、そのままデザインするのは「家づくりをする時に設計図も作らずに家を建て始める」のと同じです。
絶対に良い家が立ちません。

ワイヤーフレームで必須となるのは「訪れたユーザーがどの様な行動をするか、読みやすい流れになっているか」が重要となります。

私自身は、デザインは勿論大事ですが、その前段階のワイヤー作りが「商品をお届けする」上で一番大事だと考えております。

実装スキル：コーディングorノーコード

勿論作ったデザインを実装するスキルは必須となります。
HTMLが得意な方は、コーディングでも良いですが、デザイナーは圧倒的に苦手な方が多いので、ノーコードでも問題ありません。私自身もノーコードツール（Elementor）で実装する事も多いです。

また、ランディングページは運用が始まってから構成変更も比較的多い為、すぐに修正できるノーコードは重宝されます。
苦手なら、ノーコードを極めましょう

一緒に勉強すると役立つスキル

届けるスキル：ライティング力

グーグル検索で訪れてきたのに、中身が読みづらいランディングページは離脱します。
お店で例えると「値札がない商品」って買うのためらわないですか？恐らく８割は買わずに２割が店員さんに聞きます。
値札が無い為に８割の顧客になり得たのに逃すのは勿体無いです。

ランディングページも同じで

など、訪れたユーザーが「読みやすい書き方」になっているかを意識するのが大事です。

心理スキル：ペルソナ設計

ホームページを検索する時、「こんな情報欲しい」って状況です。
例えば「今の会社がブラックで転職したい」と考えた時って、いきなり現れた思想ではなく、何ヶ月も前から考えてる事が多いです。

例えば下の様な場合

具体的に出せば出すほど、「どの様なコンテンツを入れたら刺さるか」がわかってきます。
ペルソナを意識して、コンテンツを作るのは非常に大事です。

分析スキル：他社分析

あなたは隣にパン屋がある横で、パン屋さんを開く場合、「隣のパン屋より良い物を作ろう！作っていないパンで対抗しよう」ってなりますよね。

以外と広告作る場合、上記を意識せずに作る人が多いです。競合分析をせずに広告を作るのは「分析もせずにボクシングで相手に勝とうとする」のと同じです。ボクサーも、試合前に何度も何度も相手の動きを見て、研究します！

まずは相手より、

など最低限他社と比較する事で、他社より有利な所がわかり、コンテンツが組みやすいです。

しかし、私たちの仕事は「良い商品を届ける」LP作りであり、商品を開発するわけではないので、他社より「完全に負けているサービスを売れる様にしてほしい！」と相談が来た時は、断る事も大事です。

おすすめ独学勉強方法6ステップ

ステップ１：フォトショップの操作を学ぶ

まずはデザインツールを学びましょう。
デザイン理論も大事ですが、本をひたすら読んでも身につきません。
デザインツールを学ぶ事で、デザイン理論のアウトプットの場が出来上がる為、Photoshopをすぐに学ぶのは大事です。

Photoshopの学び方に関しては、スクール・動画学習・本など色々ありますが、個人的には最初は本がお勧めです。
最新の本を一冊購入し、1週間も見ながら触れば触れるようになるのでおすすめです。

ステップ２：デザイン理論を学ぶ

ツール操作になれたら、次は理論を学びましょう。
ツールを学んでる状態は、ゲームで例えると「操作方法だけは知ってるけど、内容知らない」状態です。

デザインも色々な学びがありますが、選ぶべきポイントは「あまり内容が詰まっていない本」を選ぶのが大事です。
最近では色々と詰まりに詰まっている本が多いですが、初学者がそれを見ると、どこを見ていいかわからない状況になります。

シンプルな本を選び、学ぶのが大事です。

ステップ３：ラフ画（ワイヤーフレーム）を作って見る

まずは白黒ベースで、簡単なラフ画から始めるのがおすすめです。
実際にデザインする時も

と家づくりの様に設計図→骨格→外装→内装の流れで作っていきます。

その為、まずはシンプルに手書きや、白黒ベースで作ってみましょう。

ステップ4：デザインをしてみる

ラフ画やワイヤーが作れる様になったら、小さくデザインを始めるのがおすすめです。

いきなり縦型の長いLPを一気に作り始めのは「ハーフマラソンもチャレンジした事ないのに、いきなりフルマラソンを走る」のと同じです。挫折しない人も居るけど、間違いなく挫折者が多くなります。

まずはバナーやファーストビュー（TOP）のデザインなどから始め、徐々に進めて行きましょう。
この時に一番のポイントが「フィードバックをしてもらえる人が入る」と良いです。

今ではmentaの様なサービスもあるので、ここは将来デザイナーになる為！と決めて投資しましょう！

ステップ５：ノーコードで実装してみよう

いきなりコーディングとデザイン両方しっかり学ぶのは、かなりハードルが高いです。
その為、ノーコードで実装をお勧めします。

実装スキルの章でもお伝えした様に、ランディングページは運用後に修正を発生する事が多い為、簡単に修正できるノーコードを覚えておいて損はありません。
また、今後案件に繋がった時にも、ノーコードの場合のメリットを伝える事で、お客様も納得してノーコード実装に制作方法を持って行く事が可能です。

ステップ６：計測器を設置してみよう

実装まで完了したら、計測器を設置して見て、計測できているか見て見ましょう。
簡単に設置できるグーグルアナリティクスのタグを設置して見て、数字が動くと動いています。
ここまでできると「製作者としての全体的なスキル」は身についています。

もし、訪れた方が「どこを見て、どこで離脱しているか」などを知りたい場合は、ヒートマップを導入して確認して見ると、今後の修正時の勉強になります。

お勧め書籍

ランディングページ・デザインメソッド

本書は、ランディングページの基礎を徹底的に解説しています。

ランディングページとは、コンテンツの制作方法・デザインの制作方法・コーディング・運用の改善の知識まで幅広く学ぶことが出来る貴重な一冊です。また人間心理的な図解も多数ある為、非常にわかりやすい。

ランディングページの基礎を徹底的に学ぶことができるので、これから学びたい方にはおすすめの一冊です。

＼今すぐ購入したい方はこちら／

なるほどデザイン

本書は、デザインの基礎と「デザインの伝え方」を解説しています。

デザイン制作の基本的なフロー、ターゲットに寄って変えるイメージなど、ランディングページを今後していくなら隣に常に置いときたい一冊です。

人間心理から、制作のフローを学びたいならおすすめの一冊です。

＼今すぐ購入したい方はこちら／

デザイン入門教室

本書は、デザインのルールを徹底的に解説しています。

なるほどデザインが見せ方に特化した本なら、デザイン入門教室は「デザインのルール」に特化した一冊となります。
意外と読まないと身につかない、デザインルールを体系的にまとめております。

デザインのルールを体系的に学びたいならおすすめの一冊です。

＼今すぐ購入したい方はこちら／

Photoshopしっかり入門

本書は、Photoshopの基礎の操作方法を解説しています。

私がパン屋時代に初めて購入したPhotoshopの操作本ですが、非常にわかりやすいです。
Photoshopの操作は多岐にわたりますが、こちらの一冊を一通り読んで実行すれば触れる様になります。

1週間でPhotoshopをしっかり触れる様になりたい方におすすめの一冊です。

＼今すぐ購入したい方はこちら／