Boucherie de l'Avenue
職人の肉店を高級メゾンとして扱う。実際にそうなのだから。
- 年
- 2026
- 制作期間
- 3週間
- 技術スタック
- React · Vite · Tailwind · Vercel
- ビジュアルアイデンティティ
- デザイン
- 開発
- ローカルSEO

- ゼロから作ったビジュアルアイデンティティ
- 1
- Lighthouse SEO
- 100/100
- パフォーマンス — 対応中の課題
- 69/100
解決すべき課題。
背景
リヨン9区にある職人の精肉店で、生産者から直接仕入れる短い流通経路の肉を扱い、ケータリングサービスも提供しています。
制約
地元の食料品店は、ほぼ例外なくオンラインでの見せ方がうまくいっていません。フラッシュを焚いた写真、デフォルトのままの書体、肉の産地についての情報はなし。スーパーとの価格差を正当化するはずの職人の技が、どこにも見えていませんでした。
解決策
職人を、高級メゾンと同じように扱うこと。オーダーメイドのアイデンティティ、丁寧なタイポグラフィ、ディレクションした写真、産地についての完全な情報。お客様が納得したいのは価格です。その材料を渡さなければなりません。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
このために作ったビジュアルアイデンティティ
モノグラム、配色、タイポグラフィのシステムを専用に設計し、その後、店舗の印刷物にも展開しました。サイトは、このアイデンティティの出力先のひとつにすぎませんでした。
商品ごとに産地を表示
品種、産地、そして判明している場合は生産者。職人とセルフサービスの売り場を分けるのはこの情報であり、以前はどこにも載っていませんでした。
ディレクションした写真
自然光、ニュートラルな背景、直接のフラッシュは使わない。精肉店では、照明の悪い写真は狙いとまったく逆の効果を生みます。
プロジェクトのカラーパレット
ディープボルドー
#5E1F2B
アイデンティティ
マーブルホワイト
#F8F6F3
背景
インク
#1F1C1B
テキスト
ブラス
#A98545
罫線とモノグラム
タイポグラフィ体系
見出し用書体
Cormorant Garamond 600
本文用書体
Jost 400
店名にはオートクチュールのようなセリフ体、商品情報には簡潔なジオメトリック体。この2つのコントラストが、ポジショニングのすべてを担っています。
その裏側にある技術。
- React
- Vite
- Tailwind
- Vercel
対応中のパフォーマンス課題
パフォーマンスは69です。原因は、クライアントのコンテンツから引き継いだ未最適化の商品ギャラリーです。AVIFへの移行とsrcsetによるサイズ指定は、見積もりと計画が済んでいます。スコアは公開されていて誰でも検証できるので、こうして書いています。
静的サイト
データベースはなく、商品カタログはデータファイルです。店主から季節ごとの変更が届けば、1時間以内に公開されます。
検索で見つけてもらうための仕組み。
「精肉店 リヨン9区」「職人の肉屋 ヴェーズ」
競合が非常に少なく、すぐに購入する意図を持った近隣検索のクエリです。これを入力する人は、情報を調べたいのではなく、今日どこで肉を買うかを探しています。「精肉店 リヨン」を狙えば、市内全域のチェーン店と競うことになり、しかも9区まで足を運ぶことのないトラフィックしか得られなかったでしょう。
ButcherShopのマークアップ
schema.orgには専用の型があります。汎用のLocalBusinessではなくこれを使うことで、Googleによる店舗のカテゴリ分けが改善されます。
納品したもの。
- トップ
- 肉と産地
- ケータリング
- お店について
- アクセスと営業時間
プロジェクトの流れ。
アイデンティティ
モノグラム、配色、タイポグラフィのシステム、印刷物への展開。
コンテンツ
商品ごとの産地、ケータリングのメニュー。
デザインと開発
静的サイト、型付きのカタログ。


