初心者でも簡単に理解できる！LP（ランディングページ）コーディングの方法
今コロナの感染拡大防止に伴い、休業などになってしまい月の収入など減ってしまう。。
という方も多いかと思います。
そんな方でも「ランサーズ」や「クラウドワークス」などで、LPのデザインやLPのコーディングなどの案件を請け負うことができれば収入面も安定させることもできると思います。
そのためにも今回は初心者でも簡単に理解ができるランディングページのコーディングの方法をご紹介していきたいと思います。
初心者でも簡単に理解できる！LP（ランディングページ）コーディングの方法をご紹介！
今回は、Webデザイナー、コーダー、マークアップエンジニア向けに「LPコーディング」について分かりやすく説明させていただきます。
デザイン通りのコーディングは難しい・・・
自分のコーディングが正しいのか自信が無い・・・
などコーディングに不安を抱えている方は多いと思います。
そんな方に僕が実践してきたHTML5/CSS3のコーディング方法を共有し、少しでもお役にたてればと思います。
まずは重要なポイントLP模写コーディングについてご説明させていただきます。
LP模写コーディングとは？
ランディングページ(LP)を制作するうえで、手を抜きやすいコーディング作業。
実は、成功するLPを制作するためには、とても重要な工程です。
なぜ、LPの模写がHTML／CSSの勉強に役立つのか、Progateやドットインストールの次におすすめなのか、という点について実際にいくつかのLPを模写してみたところ、この学習方法には以下の3つのメリットがあると感じました。
メリット① 1ページ全体を俯瞰する力が身に付く
LPを1ページまるっとコーディングすることで、1ページとはいえ、全体を俯瞰して作る流れが理解できるようになります。
Progateやドットインストールを一通り通ってきた方なら、ある程度ディテールを実現する力はすでに備わっています。
ですが、「簡単なサイトを上から下まで一通り全部コーディングする」という経験には乏しいはずです。
実際に実務として考えなくてはならないポイントを上げます。
- divを使うべきか、sectionを使うべきか、articleを使うべきか？
- どこからどこまでをヘッダ／フッタとするのか？
- classやidの命名規則はどうするか？
など、実際に一通り作ってみると、「あれ、ここどうするんだっけ…？」とつまづくポイントが必ず出てきます。
ですがこれは「学習」なので、分からないことがある＝未熟な部分ということなので、どんどん調べて、実行して、少しずつ技術力を向上していけばいいのです。
こうした経験を得るのに、LPの模写はとても重要で役に立ちます。
メリット② 教材にはない実装方法がインプットできる
Progateやドットインストールで使う実装方法がすべてではありません。
例えば、もっともわかりやすい例がCSSのプロパティでしょう。
Progateで出てくるプロパティは、ある程度頻出のものはカバーできているものの、当然「存在するプロパティすべて」ではありません。
実際に、模写をしてみると当然「これ、どうやって実装するんだっけ？」と疑問点が出てきますが、その答えはProgateのような学習サイトに登場していないプロパティであることも多いです。
この事実を実感し、実際にググって自分なりの答えを見つけ出す、という流れを繰り返しおこなうことが、今後オリジナルのサイトを作るうえでとても役に立ちます。
Google先生に聞けば様々な方のコーディング手法やアイデアなどインプットし、自分で試行錯誤しながらアウトプットししていけば必ず自分自身のスキルの向上へとつながります。
スクールで「プログラミングやコーディングの知識を」しっかりと身につけたい！
そんな方はこちらのスクールもおすすめです！
2000年にはWeb業界における世界最高位の団体「W3C」メンバーに日本の民間教育機関として初めて加盟し、2020年度は情報通信技術賞（総務大臣表彰）を受賞するなど、最新技術の普及活動にも力を入れているスクールです。
まずは無料カウンセリングを受けて将来的にどのような技術を学べば良いか相談してみてもよいかと思います！
メリット③ コーディングのパターンを蓄積できる
いくつかのLPを模写していくと、パターンが何種類かに限られてきます。
そのパターンを最初に選択するのがとても重要になってきます。
LPは、デザインする段階でコーディングに特化したデザインやレイアウトで制作することがとても多いです。
なぜならSEOに向けたマークアップがとても重要になっているからです。
おそれく熟練のマークアップエンジニア、コーダーであれば瞬時に作り方が想像できるようになるんだと思います。
要は、自分のなかにレイアウトの引き出しをインプットしていくということです。
引き出しを多数用意しておくことで、作業時間がどんどん短縮され、瞬時にどのようにマークアップすれば良いかが、短い時間でイメージできるようになります。
LP（ランディングページ）模写の具体的な方法
それでは、僕が実際に行ったLP模写の具体的な方法をご紹介します。
あくまで僕にベストマッチだった方法ですので、細かい部分は各自チューニングしてみてください。
模写コーディングはピクセルパーフェクトでなくても大丈夫
値の正確さよりは、デザインを見ただけで、HTML、CSS、javaScriptで実現でできるかどうかを試すトレーニングだと捉えています。
ですので、数ピクセルずれているとかは特に問題ではありません。
ブレークポイントはPC/TABLET/MOBILEに合わせたレイアウトを出し分けできれば問題ないです。
模写するサイトがレスポンシブデザインの場合は、細かく見ていくと時間がかかりすぎます。
個人的にはタブレット時の表現は気にしていません。
自分の中でブレイクポイントを決めて、ウインドウ幅を変えたときは滑らかに状態が変わりスマホ表示ができればOK。
スマホ時のデザインに初めは注意しながら「モバイルファースト」でのデザインやレイアウトの調整を心がけていきましょう。
世界のアクセス状況から見ても「60％〜70％はスマートフォンのユーザー」だからです。
模写コーディングにおすすめのWEBサイト
モバイルファーストでコーディングの癖をつけておきましょう。
スマホサイト向けのデザイン・レイアウトを意識することもとても大事です。
要素に優先度を付け、どこを一番伝えたいかを考えながら、1カラムにするか、2カラムにするかなどモバイル画面を想像しながらコーディングしています。
模写したいLPを選んで決める
まずは、模写したいLPを選ぶところからスタートします。
自分が見てきたなかで印象的だったLPをチョイスしてもいいですし、以下のようなWEBページのデザイン、レイアウトのまとめサイトを参考にしても良いかと思います。
日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
基本的には自分の好きなページでいいと思いますが、「今流行りのデザイン」・「そのページが好きであること」・「難易度が適切であること」を基準に考えて選びましょう。
模写コーディングをしたいWEBページでGoogleChromeの検証機能（デベロッパーツール）を使用し、HTMLやCSSを参考にして自分なりにカスタマイズすると、サクサク組めると思います。
1日1ページで行えば、3ヶ月もすればプレビューぜずに頭の中にレイアウトをイメージするだけでコーディングが可能になると思います！
爆速！コーディングが上達する6つのコツをご紹介！
コーディングの知識が身につけば、WordPressなどを使いサイトのカスタマイズなどある程度できるようになります。
コーディング練習後の重要なチェックポイント
コーディングのスキルアップさせるためには反復練習がとても重要です。まずはサイト全体の構造を理解することを意識しながら練習していきましょう。
一度完成したら、模写したサイトのコードと自分のコードを比較して、chromeブラウザのデベロッパーツールを使用して、HTMLやCSSを比較して違うところを探してみましょう。
なぜこれを使っているのかなどを考えることがほんとに大事だと思います！なれてくれば、技術的にも向上していくと思います^ ^
まとめ
ここまで読んでいただきありがとうございます。
自分に足りない部分を知るためにも、模写はとても大事な工程です。
LPを0から作り上げるという体験をすると、自分に足りない部分がどんどん明確化できます。
この確認とギャップを埋めるのに、LP模写はとても優秀な学習方法だと思います。
僕も画像のみのペラページしか制作できませんでしたが、今にはRWD（レスポンシブウェブデザイン）でイメージのみでコーディングすることも可能になりました。
とにかく自分自身でサイトを作ってみて、コーディングの数をこなすことがとても重要だと思います。