البار & المطاعم

La Raffinerie

فرعان وعلامة واحدة: كان على الموقع أن يخدم الاثنين دون أن يُضعف أيًا منهما.

السنة
2026
مدة التصميم
4 أسابيع
التقنيات
React · Vite · Tailwind · Framer Motion · Vercel
  • التصميم
  • التطوير
  • SEO المحلي متعدد المواقع
  • كتابة المحتوى
زيارة الموقع(علامة تبويب جديدة)ناقش معنا مشروعًا مماثلًا

نسخة تجريبية نشرتها Kayzen Web على عنوان Vercel؛ أما النطاق النهائي فهو ملك للعميل.

https://la-raffinerie-lyon.vercel.app/
الصفحة الرئيسية لموقع La Raffinerie — البار & المطاعم، من إنجاز Kayzen Web
منشأتان، ونطاق واحد
2
الأداء في Lighthouse
95/100
إتاحة الوصول في Lighthouse
100/100
نقطة الانطلاق

ما كان يجب حلّه.

السياق

La Raffinerie حانة للبيرة الحرفية والتاباس والكوكتيلات، بعنوانين في ليون: Saxe (ليون 3) وVaise (ليون 9).

القيد

وجود منشأتين يطرح مشكلة كلاسيكية في SEO المحلي: إما إنشاء موقعين وتقسيم سلطة النطاق، وإما الاكتفاء بموقع واحد والاختفاء في استعلامات الأحياء. يُضاف إلى ذلك قائمة بيرة تتبدل باستمرار، وجمهور لا يعرف دائمًا ماذا يختار.

الحل

نطاق واحد، وصفحة مخصصة لكل منشأة، لكل منها بطاقتها الكاملة وترميزها الخاص. وتصبح قائمة البيرة دليلًا للتذوق: تحمل كل بيرة نوعها، ودرجة مرارتها، ونسبة كحولها، واقتراحًا لتاباس ترافقها. لا نسرد، بل ننصح.

نتائج مقيسة لا مُعلنة

النتائج المسجّلة عند التسليم.

نتائج Lighthouse للموقع في بيئة الإنتاج. ننشرها كما هي: وعندما تكون إحداها منخفضة، نكتب سببها وخطة تصحيحها أدناه بدلًا من التكتم عليها.

PageSpeed
95
الأداء: 95 من 100
100
إمكانية الوصول: 100 من 100
96
أفضل الممارسات: 96 من 100
100
تحسين محركات البحث: 100 من 100
التصميم والإدارة الفنية

كل خيار، وسببه.

  1. دليل بدل قائمة

    مرشّحات بحسب النوع والمرارة، واقتراح تاباس لكل بيرة. الزبون المتردد بين أربعين صنفًا زبون سيطلب ما اعتاد عليه — أو لن يطلب شيئًا.

  2. لكل عنوان شخصيته

    صور وأجواء ومواعيد خاصة بكل من Saxe وVaise، على أساس بصري مشترك. صفحتان توأمان كانتا ستُعدّان حشوًا من قِبل الزائر ومن قِبل Google على حدّ سواء.

  3. حركة في خدمة الخامة

    تُبرز حركات الظهور الملمس — الرغوة، والنحاس، والأردواز. وتختفي تمامًا إذا طلب المستخدم تقليل الحركة.

لوحة ألوان المشروع

  • أردوازي

    #22262B

    الخلفية الرئيسية

  • نحاسي

    #C0763C

    الإجراء، اللمسات البارزة

  • رغوة

    #EFE6D4

    النص، الأسطح الفاتحة

  • حشيشة الدينار

    #6C7A3F

    وسوم الأنواع

النظام الطباعي

العناوين

Bebas Neue

النص الأساسي

Inter 400

خط بأحرف كبيرة مضغوطة للعناوين — لغة مصانع البيرة الحرفية — يوازنه خط Sans-serif واضح جدًا في بطاقات التذوق.

الهندسة

ما يوجد تحت الغطاء.

  • React
  • Vite
  • Tailwind
  • Framer Motion
  • Vercel

  1. قائمة الطعام بيانات، لا HTML

    البيرة والتاباس محفوظة في ملف بيانات مُنمَّط. إضافة صنف لا تتطلب لمس الترميز، ولا المخاطرة بكسر التخطيط.

  2. حركة مدروسة

    لا تُحمّل Framer Motion إلا الصفحات التي تتضمن حركة فعلًا. أما صفحات المعلومات (الوصول، والمواعيد) فلا تُنزّل منها سطرًا واحدًا.

تحسين محركات البحث

كيف يصبح الموقع قابلًا للعثور عليه.

  1. بطاقتا LocalBusiness مستقلتان

    تحمل كل منشأة عقدتها الخاصة بعنوانها وإحداثياتها الجغرافية ومواعيدها. كتلة واحدة لعنوانين تمنع Google من ربط البطاقتين ربطًا صحيحًا.

  2. استعلامات الأحياء

    «حانة بيرة في Saxe»، «حانة في Vaise ليون 9» بدل «حانة في ليون». صفحة الحيّ تتفوّق في عبارات لا تستطيع صفحة العلامة التجارية استهدافها.

  3. محتوى تذوق قابل للفهرسة

    تجيب بطاقات البيرة عن عمليات بحث حقيقية («بيرة IPA مرّة في ليون»، «تاباس مع بيرة كهرمانية») وتجلب زيارات استكشافية لا يلتقطها العنوان وحده.

إمكانية الوصول

قابل للاستخدام من الجميع.

منذ يونيو 2025، يفرض القانون الأوروبي لإمكانية الوصول (European Accessibility Act) إتاحة الوصول الرقمي على شريحة واسعة من الخدمات الإلكترونية. نتعامل معها منذ مرحلة التصميم، لا كتدارك لاحق.

  1. 100/100 مع مرشّحات تفاعلية

    المرشّحات أزرار أصلية مع إعلان حالة الضغط، ويُبلَّغ عدد النتائج في منطقة حيّة (live region) بعد كل تغيير.

هيكل الموقع

ما تم تسليمه.

  • الرئيسية
  • Saxe (ليون 3) — بطاقة كاملة
  • Vaise (ليون 9) — بطاقة كاملة
  • دليل البيرة
  • التاباس والكوكتيلات
  • التواصل
المنهجية

مراحل سير المشروع.

  1. استراتيجية تعدد العناوين

    الموازنة بين نطاق واحد وصفحتين، وترميز لكل منشأة.

  2. محتوى التذوق

    الأنواع، والمرارة، والتوافقات: قائمة الطعام تصبح دليلًا.

  3. التصميم

    أساس مشترك، وشخصية لكل عنوان.

  4. التطوير

    بيانات مُنمَّطة، وحركة تُحمَّل عند الطلب.

أسئلة

ما يُطرح علينا كثيرًا.

نطاق واحد، مع صفحة كاملة لكل عنوان. النطاقان يقسّمان السلطة ويجعلانك تنافس نفسك؛ والصفحة الواحدة تجعلك غير مرئي في استعلامات الأحياء، وهي التي تحقق التحويل.

أعمال أخرى

العودة إلى أعمالنا

مستوى الإتقان نفسه، لموقعك.

تدقيق مجاني لموقعك الحالي، وعرض سعر خلال 24 ساعة، وتعليل مكتوب — مثل الذي قرأته للتو. الدفع على ثلاث دفعات دون رسوم إضافية، مع التحقق من برامج الدعم المحلية قبل التوقيع.

حجز موعدعرض الأسعار
مشاركة