الصور التوضيحية بالذكاء الاصطناعي وتصوير البيانات للقارئ العربي

ورشة: التدوين متعدد الوسائط · المقالة الثالثة من خمس

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

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

هذه التحديات قابلةٌ للحل. وهذا بالضبط ما تتناوله المقالة.

ثلاثة أنواعٍ من المحتوى البصري تحتاجها المنصة

قبل الحديث عن الأدوات، يُفيد التمييز بين ثلاثة أنواعٍ من المحتوى البصري تخدم أغراضاً مختلفة:

الصورة المميزة (Featured Image): أول ما يراه القارئ قبل أن يقرر النقر. مهمتها إيقاف التمرير وإثارة الفضول، لا الشرح. تعمل بالمشاعر والجماليات أكثر من المعلومات. هي الأهم من حيث التأثير على معدل النقر.

الإنفوغرافيك داخل المقال: يشرح علاقةً معقدةً أو يُقارن بين خياراتٍ أو يُلخِّص عمليةً متعددة الخطوات. يُقرأ بدلاً من النص لا إضافةً إليه، فحين يوجد إنفوغرافيكٌ جيدٌ تُختصر الفقرة التي تليه إلى جملةٍ واحدة.

العنصر التفاعلي المضمَّن: جدولٌ قابل للفرز، أو رسمٌ بياني يُستجاب للتمرير عليه، أو آلة حسابٍ بسيطة. يُحوِّل القارئ من مستهلكٍ سلبيٍ إلى مشاركٍ فعلي، ويزيد وقت البقاء على الصفحة بصورةٍ ملحوظة.

ليس كل مقالةٍ تحتاج الأنواع الثلاثة. الصورة المميزة إلزامية دائماً، أما الإنفوغرافيك يُضاف حين يوجد في المقالة مقارنةٌ أو عمليةٌ أو بياناتٌ يصعب استيعابها نصياً. العنصر التفاعلي يُستحق الجهد حين يكون الموضوع ذا بُعدٍ شخصي يختلف من قارئٍ لآخر.

توليد الصور المميزة: الأدوات والبرومبت

ميدجورني لا تزال الأداة الأعلى جودةً للصور الفنية والتوضيحية، لكن واجهتها عبر ديسكورد تُعيق الإنتاج المنتظم. أدوبي فايرفلاي الأنسب لمن لديه اشتراكٌ في أدوبي لأن صوره خاليةٌ من إشكاليات حقوق النشر بضمانٍ تجاري. DALL-E 3 المدمج في ChatGPT الأسرع للاستخدام اليومي والأكثر استجابةً لتعليماتٍ مفصَّلة بالعربية أو الإنكليزية.

مشكلةٌ يواجهها كل منشئ محتوى عربي: معظم هذه الأدوات حين تطلب منها «إنساناً» أو «بيئةً عمرانية» أو «مشهداً يومياً» تُعيد تلقائياً صوراً بوجوهٍ غربيةٍ وبيئاتٍ أمريكية أو أوروبية. الحل في البرومبت لا في الأداة:

[For featured images with cultural specificity]

Create a [illustration style: flat design / editorial illustration / 
abstract conceptual] image for an Arabic-language article about [topic].

Visual direction:
- Middle Eastern or North African visual context (architecture, lighting,
  color palette warm earth tones)
- If people are included: diverse Arab appearance, modest contemporary dress
- Text direction awareness: leave right side of composition heavier/anchor
  (Arabic readers scan right-to-left; visual weight should follow)
- No Latin text or Western signage visible
- Color palette: [specify to match your brand — e.g., deep blue and crimson /
  warm terracotta and gold / clean white and teal]

Mood: [professional and trustworthy / contemplative and literary /
energetic and forward-looking]
Style reference: [editorial magazine illustration / flat vector / 
photorealistic / painterly]

Do NOT include: stock-photo aesthetics, generic office environments,
obviously Western faces or settings.

ملاحظة تقنية مهمة:

حافظنا على كتابة البرومبتات بالإنكليزية لسببٍ تقني وجيه — نماذج توليد الصور دُرِّبت على كمياتٍ أكبر بكثير من البيانات الإنكليزية، مما يجعل الأوامر الوصفية التقنية أكثر دقةً وأقل التباساً حين تُصاغ بالإنكليزية. ألصق البرومبت كما هو في أداة التوليد التي تختارها، وعدِّل فقط القيم بين الأقواس المربعة لتناسب مقالتك.

تحدي اتجاه النص في التصاميم المُولَّدة

أكبر تحدٍّ تقني في التصميم للجمهور العربي هو أن كل أدوات التوليد تفترض اتجاه النص من اليسار إلى اليمين. حين تطلب إنفوغرافيك أو مخططاً يحتوي على نصٍّ عربي، تُنتج الأداة نصاً مشوَّهاً أو مُعكوساً أو غير منطقيٍ في معظم الحالات.

القاعدة العملية: لا تطلب من أيّ أداة توليد صورٍ إضافة نصٍّ عربي إلى التصميم. أنتِج الصورة بدون نص، ثم أضِف النص العربي يدوياً في مرحلة ما بعد الإنتاج.

الأداتان الأسرع لهذه المرحلة هما كانفا وأدوبي إكسبريس، وكلتاهما تدعمان العربية وتتيحان تحرير النص بالاتجاه الصحيح مع الحفاظ على الصورة المُولَّدة في الخلفية. سير العمل:

1. ولِّد الصورة أو الإنفوغرافيك الأساسي بدون نص
2. استوردها إلى كانفا أو إكسبريس
3. أضِف العناوين والتسميات والأرقام بالعربية
4. تحقق من أن عناصر الخط تحترم الهرمية البصرية: العنوان أكبر، التفاصيل أصغر، الأرقام بارزة..

هذا الفصل بين مرحلة التوليد ومرحلة النص يُنتج نتائج أنظف بكثيرٍ من محاولة الجمع بينهما في خطوةٍ واحدة.

الإنفوغرافيك: ثلاثة قوالب تُغطي ٨٠٪ من الحاجات

معظم الإنفوغرافيك الذي تحتاجه مدوَّنةٌ احترافيةٌ يندرج ضمن ثلاثة قوالب. امتلاك قالبٍ جاهزٍ لكل منها في كانفا يعني أن إنتاج الإنفوغرافيك يستغرق ١٥–٢٠ دقيقة لا ساعةً أو أكثر.

قالب المقارنة — عمودان أو ثلاثة تُقارن خياراتٍ أو أدواتٍ أو مناهج. يعمل مع أيّ محتوىً يُجيب على سؤال «أيٌّ منها أفضل؟». البنية: عنوانٌ في الأعلى، معيار المقارنة على اليمين (باتجاه القراءة العربية)، الخيارات أفقياً في الأعمدة.

قالب العملية — خطواتٌ متسلسلة من البداية إلى النهاية. يعمل مع أيّ محتوىً يُجيب على سؤال «كيف؟». في التصميم العربي: تسير العملية من اليمين إلى اليسار لا العكس — خطأٌ يقع فيه كثيرٌ من المصمِّمين حين يستخدمون قوالب إنكليزية دون تعديل.

قالب الإحصاء المرئي — رقمٌ كبير واحد أو ثلاثة أرقامٍ رئيسية مع سياقٍ مرئي — أيقوناتٌ أو أشكالٌ تمثِّل النسبة. يعمل مع أي محتوىً يحتوي على بياناتٍ مفاجئة أو لافتة تستحق الإبراز.

لإنشاء هذه القوالب الثلاثة من الصفر، استخدم هذا البرومبت مع DALL-E أو ميدجورني للحصول على الهيكل البصري الأساسي:

Create a clean infographic template layout for a [comparison / process /
statistics] infographic. 

Requirements:
- Right-to-left layout orientation (Arabic reading direction)
- No text included — placeholder boxes and shapes only
- Color scheme: [your brand colors]
- Style: flat design, professional, minimal
- Dimensions: [1200x800px for article embed / 1080x1080px for social square /
  1080x1920px for vertical social]
- Include clear visual hierarchy: large header area, main content zones,
  footer area for source attribution

Export as transparent PNG or editable format.

العناصر التفاعلية: أبسط مما تتخيَّل

العنصر التفاعلي يُرهب كثيراً من المدوِّنين لأنهم يتخيَّلون أنه يتطلب معرفةً برمجية. الواقع أن أبسط العناصر التفاعلية — وأكثرها تأثيراً — لا تحتاج إلى كتابة كودٍ واحد.

الجداول القابلة للفرز: أي جدول مقارنةٍ في مقالتك يمكن أن يصبح تفاعلياً بإضافة مكوِّن TablePress (مجاني) على ووردبريس. يُتيح للقارئ فرز الجدول بحسب أي عمودٍ يهمه — خاصيةٌ تزيد وقت التفاعل مع المقالة بصورةٍ لافتة في أي محتوىً يُقارن أدواتٍ أو خياراتٍ أو أسعاراً.

الرسوم البيانية التفاعلية: أداة Datawrapper مجانيةٌ للاستخدام الأساسي وتُتيح إنشاء رسومٍ بيانية تفاعلية (خطية، عمودية، فقاعية) يمكن تضمينها في ووردبريس بكودٍ واحد. تدعم العربية وتتيح تخصيص الألوان والخطوط. أخذ بيانات جدولٍ عادي وتحويله إلى رسمٍ بياني تفاعلي لا يستغرق أكثر من ١٠ دقائق.

آلات الحساب البسيطة: لمن لديه موضوعٌ يحتمل حساباً شخصياً — كلفة مشروعٍ، وقت إنجاز مهمة، مقارنة تسعيرة — يُتيح مكوِّن Calculated Fields Form على ووردبريس بناء آلة حسابٍ بسيطة بواجهةٍ سحب وإفلات دون برمجة. هذا النوع من العناصر يُحوَّل إلى محتوى مشارَك بكثرة لأنه يُعطي القارئ نتيجةً خاصةً به.

القاعدة: ابدأ بالعنصر التفاعلي الأبسط الذي يُجيب على سؤالٍ يطرحه قارئك على نفسه أثناء القراءة. التفاعلية المُضافة لمجرد الإضافة لا قيمة لها — التفاعلية التي تُجيب على سؤالٍ حقيقي تُحوِّل القارئ إلى زائرٍ متكرر.

الهوية البصرية عبر المقالات: الاتساق قبل الجمال

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

الهوية البصرية للمدوَّنة لا تحتاج إلى مصمِّمٍ محترف. تحتاج إلى ثلاثة قراراتٍ ثابتة تُطبَّق على كل محتوى:

• لوحة ألوان ثابتة: لونان أساسيان ولونٌ تمييزي. كل صورةٍ مميزة وكل إنفوغرافيك يستخدم هذه الألوان الثلاثة فقط. أخذ كودَي اللون الست عشري من هوية موقعك الحالية والالتزام بهما كافٍ تماماً.
• أسلوب توضيحي ثابت: هل صورك مميزة تصويرٌ فوتوغرافي مُعالَج، أم توضيحٌ مسطَّح (flat illustration)، أم تجريدٌ هندسي؟ اختَر أسلوباً واحداً والتزم به عبر كل المقالات.
• حجم خط ثابت للعناوين داخل التصاميم: حين تُضيف نصاً عربياً على صورةٍ مُولَّدة، استخدم الخط ذاته والحجم ذاته في كل مرة. هذا الاتساق الصغير هو ما يجعل الزائر يُدرك فوراً أنه على منصتك.
• 

خصوصية المحتوى البصري العربي: ما لا تُخطئه

بعض القرارات البصرية تبدو تفصيليةً لكنها تُحدد ما إذا كان الجمهور العربي يشعر أن المحتوى «مصنوعٌ له» أو «مترجمٌ إليه»:

الأرقام: استخدم الأرقام العربية/ الهندية (١٢٣) لا الغربية/ العربية (123) في الإنفوغرافيك الموجَّه للجمهور العربي. التبديل بينهما — أرقامٌ غربية في نصٍّ عربي — يُشعر بعدم الاكتمال.

الأسهم والتدفق: في أي مخططٍ يُظهر تسلسلاً أو عمليةً، اجعل الاتجاه من اليمين إلى اليسار. سهمٌ يسير من اليسار إلى اليمين في تصميمٍ عربي يُربك الحدس البصري للقارئ حتى لو فهم المحتوى.

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

الفراغ البصري: تصاميم الإنفوغرافيك الغربية كثيراً ما تميل إلى الامتلاء. القارئ العربي — شأنه شأن الخط العربي ذاته — يستريح أكثر مع فراغٍ بصري أوسع وهامشٍ أرحب. حين تُعدِّل قالباً غربياً للعربية، أزِل عنصراً واتركه فارغاً بدلاً من ملء كل المساحة.

ما الذي يلي في هذه السلسلة

المقالة الرابعة تُعالج تحسين المحتوى البصري والصوتي لمحركات البحث: كيف تُحسِّن الصور وملفات الصوت وتضمينات الفيديو لتظهر في البحث البصري وإجابات الذكاء الاصطناعي لا في البحث النصي التقليدي فحسب. (راجع مقالتنا: تحسين محركات البحث للوسائط: كيف تجعل محتواك مرئياً في عصر البحث البصري)

وللعودة إلى أساسيات استراتيجية الشكل التي تُحدد متى يُضاف محتوىً بصري ومتى لا يُضاف: (راجع مقالتنا: استراتيجية المحتوى في ٢٠٢٦: لماذا لم يعد النص وحده كافياً؟)

---

مراجع

1. Cairo, A. (2016). The Truthful Art: Data, Charts, and Maps for Communication. New Riders.
2. Knaflic, C. N. (2015). Storytelling with Data: A Data Visualization Guide for Business Professionals. Wiley.
3. Nielsen, J. & Pernice, K. (2010). Eyetracking Web Usability. New Riders. [Arabic RTL eye-tracking studies referenced in Chapter 4]
4. Midjourney Documentation (2024). Prompting for Cultural Specificity. docs.midjourney.com