10日間で、PRを14本マージしました。そのうち10本は、DBの構造を変えていません。
前回は、Figmaの1枚をSupabaseまで通した話を書き、「次のLPでは、この型を使えます。」と結びました。今回がその次のLPです。Flowbaseが Figma Community で公開している「Real Estate Template」をもとに、不動産会社の架空のLPを作りました。
選んだ理由は、Figma Communityで人気のあるテンプレートだったからです。多くの人が見ている完成形に、どこまで近づけられるかを試したいと思いました。
物件は、別の棚に置く
最初に作ったのは、LPではなく物件のコレクションでした。9月30日のPR #6で、properties を追加しています。持たせた項目は、物件名、スラッグ、写真、ベッドルーム数、バスルーム数、広さ、所在地、価格、取引種別、物件種別です。
LPの側には、物件そのものを書きません。物件一覧のブロックから、関連（relationship）で参照するだけです。
{
name: 'properties',
type: 'relationship',
relationTo: 'properties',
hasMany: true,
maxRows: 6,
}
表示できるのは最大6件で、管理画面で並べた順が、そのまま表示順になります。物件はLPから独立しているので、同じ物件を別のLPに並べることもできます。
関連先から取ってくる項目は、defaultPopulate で、カードに必要な6つ（物件名、スラッグ、写真、ベッドルーム数、バスルーム数、広さ）に絞りました。所在地と価格は、今のカードには出していません。
物件を別の棚に分けたのは、長く開発を続け、量産できる環境が欲しかったからです。その場しのぎで動く作り方は選びませんでした。物件をLPの外に出しておけば、LPを作り直しても物件のデータは残ります。具体的な設計は、Claudeの提案を受けて、方針を決めて実行しました。
データの部品と、見た目の部品を分ける
物件一覧は、3段に分かれています。
-
PropertyListingsBlock：Payloadのデータを受け取り、カード用の形に直す -
RealEstateListings：見出しと一覧を並べる -
PropertyCard：物件1件分のカード
下の2つは、Payloadのことを知りません。受け取った文字と数字を描くだけです。削除された物件のように、中身を取れずIDだけが残ったものは、一番上の段で取り除いています。
この分け方が効いたのは、後半でした。物件一覧を調整したPR #7、#15、#16は、どれも見た目の部品だけの変更で、Payloadの設定には触れていません。
項目は同じで、見た目だけ替える
不動産LPでは、「特徴セクション」と「お客様の声」のブロックを、TypishやLedgerlyのLPと共有しています。不動産用に項目を増やせば、DBの列も増えます。そこで、項目は共通のまま、描く部品だけを替えました。
LPのデザインは、theme.ts の1か所で決めます。先頭のヒーローが不動産用（realEstateHero）なら、不動産テーマです。不動産テーマのときだけ、RenderBlocks が2つのブロックを不動産用の部品に差し替えます。項目が同じなので、スキーマは変わりません。
ただし、slugが real-estate で始まるLPも不動産テーマにする、暫定の判定がまだ残っています。管理画面でヒーローを入力するまでの、つなぎのつもりでした。
器を先に、見た目は後から
DBを変えるPRと、見た目を変えるPRは分けました。
10月2日のPR #9で、ヘッダー、ヒーロー、CTA、フッターのブロックを先に出しています。見た目は仮のままで、増えたテーブルは14個です。DBの変更は追加だけでした。
それ以外のPRは、見た目を合わせるだけです。PRの本文には毎回「DB変更なし」と書き、TypishとLedgerlyのLPが崩れていないことを確かめてからマージしました。冒頭の「10本」は、これらのPRです。
器を先に固めておくと、残りのPRが小さくなります。DBへの影響も、PRごとに言い切れます。
Figmaの数字を、そのまま写す
Figmaは、Figma公式プラグインのクラウドMCPから読みました。Real Estateのファイルだけで、約33回呼んでいます。
使ったツールは4つです。
-
get_design_context：構造と数値 -
get_metadata：階層とサイズ -
get_screenshot：見た目の確認 -
use_figma：マスクかどうかの確認
詰まったところも4つありました。
- fileKey：MCPは、URLに含まれるfileKeyでファイルを決めます。必要なのは、Communityのページの URL ではなく、自分のDraftsに複製したファイルのURLでした。URLを貼り損ねると、ファイルを読みに行けません。
-
角丸と影：
get_metadataで取れるのは、名前・位置・大きさまでです。角丸や影は取れないので、get_design_contextで読み直しました。 -
アセットURLの期限：画像のアセットURLは、7日で失効します。矢印などのSVGはダウンロードして、リポジトリの
public/figma/real-estate/に置きました。 -
マスク：ヒーローの写真の下に、黒い長方形が2枚あります。
get_design_contextでは、マスクなのか、ただの背景なのか区別がつきません。use_figmaでisMaskを見て、1枚はマスク、もう1枚は背景だと分かりました。
見た目の調整では、Figmaの数値をコードに写しました。物件一覧の見出しは、DM Sansの太字で、大きさ50px、字間 -1.26px です。Tailwindでは tracking-[-0.025em]（約 -1.25px）と書き、近い値で合わせています。
見出しの上には、金色の線（169×4px）があります。間隔はFigmaの座標から計算しました。線が Y 0〜4、見出しが Y 21 なので、間は17pxです。
物件カードのアイコンだけは、FigmaのSVGを使っていません。lucideの近いもの（BedSingle、Bath、Frame）で代用しました。
ただ、数字は写せても、構造は写せませんでした。Figmaでは、ヒーローの部品がページの直下にばらばらに置かれ、物件カードも一覧の枠の外にあります。FigmaのノードとPayloadのブロックは、構造が一致しません。ブロックの分け方は、自分で設計し直しました。
描いていないことは、推測で作る
Figmaのデザインは、1440px幅の静止画だけでした。動きの指定も、スマホ幅のデザインもありません。
お客様の声では、3人のうち中央の人物だけ、背景が黒くなっています。これを「選択中」と読み取り、クリックで切り替わる形にしました。推測が外れていたら、1ファイルを直せば、固定表示に戻せます。そのために、切り替えの処理はそのファイルの中だけに置いています。
物件一覧の上の絞り込みバーは、見た目だけです。操作できる部品は使わず、支援技術からも隠し（aria-hidden）、READMEに「未実装」と書きました。
フッターの最下部には、10月9日のPR #19で、テンプレートの出典表記を足しました。Figmaのデザインにはない行です。
物件を変えたら、LPを作り直す
物件を変更・削除すると、LPのページを作り直させます。
revalidatePath('/lp/[slug]', 'page')
どのLPがその物件を使っているかは追わず、/lp/[slug] のページをまとめて作り直します。作り直しは次にアクセスされたときなので、LPが少ないうちは、これで足ります。
線をもう1本
#4では、文章と画像の参照をデータに、飾りを絵のままにしました。今回は、物件をコレクションとして置き、LPのブロックはそれを指すだけにしています。
正直に言うと、しんどかったです。
Ledgerlyのときと違い、今回は作っている途中で、バージョンアップの準備や、DBを開発用と本番用に分ける作業が入りました。LPを作りながら、基盤も触っていたので、今自分が何をしているのかを見失いかけた時間がありました。
完走できたのは、AI（Claude）に助けてもらったからです。ただ、助けてもらうには条件がありました。一度に1つのことだけをやる。やることを短く区切る。いま何を触っているかを、毎回確かめる。この進め方を守ったから、迷子にならずに済みました。
次にやること
- 絞り込みバーを、実際に動くようにします。
- slugによる暫定のテーマ判定を消します。
- 物件カードの細部（名前の行の高さ、数字やアイコンの大きさ）を、Figmaと見比べます。
- 次の拡張ログ #4 では、DBの構造を変えた、残りの4本のPRで起きたことを書きます。
開発を進めて、案件獲得に一歩でも近づければと思っています。
Payloadバックエンド型録#1（フロントにコンポーネントがあるなら、バックエンドにあってもいい）
Payloadバックエンド型録#2（コーポレートサイトの型は、有限である）
Payloadバックエンド型録#3（棚は作った。読む場所が、まだない。）
Payloadバックエンド型録#4（Figmaの1枚を、Supabaseまで通した）
拡張ログ#1（SMTPを使わずn8n×Slack）
拡張ログ#2（テンプレートをやめてReactコンポーネント）
拡張ログ#3（SaaSを1つ増やすたびに、時間を溶かすリスクも増える）
この記事のLPは、Flowbaseの「Real Estate Template by Flowbase.co」（Figma Community、CC BY 4.0）をもとに、改変して作っています。
元のテンプレート：https://www.figma.com/community/file/877745249867825511/real-estate-template-by-flowbase-co
ライセンス：https://creativecommons.org/licenses/by/4.0/
実際に構築したコーポレートサイトは、以下で公開しています。
https://www.kuros-works.com/
実際に構築したコーポレートサイトのソースコードは、GitHubで公開しています。
https://github.com/kuros-works/kuros-corporate-site