هذا الموقع الذي تقرؤه الآن بُني في يوم واحد: من أول فكرة للتصميم، إلى ثلاث جولات من المراجعة، إلى قالب ووردبريس خاص مرفوع على الاستضافة، مع صفحات السياسات ونافذة موافقة الكوكيز وربط أدوات الإحصاء. وكان الذكاء الاصطناعي شريكًا في كل خطوة، لا في كتابة الكود وحده. في هذا المقال نعرض التجربة كما حدثت، بما فيها التصاميم التي رُفضت ولماذا رُفضت.
لماذا موقع شخصي؟
كان لدينا متجر للمنتجات الرقمية، وموقع للأدوات المجانية، وحسابات على منصات التواصل. لكن لم يكن هناك مكان واحد يجمع التجارب والشروحات بعمق لا تتيحه منشورات التواصل القصيرة. فقررنا أن يكون الموقع الشخصي مدوّنة تعليمية أولًا، تعرض المقالات والبرومبتات والسكلز والمهام الآلية، وأن تظهر المواقع الأخرى في الفوتر فقط، حتى لا يتحوّل الموقع إلى إعلان طويل.
ووضعنا منذ البداية ثلاثة شروط: أن تكون اللغة عربية فصيحة رسمية، وأن يكون التصميم داكنًا فقط، وأن يكون الموقع متوافقًا مع شروط برنامج الإعلانات من اليوم الأول.
دراسة المراجع قبل التصميم
بدل البدء من صفحة بيضاء، درسنا موقعين عربيين شخصيين ناجحين في المجال نفسه، وفحصنا تفاصيلهما بدقة: درجات الألوان، ونوع الخط، وارتفاع الشريط العلوي، وشكل الأزرار، وطريقة ترتيب البطاقات. الهدف لم يكن نسخ أي منهما، بل فهم سبب نجاحهما:
- خلفية داكنة هادئة مع لون واحد بارز يقود العين.
- شريط علوي ثابت بأزرار على شكل كبسولات، والزر النشط ملوّن.
- بطاقات بصورة كبيرة في الأعلى، ثم التصنيف والعنوان والمقتطف.
- واجهة رئيسية تشرح في سطرين ماذا سيجد الزائر.
ثلاث جولات تصميم: ما رُفض ولماذا
الجولة الأولى: ثلاثة اتجاهات مختلفة
قدّمنا ثلاثة اتجاهات للصفحة الرئيسية. أعجب أحدها من حيث الشكل، لكن الملاحظة كانت حاسمة: النصوص مكتوبة بلهجة عامية لا تناسب موقعًا رسميًا، والموقع بأكمله يبدو كأنه دعاية للمتجر.
الجولة الثانية: لغة رسمية وألوان ذهبية
عدّلنا اللغة إلى الفصحى، وحصرنا روابط المتجر في الشريط والفوتر. لكن الألوان الذهبية على الخلفية الزرقاء الداكنة بدت باهتة، والشكل العام لم يصل إلى المستوى المطلوب، وكثير من العناصر بلا صور.
الجولة الثالثة: الأخضر الداكن وصورة لكل عنصر
اعتمدنا خلفية خضراء شبه سوداء، ولونًا أخضر حيويًا للأزرار والعناوين بتدرّج لوني خفيف، وخطًا عربيًا واضحًا. وصار لكل مقال وبرومبت وسكل ومهمة صورة خاصة به. ولّدنا صور البطاقات بأداة توليد صور واحدة وبأسلوب ثابت حتى تبدو كأنها من جلسة تصوير واحدة. هذه النسخة هي التي اعتُمدت.
الدرس: لا تطلب «تصميمًا جميلًا»؛ اطلب تصميمًا بمرجع واضح، وراجع اللغة والهدف قبل الألوان.
من التصميم إلى قالب ووردبريس
كان الموقع يعمل بقالب جاهز من شركة الاستضافة، ومعه إضافات لا نحتاجها. فبنينا قالبًا خاصًا خفيفًا يطابق التصميم المعتمد، ويضم:
- رئيسية تعرض الأقسام تلقائيًا، ولا يظهر القسم إلا إذا كان فيه محتوى منشور.
- صفحة مقال فيها شريط تقدّم القراءة، وجدول محتويات يُبنى تلقائيًا من العناوين، وأزرار مشاركة، ومقالات ذات صلة.
- أنواع محتوى جديدة في لوحة التحكم: البرومبتات (مع خانة لنص البرومبت يُنسخ بزر واحد)، والسكلز، والمهام الآلية (مع خانة لموعد التشغيل).
- إعدادات من لوحة التحكم لتغيير نص الواجهة وصورتها وروابط الحسابات دون لمس الكود.
رُفع القالب وفُعّل، ثم فُحصت كل صفحة للتأكد من خلوّها من الأخطاء، ومن أن الخط والألوان تعمل كما في التصميم.
متطلبات برنامج الإعلانات من اليوم الأول
أكثر ما يؤخر قبول المواقع في برامج الإعلانات هو غياب الصفحات الأساسية أو ضعف المحتوى. لذلك جهّزنا مبكرًا:
- صفحات «من أنا» و«تواصل» و«سياسة الخصوصية» و«الشروط والأحكام» و«إخلاء المسؤولية»، كلها بالفصحى.
- سياسة خصوصية تشرح ملفات تعريف الارتباط والإعلانات وطريقة إيقاف الإعلانات المخصّصة.
- نافذة موافقة على الكوكيز معرّبة بالكامل، بألوان الموقع.
- ربط الموقع بأدوات قوقل للإحصاء ومحرك البحث لمتابعة الزيارات.
- إضافة لإدارة الإعلانات تتيح لصق كود الإعلان مرة واحدة وتفعيله بزر، بلا تعديل في الكود.
أما المحتوى، فالخطة عشرون مقالًا مبنية على تجارب حقيقية قبل التقديم، وهذا المقال واحد منها.
ما الذي حذفناه؟
التنظيف جزء من البناء. حذفنا إضافة متجر إلكتروني لم نكن نستخدمها مع صفحاتها، وأداة روابط إحالة، وإضافة إحصاء كانت تكرّر عمل إضافة قوقل الرسمية. كل إضافة زائدة تعني بطئًا أكثر، وتحديثات أكثر، واحتمال أخطاء أكبر.
دور الذكاء الاصطناعي بالتحديد
لم يكن دوره «اكتب لي موقعًا». بل كان العمل موزعًا على مراحل واضحة:
- فحص مواقع المرجع واستخراج قياساتها الفعلية.
- إعداد التصاميم ومراجعتها بعد كل ملاحظة.
- توليد صور البطاقات بأسلوب واحد.
- كتابة القالب وفحصه قبل الرفع.
- تنفيذ الإعدادات داخل لوحة التحكم عبر المتصفح، مع التوقف وطلب الموافقة قبل أي خطوة حساسة، مثل ربط حساب قوقل أو قبول الشروط.
أما القرارات، من اللون إلى اللغة إلى ما يُحذف وما يبقى، فكانت قرارات صاحب الموقع.
الدروس المستفادة
- ابدأ بالمراجع، لا بالأدوات.
- راجع اللغة والهدف في الجولة الأولى؛ فتغيير الألوان سهل، وتغيير الرسالة صعب.
- اجعل لكل عنصر صورة، وبأسلوب ثابت.
- جهّز صفحات السياسات قبل أن تحتاجها.
- احذف ما لا تستخدمه من الإضافات.
الجدول الزمني لليوم
- الصباح: تحديد الهدف والشروط، ودراسة الموقعين المرجعيين.
- الظهيرة: الجولة الأولى من التصاميم، ثم الملاحظات، ثم الجولة الثانية.
- العصر: الجولة الثالثة وتوليد صور البطاقات واعتماد التصميم النهائي.
- المساء: كتابة القالب ورفعه، وإنشاء الصفحات، وإعداد نافذة الكوكيز، وربط أدوات الإحصاء، وتنظيف الإضافات.
ما جعل ذلك ممكنًا ليس السرعة في التنفيذ، بل سرعة القرار: كل ملاحظة كانت واضحة ومحددة، وكل جولة كانت تبدأ من آخر نسخة معتمدة.
التكلفة الفعلية
لم نشترِ قالبًا ولا إضافات مدفوعة. الاستضافة والنطاق كانا موجودين أصلًا، والإضافات المستخدمة مجانية. التكلفة الوحيدة الإضافية كانت رصيد توليد صور البطاقات بأداة توليد الصور، وهو مبلغ صغير مقارنةً بشراء صور أو تصميمها يدويًا.
ما الخطوة التالية للموقع؟
- نشر المقالات العشرين الأولى بمعدل منتظم.
- إضافة البرومبتات والسكلز والمهام الآلية بصورها.
- متابعة أرقام الزيارات ومحركات البحث، ثم التقديم على برنامج الإعلانات.
- تفعيل النشرة البريدية الأسبوعية.
أسئلة شائعة
هل أحتاج إلى معرفة البرمجة لبناء موقع بهذه الطريقة؟
لا تحتاج إلى كتابة الكود بنفسك، لكنك تحتاج إلى وضوح في ما تريده، ومراجعة دقيقة لكل نسخة. الجودة تأتي من الملاحظات، لا من الأداة.
لماذا قالب خاص بدل قالب جاهز؟
القالب الخاص أخف، ويطابق التصميم تمامًا، ولا يحمل خصائص لا نحتاجها. والقالب الجاهز مناسب إذا كان التصميم المطلوب قريبًا منه.
متى يمكن التقديم على برنامج الإعلانات؟
بعد اكتمال الصفحات الأساسية ونشر عدد كافٍ من المقالات الأصلية المفيدة؛ نستهدف عشرين مقالًا قبل التقديم.
