求人LPを何度も直して気づいた。「デザイン」より先に制作の型を作る

2026年8月27日は、新しいクライアントさんの求人LP制作をかなり進めた一日でした。美容室の求人LPで、8月24頃にヒアリングフォームをお送りし、そこから得た情報や既存の素材をもとに制作を進めています。

この日はワイヤーフレームや配色、写真配置、余白、そしてクライアントさんへの確認方法まで、LPの土台をかなり考えました。ただし、順調に一気通貫で進んだわけではありません。

途中で私が想定していたワイヤーフレームと実際に作られた形にズレがあり、方針を戻したり、デザイン案を組み合わせ直したり、確認用の環境作りで詰まったりしました。一見すると効率の悪い一日だったと思います。

それでもこの日は、単なる制作日記では終わりませんでした。何度もやり直した経験から、今後のLP事業で使いたい制作の流れが少しずつ見えてきた一日でもありました。

8月27は、求人LPを一発でうまく作れた日ではありません。むしろ何度も「違う」とやり直しました。でも、そのやり直しから「次回も同じところで迷わない制作フローを作ろう」と考えられたことの方が、今後のLP事業には大きいのだと思います。

8月27は、求人LPをかなり作り込んだ一日だった

新しい美容室求人LPの制作

今回制作しているのは、新しいクライアントさんからご依頼いただいた美容室の求人LPです。8月24頃に、まずクライアントさんを知るためのヒアリングフォームをお送りしました。

その返答や既存の素材を参考にしながら、8月27には、全体ワイヤーフレーム・デザイン方向・配色・写真配置・余白・確認方法・Netlifyでの共有方法まで、土台の部分をかなり考えました。

クライアントさんは女性スタイリストさんへ求人を届けたい美容室オーナーさんです。応募される方が読んだときに、落ち着いて情報を受け取れるLPを目指しています。

最初のワイヤーフレームで違和感があった

ただ、最初からスムーズに進んだわけではありません。制作を進めていく中で、私が頭の中で想定していたワイヤーフレームと、実際に作られた形にズレがあることに気がつきました。

「なんとなく違う」というレベルではなく、全体の流れやセクションの順序など、骨組みの部分でズレがあったという感覚です。ここで一度手を止めて、進め方を見直すことにしました。

「違う」と感じたら、細部ではなく全体へ戻る

以前の求人LPの構成を基準に戻した

ここで一度、以前制作した別案件の求人LPのワイヤーフレームを引っ張り出して、そちらを基準にする形へ修正しました。過去に作ったものが今回そのまま使えるとは限りませんが、少なくとも「求人LPとして流れが破綻していない骨組み」としては信頼できるものです。

大事だと思ったのは、「AIが間違えた」で終わらせないことでした。私自身の指示についても、どの部分を過去案件から踏襲し、どこを今回用に変えるのか、もっと最初から明確にした方がよかったと感じています。

頭の中に完成形があっても、それを相手やAIが同じように見えているとは限りません。「分かっているはず」で進めるほど、途中のやり直しが増えると感じました。

先に骨組みを確認する

この経験から、今後は細かい文章や装飾を先に作り込むのではなく、最初に骨組みだけを確認することを標準にしたいと考えました。

具体的には、全体の流れ・各セクション・写真の位置・余白・背景色・大まかなレイアウトが見えるワイヤーフレームを最初に作り、そこを確認してから細部を作り込みます。

全体構成が違っている状態で細かい部分だけを作り込んでも、あとから大量にやり直すことになります。今回はまさに、それに近い状態でした。

制作を早く進めるために必要なのは、いきなり完成形まで作ることではありませんでした。最初に全体像を確認し、「この方向で合っている」と確認してから細部へ進む方が、結果的にやり直しを減らせると思いました。

デザインも「どれか一案」ではなく、必要な要素を組み合わせた

グレージュ系をベースにする

ワイヤーフレームの方向が固まったあとは、デザインの方向についても何度か調整しました。8月27時点では、最終的にC案のグレージュ系をベースにする方向で進めています。

ナチュラルでウッディな美容室の雰囲気に合わせつつ、女性スタイリストさんが見たときに「落ち着く」「優しい」「読みやすい」と感じられる印象を目指しています。

ウッディ感と読みやすさを少し取り入れる

ただ、C案そのままではありません。B案にあったウッディ感を少しだけ加え、A案にあった文字や見出しのやさしさ・読みやすさも取り入れています。

目安として、Cほどグレーを強くせず、Bほど茶色も強くしないくらいのバランスです。グレージュを中心にしつつ、木の温かさを少しだけ足す、というイメージで調整しています。

リジョブなどの既存求人媒体をご覧になったスタイリストさんから見て、極端に印象が変わらないようにしたい、という点も意識しました。

写真が変わっても崩れない背景

背景色についても、8月27の中で何度か直しました。写真が入るエリアについては、写真そのものにベージュや茶系が入るとは限らないため、写真部分の背景は白を選びました。

一方で、「こんなお悩みありませんか？」のようなセクションでは、`#f1e3d8` のような淡い色を部分的に使う方向へ修正しました。LINEボタンについては、応募される方が一目でLINEと分かるように、LINEの緑を使う判断をしました。

大事にしたのは、好みの色を並べることではなく、写真が変わっても崩れにくいこと、応募者が迷わず読めることを基準にする、という考え方です。

分からない情報を勝手に完成させない

求人LPは事実が最優先

今回のLP制作を進める中で、まだクライアントさんから情報が揃っていない部分もありました。給与や休みなど、応募者が判断材料にする情報は、こちらの想像で埋めていいものではありません。

求人は、応募される方が、給与・休み・働き方・仕事内容・職場の雰囲気などを見て応募するかどうかを判断するものです。事実が違えば、応募者にとってもクライアントさんにとっても良い結果にはなりません。

情報不足はプレースホルダーとして残す

そこで今回は、情報が揃っていない部分については、それらしい文章や数字を勝手に作って完成させるのではなく、プレースホルダーとして「まだ分からない」と分かる状態で残す方針にしました。

制作側からすると、空欄があると「未完成に見える」ように感じます。ですが、事実が確認できないまま埋めてしまう方が、あとから大きな修正が必要になります。

分からない情報を「それっぽく埋める」より、「まだ分からない」と残す方が安全です。

【自店に置き換えて考える：やり直しが多い仕事】

・同じところで毎回迷っていませんか？
・その失敗を次回のルールへ変えていますか？
・自分の頭の中だけに基準がありませんか？

一番詰まったのは、制作物より「確認方法」だった

Netlifyで見てもらいたかった

8月27で一番時間を使ったのは、実はデザインそのものではありません。制作途中のLPをクライアントさんへどう見てもらうかという「確認方法」の部分でした。

私としては、制作途中からNetlifyというサービスを使って、実際のLPに近い状態を見てもらいたいと考えていました。図面ではなく、実際のスマホ・パソコン画面で確認できる状態です。

ただ、途中で「Netlify Dropで見られる状態にしてほしい」と指示しているのに、自分が期待している確認状態にならない場面がありました。

毎回確認方法から考えるのは非効率

ここで感じたのは、「なぜ今、確認方法から悩んでいるのだろう」ということです。デザインで悩むのは分かります。制作物を作る中で試行錯誤するのも当然です。

でも、毎回その都度、確認方法まで一から考えるのは効率が悪いと気づきました。この部分は「案件ごとに考える必要のない」領域です。

制作物そのものは案件ごとに変えていい部分です。でも、確認の順番や共有の仕方まで毎回変えていたら、案件が増えるほど自分の時間が奪われていくと感じました。

NetlifyからWordPressまで、LP制作の流れを一つにする

ローカルで実画面を確認する

ここから8月27の中で、今後のLP事業で使いたい制作フローをはっきり決めました。まず、制作したLPは自分のパソコン上でローカルサーバーを立て、実画面で確認します。

コード上だけで判断せず、Chromeのシークレットウィンドウなどで実際に読者が見る画面に近い状態を自分の目で確認します。

Netlifyでクライアントさんに確認してもらう

ローカルで実画面を確認したら、その制作途中の状態をNetlifyへ反映します。Netlifyは、簡単に言うと作ったLPをインターネット上で見られる形にしてくれるサービスです。

クライアントさんは、URLを開くだけでLPの現状を確認できます。まだ完成ではない段階から共有し、途中で方向のズレを防ぐことができます。

同じLPを育て、完成版をWordPressへ移植する

ここが今回の一番大事な考え方でした。Netlify確認用のLPと、WordPress公開用のLPを別々に作り分けないということです。

制作途中から、同じLP本体を修正し続けます。クライアントさんから修正依頼があれば、そのLP本体を直します。修正後は再度Netlifyで確認していただきます。そして、承認後にその完成版をそのままWordPressへ移植します。

【今後のLP標準制作フロー】

①Claude Code等でLPを制作
②ローカルサーバーで確認
③Chromeのシークレットウィンドウで実画面を確認
④制作途中の状態をNetlifyへ反映
⑤クライアントさんにNetlifyで確認してもらう
⑥同じLP本体を修正
⑦再度Netlifyで確認
⑧承認後、その完成版をWordPressへ移植

もし、Netlify確認用とWordPress公開用を別々に管理していたら、片方だけ直してしまったり、文章や色が微妙に違ったり、「どちらが最新版か分からない」という状況が起きやすくなります。

制作物を増やすほど、管理する対象も増えます。確認も、修正も、完成も、同じものを育てていく方が、今の私の作業スタイルには合っています。

LP制作でも、「次も同じようにできる型」を残したい

案件ごとにゼロから考えない

以前の私は、案件が入るたびに「今回はどうやって作ろう？」とゼロから考えることが多くありました。もちろん、案件ごとに考えるべき部分は残ります。

ただ、案件が増えれば、毎回ゼロから考える方法では、自分の時間がどんどん取られます。次の案件で同じことに悩まないための「型」を残すことが、事業を続けるうえで必要だと感じています。

仕事が増えたときに必要なのは、自分がもっと速く作業することだけではありません。同じ仕事を次回も迷わず進められる「型」を残すことが、事業を増やすためには必要なのだと思いました。

美容室で作っている仕組みとつながる

ここまで書いていて、美容室経営で最近考えていることと同じだな、と感じました。掛け持ち施術・レジ・緊急対応・スタッフさん不在時の対応・日報・求人・労務など、その場の人が毎回ゼロから考えるのではなく、店としての型を作ることを意識しています。

LP制作も同じでした。最初は単なる制作方法の問題に見えます。でも、自分しか分からないやり方で仕事を続けていれば、案件数が増えるほど自分しか対応できない仕事になっていきます。

もちろん、美容室と制作事業をすべて同じ枠組みで考えるつもりはありません。ただ、制作事業でも、美容室経営と同じように「型を作る」という発想は必要だと感じました。

【自店に置き換えて考える：仕組み化】

・その仕事を次回も同じ順番で進められますか？
・誰かへ説明できる形になっていますか？
・「自分が覚えているから大丈夫」になっていませんか？

今の段階では、今回の求人LPも私自身が細かく確認しながら作っています。「仕組みが完成して、誰でも制作できるようになった」段階ではありません。

まだ、自分で制作しながら、どこで間違えたか・どこで確認が必要か・どういう順番ならやり直しが減るかを見つけている途中です。それでも、今回決めた制作フローを残しておけば、次回からは同じことで迷わなくて済む可能性が上がります。

未来の自分への経営メモ

最後に、8月27の一日から自分の中に残しておきたいことを、未来の自分へのメモとしてまとめておきます。今の私が今後のLP事業を続けるうえで、忘れたくない項目です。

【未来の自分への経営メモ】

・最初から完成まで作らない
・まず全体ワイヤーフレームを見る
・骨組みが合ってから細部へ進む
・「前回と同じ」と言うだけで済ませず基準を明確にする
・完成イメージを頭の中だけに置かない
・情報不足を想像で埋めない
・求人条件は事実確認を優先する
・写真が変わることも考えてデザインする
・確認方法も制作工程の一部
・ローカルで実画面を見る
・Netlifyでクライアントさんに確認してもらう
・修正は同じLP本体へ反映する
・確認用と公開用を必要以上に分岐させない
・完成後そのLPをWordPressへ移植する
・最新版を一つにする
・やり直した原因を次回のルールに変える
・案件ごとにゼロから考えない
・「自分が速くなる」だけではなく「仕事が再現できる」を目指す
・美容室でも制作事業でも型を残す
・自分しか分からない仕事を減らす

8月27は、LP制作で何度もやり直しました。でも、やり直したこと自体より、「なぜやり直したのか」を次の制作フローへ残せたことに意味があると思っています。案件が増えても毎回ゼロから悩まないように、制作事業にも少しずつ自分なりの型を作っていきます。