LPが完成するまでの流れ

こんにちは。デザイナーのasatoといいます。

以前社内でプロジェクトオーナーとしてLPを3本最初から完成まで作成に携わりました。

その中の1本の定額制デザイン制作サービスを紹介するLPに絞って、制作の工程を備忘録がてら記載していこうと思います。

 

1.要件定義

まずは要件定義から始めます。

どのような内容のLPを作成して欲しいのか依頼を受けるところから始まりました。定額制デザイン制作サービスを紹介するLPを作成して欲しいとのことだったので、イメージを依頼者に伺いました。

コンテンツ内容やデザインはこちらにおまかせということだったので、要件定義ではあまりどういったコンテンツを載せるのか細かく決めずに、リサーチの段階でコンテンツの傾向を見極め何をLP内に盛り込むのか考えることにしました。

 

2.リサーチ

次にリサーチです。リサーチを担当したのは私ではなくLPデザイン全般を担うデザイナーが担当しました。
他社ではどのような価格帯でサービスを提供しているのか、どのようなコンテンツをLP内に盛り込んでいるのか、デザインテイストの傾向は存在するのか。これらを調査していただきました。

ドキュメント内にLPの特徴、価格帯、デザインテイストを書き出してもらいました。

そして私とそのデザイナー2名でそのリサーチ結果を踏まえながら、ターゲットユーザーを決めていきました。

そこから自分たちの定額制デザイン制作サービスの独自性を出すにはどうすれば良いのか考えるフェーズに移ります。

 

3.コンテンツ作成

リサーチした結果、コンテンツにはデザイン関連の悩みごと/このサービスの特徴/対応制作物/事例/料金プラン/お問い合わせからサービス利用開始までの流れ/よくある質問/お問い合わせを入れることにしました。

コンテンツ作成に関しては私が作成を行いました。
文量に関しては熱意を込めすぎて長い文章にしてしまうと文字量の多さで離脱してしまうユーザーがいると考え長すぎないように1つの項目で長くても3行程度になるようにしました。
簡潔すぎてもサービスに興味のあるユーザーが見た時に知りたい情報が上手く伝えられないと考えたので3行程度と決めました。

悩みごとを入れて、ユーザーの課題感を浮き彫りにしました。
その次にこのサービスの特徴を入れることで課題をきちんと解決できるサービスであるとユーザーに伝えるようにしました。

何が対象なのか、いくらで利用できるのかは大事だと思い記載しています。興味のあるユーザーが深ぼって見てくれることを考えて離脱の多い中間層に置きました。

過去事例があるとサービスの具体性が増すと考えました。そのため、事例も挟みました。
やはり実際の制作物があるとどのようなデザインを行ってきたのか、得意なのか傾向や強みが可視化されますよね。

また実際に問い合わせてからどのような流れでサービスを開始するのかある程度わからないと問い合わせるのにも躊躇すると考えました。
そこでお問い合わせからサービス利用開始までの流れの項目を入れました。

予想される質問を予めよくある質問として盛り込み、疑問点をある程度解消できるようにしています。

そして合間合間にはCTAの項目を入れることにしました。こうすることで、いちいちLPのファーストビューに戻らなくてもすぐにお問い合わせの項目に飛べるようになっておりより気軽に問い合わせられるようにしました。

 

あとはサービスと言えば必ず必要なのがサービス名ですね。

定額制デザイン制作サービスであることがぱっと見でなんとなくわかるようなキャッチーな名前にしたいということでいくつか案を絞っていきました。

サービス名が長すぎると読みづらいかつ覚えづらいため、必然的に短めの名前を考えることになります。ですが、そこで発生する問題点として既出のサービス名と重なってしまうことです。
特に「デザイン」という単語はデザイン制作サービス以外にも様々なデザインに関わるサービスで使用されることが多いので頭を捻りながらもう1名のデザイナーと考えていました。

結果、「デザインレスキュー！」に決まりました。「！」を入れることで勢いと独自性を出しつつデザイン関係で助けてくれるものなんだ、とユーザーにもわかりやすく伝わります。
名前も長すぎなくて覚えやすいのでこちらのサービス名に決まりました。

 

4.ワイヤーデザイン作成

コンテンツが固まったところでワイヤーデザイン作成の段階に移っていきます。ワイヤーデザインやデザイン作成はもう1名のデザイナー担当です。

ワイヤーデザインとは大まかにいうとモノクロの状態でデザインの構成を組むものです。
項目内の要素の配置を考えたり実際に文章を当てはめたりします。コンテンツを視覚化することで改めて文章量を把握できたり、LP全体の長さを実感できたりします。

 

5.デザイン作成

ワイヤーデザイン作成が完了したらデザイン作成に移ります。まずはLP全体の色を決めるところから始まります。「デザインレスキュー！」というサービス名からは勢いや元気な印象を受けます。そこで、少しオレンジがかったピンク寄りの赤をメインカラーに添えました。
そのほかにも黄色やオレンジなどの暖色を使用して全体的に明るいLPになるようにしました。

LP内のイラストは全てデザイナーが1人で作成しました。人物のイラストテイストに関してはいわゆるビジネス感のある線がしっかりとあるものではなく柔らかめのものを作成してくださいました。ロゴもデザイナーが作成し、勢いのある斜め線のものとLPカラーの赤色を使用したものになりました。

 

6.開発

今回は開発の一部もデザイナーが行いました。もう1人のデザイナーが主に担当し、私も少し開発しました。WordPressを使用することである程度はテーマを使用しながらカスタマイズができました。
ですが、コーディングが必要な箇所もあったので2名ともコーディング初心者ながらもデザインを実装していきました。

私たちデザイナーが行ったのはPC版のデザインのみで、SP版などのレスポンシブ対応に関してはエンジニアに依頼し、実装していただきました。

 

7.テスト

実装が完了したら次はテストを行います。

端末やブラウザごとにデザイン崩れがないか確認していきます。

もし崩れがあったら修正し、作成したデザインと相違ないように自分で調整したり修正依頼をエンジニアに行ったりしていきました。

 

8.リリース

テストも無事完了したら、いよいよリリースです！

実際に作成したLPはこちら。

是非覗いてみてください。

 

さいごに

今回初めてプロジェクトオーナーを経験し、LPを作成しました。
ユーザーの困りごとは何か？を調査しつつ、どのようなサービスにすればその課題が解決されるのかを考えるのはすごく良い経験になりました。

また視覚的要素もLPでは大事です。デザイナーと連携しながらユーザーにとって目を引くようなわかりやすいLPを作成できたのも学びとなりました。