地域の専門店

Boucherie de l'Avenue

職人の肉店を高級メゾンとして扱う。実際にそうなのだから。

年
2026
制作期間
3週間
技術スタック
React · Vite · Tailwind · Vercel
  • ビジュアルアイデンティティ
  • デザイン
  • 開発
  • ローカルSEO
https://www.boucherie-avenue.fr
Boucherie de l'AvenueのWebサイトのトップページ――地域の専門店、Kayzen Web制作
ゼロから作ったビジュアルアイデンティティ
1
Lighthouse SEO
100/100
パフォーマンス — 対応中の課題
69/100
出発点

解決すべき課題。

背景

リヨン9区にある職人の精肉店で、生産者から直接仕入れる短い流通経路の肉を扱い、ケータリングサービスも提供しています。

制約

地元の食料品店は、ほぼ例外なくオンラインでの見せ方がうまくいっていません。フラッシュを焚いた写真、デフォルトのままの書体、肉の産地についての情報はなし。スーパーとの価格差を正当化するはずの職人の技が、どこにも見えていませんでした。

解決策

職人を、高級メゾンと同じように扱うこと。オーダーメイドのアイデンティティ、丁寧なタイポグラフィ、ディレクションした写真、産地についての完全な情報。お客様が納得したいのは価格です。その材料を渡さなければなりません。

自己申告ではなく、計測値

納品時に計測したスコア。

本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。

PageSpeed
69
パフォーマンス:100点中69点
93
アクセシビリティ:100点中93点
100
ベストプラクティス:100点中100点
100
SEO:100点中100点
デザイン・アートディレクション

すべての判断に、理由がある。

  1. このために作ったビジュアルアイデンティティ

    モノグラム、配色、タイポグラフィのシステムを専用に設計し、その後、店舗の印刷物にも展開しました。サイトは、このアイデンティティの出力先のひとつにすぎませんでした。

  2. 商品ごとに産地を表示

    品種、産地、そして判明している場合は生産者。職人とセルフサービスの売り場を分けるのはこの情報であり、以前はどこにも載っていませんでした。

  3. ディレクションした写真

    自然光、ニュートラルな背景、直接のフラッシュは使わない。精肉店では、照明の悪い写真は狙いとまったく逆の効果を生みます。

プロジェクトのカラーパレット

  • ディープボルドー

    #5E1F2B

    アイデンティティ

  • マーブルホワイト

    #F8F6F3

    背景

  • インク

    #1F1C1B

    テキスト

  • ブラス

    #A98545

    罫線とモノグラム

タイポグラフィ体系

見出し用書体

Cormorant Garamond 600

本文用書体

Jost 400

店名にはオートクチュールのようなセリフ体、商品情報には簡潔なジオメトリック体。この2つのコントラストが、ポジショニングのすべてを担っています。

エンジニアリング

その裏側にある技術。

  • React
  • Vite
  • Tailwind
  • Vercel
  1. 対応中のパフォーマンス課題

    パフォーマンスは69です。原因は、クライアントのコンテンツから引き継いだ未最適化の商品ギャラリーです。AVIFへの移行とsrcsetによるサイズ指定は、見積もりと計画が済んでいます。スコアは公開されていて誰でも検証できるので、こうして書いています。

  2. 静的サイト

    データベースはなく、商品カタログはデータファイルです。店主から季節ごとの変更が届けば、1時間以内に公開されます。

SEO対策

検索で見つけてもらうための仕組み。

  1. 「精肉店 リヨン9区」「職人の肉屋 ヴェーズ」

    競合が非常に少なく、すぐに購入する意図を持った近隣検索のクエリです。これを入力する人は、情報を調べたいのではなく、今日どこで肉を買うかを探しています。「精肉店 リヨン」を狙えば、市内全域のチェーン店と競うことになり、しかも9区まで足を運ぶことのないトラフィックしか得られなかったでしょう。

  2. ButcherShopのマークアップ

    schema.orgには専用の型があります。汎用のLocalBusinessではなくこれを使うことで、Googleによる店舗のカテゴリ分けが改善されます。

サイト構成

納品したもの。

  • トップ
  • 肉と産地
  • ケータリング
  • お店について
  • アクセスと営業時間
進め方

プロジェクトの流れ。

  1. アイデンティティ

    モノグラム、配色、タイポグラフィのシステム、印刷物への展開。

  2. コンテンツ

    商品ごとの産地、ケータリングのメニュー。

  3. デザインと開発

    静的サイト、型付きのカタログ。

Q&A

よくいただくご質問。

スーパーより高い価格で売っているのであれば、必要です。アイデンティティは飾りではありません。お客様が店に入る前から、価格の上乗せ分に納得できるようにするものです。

同じ水準のこだわりを、あなたのサイトにも。

現在のサイトの無料診断、24時間以内のお見積もり、そして今お読みいただいたような書面での解説をお届けします。3回分割払い(手数料無料)に対応し、利用できる地域の補助金は契約前に確認します。

共有