制作物

【体験談】未経験から1ヶ月でLP制作〜完成までの流れと気づき〜

こんにちは、mito(@mito_works)です。

ちょうど1年前、全く知識ゼロから1ヶ月間でLPサイトを制作しました

1年経った今、初心に返るべく、当初の記憶を思い起こしながら書いています。

mito
mito
これから初めてLP制作をする方へ、LP制作の完成までの流れや思考の参考になれば嬉しいです!

LP制作のスケジュール

LPサイト制作にかけた期間は約1ヶ月ちょっとです。

mito
mito
過去、お仕事で受注した際、最短2週間で完成させたこともあります。
ただ、後述している担当範囲でプランニングからということであれば平均して1ヶ月くらいはかかります。
momo
momo
だいたい実案件と同じくらいの制作期間だね!

 

私は一度、完全に独学で勉強しようとして挫折した経験があるので、Webサイト制作の一連の流れを効率よく学ぶためにシーライクスというスクールで2ヶ月間学びました。

 

mito
mito
最初から独学ではなく、全く未知の分野に関して「全体像を把握する」「興味のキーワードを見つける」という意味でスクールを短期で活用し、その後独学で勉強するやり方、おすすめです!
momo
momo
実際やってみて完全に独学だと、勉強を仕事につなげるための学ぶべき優先順位が見えずらい、視野が広がらないということがあるかなと思うよ〜!
仕事に繋げる!!Webデザインを独学で勉強し続けるためのマイルール10個こんにちは。mito(@mito_works)です。 独学でもそうでなくても物事を継続させようとすると、気分が沈んだり、逆に上がり...

LP制作の担当範囲

担当範囲としては、クライアントさんの中で作りたいイメージの構想がある状態からスタート。イメージを言語化して整理する部分から一緒に行いました。

ざっと以下のような項目です。

  • STEP1
    プランニング

    コンセプト、ターゲットを言語化します。

  • STEP2
    ワイヤーフレーム設計

    プランニングを元に「どんな要素を、どれくらいの面積で、どの場所に配置するか?」を把握するためにサイトの骨組みを作ります。

  • STEP2
    デザインカンプ作成

    文章や画像を当てはめ、完成版に近づけます。

  • STEP2
    コーディング
    デザインカンプの内容を元にコーディングをします。
  • STEP2
    ローカル環境でのテスト
  • STEP2
    本番公開
    サーバーにアップし、インターネット上に閲覧可能な状態にします。
  • STEP2
    本番環境でのテスト

こんな感じでした。

ここからは、LP制作の一つ一つの流れを書きます。

LP制作のプランニング

講義で配られたプランニングシートを元に考えました。

プランニング項目

①戦略 ・サイトの目的・目標
ー何のために必要?
ーなぜ必要?
ーいつまでにどうなりたい?

・競合類似サイト(現状分析)

②プランニング ・コンセプト
ー魅力や特徴をシンプルで強力な言葉で表したもの
ー価値がわかるか?
ー共感する人がたくさんいるか?
ー競合優位性があるか?

・サイト

・サービス名

・ターゲット

③設計 サイトに載せる内容
ーアイデア出し
ーカテゴリー分け
ー優先順位を決める

特にターゲットのところは絞ったほうが良いということを教わりました。

momo
momo
XXくんへのラブレターの方がXXくんとYYくんへとか、みんなへよりもちゃんと相手に伝わるよね!
mito
mito
ターゲットを決めるときは、より明確にするため、ペルソナを設定して、年齢、職業、趣味、好みなど細かくより具体的に設定しました。

今回は、冷え性に悩む人に向けた夏向けのレッグウォーマーの販促LPです

 

プランニング具体例

夏用ショートレッグウォーマーの販促LP
①戦略 ・サイトの目的・目標
ー夏の冷え性解消の1つとして提案する
ー寒さや冷えを我慢しなくていいということを伝え、レッグウォーマー装着は簡単に自己救済できる手段ということを伝える
ー春頃から売り出しスタート

・競合類似サイト(現状分析)
ーかぐれ(http://www.kagure.jp/)
ー天衣無縫(http://shop.tenimuhou.jp/)
ーくらしきぬ(https://www.kurashikisilk.jp/)

②プランニング
・コンセプト
ー私にちょうどいい冷えとり
ー3つのちょうどよさを切り口に、レッグウォーマーでの冷えとりを提案
ーあったかさ(素材のオリジナル性)
ーファッション、デザイン性(オフィスで使えるデザイン、かさばらない)
ーめんどくさくない(5足とかではないので装着が楽、お手入れ楽)
ー手軽に、気負わず夏の冷え性解消

・サイト・サービス名
ー私にちょうどいい冷え解消

・ターゲット
38歳女性
ーオフィス勤務の会社員で社外でのミーティングも多く、対外的に人に会う
ー経済誌や新書をよく読んでいるキャリアウーマン
ー経済的に余裕があり、自分でできる範囲で社会貢献をしたいと思っていて、週末にイベントの参加や主催をしている
ー仕事に繋がるような学びになるイベントが好き
ーホルモンバランスの乱れによる体調不良、体の冷えに悩んでいる ー服に関して、流行よりも着心地の良さや肌馴染みなど自分独自の基準で選んでいる

 

③設計 サイトに載せる内容

mito
mito
いきなりコンセプトやサービス名を決められた訳ではなく、③設計をする中で、コンセプトが明確になりました。

具体的には、以下のように載せたい内容をポストイットに書き出して、分類分けしました。
その分類分けしたグループにタイトルをつけると3つあったので、冷え解消を3つの切り口で解消できることを伝えて「冷え性」という課題を解決できる商品として見せようと思いました。

 

LP制作のワイヤーフレーム設計

デザインはまだか!とムズムズしているかもしれませんが、手戻りを少なくするために、デザインの前段階の準備がとても重要です。

momo
momo
まずそもそもワイヤーフレームの設計をなぜやるか?の理由は3つあるよ!
ワイヤーフレームを書く理由
  1. いきなりデザインからだと時間がかかってしまうから
  2. ユーザーが必要としている情報に迷わずたどり着けるようにきちんと設計するため
  3. Webサイトの中で一番アピールしたい情報を適切な位置に設定するため
mito
mito
今回はまず手書きで書いた後に、Justinmindというフリーのツールを使いました。

ワイヤーフレーム制作事例↓

mito
mito
ツール自体は感覚的に操作できて使いやすかったです

ここまででは、実際に画像を入れてみないとイメージがつかないなという感じで、まだまだ完成形のイメージがわいていない状態でした。

補足

ワイヤーフレーム制作ツールのFigmaやAdobeXDもおすすめ!

当時は使わなかったのですが、ワイヤーフレームを書くツールとして、感覚的に操作できるFigmaAdobeXDもおすすめです。

momo
momo
どちらも無料で利用できるよ!

 

LP制作のデザインカンプ作成

いよいよワイヤーフレームからデザイン制作へ。

配色について、ベースカラー、メインカラー、アクセントカラー決めで少し悩みました。

mito
mito
綺麗めでシンプルな大人向けのサイトをイメージしていたので、白、グレイ、アクセントカラーどうしよう?。。となりましたが、画像の色数もあるので実際に画像を配置して、アクセントカラーを決めることにしました。
デザイン制作過程のメモ

画像一つでイメージが変わってしまうので、画像集めに時間がかかったり、納得のいくデザインになるまで何パターンかデザインを作成して決めていくことが重要だなと思いました。

実際に今回もクライアントさんとこの段階で6,7回くらい出し戻しをしてデザインカンプをFIXさせました。

以下、デザインのBefore→Afterです。

mito
mito
初回は、今見ると公開できるようなものでもなく・・ちょっと恥ずかしいですが(汗)、はじめてということで大目に見ていただければと。
Before
After
最終までの修正ポイント
  1. ファーストビューで何のサイトなのかがイメージで分かるようにする
  2. 私たちは何ものか?どういうコンセプトのブランドか?の説明を入れ、信頼や共感、安心感をつくる
  3. フォントを女性らしく細めの明朝体に
  4. 余白を広めにとることで、大人っぽさ、品の良さを強調
  5. セクションごとの区切りを明確にすることで読みやすく
  6. セクション内は同じパターンにして統一感をだす(特にFeature部分)
mito
mito
修正を重ねていく中で特に、フォントの設定、余白の取り方、素材の選定と配置は本当に大事で、迷ったら、サイトの目的やコンセプトに立ち戻り、ちゃんと要件を満たしているか確認することがポイントだなと思いました。

 

LP制作のコーディング

いざコーディング!!

こちらもまず紙にコーディングの仕様書(というほどではないのですが、divやclassの設計を書きました)を作成。

progateも平行して活用して、書き方を覚えながら実践しました。

mito
mito
コーディングのことを考えながらデザインをした訳ではないので、「これ、どうやって実現すれば良いのか・・」と苦戦。。。

デザインの段階でコードのイメージをもつことに尽きると思いますが、特にデザインの段階で意識しておいた方が良いことをまとめます。

コーディングを意識したデザイン
  1. 余白の取り方をパターン化する(コーディングでの細かな余白調整に苦戦。。)
  2. 文字に関してどれを画像にしてどれをコードで書くか決めておく(手戻りが減る)
  3. 背景画像と重なって読みずらくなる部分をどのように解消するか考えておく
  4. レスポンシブ対応でレイアウトが変わることも意識する
mito
mito
デザインカンプにほぼそった内容でコーディングが完了。でも何だかちょっと物足りない・・。文字が多すぎるかな・・。と先生にレビューしていただきました。
momo
momo
「動きを入れると、玄人感でる!」ということで、早速jQueryで動きを入れることにしました。
mito
mito
Featureの部分は特に文字が多く、よほど興味がある人以外は読み飛ばしてしまうところかなと思い、横からスライドで現れる動きを入れることで一旦は必ず目に入るようにしました。

 

LP制作のローカル環境でのテスト

テスト仕様書を作成。自分の用意できる環境の範囲でテストを実施。

mito
mito
余白の取り方、ボタンホバー時の動きなど細かい部分をチェックし、修正。完成度を高めます。

 

LP制作の本番公開

いよいよ、本番公開!!!

今回は、既存のWordPressのサイトからアクセスできるような導線にすることが必要だったので、既存のサイトの下層ページとして追加。

詳細はこちらにまとめています↓

WordPressと静的HTMLを共存させる方法こんにちは。mito(@mito_works)です。 本家のサイトはwordpress。本家サイトのLPを作った場合にURLをWo...

 

LP制作の本番環境でのテスト

ローカルと同じテスト項目+本番環境独自の項目(既存ページからの遷移、URL確認など)をテスト。

無事、公開となりました!

遷移元↓

今回作ったページ↓

 

おわりに

 

1年前の感想

短期間で一通りの流れを経験でき、自信になったことは一番大きな収穫です。デザインカンプが完成した!、動いた!、公開された!というそれぞれでの小さな達成感の積み重ねをちゃんと味わって大事にできたこともよかったと思います。

それと同時に、実現したい動きを実装するためにもっとコーディングを勉強しなきゃとか、そもそもどんなデザイン、動きが良いのか適切なのかという基準を持つために知識の引き出しを増やしたいなと。

そのためには、意識的に良いと思うサイトや参考にしたいと思うサイトのストックを増やしてスキルアップしていきたいです。

サイト作成の目的やコンセプトはすごく大事。

そこはちゃんとクライアントさんと握って後の工程で議論をするときに、何となく、とか感覚的に、で議論するのではなくて、目的がこうだからこのデザイン、この動き、というように論拠とすることが重要だなと思いました。

このLP制作をきっかけにデザインの独学勉強をはじめました!

mito
mito
「デザインツールを使いこなしたい」というところからバナートレースへ
バナートレースからデザイントレースへ。50個トレースしてわかったこと&Tipsこんにちは、mito(@mito_works)です! すきま時間に続けていたバナートレースも気づけば50個になりました。 (途中...
mito
mito
「意識的に良いと思うサイトや参考にしたいと思うサイトのストックを増やしたい」というところから#1日1サイトレビューへ
3ヶ月続けた1日1サイトレビュー、3つの学びとやってよかったことまとめこんにちは。mito(@mito_works)です。 今回は3ヶ月間毎日twitterに投稿を続けていた1日1サイトレビューの総集...
mito
mito
「コーディングスキルを磨きたい」というところから#30DAYSトライアルへ
【30DAYSトライアル3rd】学びの総集編 今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。 30DAYSトライアルは、...

be continue…。

 

 

ABOUT ME
mito
こんにちは!mitoです。 2児の母で、会社員。 現在は複業でWebデザイナーをしています。 2019年1月からWebデザインの勉強を始めました。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、フリーランスを模索しています。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。