ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

LP案件はコーディング技術だけでは無理です【必須なスキル、理由を解説】

プログラミング
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
Adobeの期間限定セール開催中

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

HTML,CSSの学習を終えて、クラウドソーシング系で仕事を受注しようと思うけど、とても不安。

他に必要なスキルなどを実務経験のある人から聞きたい。

今回の記事では、プログラミング学習でHTML,CSSの学習をある程度終えた方で、これからクラウドソーシング系のサイトでLP案件を受注する上で「HTML,CSSだけのスキルでは無理な理由と、身につけておきたい必須なスキル」について現役大学生エンジニアの僕が解説します!

「なんだよ。せっかくお金稼ぎの為にHTML,CSSの勉強頑張ったのに、他に必要なスキルがあるとか聞いていない!」

きっとこのように思う方が多いでしょう。

ぶっちゃけ、HTML,CSSだけでLP制作はできます。しかし以下の事があなたにはできますでしょうか?

  • Illustrator、Photoshopで画像のスライス、アセットの書き出し
  • 適切な顧客対応(即レス、メール、電話対応、納期厳守)
  • SEO対策
  • FTPを使用し、本番サーバーにファイルをアップ
  • サイトの軽量化

HTML,CSSの学習だけをしてきた方は「え!?これ何??」と思う事が沢山あるかと思います。

これからご紹介するLP制作に必要なスキルを極める必要はありませんが、最低限扱えるようにしておく必要があります。

こんな方にオススメ
  • HTML,CSSの勉強をある程度終えて、LP案件を受注しようとしている
  • LP案件の受注が不安な方
  • LP制作に必要なスキルが知りたい方
Hiko
Hiko

Web制作の実務経験がある僕がお答えしますね!

スポンサーリンク

LP制作には2パターンある

まずこれからLP制作を受注しようとしている方は、「LP制作には2つのパターン」があることを理解しておかなければなりません。

その2パターンとは、、、

  • Web制作会社からの下請け案件
  • 直案件(飲食店経営者からの依頼など)

この2パターンがあります。

これらの案件を受注する際に必要なスキルが異なってくるので、クラウドソーシングで案件を受注する前にクライアントに聞くか自分で見極める必要があります。

イメージでいうとこんな感じです。

Web制作会社からの下請け案件に関しては、直接クライアントとやり取りすることはなく、Web制作会社があらかじめLPの雰囲気やデザインなどをヒアリングしているので、方向性が固まっています。

それに対し、直案件に関しては、クライアントはLP制作には全くの無知なので、デザイン、方向性、SEOの対策など全て丸投げになってきます。

つまり、クライアントとのコミュニケーションが必要になり、適切な顧客対応やニーズを的確にヒアリングしたりする必要があると言うことです。

Web制作会社からの下請け案件
  • 方向性が固まっている
  • クライアントのやり取り不要
  • 指示書など作ってくれる場合がある
  • デザインができている事が多い
  • 単価が安い
  • クオリティは会社に依存する
直案件
  • クライアントとの対応が必要
  • ニーズや要望をヒアリングする必要がある
  • web制作について無知な事が多い
  • デザイン作成〜サイト公開までする必要がある
  • 方向性が途中でずれる可能性がある
  • 単価は下請けと比べて高い

つまり、受注する案件によって必要なスキルが変わってきます。

基本的にWeb制作会社からの下請け案件に関してはコーディング技術と、Photoshopが使えれば大体はOKです。

しかし反対に直案件の場合ではコーディング技術だけでは無理な事がお分り頂けたかと思います。

Hiko
Hiko

直案件のLP制作に必要なスキルを詳しく解説しますね!

適切な顧客対応

まず始めに、どんな仕事でもそうですが適切な顧客対応ができないと円滑に案件を進めることはできないので、まず始めに基本的なビジネスマナー、スキルを身に付けましょう。

(※社会経験のある方は飛ばし読みしていただいてOKです。)

大学生などで、社会経験がないと言う方は「ビジネス本」を読んでおくと良いでしょう。

メールやチャットで、正しい文章のやりとりができるかどうかで、継続して仕事を貰えるか、貰えないかが大きく変わってきます。

案件を受注したら、相手を尊重する言葉を用いて相手に気持ちよく、チャットでのやり取りをして貰えるように心がけましょう!

学んでおきたいビジネススキル、マナー
  • 適切なメール対応
  • 電話対応(言葉遣い)
  • 納期厳守
  • 即レス(予め業務する時間を伝える)
  • ビジネスツールの使い方(Gmail、エクセル、スプレッドシートなど)
  • 論理的思考能力

これらのスキルがないと、仕事を受ける資格なし!と言っても過言ではないので、必ず身に付けるようにしましょう。

これらに自信がないと言う方は、フリーランス向けのエージェントを利用するといいでしょう。

スポンサーリンク

ニーズをヒアリングする能力

次に、クライアントがどんなLPを作りたいのかニーズをヒアリングする必要があります。

基本的にはスプレッドシートやエクセルなどで、「ヒアリングシート」を予め作っておいて、そこに記入してもらうようにしましょう。

ヒアリングシートはクライアントが想像しているLPをイメージしやすくするための物で、今後の方針にも繋がるので必ず作るようにしましょう。

最低限ヒアリングしておきたい事
  • LPの雰囲気(ポップ、明るめ、暗め、ビジネス系)
  • その商品を売るターゲット像
  • LPのメインカラー
  • コンバージョンはどこになるのか(商品の販売orお問い合わせ)
  • 商品の詳細
  • 使いたい画像素材はあるか
  • アニメーションを導入するか否か
  • テキストもこちらで決めるのか否か

ヒアリングシートはクラウド共有で管理できるGoogleスプレッドシートがオススメです!

【サンプルあり】Web制作ヒアリングシートの作り方【必ず聞くべき30のコト】

ワイヤーフレームの作成

次に、ヒアリングが終わった後にワイヤーフレームと言うものを作成する必要があります。

ワイヤーフレームを簡単に言うと、LPの設計図のことです。

LP制作には人間の購買心理を利用した作り方があるので、「LP 制作作り方」などと検索したりして、予め勉強しておく必要があります。

ネコ君
ネコ君

クライアントのニーズはLPを作ることじゃなくて、いかに商品を売るかにフォーカスしているからそこを考えないとね!

ワイヤーの作り方については割愛しますが、ワイヤーを作る事ができるツールをいくつかご紹介します。

  • Adobe XD (無料)
  • moqups
  • excel
  • Photoshop

主にこれらで作る機会が多いですが、最もオススメなのがAdobeのXDもしくはPhotoshopです!

無料で使用できる容量はありますが、初心者の方でも分りやすいシンプルなデザインになっていて直感的に操作できます。

動画で「売れる」ワイヤーフレームの作り方を学ぼう!

WebデザインのためのPhotoshop実践講座 は「美容院」「クリニック」「Webメディア」などの実際のwebサイトのワイヤーフレームを作りながら学んでいく、学習教材で「お客様の目的」を達成するためにはどのような動線やレイアウトを組めばいいかを学べます!

デザインの作成

次にデザインカンプの作成ですが、これが最もハードルが高いスキルです。

デザインカンプはIllustratorかPhotoshopで作るのですが、デザインを作るにはこれらの操作を学習する必要がありますし、デザイン性はすぐに習得できるものではありません。

よっぽどクリエイティブか、高いデザインのスキルが無いと、クオリティの低いLPになってしまうので、オススメとしてはクラウドソーシング系でデザイナーに外注するのがオススメです。

外注する際は、費用を安く外注できる ランサーズを使用するといいでしょう!

ランサーズ

アニメーションの実装(jQuery)

ただHTML,CSSでコーディングしたLPには動きが全くなく、ユーザビリティが低いサイトと言えます。

例えば、要素をフェードインさせたりパララックス効果を加えるだけで、全く違った印象のLPに変るのでできるようにしておきましょう!

僕のポートフォリオサイトにも取り入れてます

簡単なアニメーションを実装するにはJavaScriptのライブラリの一つであるjQueryを使用します。

JavaScriptってなんだか難しそう!」と言うイメージがありますが、jQueryはとっても簡単で、Progateを1週くらいすればOKです。

あとはネット上に、アニメーションのテンプレートコードが沢山公開されているので、必要な時に参考にして実装するといいでしょう。

【jQuery入門】jQueryとは〜導入まで、初心者向けに使い方を解説

お問い合わせフォームの設置(PHP)

LPの目的をもう一度おさらいすると、「商品を売るため」の物になるので、ただ商品の良さ、詳細が書いてあってもなんの意味もありませんよね!

お問い合わせ、商品の購入(コンバージョン)に繋がってこそLPの存在価値があります。

つまり、お問合わせフォームを設置するスキルを身に付ける必要があると言う事です。

お問合わせフォームを実装するにはPHPと呼ばれるプログラミング言語を習得する必要があります。

  • inputタグのnameの意味
  • 入力確認画面を作る
  • 送信完了画面
  • 自動返信メール

これらの4つはPHPを使って実装できるようにしておきましょう!

初心者の人が、PHPでお問い合わせフォームを作ろうとすると、セキュリティーの低いフォームになるので、テンプレートを使うのがオススメです。

【PHP工房】テンプレートを使用してお問合わせフォームを作る方法の記事で、お問い合わせフォームの作り方を解説しているので、参考にして下さい。

↓PHPの学習が嫌だ!と言う方はGoogleフォームを活用すると簡単に作れます↓

スポンサーリンク

サーバーの契約、ドメインの取得

Web制作会社の下請け案件の場合は、コーディングしたファイルをzipに圧縮して納品で終了ですが、直案件の場合はサイトが公開する所までする必要があります。

当然クライアントは、サーバーとは何か、ドメインとは何か、取得方法など一切知らない事が多いので、代行して契約する必要があります。

これらのサイトをチェックして、契約〜ドメイン追加までの流れを予め把握しておきましょう。

お問合わせフォームがついているサイトに関してはHTTPS化をする必要があるので、そこもクライアントに説明できるようにして、実装できるようにしましょう。

サーバー・ドメインの契約WordPressの導入までの完全マニュアルはこちら!

FTPで本番環境にファイルをアップする

サーバー、ドメインの取得が完了したら、いよいよコーディングしたファイルをサーバー(本番環境)にアップします。

この工程も当然クライアントはできないので、代わりにする必要があります。

↓FileZillaを使ったファイルのアップ方法はこちら↓

バックアップも忘れずに!

なんらかの不祥事でせっかくコーディングしたデータが無くならないように、ファイルをzipにしてクライアントに送信するのと、納品後も1ヶ月程度は自分のPC上に保管しておくようにしましょう!

LP制作における必須スキルまとめ

ネコ君
ネコ君

LP制作はHTML,CSSのコーディングだけじゃ無理なんだね!

いかがでしたでしょうか!

HTML,CSSの学習を頑張ってきた人は、「なんだよ〜!!」と思う方もいるかと思いますが、仕事が失敗してプログラミングの事を嫌いにならないためにも、最低限の準備、スキルは習得してチャレンジするようにしましょう!

最後までご覧いただきありがとうございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

稼げるWebエンジニになる為のオススメの教材

フルスタック・Webエンジニア講座「稼げるエンジニア」なる事に特化した、動画学習コンテンツで、今なら24,000円が1,560円とかなりお得な教材です!
HTML,CSSだけではなく、高単価な案件が豊富なWordPressやJavaScript、PHP、Pythonなどこれ1本でWeb開発における学習が全てできてしまいます!

「起業したり、フリーランスとして仕事をしたい方」「ウェブサイトを作りたい方」「新しい収入源を得たい方」「経済的自由を得たい方」こんな方にオススメです!

※セールは定期的に行われます

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
プログラミング
HikoPro Blog

コメント

タイトルとURLをコピーしました