入社1年目のデザイナーによる初めてのLP制作過程
こんにちは！シナジーマーケティング株式会社のデザイナー田端です。2023年10月より当社でデザイナーとしてのキャリアが始まり、約半年が経ちました。
今回は、入社してから初めて制作したLPの制作過程についてお話をさせていただきます。制作を進める上で苦労した点や、もっとこうすればよかった・・と感じたこともまとめているので、同じくデザイナー1年目の方や同じような状況で悩んでいる方に少しでも参考にしていただけると嬉しいです。
簡単に自己紹介
・新卒でインテリアの会社で接客販売→退職してWEBデザインスクールにて8ヶ月デザインの学習→当社に入社（今ここ）
・カフェ巡りやライブ鑑賞が好き
・現在は主に地域創生事業【FAVTOWN※】のデザイナーとして、WEB・紙媒体のデザイン制作に携わっています
※FAVTOWNとは
「FAVTOWN wakayama（ファボタウン ワカヤマ）」とは、和歌山市にいま住んでいるひとや、卒業で地元を離れるひと、以前住んでいたことがあるひとも、「地元が好き」という共通項でいつでも和歌山市とつながれるファンメディアです。
概要
今回は、FAVTOWN主催のプレゼントキャンペーン用LPのデザインを担当しました。
制作が始まったのが入社4ヶ月目のタイミングで、それまではSNS用の画像制作が主だったため初のLP制作に少し緊張していましたが、楽しく学びながらできたらいいなという気持ちで取り組みました。
制作の概要
内容：フードロス対象のわかやまジンジャーエール6本セットを抽選で5名様にプレゼント
目的：①FAVTOWNの新規会員獲得②フードロス商品の削減
メインターゲット：30〜50代の男女（和歌山市を長く離れている転出者に地元を感じられる産品をプレゼントすることで、会員登録の一押しになるように）
上記の内容で方向性が決まり、ここからLP制作に入ります。
今回は、キービジュアルとLPのワイヤーフレームをそれぞれ先輩デザイナーに作成いただき、それをもとに制作を行いました。
キービジュアルの制作
情報整理
必要な情報
・FAVVTOWNロゴ
・タイトル（キャンペーン名）
・応募期間
・当選人数
・商品画像
・味は4種類あり、ランダム6本セットをプレゼント←追加の要素
デザイン制作
企画内容やターゲットの年齢層など踏まえ、主に以下3つのイメージでデザインを作ることになりました。今回はそれぞれのイメージに当てはまるような案を3つ考えました。
フードロス＝SDGsやエコなイメージ
ターゲット層（30〜50代）に響くような、温かみのある雰囲気
商品の魅力（パッケージデザイン等）が伝わるデザイン
制作意図
右側に大きく配置し、商品の魅力がより伝わるようなレイアウトにしました。また、パッケージの爽やかな雰囲気に合うよう、ブルーの水彩テイストでまとめました。ターゲットの年齢層が30〜50代ということで、長時間見ていても疲れにくい目に優しいデザインを意識しています。
制作意図
商品を横並び一列にすることで、これだけの量がもらえることが視覚的にわかるレイアウトにしました。フードロス＝エコという観点から、自然を背景に商品が並んでいるイメージで作成しています。
制作意図
SDGsをイメージし、カラフルな色味を散りばめたデザインにしています。（最下部の帯は、SDGsの17色を取り入れています）商品が手元に飛んでくるイメージで、空と風船を使用しました。
社内会議の結果、フードロスとSDGsの関連性が最も強いという理由から案3のSDGsを意識したデザインになりました。その際、以下のフィードバックをいただきました。
「おいしく和歌山のフードロス削減」の文字が小さく見づらいため、「わかやまジンジャーエール」の文字くらい見やすくしてほしい
商品写真が小さくパッケージデザインが分かりづらいため、案1のようなレイアウトにしてもいいかも→今回は、空を商品や風船が飛んでいるようなデザインがいいと感じたため、このままのレイアウトで制作を進めました
LPの制作
デザインの方向性が決まったところで、ワイヤーフレームを元にLP制作に入ります。
情報整理
構成
・【取り組みの概要→プレゼントする商品の紹介→FAVTOWNの紹介→応募要項】の流れ
・本文に設置するコンバージョンとは別に、画面下部に固定でCTAを設置
デザイン制作
はじめに、レイアウトとデザインの観点でそれぞれ参考にできそうなサイトのデザインを集めました。
その後、フォントサイズ・余白・あしらいなどいいと思った箇所を様々なサイトから少しずつ取り入れていき、LPを形にしていきました。最初のうちはとにかくたくさんのサイトを見ることが大切だなと改めて感じました。余裕があればデザインを言語化してまとめたり、サイトトレースができるとより学びが深まると思います。
キービジュアル制作はかなり時間がかかってしまったのですが、LPはデザインの方向性が決まっていたこともあり比較的スムーズに形にすることができました。
初校完成後は、先輩デザイナーからフィードバックいただだいた箇所を修正→社内確認でデザインや文言の修正→（商品を提供いただいた）JAわかやま様に確認いただき文言などの最終修正→コーディング（エンジニアの方に実装依頼）→サイト公開といった流れでした。
そして完成したサイトがこちらになります。（※ワイヤーフレームと内容が少し異なります。また、こちらのキャンペーンの応募受付は終了しています）
デザイン制作の際に意識したことはいくつかあるのですが、特に気をつけた点は以下の3つです。
ターゲット（30〜50代）の方々が見やすいと思うデザインを意識
→今回のキャンペーンのメインターゲットは30〜50代の男女ということで、カラフルだけど温かみのある雰囲気＋情報がわかりやすいサイト制作を心がけました。具体的には、フォントを視認性の高いものにしたり、水彩のイラストを使用しサイト全体の統一感が出るようにしています。テーマ（SDGs）を散りばめる
→メインテーマが、「フードロス削減」＝「SDGs」ということで、SDGsのテーマカラーである17色の帯をセクション間に使用しました。CVは目立たせる目的で赤色、あしらいに黄色を中心に使用するなどして、SDGsのカラフルな雰囲気に合わせています。単調にならないようにメリハリをつける
→サイトの途中で離脱されないよう、セクションごとに色分けをしたり部分的に動きをつけることで、最後まで飽きずに見ていただけるよう工夫しました。
制作をして気づいたこと
今回制作してみて気づいたことや、今後の制作に活かしていきたいと思うことがいくつかあったので、お話させていただきます。（※あくまで個人の主観です）
早め早めの行動を心がける
→これは先輩デザイナーにアドバイスいただいた内容なのですが、自分のような若手には特に言えることだと感じました。今回キャンペーン系のデザインが初めてということもあり、思っていた以上にキービジュアル制作が上手くいかず、途中かなり難航していました。（3案制作するのに1週間以上かかってしまいました・・）もともとは割とゆとりのあるスケジュールだったのですが、後半のLP制作で時間がカツカツになり修正する時間が十分に取れなかったため、今後はこのような事態も想定して時間にゆとりを持って制作を進めていきたいなと感じました。初校は作り込みすぎない
→先ほどの話と関連するのですが、3案制作すると決めていたのに一つ一つの制作物にこだわりすぎてしまい、結果時間がかかりすぎてしまいました。複数案出す際は、方向性を決める段階なのであまり時間をかけて作り込みすぎないことが大切だと感じました。デザインソフトの使い方を覚える
→LP制作時は主にfigmaを使用していたのですが、figmaには便利な機能がたくさんあります。（オートレイアウト・コンポーネントなど）
今回の制作ではあまりそれらの機能を使えなかったのですが、案件によっては使いこなせるようになると作業効率が格段に上がるため、徐々に使い方を覚えていきたいと思いました。
おわりに
実務でLPを制作したのが初めてで苦労したことも多かったですが、それ以上にとても大きな学びを得ることができました。LPが公開されてからキャンペーンにたくさんの応募があったとのことで、微力ながら組織に貢献できたことをとても嬉しく思っています。今後も様々な経験を重ねて、デザイナーとしてのスキルを高めていきたいと思います。最後までお読みいただきありがとうございました。
＜FAVTOWNに関するデザインについて、以下にも記事がありますのでぜひ合わせてお読みください！＞