未経験から50時間でLP制作をして分かったLPの作り方

はじめに

先日彼女の誕生日でした。

プレゼントの１つにLP（ランディングページ）を作ってプレゼントをしました。

キモオタですね。

この記事では、大きく以下の2つの事について書いています。

・未経験から50時間でLPを作って分かったLPの作り方

・メンタル的な部分で学んだ事 

成果物

制作物

https://mmkbirthday.herokuapp.com/

臭いワードが多くありますので、ご注意ください。

※最弱サーバーを使用している為、開くまで時間がかかります。

 

キャプチャ

パソコンビュー 

 

スマホビュー

 

OGP(これはデザイナーの方が作ってくれました。)

めっちゃ良いですよね。。。

こちらを制作してくれたデザイナーが仕事を探しているようなので、依頼したい方は以下からどうぞ！LPも作れるそうです。

http://52.198.43.9/profiles

製作時間

約50時間

 

開発環境

・Rails

・Sassで書きました。

・レスポンシブはもちろんbootstrap

・Herokuサーバー

 

私のスペック

・Rails歴半年（実質触っていた期間）

・Unity歴4ヶ月

・HTML/CSS少々

・TECH::CAMP(株式会社div)　VR事業責任者（勉強中）

ご覧通り、エンジニアと非エンジニアの狭間です。

 

未経験から50時間でLP制作をして分かったLPの作り方

未経験からでもやり方さえ抑えていれば誰でもLPが作れるなという事が分かりました。

今回はせっかくなので自分が学んだLP制作の手順をお伝えします。

 

まず、自分の場合の時間配分は大体以下のとおりです。

----------------------

情報設計：1時間

参考にするLPを決める：2時間

デザイン：15時間

コーディング：22時間

 ----------------------

 

情報設計：1時間

LPを作る上で最も重要なのが、この情報設計です。

これは仕事で一度やった事があった（出来無さ過ぎてボコボコにされた）ので、なんとなく分かりました。

 

情報設計は、まず誰に向けたLPなのかというペルソナを決めます。

そして、そのペルソナに対してどういう訴求をすればコンバージョン（制約）するかを考えます。

LPの情報設計は以下を抑えていれば良いでしょう。

（必ずしも全て必要というわけではありません。）

1. キャッチコピー
2. 権威付け
3. 共感部
4. ベネフィット
5. 問題の提示
6. 商品の提示
7. お客の声
8. 差別化
9. 商品購入の流れ
10. FAQ

 

実際に自分が作成した情報設計

â– MOMOKO BIRTHDAY DATE
produced by YUYA

【お出かけする】

 

■キャッチコピー
人生を変える1日

 

■MOMOKO BIRTHDAY DATE とは
MOMOKO生誕とこれまでの感謝を伝えるべく、YUYAがMOMOKOのためにプロデュースするデートです。

 

■YUYAの特徴
◎優しい
MOMOKOのワガママは全て受け入れ、優しくサポートをします。

◎紳士
リッツカールトンも認めるホスピタリティでMOMOKOをエスコートします。

◎MOMOKOが大好き
世界で一番、MOMOKOを愛しています。

 

■こんな方にオススメ
◎仕事の疲れを癒やされたい方

◎普段行けない特別な場所へ行きたい方

◎YUYAと1秒でも長く一緒に過ごしたい方

 

â– CONTENTS
- LUNCH -
◎手作りのお弁当
YUYAシェフがあなたの為だけの、お弁当を作ります

- DATE -
◎初めてのデートスポット
まだ一度も一緒に行った事がない場所へ行きましょう

- DINNER -
â—ŽSECRET
秘密の場所で二人の時間を楽しみましょう

■YUYAと一緒に最高の一日を過ごしませんか？
【お出かけする】

 

â– FAQ
◎どなたでも参加可能ですか？
いいえ、MOMOKOのみとなっております。

◎そんなにMOMOKOが好きなんですか？
はい。この愛は誰にも止められません。

◎MOMOKOって誰ですか？
世界で一番可愛い且つ美しさも兼ね備えた女性です。

結構キモいし、完成度は低いですがありますが、まずベースを決めておくことが大切です。

作りながら、よりよいものにしていきましょう。

自分の場合ほとんど変わりました。

 

参考にするLPを決める：2時間

デザインにおいて独創は良くありません。

デザインとはあるルールに基いて誰が見ても見やすい物を作るという事です。

特に自分のような初心者なんてデザインの基本すら分かっていないわけですから、先人から学ぶことがベストです。

これは丸々パクるとう意味ではありません。

あくまで、いくつかのLPを参考にして組み合わせるという意味です。

 

私の場合はピンタレストのLPを死ぬ程見ました。

2時間と聞いて短く感じるかもしれませんけれど、かなりの量のLPを見ました。

 

参考にしたサイト

最終的には主に以下のサイトを参考にしました。

※弊社LP制作マシーンの取締役の作品多め

lady-holiday.tech-camp.in

 

tech-camp.in

 

designgirls.girly.jp

 

minaport.jp

 

参考になりそうなLPをピンしてまとめているので、もしよかったら参考にしてみてください。

jp.pinterest.com

 

デザイン：15時間

実は今回制作前に社内のデザイナーにヒアリングをしました。

その時に「まずデザイン作りきってからコーディングに入ったほうが良いです。」とアドバイスを頂いた為、まずはデザインだけ完璧に作る事にしました。

ちなみにこのアドバイス通りに進めて本当に良かったです。

途中でデザインを変えてしまうと、コーディング時にコードがめちゃくちゃになって破滅への道を歩む事になります。

 

デザインに使用したツール

デザインにはSketchというツールを使いました。

Sketchはアプリのデザイン等をする時に使われるツールです。

使い方も全く分からなかったですけれど、優秀なデザイナーの方々が使われていたので購入をしました。

ちなみにこちらは1万円で買い切りです。（たしか最初の1ヶ月は無料）

誕生日プレゼントと自分への投資だと思って購入をしました。

直感的に使うことができるので、初心者でも学習コストは低いと思います。

安な方はSketch用のLPテンプレもあるみたいなので、試してみると良いかもしれません。

自分はテンプレを使用しなかったので、良いかどうかは分かりません。

 

www.webtoolnavi.com

 

写真選定

デザインの中でも最も時間を掛けたのが、写真選定です。

正直もう写真が全てなんじゃないかと思ったくらいです。

しかし、こちらも社内のLP制作マシーンと呼ばれている取締役からお気に入りサイトを教えて貰ったので良い写真を見つける事ができました。

せっかくなので記載しておきます。

librestock.com

 

pixabay.com

 

girlydrop.com

 

ちなみに、画像にSketchでBlur(ぼかし)とマスク(色を載せる)をするだけでめちゃくちゃ良い感じに見えるようになるのでおすすめです。笑

 

フォント選び

続いて、これだけで見た目ガラッと変わるな、と思ったのがフォントです。

これも掛けた時間の多くを占めます。

とにかく色んな文字を当てはめて、雰囲気にあったフォントを選ぶ事が重要です。

色んなLPを見て、良いなと思った文字を要素検証してフォント名でググってダウンロードしまくりました。

あとは「誕生日　フォント」とかでググっても良さ気なフォントが出てきたので、LPのテーマと合わせて検索をする事もおすすめです。

 

コーディング：22時間

コーディングは最初から大変だと思っていましたけれど、やはりそこそこ時間が掛かりました。

結局私は色々入れるのが面倒だったので、Railsを使ってHTMLとSassで書きました。

コーディングも、自分でゼロから考えていては時間が無いですし、分からない事いつまで考えていても時間の無駄なので、とにかく参考LPの要素検証をしました。

bootstrap等の最低限の知識はギリギリあったので、クラス名と当たっているスタイルを見ればなんとなく分かりました。そのおかげで割りとスムーズに作業が進みました。

最初の10時間くらいでほとんどコーディングが終わり、あとは特殊なデザインをしている所や、要素検証だけでは理解しきれなかった部分を調べまくっていました。

やっぱりレスポンシブでの細かいデザインが難しかったです。

 

簡単ですが、以上がざっくりとしたLPを作る時の流れになります。

 

本気でプログラミング学びたい方待ってます

がっつり学びたい方や興味のある方は是非弊社に遊びにきてくださいませ〜。

メンター募集中です！圧倒的効率で育て上げます。

正社員も募集していますので、こちらも気になる方は是非！

www.wantedly.com

 （おまけ）メンタル的な部分で学んだ事

メンタル的な話は個人的に好きだったりするので、おまけで。

 

今回50時間を投下してLP制作を終えて、大きく以下の2つの事を学びました。

・本気出せば皆何でも出来る

・圧倒的行動をすれば、必ず誰かが助けてくれる

 

本気出せば皆何でもできる

前から思っていましたけれど、改めて実感しました。

未経験の癖に50時間という短い納期

元々ギリギリ癖があり、よくリアルフェイス男(ボケが分からない人すみません。)と呼ばれる程でした。

さらに今回は、当時抱えていたプロジェクトの責任者で物理的に時間の確保が難しかった為、取り掛かりの開始をプレゼント予定日の1週間前にせざるを得ませんでした。 

スケジュール感

こちらはもう彼女にもバレてしまっているので書いてしまいます。

前提として、「絶対に会社に迷惑を掛けない」というルールを自分の中で決めていました。

ですので、仕事を終えて一通り落ち着いてから、大体夜の22時頃から朝5時までをLP制作の時間に充てていました。

最初の一日で、昼寝を1時間挟めばパフォーマンスに影響がない事が分かったので、そのスタイルを続けました。

先延ばしにしても一生やらない

最近目の前の仕事で精一杯になってしまって、何かやりたいと思っていても結局「落ち着いたらやろう」という気持ちで全てを先延ばしにしてきました。

しかし、こういう人間の「落ち着く時」は一生来ないのだろうなあと思います。

大学生の頃のちょっとした成功体験

過去に自分が上手くいった時を思い出すと、そんな事も考えずにとにかく行動をしていました。

大学2年生の頃、就職をするのが本当に嫌で且つ社会人になっても勉強をして成長をし続けたいと強く思っていました。

当時は就職に対するイメージが「毎日ルーティンワークで成長の無い日々」という酷いものでした。笑（もちろん、実際そんな事はありませんｗ）

そこで「卒業する頃には自分が働かなくても、月◯◯万円の収入が得られる状態になる」という目標を立てました。（ネットワークビジネス臭い発想ですが、そちらには手を出していませんｗ） 

それから2年くらい一切友達とも遊ばず、毎日朝から深夜までパソコンに向かい続けました。

結局、大学3年で半分を達成し、大学卒業時には目標を達成する事ができました。

そして、卒業と同時に自分の会社を作りました。

ウェブメディア運営とプロモーション代行事業で、自分が動く事がほとんどなくなり目標を達成する事ができました。（その間にTECH::CAMPを受講）

 

やっぱりこの時を思い出してみても、何も考えずにとにかく行動をしていました。

そして、結果も着いてきました。

ここ1年半以上はTECH::CAMPで社員として働いています。

1年半も経つと慣れてしまうのか、ベンチャーとは言え少し会社に甘えていたのかもしれません。

今回のLP制作で、「日々の限界を作っているのは自分であり、誰だってやろうと思えば何でもできる」という事を再認識しました。

 

圧倒的行動をすれば、必ず誰かが助けてくれる

今回LP制作をするにあたって、一番最初に社内のデザイナーにヒアリングをしました。

そして、社内チャットでプライベートグループを作成し、社内のデザイナーの方を主観で（おこがましいですが）素晴らしいと思う人を上から5名招待しました。

とりあえず何かあった時に助けを求めたかったからです。（迷惑です）

無視状態から少しずつ助けてくれるようになった

しかし、最初のうちは「誕生日にLPワロタｗ」みたいな会話はしてくれた物の、デザイン的な質問はほとんどスルー状態でした。（忙しいので当たり前です）

しかし、初日にデザインを6割くらい完成させたキャプチャを貼った所、少し反応があり「ここはこうした方がいい」とアドバイスを貰うことができました。

ただ、その後もほとんど反応はなく自分の独り言チャンネルと化していました。

毎日投稿を続けて5日目くらいで、質問にもレスが返ってくるようになって、社内で会った時に実際にLPを見てもらう事もして頂けました。

そのおかげでかなり制作も進みました。

取締役もフルコミット

そして迎えた最終日、この日ばかりは仕事をいつもより早めに切り上げて19時頃からオフィスの端っこでLP制作をしていました。

すると途中から、別のプレゼントの制作物の依頼をしていたデザイナーが自分の横で作業をし始めてくれました。自分が悩んでいる事にも何でも答えてくれました。

さらに、社内のLP制作マーシンと呼ばれている取締役が「LP見せて」と言ってきて見せた所「うーーーんめっちゃ色々直したい」と、もう見ていられないといった表情で、そこから深夜2時頃まで色々教えてくれながら、一部の修正を手伝ってくれました。

そういったヘルプもあって無事、LP制作を終える事ができました。

本当に感謝しかありません。

 

結局、行動をしない限り誰も動いてくれないし、逆に行動をすれば皆が助けてくれるという事を実感しました。

人にお願いをする時はまず自分が圧倒的に動く事が大切だという事も改めて感じました。

 

最後に

どう考えても納期が間に合いそうになかった為、唯一会える日曜日に彼女と会わずに作業をしました。

「あなたは私の事が好きではない」とかなり深刻にまずい事になりました。（なんとか耐えた）

人生にサプライズを

これは私が働くTECH::CAMPを運営する株式会社divの理念です。

お客様が感動して涙を流す程のサービスを提供しようと、毎日本気で仕事に向き合っています。

記事中にもあったように、お客様だけでなく身内にも本気でサプライズを行います。

全員がお互いを尊敬しあって、高いレベルで仕事ができる環境です。

お陰様でTECH::CAMPは立ち上げから2年で卒業生は5000人を超え、事業も前年比300%以上で成長しています。成長に対して全職種、人がまったく足りません。もし少しでも興味を持っていただける方がいればお気軽にご連絡ください！

メール：[email protected]
facebook：https://www.facebook.com/yuya.hirata.100/

twitter：ゆうやonUnity (@yuyaonrails) | Twitter

Wantedly: https://www.wantedly.com/companies/div/projects