سندبلاست رضوی — سایت، برند و سئوی یک کارگاه صنعتی

مشکل چه بود؟

سندبلاست رضوی از ۱۳۷۲ برای پروژه‌های بزرگ کشور سندبلاست و رنگ کار می‌کند؛ از فرودگاه امام تا برج میلاد و پارس جنوبی. ولی در اینترنت تقریباً دیده نمی‌شد: نه سایت داشت، نه نشان (لوگو)، و نه حتی جایی روی نقشه که مشتری بتواند پیدایش کند. کسی که نامش را جستجو می‌کرد، به خودش نمی‌رسید.

خریدار این کار معمولاً مدیر پروژه یا کارفرمای یک سازه‌ی فلزی است. در چند ثانیه می‌خواهد بفهمد این کارگاه از پس کارش برمی‌آید یا نه، و بعد زنگ بزند. پس سایت باید دو کار می‌کرد: اعتماد بسازد و تماس را ساده کند.

چی ساختم؟

• سایت ۱۶ صفحه‌ای: صفحه‌ی اول، خدمات و یک صفحه برای هر خدمت، پروژه‌ها، همکاری‌ها، معرفی، تماس، ۵ مقاله و صفحه‌ی ۴۰۴
• نشان (لوگو) و هویت بصری، با چهار طرح کارت ویزیت
• موشن‌گرافیک صفحه‌ی اول، که داستان کار را بدون یک کلمه تعریف می‌کند
• ۵۲ عکس واقعی از کارگاه و پروژه‌ها، با نمایشگر عکس و اسلایدر قبل و بعد
• سئو، ثبت کارگاه در نشان و بلد، و اتصال به اینستاگرام شرکت
• رزومه‌ی PDF شرکت، که از همان اطلاعات سایت ساخته می‌شود

از صفر تا صد

همه‌ی تاریخ‌ها در ۱۴۰۵ است.

۰۱اول، یک دمو

قبل از اینکه مشتری‌ای در کار باشد، برای یک شرکت سندبلاست خیالی یک سایت نمونه ساختم: یک تیرآهن زنگ‌زده که با اسکرول سندبلاست و رنگ می‌شد، همه با کد و بدون یک عکس. دمو از گوگل پنهان بود و فقط برای نشان دادن ساخته شده بود.

صاحب سندبلاست رضوی دمو را دید و سایت واقعی را سفارش داد. پنج مقاله‌ی دمو هم یکی‌یکی با واقعیت کارگاه مقایسه و اصلاح شدند و شدند مقاله‌های روز انتشار.

۰۲جلسه، پیشنهاد و سفارش

در جلسه‌ی اول، به‌جای قیمت دادن، کار را شناختم. یک پرسش‌نامه آماده کردم: خدمات، مشتری‌ها، پروژه‌های شاخص، امکانات کارگاه، ساعت کار، و عبارت‌هایی که مشتری‌ها در گوگل جستجو می‌کنند.

بعد سه بسته پیشنهاد دادم، پایه و کامل و ویژه، هر کدام با کارهای مشخص و کنار قیمت‌های بازار. مشتری بسته‌ی «ویژه» را انتخاب کرد.

۰۳نشان و هویت بصری

کارگاه هیچ نشانی نداشت؛ نه لوگو، نه مهر، نه سربرگ. از چند طرحی که پیشنهاد دادم، «ذره و سطح» انتخاب شد: یک مثلث نارنجی که سطح رنگ‌شده است، و نقطه‌های خاکستری که ذره‌های ساینده‌اند. یعنی خود کار سندبلاست، در یک علامت.

بعد یک بسته‌ی کامل ساختم: ۱۴ نسخه‌ی SVG برای زمینه‌ی تیره و روشن، فایل چاپی، آیکون سایت و اپ، عکس پروفایل واتساپ و اینستاگرام، و یک راهنمای دوصفحه‌ای استفاده از لوگو. حروف به مسیر (path) تبدیل شده‌اند، پس لوگو بدون فونت هم همه‌جا درست دیده می‌شود.

۰۴طراحی سایت

رنگ‌ها از خود نشان آمدند: گرافیتی تیره برای زمینه، نارنجی فقط برای چیزهایی که باید دیده شوند، مثل دکمه‌ی تماس، و خاکستری فولادی برای جزئیات. تیترها با «لاله‌زار» هستند، یک فونت فارسی پوستری، و متن‌ها با «وزیرمتن».

به‌جای قالب آماده، هر بخش از دنیای خود کارگاه آمد:

۰۵موشن‌گرافیک صفحه‌ی اول

صفحه‌ی اول با فیلمی شروع می‌شود که با دوربین گرفته نشده؛ با کد کشیده شده است. همه‌ی شکل‌ها SVG هستند و با GSAP حرکت می‌کنند: یک تیرآهن زنگ‌زده، بالابری که جلو می‌آید، پاشش ساینده که زنگ را برمی‌دارد، فلز تمیز، و در آخر رنگ آبی‌فولادی. بعد زنگ برمی‌گردد و داستان دوباره شروع می‌شود.

روی گوشی، تصویر شکل قاب را می‌گیرد و یک «دوربین» کمی عقب‌تر از بالابر دنبالش می‌کند. زیر فیلم چهار نوار هست که مثل استوری پر می‌شوند و نام هر مرحله را نشان می‌دهند. کسی که در گوشی‌اش «حرکت کمتر» را روشن کرده، فقط تیرآهن رنگ‌شده‌ی نهایی را می‌بیند.

۰۶نسخه‌ی موبایل، جدا از دسکتاپ

بیشتر مشتری‌ها سایت را روی گوشی باز می‌کنند، پس نسخه‌ی موبایل جدا طراحی شد، نه کوچک‌شده‌ی دسکتاپ. صفحه‌ی اول فقط تیتر و یک فیلم بزرگ است. سربرگ موقع اسکرول به پایین کنار می‌رود و با کمی بالا رفتن برمی‌گردد. فهرست‌های بلند کنار هم می‌لغزند، با نوار باریکی که نشان می‌دهد کجای فهرست هستی.

پایین صفحه همیشه سه دکمه هست: تماس، واتساپ و مسیریابی. «تماس» هر دو شماره را نشان می‌دهد و «مسیریابی» نشان، بلد، گوگل‌مپ و یک دکمه‌ی کپی نشانی. دکمه‌ی واتساپ هم یک پیام آماده باز می‌کند که همان چیزهایی را می‌پرسد که برای قیمت دادن لازم است: نوع قطعه، وزن یا متراژ، درجه‌ی سندبلاست و سیستم رنگ، و محل پروژه.

۰۷عکس‌های واقعی؛ قبل و بعد

همه‌ی عکس‌ها واقعی‌اند: کارگاه، پروژه‌ها و نمونه‌های بسته‌بندی. ۵۲ عکس برای سرعت به ۱۶۴ فایل WebP در چند اندازه تبدیل شدند و هر گوشی فقط اندازه‌ای را می‌گیرد که لازم دارد. همه‌ی اطلاعات پنهان عکس‌ها، از جمله مکان GPS کارگاه، پاک شد و پلاک خودروها محو شد.

دو عکس قبل و بعد از یک تیرآهن، در دو زمان و از دو زاویه‌ی کمی متفاوت گرفته شده بودند. با OpenCV یکی را روی دیگری تراز کردم، با خطای حدود یک پیکسل، تا با کشیدن خط وسط فقط خود سطح عوض شود. همین اسلایدر را این‌جا امتحان کنید:

۰۸ساخت و تست

سایت با یک سایت‌ساز کوچک ساخته شد که خودم با پایتون نوشتم، فقط با کتابخانه‌ی استاندارد. خروجی، صفحه‌های ساده‌ی HTML است: بدون CMS و بدون پایگاه داده؛ پس سریع است، امن است و تقریباً چیزی برای خراب شدن ندارد.

همه‌ی اطلاعات شرکت، یعنی نام و تلفن و نشانی و ساعت کار، فقط در یک جا نوشته شده و همه‌جا از همان‌جا می‌آید؛ از متن صفحه‌ها تا داده‌ی ساختاریافته‌ی گوگل و پیام واتساپ. رزومه‌ی پنج‌صفحه‌ای شرکت هم از همین اطلاعات ساخته می‌شود، پس سایت و رزومه هیچ‌وقت با هم فرق نمی‌کنند.

قبل از هر انتشار، ۶۴ تست خودکار اجرا می‌شود: هر ۱۶ صفحه در چهار حالت (دسکتاپ و گوشی، با انیمیشن و بی‌انیمیشن)، برای لینک خراب، عکس خراب، خطای جاوااسکریپت و صفحه‌ای که از عرض گوشی بیرون بزند. بعد سایت در موتور سافاری مثل یک آیفون واقعی گشت زده می‌شود و Lighthouse امتیاز می‌دهد.

۰۹بازبینی و انتشار

قبل از نشان دادن به صاحب‌کار، کل سایت را صفحه‌به‌صفحه روی چند اندازه‌ی گوشی، آیپد و دسکتاپ بازبینی کردم. در جلسه، صاحب‌کار ترتیب بخش‌های صفحه‌ی اول را خودش چید و چند متن را دقیق‌تر کرد. هر تغییر همان روز انجام شد و قبل از انتشار به تأیید او رسید.

انتشار در ۲۸ مهر، سه روز زودتر از موعد:

• دو دامنه‌ی .ir به نام خود شرکت؛ دومی برای حفاظت از برند دیجیتال
• هاست ابری داخل ایران، که موقع قطعی اینترنت بین‌الملل هم بالا می‌ماند
• گواهی SSL که خودش تمدید می‌شود، و همه‌ی نشانی‌ها روی یک آدرس امن
• انتشار با یک دستور: فقط فایل‌های تغییرکرده، رمزگذاری‌شده (FTPS)، و اگر خط قطع شود از همان‌جا ادامه می‌دهد
• ثبت در سرچ کنسول گوگل و بینگ، با نقشه‌ی سایت و نقشه‌ی عکس‌ها

۱۰سئو و نقشه‌ها

هدف اول این بود که هر کس «سندبلاست رضوی» را جستجو کند، به خود سایت برسد. یک مشکل کوچک هم بود: «رضوی» برای گوگل یعنی خراسان رضوی و مشهد. برای همین یک نام کوتاه همه‌جا یکسان شد، در عنوان صفحه‌ها و متن و نقشه‌ها و داده‌ی ساختاریافته، و کنارش کلمه‌های محلی آمد: صفادشت، غرب تهران، نزدیک کرج و شهریار.

هر صفحه عنوان و توضیح خودش را دارد، و داده‌ی ساختاریافته (LocalBusiness، Service، FAQPage، BlogPosting) به گوگل می‌گوید این کسب‌وکار کیست، کجاست و چه می‌کند. کارگاه در نشان و بلد با همان نام و نشانی و تلفن ثبت شد و اینستاگرام شرکت هم به سایت وصل شد.

پنج مقاله‌ی روز انتشار، برای کسی که هنوز دنبال جواب است:

• سندبلاست چیست و چه کاربردی دارد؟
• تفاوت سندبلاست، واترجت و شات‌بلاست چیست؟
• چرا رنگ روی فلز زنگ‌زده دوام نمی‌آورد؟
• مراحل آماده‌سازی و رنگ‌آمیزی سازه فلزی
• هزینه سندبلاست چقدر است و به چه چیزی بستگی دارد؟

۱۱تعهد کاری و پشتیبانی

با چه ابزارهایی

نتیجه

سندبلاست رضوی حالا یک سایت سریع و کامل دارد که روی گوشی هم راحت کار می‌کند، نشانی که روی سایت و کارت ویزیت و اینستاگرام یکی است، و جایی در گوگل و نقشه‌ها که مشتری‌ها پیدایش می‌کنند. سایت سه روز زودتر از موعد منتشر شد و یک روز بعد، اولین نتیجه‌ی جستجوی نام شرکت بود.

این پروژه برای من فقط ساختن یک سایت نبود: از جلسه‌ی اول و پیشنهاد تا نشان، طراحی، برنامه‌نویسی، انتشار و پشتیبانی، همه‌ی مسیر را خودم رفتم. سایت را این‌جا ببینید: sandblastrazavi.ir.