「びくとも動かない」と深夜に叫んだ私が、1か月かけてLPを完成させるまで

結論から言います。

無謀でした。

この1か月、デイトラの「デザイン筋トレチャレンジ」に参加し、
架空の冷凍宅配ごはんサービス「MOGU」のLPを制作しました。

今でこそ「完成しました！」と、報告していますが、
スタート地点ではそんな未来、1ミリも見えていませんでした…

なぜなら私、デザイン中級編がまだ終わっていませんw
デザイン実践にも進んでいません。

基礎練習の途中なのに、
いきなり筋トレ大会へ参加
してしまったようなものです。

しかも、チャレンジが始まってから
ほかのデイトラ生の作品を見て、さらに震えました。

「ちょっと待って。みんな、上手すぎひん？」

分析は深い。
資料はきれい。
Figmaも普通に使いこなしている。
作品には
「ちゃんと考えて作りました」という説得力がある。

一方の私は、Figmaの画面を前に、
「この薄い緑の背景、どうやって敷くの？」
と言っていました。

もしかして私、入る部屋を間違えた？

オンラインイベントなので部屋はありませんが
心境としては完全にそれでした。

「参加ボタンを押した私、
ちょっと出てきてッ」

チャレンジが始まって間もないころ、
私は何度も思いました。
「これ、ヤバいのに参加してしまったんちゃうか?」
その時点の私は、
LPについて何となく知っている程度。

ファーストビューがあって、
商品の説明があって
途中にボタンがある。

。。。くらいです。

ワイヤーフレームも、
「参考LPを白黒にしたら、それっぽくなるのでは？」
と本当に思っていました。

LPには、読者に順番に納得してもらうための流れがあります。

私はそれまで、LPを見ても、
「この色、かわいい」
「この丸いカード、使いたい」
「この写真、おいしそう」
くらいしか考えていませんでした。

。。。言語化できてない。
完全に感想です。
分析ではなく、ネットショッピング中の人です。

Week2、ワイヤーフレームの意味を知る

Week2では、参考LPの構成を分析して、
ワイヤーフレームを作りました。

GREEN SPOONなどのLPを見ながら、
「ここで悩みに共感している」
「次にサービスを紹介している」
「メニューを見せてから料金につないでいる」
と、一つずつ役割を考えていきました。

それまで私には、
LPが縦に長い一枚のデザインとしてしか
見えていませんでした。

でも分けて考えてみると、
それぞれのセクションに役割があります。

「こんなお悩みありませんか？」
「その悩み、MOGUなら解決できます」
「選ばれる理由はこの3つです」
「メニューはこんなにあります」
「利用方法も簡単です」
「気になる料金はこちらです」
「分からないことはFAQで解消します」
「では、初回セットを試してみませんか？」

こうして並べると、
LPは商品の説明というより、
読者との会話に近いのだと気づきました。

ただ情報を置けばよいのではなく、
相手が次に気になることを予想して、
順番に答えていく。

もちろん、
当時の私はここまできれいに
理解できていません。

「たぶん、こういうことかな？」

くらいです。
でも、その“たぶん”が出てきただけでも、
私にとっては前進でした。

Week3で、ようやく点と点がつながり始めた

Week3では、
参考LPのトンマナを分析しました。

色、フォント、写真、余白、カードの形、あしらい。

Week2では「何を、どの順番で伝えるか」を考えて、
Week3では「どんな印象で伝えるか」など分析。

ここでようやく、
「あれ？　構成とトンマナって
別々に考えてから組み合わせるんかな？」
と、少し流れが見えてきました。

本当に少しです。。。
この時点でも、
まだ霧は濃いです。

でも、Week1、Week2のころは
霧の中で地図を逆さまに持っていたので、
まぁそれに比べれば大成長です。

ほかのデイトラ生の分析や投稿からも、
たくさん刺激を受けました。

同じ課題に取り組んでいるのに、
着眼点が全然違う。。。

「そこを見るのか！」
「そんな整理の仕方があるのか！」
と、投稿を見るたびに驚きました。

一人で勉強していたら、
自分のやり方しか見えません。

でも、今回はみんなが同じ方向へ進みながら、
それぞれ違う考え方を共有していました。

勝手に横を走らせてもらっているような
感覚があって、
それが本当によかった。

Week4、これまでの全部が急につながってくる

Week4では、Week2で分析した構成と
Week3で分析したトンマナを組み合わせて、
3つのラフ案を作成。

まず、組み合わせを整理するための
表を作りました。

構成、配色、フォント、
写真、参考にしたLP、
取り入れる理由。

思いつく情報を全部横に並べました。

その結果、
完成したのは、ものすごく横長の表です。

「やったけど、横長すぎひんか？」
自分で作ったのに、
自分でびっくりしました。

その後も、
Figmaの操作で止まります。
私のデザイン筋トレは、たびたび
「Figma基本操作ドリル」に種目変更されます。

それでも整理していくうちに、
3つの方向性が見えてきました。

A案は「やさしい・健康的」。
B案は「スマート・信頼感」。
C案は「食欲・元気」。

同じサービス、同じ情報なのに、
3案を並べると印象が全然違う。

「色が違うから当たり前」
と言われればそうなのですが、
実際に自分で作ると、
色だけではないことが分かります。

でも、3案を並べて比べると、
少しずつ違いが見えてきました。

A案はやさしいけれど、商品の印象が少し弱い。
B案はスマートだけれど、冷凍ごはんを見て
「食べたい！」と思ってもらうには、
少しクール？かもしれない。
C案は料理写真が目に入りやすく、温かさと食欲が伝わる。
オレンジのCTAも目立ち、「初回お試しセットを見る」
という行動につなげやすい。

そこで、最終案にはC案に決定。

以前の私なら
「この色が一番好きやから～」
で決めていたと思います。。。

自分が好き。以上。
会議、終了です。

でも今回は、
自分なりの理由を持って選べました。

もちろん、
プロのように完璧な根拠を言語化できるわけではありません。

今もまだ、
「たぶん、こっちのほうが食欲出る……はず」
くらいの部分はあります。

それでも、
好み以外の基準でデザインを選べたことは、
私にとってかなり大きな変化かもしれない

Figmaは一切、空気を読んでくれへん。。。
フレーム一家がどんどん繁栄。

考え方が少し分かってきても、
Figmaが思いどおりに
動いてくれるとは限りません。

むしろ、ほとんど動いてくれませんでした！

オートレイアウトにしようとして
Shift＋Aを何度も押していると、
レイヤー欄に、
「Frame 76」
「Frame 77」
「Frame 78」と、知らないフレームが
次々に生まれました。

少子化とは無縁です。

私はLPを1本作りたいだけなのに、
Figmaの中では
フレーム一家がどんどん繁栄。

さらに、
フレームを作ろうとして
別のショートカットキーを押すと、
突然Geminiが出てきて「こんにちは」と
いきなり話しかけてきた。

え？。

コンポーネントを
作ったはずなのに効いていない。
数字を置いたらレクタングルの
後ろに隠れる。。。

でも、一つずつ見直したことで、
少しずつ全体が整っていきました。

特に難しかったのは、
見た目をきれいにすることと、
情報を分かりやすくすることのバランスです。

装飾を足せば、華やかになるし、
でも、足しすぎると読みにくくなる。

写真を大きくすると、
おいしさが伝わる。
文章とのバランス
CTAをオレンジ色にすれば目立つ。

でも、そこへたどり着くまでに
読者が納得していなければ、
ボタンだけ目立っても押してもらえません。

「きれいに作る」だけでは、
LPにならない。

相手が知りたい情報を、
読みやすい順番で届ける。

そのうえで、
商品の魅力が伝わる見た目に整える。

まだ十分にできているとは言えませんが、
LPを最初から最後まで作ったことで、
少しだけその難しさと面白さが分かった気がします。

完璧になってから参加しよう、
では遅かったかもしれない

今回のチャレンジで、一番大きかった学びがあります。

それは、

分かるようになってから参加するのではなく、
分からないまま参加してもいい

ということです。
もちろん、基礎は大切です。

私はまだデザイン中級編を
終えていませんし、
勉強しなければいけないことも山ほどあります。

オートレイアウトも、
コンポーネントも、余白も、
文字組みも、写真選びも、
まだまだ練習が必要です。

ただ教材を見ているだけでは、
「なるほど、分かった気がする」
で終わっていたと思います。

実際に作ると、
「全然分かってなかったわ…」
が大量に出てきます。

少し悲しいですが、
これはすごく大事な発見。

分かっていないことが分かる。
できないことが具体的になる。
そして一つずつ調べ、直していく。

遠回りに見えるけれど、
今の私には、このやり方が
一番合っていたのだと思います。

一緒に走る人がいたから、
最後まで楽しかった

この1か月が楽しかった理由は、
LPを完成できたからだけではありません。

一緒にチャレンジしていた
デイトラ生の皆さんの存在が、
とても大きかったです。

進み方も、選ぶ参考LPも、
デザインの方向性も、人によって違いました。

ほかの人の投稿を見るたびに、
「そんな見方があるんや」
「そのまとめ方、分かりやすい！」
「えっ、もうそこまで進んでる💦」
と、刺激を受けました。

正直、完成度の高い作品を見て
落ち込むこともありました。

この差は何？
同じ1日は24時間ではなかったの？

同じ課題に取り組む人たちがいて、
投稿を通してお互いの進み方が見える。

直接会っているわけではないのに
一緒に走っているような感覚がありました。

追いつけなくてもいい。
自分の速度でも、
止まらずに進めばいい。

そう思えたから、
最後まで楽しく続けられたのだと思います。

無謀だった。
でも、参加して本当に良かった

振り返ってみても、やっぱり最初の私は無謀でした。
デザイン中級編も終わっていない。
デザイン実践にも進んでいない。
Figmaの基本操作でも止まる。

参加ボタンを押した自分に会えたら、
「ほんまに大丈夫？」
と確認したいです。

でも、止めはしません。

以前は、
「おしゃれ」
「かわいい」
「写真がきれい」
だけで見ていたLPを、今は、

「ここで共感しているんかな」
「この順番で安心材料を見せているんやな」
「最後のCTAへつなげるためのセクションなんかな」
と考えるようになれました。

この“小さな変化”が、
今の私にはとてもうれしいです。

今回の完成をゴールにせず、
まずは止まっているデザイン中級編を進めます。。

チャレンジが終わった今、
教材のほうから、
「そろそろ戻ってきてください」
と言われている気がします。

次にFigmaで何かが動かなくなっても、
私はきっとまた言います。

「びくとも動かない」
でも、そのあとに、
「できた！」

と言えるところまで
これからも愚直に手を動かしていこうと思います。。