LP制作の流れ【デザインコンペに参加してみた】

こんにちは。Chiiです。
まるみデザインファームただいま言語化祭り開催中です。（2022年1月18日現在）そして今私が通っているデザインオンラインスクール＃デイトラさんでデザインコンペも開催されています。

まるみデザインファームyoutubeで配信された「言語化中間報告」の会を視聴しました。今回も楽しく0歳の息子とともに（いつもつきあってくれてありがとう！）見させてもらったのですがその中で師匠とさちさんがyoutube配信で発信してみれば相乗効果や化学変化が起こる！とありました。え？じゃあまるみデザインファームとデイトラさんで学んでいる私の超個人的相乗効果、もしかして言語化したらできるかも、、、と思ったのでかいていきます！！

以下今の私のLPの作り方です。少し長くなってしまいましたが自分の振り返りのためと本当の駆け出しの時、こういう記事があれば参考になるなと思ったので🥚チームに向けて書きました！

・他の人のLP制作過程が見てみたい人

・コンペのLPってどう作るの？作ってみたいけどわからない

上記あてはまるのであればためになるかも？です！

良かったら読んでみてくださいね😌✨

ちなみに前回のnoteはこちらです↓

▼はじめにやること

まずデザイン内容、要件定義、スタイルガイドを読みました。今回は家具家電サブすくサービス「CLAS」さんの新規顧客獲得LPでした。そこで「CLAS」さんはどういったお店なのか。どういう雰囲気なのかまずは何はともあれ市場調査！！調べました。

次は参考サイト探しなのですが今回は参考サイトも提示があったので省略としました。

▼WF制作

デイトラさんのお題ではWFが提供されるのですが情報整理のために自分なりにまるみ師匠直伝のWFのひきかたでもトライしてみました。

WFを自分でひいたことのメリットは情報整理がしやすくなったのと各セクション内で何を優先しデザインすればよいのかの整理になりました。

・ボタンは各セクションにあったほうがよいと思ったので追加しました。

・セクションの順番の入れ替えも考えましたがきっとお仕事ではディレクターさんやクライアントさんに確認しながらの作業になるかと思ったので提示されたセクションの流れは変えませんでした。

▼コンセプト作り

このようにコンセプト作りをしました。

▼デザイン着手

前回のnoteで書いたのとまるみデザインファームYouTubeで聞いたのと今までの自分を振り返ってみてどうやら私は感覚派デザイナーっぽいのでとりあえずザザーーーっと大体のデザインをまずは制作しました。

・テキストはこの段階で微修正で済むようにほぼ完成形レベルに作りました。

・はじめにカラーやフォント、フォントサイズなど指定できるところはしておきました。後々とっても楽◎でした！

・カードデザインや見出しなど後々変更しそうでも最初にオートレイアウトやコンポーネント化できるところはやっておきました。こちらも後々の変更がとっても楽◎でした！

▼夫に見てもらう

前回LP制作した際にも夫に見てもらったのですがコンペに入賞できずに全てが終わった時でした。

👨🏻「全体的にもっとわかりやすいほうがいいね」

👨🏻「この人もこの人もChiiよりいい。共通点としてまずはとってもわかりやすいよ。（他の人の作品も一緒に見てもらいました😂）」

👨🏻「でもこことここはすごいいいね！」

など自分でも微妙だな〜と思っていた部分に大体指摘が入りました。私は体育会系で生きてきたので指摘を貰うことで落ち込むことはないです。素直に受け止め頑張ることで成長につながることは学生時代の自分の経験が教えてくれています。ですので夫の指摘はとてもありがたいのです。

前回の反省を生かし今後は大体のデザインができたら作り込む前にまず夫に見てもらうことを決めていました。

▼夫に見てもらう②

実際に今回のデザインを見てもらいました。

👨🏻「おー！すごい！前よりわかりやすい！」

👨🏻「でもなんかどうしても○ケア、○トリ感がするねぇ」

👨🏻「…ぶっちゃけなんだかかっこよくない」

と正直な感想が返ってきました。笑笑

そう、自分でもなんとなくそう思っていたのですが人に言われると現実味を帯びました。上質にしたいのにダサいんじゃまるっきりダメじゃんと。改善点が明確になるのでどうしたらCLASさんのコンセプトを大事にしつつ上質な感じ、、を出せるのか考えまずは根本的に高級感の出るデザインを復習しました。

大きく以下2点を改善しました。

・フォントサイズを小さく、線を細くする

・字間を広めにとる

行間やセクション間はあけすぎても鬱陶しいので適度にとりました。

▼デザイン制作

大体形ができてきたので作りこみ、ブラッシュアップしました。

・背景にテクスチャを入れる

・あしらいや飾り大戦争、足し算→引き算の繰り返し

・画像修正

などなど。

細かい調整はまだグッと我慢です。

▼思考と造形の反復、デザイン制作とコンセプトを行ったり来たり

だんだんデザインに集中するとコンセプトとずれてきたり自分好みのものになりがちな傾向なのでなんか違う、ダサい、ずれてると思ったら作り込む前に立ち止まりインプットしたり復習したり、思考で考えます。

大体この段階でデザインの言語化に着手します。（やり始めると案外時間結構かかりますしね。）

↑デザイン

↓言語化

▼調整

字間やカーニング、レイヤー整理、カラーやフォント、余白は統一されてるか？などチェックします。

▼寝かす

寝かせます。言語化部分も意味不明になってるところもあるかもなので言語化もチェック！

▼調整

校正ともいうのかな？最終調整して終了です。

できたらここでも夫に見てもらいます。

👨🏻「ここずれてるんじゃない？」

など実際に2pxのずれをしてしてもらえました！いわゆるミスです！笑

1人より2人でみたほうがミスは減る！

▼今回初めて取り組んだこと

グラフィックデザインで悩んだ時、なんとなくではなく今回は三分割法を使って組み立てる、をしてみました。間違ってるかもしれませんが自分なりにしてみました。

◎LP制作過程の言語化をしての感想

そうそう、書いてて思ったのですが時間をだらだらかけないために今日はここまで仕上げる！などあえて自分に制限を設けることは必要だなとも思いました。じゃないとデザインはいつまでも続けてしまう…。時間は有限！このnoteも1日でばーっとかいています。（てなわけでクオリティは目をおつぶりください！）

言語化は頭の整理になるのでやってよかったです。自分のために行った言語化がもしかしたら誰かのためにもなってるのかもしれない、そんな相乗効果が生まれたらいいなと思って今回頑張ってかきました。自分でもなかなかボボボボリューミー！！！な内容になったような気がします！！

デザインが好きなので言語化ももっと頑張っていきたいです。ではまた！

Chii

▼おまけ（ペルソナ、デザイン補足）