من أكثر الأسئلة التي نسمعها قبل بدء أي مشروع: ما هي مقاسات تصميم موقع إلكتروني الصحيحة؟ والإجابة المختصرة: لا يوجد مقاس واحد ثابت، لأن موقعك سيُفتح على جوالات وأجهزة لوحية وشاشات كمبيوتر بأحجام مختلفة. لكن هناك مقاسات مرجعية ومعايير متفق عليها يعتمد عليها المصممون لضمان أن يظهر الموقع بشكل احترافي على كل الشاشات.
في هذا الدليل نجمع لك كل مقاسات تصميم الموقع التي تحتاجها: مقاسات الشاشات الأكثر شيوعًا، ونقاط التوقف (Breakpoints) في التصميم المتجاوب، وعرض منطقة المحتوى، ومقاسات البانر والصور والشعار والأيقونات، وأحجام الخطوط والأزرار.
لماذا تهم مقاسات تصميم الموقع؟
المقاسات الخاطئة تسبب مشاكل يلاحظها الزائر فورًا: صور مقصوصة أو مشوّشة، نصوص صغيرة لا تُقرأ على الجوال، تمرير أفقي مزعج، أو بانر رئيسي يغطي الشاشة دون أن يظهر العنوان. وكل ذلك ينعكس على:
- تجربة المستخدم ومعدل الارتداد: الزائر يغادر الموقع غير المريح بسرعة.
- سرعة التحميل: الصور الأكبر من حاجتها تبطئ الموقع.
- ترتيب الموقع في جوجل: جوجل تعتمد على نسخة الجوال من موقعك في الفهرسة (Mobile-first indexing)، وتهتم بتجربة الصفحة. تعرّف على خدمات تحسين محركات البحث SEO.
- معدل التحويل: زر الشراء الذي لا يظهر بوضوح على الجوال يعني مبيعات أقل.
مقاسات الشاشات الأكثر استخدامًا
وفق بيانات StatCounter العالمية لعام 2026، تتقارب حصة الزيارات تقريبًا بين الجوال والكمبيوتر، مع حصة صغيرة للأجهزة اللوحية، ويُعد مقاس 1920 × 1080 الأكثر شيوعًا على شاشات الكمبيوتر. لذلك يجب أن يُصمم الموقع للجوال والكمبيوتر بنفس الاهتمام. وهذه أشهر المقاسات المرجعية:
| نوع الجهاز | المقاسات الشائعة (عرض × ارتفاع بالبكسل) |
|---|---|
| كمبيوتر مكتبي | 1920 × 1080، 1536 × 864، 1440 × 900 |
| لابتوب | 1366 × 768، 1280 × 720 |
| جهاز لوحي | 768 × 1024، 820 × 1180، 1024 × 1366 |
| جوال | 390 × 844، 393 × 852، 430 × 932، 360 × 800 |
ملاحظة مهمة: هذه المقاسات هي «عرض نافذة العرض» (Viewport) بالبكسل المنطقي، وليست الدقة الفعلية للشاشة. فشاشة آيفون دقتها الفعلية أعلى بكثير، لكن المتصفح يعرض الصفحة على عرض نحو 390 بكسل. والأدق دائمًا أن تراجع تقارير Google Analytics لموقعك لتعرف الأجهزة التي يستخدمها زوارك فعلًا.
نقاط التوقف في التصميم المتجاوب (Breakpoints)
التصميم المتجاوب (Responsive Design) يعني أن تخطيط الصفحة يتغير تلقائيًا حسب عرض الشاشة. والنقاط التي يتغير عندها التخطيط تسمى Breakpoints. ومن أكثر النقاط استخدامًا (وهي المعتمدة في إطار Bootstrap الشهير):
| الفئة | العرض | التخطيط المقترح |
|---|---|---|
| جوال | أقل من 576 بكسل | عمود واحد، قائمة مخفية (همبرغر) |
| جوال كبير | 576 بكسل فأكثر | عمود واحد أو عمودان صغيران |
| جهاز لوحي | 768 بكسل فأكثر | عمودان |
| لابتوب | 992 بكسل فأكثر | ثلاثة أعمدة، قائمة كاملة |
| كمبيوتر مكتبي | 1200 بكسل فأكثر | التخطيط الكامل |
| شاشات كبيرة | 1400 بكسل فأكثر | نفس التخطيط مع حد أقصى لعرض المحتوى |
والمنهج الأفضل اليوم هو التصميم للجوال أولًا (Mobile-first): تبدأ بتصميم نسخة الجوال، ثم توسّع التخطيط تدريجيًا للشاشات الأكبر. هذا يجبرك على ترتيب الأولويات وإبراز المحتوى الأهم.
مقاس عرض منطقة المحتوى (Container)
حتى على الشاشات العريضة، لا يُفضّل أن يمتد النص من طرف الشاشة لطرفها؛ لأن الأسطر الطويلة جدًا مرهقة في القراءة. لذلك يُحدَّد حد أقصى لعرض المحتوى، وأكثر القيم شيوعًا:
- 1140 إلى 1320 بكسل لعرض المحتوى العام في الكمبيوتر.
- 720 إلى 800 بكسل تقريبًا لعمود النص في صفحات المقالات، بحيث يحتوي السطر على نحو 60 إلى 75 حرفًا لراحة القراءة.
- هوامش جانبية 16 إلى 24 بكسل على الجوال حتى لا يلتصق النص بحافة الشاشة.
وعند تصميم الموقع في برامج مثل Figma، يُفضّل أن تبدأ بإطار (Frame) عرضه 1440 بكسل للكمبيوتر و390 بكسل للجوال، مع شبكة أعمدة (Grid) من 12 عمودًا للكمبيوتر و4 أعمدة للجوال.
مقاسات صور الموقع
| العنصر | المقاس الموصى به (بالبكسل) | ملاحظات |
|---|---|---|
| بانر الصفحة الرئيسية (Hero) بعرض كامل | 1920 × 1080 أو 1920 × 800 | ضع النص والعناصر المهمة في المنتصف، ووفّر نسخة رأسية للجوال |
| بانر الصفحات الداخلية | 1920 × 400 إلى 1920 × 600 | ارتفاع أقل حتى يظهر المحتوى مباشرة |
| الصورة البارزة للمقال | 1200 × 630 (أو 1200 × 675) | نفس المقاس يناسب المشاركة على السوشيال ميديا |
| صورة المشاركة (Open Graph) | 1200 × 630 | تظهر عند مشاركة الرابط على واتساب وفيسبوك ولينكدإن |
| صور المنتجات في المتجر | 1000 × 1000 أو 1200 × 1200 | مربعة وبخلفية موحدة لتناسق شكل المتجر |
| صور المدونة داخل المقال | بعرض 800 إلى 1200 | حسب عرض عمود النص |
| الشعار في الهيدر | ارتفاع 40 إلى 80 تقريبًا | يُفضّل بصيغة SVG ليظهر حادًا على كل الشاشات |
| أيقونة الموقع (Favicon / Site Icon) | 512 × 512 | ووردبريس يولّد منها المقاسات الأصغر تلقائيًا |
وإذا كنت تصمم بانرات إعلانية تظهر داخل مواقع أخرى أو أغلفة لحسابات التواصل، فلها مقاسات مختلفة شرحناها في مقال ما هو البانر وأشهر مقاساته.
نصائح لتجهيز صور الموقع
- استخدم صيغة WebP أو AVIF لأنها أخف بكثير من JPG وPNG بنفس الجودة تقريبًا.
- اضغط الصور قبل الرفع: اجعل حجم الصورة الكبيرة أقل من 200 إلى 300 كيلوبايت قدر الإمكان.
- صمّم بضعف المقاس للشاشات عالية الدقة (Retina) في الصور الصغيرة المهمة مثل الشعار، أو استخدم SVG.
- أضف نصًا بديلًا (Alt Text) وصفيًا لكل صورة؛ فهو مهم لسهولة الوصول ولظهور الصور في بحث جوجل.
- حدّد أبعاد الصور (width وheight) في الكود لتجنب اهتزاز الصفحة أثناء التحميل.
مقاسات الخطوط والأزرار
- نص المحتوى الأساسي: 16 بكسل على الأقل على الجوال، و16 إلى 18 بكسل على الكمبيوتر، ويحتاج الخط العربي غالبًا حجمًا أكبر قليلًا من الإنجليزي ليُقرأ بوضوح.
- العنوان الرئيسي (H1): نحو 28 إلى 36 بكسل على الجوال، و40 إلى 56 بكسل على الكمبيوتر.
- ارتفاع السطر: 1.6 إلى 1.8 من حجم الخط للنصوص العربية.
- الأزرار وعناصر اللمس: لا تقل عن 48 × 48 بكسل على الجوال (وفق إرشادات جوجل) أو 44 × 44 نقطة (وفق إرشادات آبل)، مع مسافة كافية بينها حتى لا يضغط المستخدم على الزر الخطأ.
أخطاء شائعة في مقاسات تصميم الموقع
- تصميم نسخة الكمبيوتر فقط ثم «تصغيرها» للجوال، فتظهر العناصر مزدحمة وصغيرة.
- رفع صور بمقاس الكاميرا الأصلي (مثل 4000 بكسل) لمكان يعرضها بعرض 400 بكسل فقط.
- وضع نص مهم داخل صورة البانر فيُقص أو يصغر جدًا على الجوال، والأفضل كتابة النص كنص حقيقي فوق الصورة.
- عرض نص غير محدود على الشاشات العريضة يجعل القراءة متعبة.
- تجاهل الاختبار على أجهزة حقيقية والاكتفاء بالمعاينة في برنامج التصميم.
كيف تختبر مقاسات موقعك؟
- أدوات المطور في المتصفح: في Chrome اضغط F12 ثم وضع الجهاز (Device Mode) لمعاينة الموقع بمقاسات أجهزة مختلفة.
- PageSpeed Insights: لقياس سرعة الصفحة وتجربة الجوال واكتشاف الصور غير المضغوطة.
- Google Search Console: لمتابعة مشاكل تجربة الصفحة وفهرسة نسخة الجوال.
- الاختبار الفعلي: افتح الموقع على جوال أندرويد وآيفون وجهاز لوحي قبل الإطلاق.
الخلاصة
مقاسات تصميم الموقع ليست رقمًا واحدًا، بل نظام متكامل: صمّم للجوال أولًا على عرض نحو 390 بكسل، ووسّع التخطيط عبر نقاط توقف مدروسة حتى 1440 بكسل وأكثر، مع حد أقصى لعرض المحتوى، وصور بمقاسات وصيغ مناسبة، وخطوط وأزرار مريحة للقراءة واللمس. الالتزام بهذه المعايير ينعكس مباشرة على تجربة الزائر وسرعة الموقع وترتيبه في جوجل.
وإذا كنت تخطط لموقع جديد أو تطوير موقعك الحالي، تعرّف على خدماتنا في تصميم المواقع الإلكترونية وتحسين تجربة المستخدم UI/UX، أو تواصل مع فريق إكسباند وايز للحصول على استشارة مجانية. ولمعرفة المزيد عن البرمجيات التي يقوم عليها موقعك، اقرأ ما هو السوفت وير.
الأسئلة الشائعة عن مقاسات تصميم الموقع
ما هو المقاس المثالي لتصميم موقع إلكتروني؟
لا يوجد مقاس واحد مثالي، لكن المعتاد هو تصميم نسخة الجوال على عرض 390 بكسل ونسخة الكمبيوتر على عرض 1440 بكسل، مع حد أقصى لمنطقة المحتوى بين 1140 و1320 بكسل، وجعل التصميم متجاوبًا بين هذه المقاسات.
ما مقاس بانر الموقع الرئيسي؟
المقاس الشائع لبانر الصفحة الرئيسية بعرض كامل هو 1920 × 1080 أو 1920 × 800 بكسل، مع وضع العناصر المهمة في منتصف الصورة وتجهيز نسخة مناسبة للجوال.
ما هي مقاسات الجوال في تصميم المواقع؟
من أكثر عروض الجوال استخدامًا 360 و390 و393 و430 بكسل، لذلك يُصمم الموقع ليعمل بشكل مريح على أي عرض بين 360 و430 بكسل تقريبًا.
ما مقاس الصورة البارزة للمقالات؟
المقاس الموصى به هو 1200 × 630 بكسل تقريبًا، لأنه يناسب عرض المقال على الموقع وظهور الرابط بشكل جيد عند مشاركته على منصات التواصل.
ما مقاس أيقونة الموقع (Favicon)؟
في ووردبريس يُنصح برفع أيقونة مربعة بمقاس 512 × 512 بكسل، ويقوم النظام بإنشاء المقاسات الأصغر المطلوبة للمتصفحات والجوالات تلقائيًا.
لا تعليق