こんにちは、まいです。
プログラミング学習10ヶ月目に、LPコーディング案件を受注しました。
この記事では、私の経験をもとに、これからLPコーディング案件を受注したい初心者に向けて、手順と必要なスキルを紹介します。
勉強しっかりしたし、何個も模写したから大丈夫でしょ！
実は、コーディングスキルだけでは、せっかく案件を受注しても、納品までに苦労することになります。
以下の中で一つでも怪しいものがあれば、解決するのに時間がかかり、大きなロスになりかねません。
- デザインデータからのコーディング
- テストサーバー環境
- サイトの軽量化
この記事を読み終えると、今より安心して案件に向かうことが出来ます。
今の自分のスキルと照らし合わせながら、確認してみてくださいね！
LPサイトとLPコーディングとは
LP（ランディングページ）とは、アピールしたい商品やお問い合わせなどを紹介した、1枚の縦長の広告ページのことです。
ランディングページの特徴は、主に以下の4つ。
- 縦長のレイアウト
- 他のページのリンクが少ない
- 画像がメイン
LPコーディングでやることは、上記のようなデザインがPhotoshopやxdなどで作られているので、デザインデータを元にコーディングしていきます。
LPコーディング案件の手順
LPコーディング案件の受注から納品までの手順を解説します。
LPコーディングに必要な言語は、以下の3つです。
- HTML
- CSS
- JavaScript
- PHP
案件によってはHTML 、CSSのみの可能性もあります。
PHPはお問い合わせフォームで使用します。
1.デザインデータをもらう
まず、クライアントからLPデザインのデザインデータをもらいます。
どんな形式のデザインデータかは、クライアントによって違います。
よくPhotoshopが多いと聞きますが、私の初案件は確率が低いと言われるIllustratorでした…。
クライアントから「ここはこうして欲しい」など、前もって指示がありますが、デザインデータに直接箇所ごとの指示が書いてあったりもします。
2.コーディング
デザインデータをもとに、コーディングです。
コーディングする際は、クラス名に気をつけましょう。
クラス名悩みすぎて、いつも日が暮れるんだよなぁ…。
私はこちらによくお世話になってます。
分かりやすく分類されているので、とても参考になります。
3.納品
双方確認して問題なければ、納品です。
納品方法は主に以下の2種類。
- コーディングしたファイルをZIPに圧縮して納品
- こちらでサーバーにアップする
クライアントによって納品方法は変わります。
案件を受注する前に確認しておきましょう。
LPコーディング案件に必要なスキル
LPコーディング案件の手順を見ると、特に難しいことはしてないように思えます。
実際、コーディングスキルがあれば、LPは作れます。
しかし、以下のスキルがあるとないでは、クライアントからの反応が変わってきます。
- デザインデータから書き出し
- sass
- レスポンシブ
- お問い合わせフォーム
- テストサーバー
- サイトの軽量化
- 質問できる環境
- 丁寧な対応
こんなにたくさんあるの！？でも、コーティングができれば大丈夫なんだよね？
こう思う人もいるでしょう。
しかし、私は上記の何個かを疎かにしていたこともあり、クライアントからの要望解決にかなり時間を使いました。
上記のスキル全てを完璧にする必要はありませんが、使える程度にはしておきましょう。
デザインデータから書き出し
案件受注前に、デザインデータからのコーディングができるようになっておきましょう。
案件を受注して、初めてデザインデータからのコーディングをするのでは、使い方を一から調べることになり、時間のロスになります。
主にデザインデータは、以下のものがあります。
- Photoshop
- XD
- Illustrator
とりあえず、Photoshopデータからのコーティングだけはやっておきましょう。
Photoshopのすべての機能を使いこなす必要はありませんが、以下のようなコーディングする際に必要なデータの取得方法は慣れておいた方がいいです。
- 画像の書き出し
- テキストデータ
- 要素の長さ
Photoshopからのコーディングが出来れば、XDやIllustratorのコーディングもほぼ同じ要領で出来ます。
コーディングに必要なPhotoshopの使い方は、みんな大好きはにわさんのブログで紹介されています。
Zeplinというサービスを利用すれば、コーディング作業の効率化も可能です。
是非インストールしておきましょう。
でも、練習用デザインデータなんてどうやって準備したらいいの？
ふるさんのブログでPhotoshopの無料デザインデータのサイトが紹介されています。
合わせてコーディング練習で学べることも解説されています。
こちらはXDですが、よく見るデザインなので実践的なことを学べます。
無料なうえに、解説が神です。
デザインデータからの書き出し時に必要なこと
画像を書き出し時に必要なことがあります。
- 画質
- 画像の軽量化
画質はクライアントによって変わるかもしれませんが、画像の軽量化は必ず必要なことです。
画質
LPは画像中心のサイト。
画質が悪ければ、ユーザーの離脱に繋がります。
画質を上げるには、解明度の設定を変えて書き出す必要があります。
コーディング完成後に画質の指摘をされたら、再書き出しが必要になってきます。
そうなると、指摘画像をすべて差し替えることになりかねません。
- 通常画質・高画質の2種類の画像をクライアント確認してもらう
- どちらが良いか選択してもらい、コーディングに入る
作業に入る前にクライアントに確認しておくことで、その後の作業がスムーズに進みます。
ここで気をつけなければならないのが、画質が上がるに比例して、データが重くなり、ページの表示速度が遅くなることです。
それも考慮した上で、画質と速度、どちらを優先するかクライアントと相談しましょう。
画像の軽量化
画像は必ず軽量化しましょう。
画像データが重いとページ表示が遅くなり、ユーザーの離脱に繋がります。
- 画質を落とす
- 画像を圧縮する
LPで画質を落とすことはあまりないと思うので、圧縮一択になると思います。
画像を圧縮する場合は、こちらのサイトが画質も落とさずに圧縮できると評判です。
こういった確認作業をすることで、後の変更に対応しやすくなります。
是非覚えておきましょう。
sass
「sass」とは、CSSを拡張して、書きやすく、見やすくしたスタイルシートのことです。
sassを使うメリットは、以下のようなものがあります。
- 関数が使用できる
- 入れ子構造で記述できる
- 変数で値を使いまわせる
sassを使用することで、CSSの記述量を減らすことができます。
こちらのサイトでsassの便利さ、書き方が紹介されています。
sassに慣れてきたら、sassでテンプレを作っておきましょう。
案件のたびに、一からコードを書くのは時間のロスです。
先ほどの、はにわまんさんのsass記事の一番下にテンプレが用意されているので、参考に作っておくのもいいですね！
レスポンシブ
今の時代、必ず必要になるレスポンシブ対応。
レスポンシブなら、模写でしっかりやったから大丈夫！
スマホだけでも様々なサイズのデバイスがありますが、どのサイズのデバイスにも対応したコーディングができますか？
サイズ別のコーディング！？うぇ！？はぁ！？
こんな感じの人は、sassの「mixin」を使用して、メディアクエリを楽にコーディングしましょう。
mixinについては、はにわさんのsassの記事に、使い方が紹介されています。
はにわさん最強過ぎですね。
より細かく使いこなしたいならこちらも参考になります。
お問い合わせフォーム
LPコーディングに必ず必要となるのが、お問い合わせフォームです。
見た目だけなら作ったことあるけど、機能面はやってないなぁ。
そういった人にオススメなのがGoogleフォーム。
Googleフォームは、PHPを使用せず、お問い合わせフォームを作成することができます。
しかし、クライアントが必ずしもGoogleフォームを使いたいとは限りません。
そういった場合、HikoProさんのブログでフォーム関係を丁寧に解説されているので参考にしてみて下さい。
Googleアンケートの見た目をカスタマイズすると、Googleの仕様が変わり、問い合わせが来なくなったりなどのトラブルが起きる可能性が高くなることがあるようです。
その辺りに気をつけて活用しましょう。
テストサーバー
コーディングが完成したら、テストサーバーで確認しましょう。
デベロッパーツールで確認したから大丈夫
実は、デベロッパーツールでは正常に表示されていても、テストサーバー上でデザイン崩れしていることがあります。
テストサーバーを用意してない場合は、案件前に必ず用意しておきましょう。
- デザイン崩れしていないか
- 要素の長さやテイストサイズなどおかしくないか
- リンクタグがある場合は、リンク先は合っているか
結構見落としている部分があったりするので、念入りにチェックします。
この時、スマホ画面は実機でも確認しましょう。
PCでは問題ないように見えても、テキストが小さすぎなど、実機でしか気付かないこともあります。
また、テストサーバーは自分とクライアントの双方確認できるようにしておくと、なお良しです。
- クライアントがすぐ確認できる
- クライアントが自分でテストサーバーに上げる手間が省ける
スムーズに取引するためにも、ここは抑えておきましょう。
サイトの軽量化
デザインデータ通りにコーティングすることも大事ですが、サイトの軽量化も大事です。
LPは画像が多いサイトなので、ページが重くなりやすいうえに、表示速度も落ちやすいです。
サイトの重さってどうやって調べたらいいの？
デベロッパーツールで調べる方法もありますが、PageSpeed Insightsが分かりやすくておすすめです。
テストサーバーのurlを入力することで、以下を提示してくれます。
- サイトを点数評価
- 点数を上げるために改善すべきところ
コーディングに夢中で見落としてしまいやすい部分なので、ぜひチェックしておきましょう。
LPコーディング案件に必要なスキル以外の大事なこと
コーディング以外のスキルがあることで、スムーズに案件を進められます。
しかし、スキル以外にも大事なことがあります。
ここを押さえてるかどうかで、今後の自分自身の助けにも繋がっていきます。
相談できる環境
ググりまくっても分からない時、相談できる人はいますか？
相談できる人がいるかどうかで、案件を受注する時の安心感が全く違います。
相談相手を探す方法は、主に以下の4つ。
- プログラミング質問サイト
- SNS
- コミュニティ
- MENTA
プログラミングの質問サイト
一番質問しやすいのは、質問サイトではないでしょうか。
よく見るのは「teratail」で、回答率88％と回答率も高いです。
相手と面識がなくても質問できるので、私のような人見知りでも活用しやすい！
膨大な数の回答があるので、同じ悩みの回答を見つけられるかもしれません。
ただ、質問の仕方によっては、厳しめな意見を言われるようなので、書き込む時は分かりやすい文章で質問しましょう
SNS
交流が少なかったり、人見知りには少しハードルが高いかもしれませんが、Twitterには優しく回答してくださる方がたくさんいます。
分からないところをツイートするだけで、賢者のような人が回答してくれたりします。
特定の人に質問する際は、質問したい分野に詳しそうな人に相談するといいかもしれません。
コミュニティ
エンジニア向けコミュニティに参加して、コミュニティ内で質問する方法です。
多くのコミュニティがあるので、自分が気になるものを選んでOKです。
どこのコミュニティがいいか分からない（泣）
そんな人は、たにぐちまことさんのSlackコミュニティがおすすめです。
高レベルのエンジニアさんが多数在籍されており、見てるだけで勉強になります。
こちらのツイートから、申請して参加できます。
MENTA
MENTAとは、「教えたい人」と「学びたい人」をオンラインでマッチングするサービスです。
長期的な契約もありますが、単発で分からないところを教えてくれるサービスを出している人もいます。
私は、MENTAを初学者の頃から活用していたので、どうしても分からないところはメンターさんに相談しました。
MENTAを半年以上利用した感想を書いています。
全ての相談に共通することですが、
- まず、自分で調べる
- どうしても分からない場合は質問
という流れがいいと思います。
質問する時は、
- 何を
- どこまで調べて
- ここまで分かったが
- この部分が分からない
という風に相談すると、相手も回答しやすいですよ。
丁寧な対応
スキルで他者と差がない場合は、人柄と対応力が重要になってきます。
丁寧な対応は、クラウドソーシングの案件受注だけでなく、継続案件にも繋がります。
対応の仕方は、原さんのブログで勉強しましょう。
原さんの営業文を参考にクライアントに返答したところ、数人の候補者の中から実績ゼロの私を選んでいただきました。
選んでいただいた理由は、私の返答が一番丁寧だったからだそうです。
案件対応中は、私のスキル不足でかなりご迷惑をかけてしまったにも関わらず、最後は「またお願いしたい」という言葉もいただけました。
案件に向かう時はスキルに目が行きがちですが、対応次第で案件受注の可能性は広がります。
LPコーディング案件までに準備することでスムーズに納品可能
ここまで読んだ人の中には、
せっかく勉強してきたのに、まだ勉強が必要なのか、、、。
と思う人もいるかもしれません。
確かに、コーディングスキルのみでも、LPコーディング案件は受注可能です
しかし、上記スキルを身につけることで、今よりスムーズに納品が可能です。
必要なスキル全てを、100％身につける身につける必要はありません。
最低限の準備だけして、後は、案件に応じて学んでいきましょう！
