SUSHI SOKAI
鮨 蒼海
江戸前鮨・銀座
- 読み手
- 記念日や接待を、数週間前に決めている人
- 抱えている問い
- 「この店を選んで間違いないか」
- 答え方
- 十五本で唯一の複数ページ。献立と大将を読ませてから、別ページのフォームで受ける。
装置 予約フォーム
sushi.afuku5906.com ／ src/app/(sokai)
SPEC WORKS
自主制作のランディングページ 十五本
飲食8・医療6・施術1。法規制は三種類、配色と書体は十五通り。骨格を一度も使い回していません。
十五本はすべて自主制作です。実在する店舗・医療機関ではありません。
架空の依頼主なので、予算や社内事情で曲がったところがひとつもありません。裏を返せば、ここに出ているのは設計の判断だけです ── 誰が読むか、いつ読むか、何に縛られているか。実際の仕事でも、最初に決めているのはこの三つです。
- 3種類の法規制
- 医療広告・あはき法・食品表示
- 30の書体
- 十五通りの組み合わせ
- 0件の使い回し
- 共通テンプレートを持ちません
01Comparison
対比
業種が同じ二本を並べると、何を変えたのかだけが残ります。ここに 出しているのは仕上がりではなく、その手前の判断です。
どちらもフランス料理。読まれる時刻が違う ── 数週間前の昼と、今夜十九時。
- 読み手
- 数週間先の一日を、いま決めている人
- 十九時に、今夜どこで食べるかを決めている人
- 抱えている問い
- どんな時間になるのか
- いくらになるか
- 答え方
- 主題は料理ではなく昼光。ガラス屋根は写真を使わずCSSで描き、光の変化そのものを見せる。
- コースが無い店なので、黒板をそのままページの骨格にした。読ませる二つの帯だけが明るい。
- 主装置
- 時刻を動かすと室内の光が変わる。何時に予約するかを決める装置。
- 会計の概算。アラカルトで本当に不安なのは合計なので、席料込みで先に足す。
- 書体
- Zen Old Mincho / Cormorant Garamond
- Zen Kaku Gothic Antique / Bodoni Moda
- 写真
- 借用1（ヒーロー）
- 借用1（ヒーロー・スクリムなし）
02Three decisions
先に決める三つ
01
誰が読むか
業種ではなく、読み手で決める。
同じフランス料理でも、数週間前に予約する人と今夜決める人とでは、必要な情報も、色も、書体も一致しません。業種が重なっているのは鮨3本・フランス料理3本・小児科2本ですが、重なった二本が似た見た目になったことは一度もありません。
02
いつ読むか
時刻が、色と文字サイズを直接決める。
深夜零時に子どもの熱で読む画面と、朝七時二十分に段取りを立てる画面は別物です。痛みを抱えた六十代が読む一本では、明朝体を見出しにしか使わず、本文には一度も使っていません。
03
何に縛られているか
規制は制約ではなく、構造そのもの。
医療広告ガイドラインは体験談を禁じるので、六つの医院はすべて「よくあるご相談」を代わりに持ちます。施術所は適応症を書けないので、最初の装置が「保険はききません」と言う側に立っています。禁止事項を避けて通るのではなく、禁止事項からページの骨格を作る。
03Fifteen
十五本
制作順に並べています。後の一本は、前の一本に対して書かれている ことが多いので ── 二本目のフランス料理は一本目と逆から、二本目の 小児科は一本目が答えていない問いから始めています。
飲食店
八本。飲食店営業許可のもとにあり、広告の規制は受けない。
YAKO
鮨バー 夜光
深夜の立ち食い鮨・新橋
- 読み手
- 終電までの一時間を持て余している人
- 抱えている問い
- 「いま開いているか、いくらで済むか」
- 答え方
- 暗い画面に、開いているかどうかと値段だけを大きく。読ませる量を最小にする。
装置 OpenStatus
yako.afuku5906.com ／ src/app/restaurants/yako
VERRIÈRE
レストラン ヴェリエール
フランス料理・神楽坂
- 読み手
- 数週間先の一日を、いま決めている人
- 抱えている問い
- 「どんな時間になるのか」
- 答え方
- 主題は料理ではなく昼光。ガラス屋根は写真を使わずCSSで描き、光の変化そのものを見せる。
装置 LightPanel
verriere.afuku5906.com ／ src/app/restaurants/verriere
YŪGEN
鮨 幽玄
八席・一日一組の鮨・西麻布
- 読み手
- 一日一組の席を取ろうとしている人
- 抱えている問い
- 「いつなら空いているのか」
- 答え方
- 空席を探させない。一日一組という条件のほうを先に見せる。
装置 SeatingClock
yugen.afuku5906.com ／ src/app/restaurants/yugen
MUGIBI
薪窯とパスタ 麦火
薪窯と手打ちパスタ・西荻窪（むぎび）
- 読み手
- 近所に住んでいて、今日ふらっと入りたい人
- 抱えている問い
- 「予約なしで入れるか」
- 答え方
- 十五本で唯一の飛び込み可。だから献立ではなく、窯の一日でページを組み立てた。
装置 KamaGauge軸 一日（火の温度曲線）
mugibi.afuku5906.com ／ src/app/restaurants/mugibi
TOUJOURS
ビストロ トゥジュール
通し営業のビストロ・蔵前
- 読み手
- 十九時に、今夜どこで食べるかを決めている人
- 抱えている問い
- 「いくらになるか」
- 答え方
- コースが無い店なので、黒板をそのままページの骨格にした。読ませる二つの帯だけが明るい。
装置 Addition軸 一週間（曜日ごとの黒板）
toujours.afuku5906.com ／ src/app/restaurants/toujours
PENOMBRA
PENOMBRA
焙煎所とコーヒー・南青山（ペノンブラ）
- 読み手
- 午後四時にひとりで入って、一杯だけ買って居座る人
- 抱えている問い
- 「なぜ一杯 ¥1,500 なのか」
- 答え方
- この商売が口に出さない問いなので、そこだけを主題にした。上質ではなく開示で立てる。
装置 CupCost軸 一つのロットの一生
penombra.afuku5906.com ／ src/app/restaurants/penombra
CARNET
CARNET
フランス料理・代々木上原（カルネ）
- 読み手
- 自分ではなく、誰かのために予約している人
- 抱えている問い
- 「この人を連れて行って、大丈夫か」
- 答え方
- できることではなく、できないことを同じ大きさで書く。店の名前がそのまま答えになっている。
装置 Contraintes軸 一つのコース（皿ごと）
食品表示法・景品表示法・個人情報保護法
carnet.afuku5906.com ／ src/app/restaurants/carnet
医療機関
六本。医療法のもとにあり、医療広告ガイドラインで縛られる。
MIZUKI
みずき整形外科・リハビリテーションクリニック
整形外科・リハビリ・経堂
- 読み手
- 膝や腰が痛くて、近所の整形外科を探している人
- 抱えている問い
- 「何時に行けば待たずに済むか」
- 答え方
- 順番受付の医院なので、CTAは予約ではなく電話。本文は15pxを下回らない。
装置 ReceptionStatus
医療広告ガイドライン
mizuki.afuku5906.com ／ src/app/clinics/mizuki
SHIROKANE
しろかね皮膚科クリニック
皮膚科・白金台
- 読み手
- 自由診療を受けるかどうか迷っている人
- 抱えている問い
- 「結局いくらで、何回で、何が起きうるのか」
- 答え方
- 総額・標準的な回数・副作用を一枚のカードに同居させる。表と脚注に分けない。
装置 TodayPanel
医療広告ガイドライン
shirokane.afuku5906.com ／ src/app/clinics/shirokane
KOMOREBI
こもれび小児科クリニック
小児科・武蔵小杉
- 読み手
- 深夜零時、子どもの様子がおかしくて怖い親
- 抱えている問い
- 「これは、いま病院に行くべきか」
- 答え方
- 受診の目安をヒーロー直下に置く。ヘッダー最上段は自院の番号ではなく #8000 と 119。
装置 SymptomTriage
医療広告ガイドライン
komorebi-kids.afuku5906.com ／ src/app/clinics/komorebi
NAGISA
なぎさ内科・糖尿病内科
内科・糖尿病内科・辻堂
- 読み手
- 健診の結果票を渡されたが、どこも痛くない人
- 抱えている問い
- 「この数字は、放っておいていいのか」
- 答え方
- 症状ではなく心当たりのチェックから始める。基準値は判定ではなく、読み方として出す。
装置 ValueScale
医療広告ガイドライン
nagisa.afuku5906.com ／ src/app/clinics/nagisa
KANADE
かなで耳鼻咽喉科クリニック
耳鼻咽喉科・浦和
- 読み手
- 朝起きたら片方の耳が聞こえにくくなっていた人
- 抱えている問い
- 「これは、いつまでに行けばいいのか」
- 答え方
- 危険度ではなく「どれくらい早く」で並べる。こもれびと同じ梯子を二度書かない。
装置 OrganFinder軸 一年（花粉の暦）
医療広告ガイドライン
kanade.afuku5906.com ／ src/app/clinics/kanade
SUKUSUKU
すくすく小児科クリニック
小児科・病児保育室・豊洲
- 読み手
- 朝七時二十分、熱のある子と十時の会議を抱えた親
- 抱えている問い
- 「今日という日は、どう回るのか」
- 答え方
- 背骨は症状の一覧ではなく時計。こもれびの梯子はここでは一度も繰り返さない。
装置 TodayLine軸 一日（診療と保育の二レーン）
医療広告ガイドライン
sukusuku.afuku5906.com ／ src/app/clinics/sukusuku
施術所
一本。柔道整復師法・あはき法のもとにあり、書ける項目が限定列挙されている。
TENOHIRA
てのひら鍼灸整骨院
鍼灸・接骨（施術所）・大森
- 読み手
- 痛みを抱えていて、多くは六十代以上の人
- 抱えている問い
- 「保険はきくのか」
- 答え方
- 答えはたいてい「きかない」。それをヘッダーの最上段、店名より上に置いた。
装置 HokenFinder軸 施術と料金（三つのビュー）
柔道整復師法・あはき法（限定列挙）
tenohira.afuku5906.com ／ src/app/care/tenohira
04Regulated
規制のある仕事
十五本のうち七本は、書けることが法律で決まっている業種です。禁止 事項を避けて通るのではなく、そこからページの骨格を作りました。
医療広告ガイドライン
医療機関 6本
- 体験談は掲載できない ── 代わりに「よくあるご相談」を全六本に置いた
- 最上級表現・ビフォーアフター写真・効果の約束はできない
- 保険診療の料金は「目安」の幅で書く（実額は保険点数で決まるため）
- 自由診療は総額・標準的な回数・リスクを一枚に同居させる
柔道整復師法・あはき法
施術所 1本
- 書けることが限定列挙 ── 適応症は、事実であっても書けない
- 語彙も規制のうち：施術／受付時間／問診・徒手検査（治療・診療時間・診断ではない）
- 健康保険が使えないケースを、使えるケースと同じ分量で書く
- 通う見通しの試算に「二週間変わらなければ医師へ」という停止条件を必ず入れる
食品表示法・景品表示法・個人情報保護法
飲食店 1本
- アレルゲンは、できることとできないことを同じ大きさで書く
- 「絶対に混入しません」とは書かない ── 同じ厨房である以上、書けない
- 予約時に預かった事情を、どこに、いつまで置くのかを明記する
05How
つくり方
一本あたり、作る部品は四つだけです。
src/lib/<brand>.ts
内容
文言・料金・時間割・データ構造。JSXに文字を直接書かないので、修正はここ一箇所で済みます。
globals.css の --<brand>-*
配色
ブランドごとに接頭辞を分ける。十五本ぶんの色が同じファイルにありながら、一本の変更が他へ漏れません。
src/components/<brand>/
部品
ヘッダー・フッター・装置。共通コンポーネントを持たないので、他ブランドに似てしまうことがありません。
src/app/<category>/<brand>/
画面
レイアウトとページ。書体の読み込みもここ。ホスト名を見て独自ドメインに振り分けます。
そして一本のなかでは、同じ数字を二箇所に書きません。麦火の火の予定はゲージとグラフの両方を動かし、トゥジュールの黒板は四つのビューを、てのひらの料金表は三つのビューを動かします。片方だけ直る、という事故が起こらない形にしてあります。
06Estimate
概算
条件を入れると幅が出ます。装置が三つ以上になったときだけ、 金額を増やしたうえで減らすことをおすすめします ── そこから先は 読む人の注意がどれにも向かなくなるので。
制作費の目安
¥380,000〜¥560,000
期間の目安
4〜5 週間
見積書ではありません。条件が決まる前に当たりをつけるための幅で、実際の金額は打ち合わせのあとに出します。