صفحات iAM یکی از ابزارهای کاربردی آینوتی برای ساخت صفحات معرفی شخصی، معرفی کسبوکار، خدمات و لندینگپیج هستند. قالبهای آماده iAM امکان ایجاد یک صفحه اولیه را سریع و ساده میکنند؛ اما با کمی خلاقیت و استفاده درست از HTML، میتوان همین قالبها را به صفحاتی حرفهای، اختصاصی و هماهنگ با هویت هر کسبوکار تبدیل کرد.
در این آموزش، روشی را بررسی میکنیم که کارشناسان فروش بتوانند با استفاده از ChatGPT، صفحه iAM خود یا مشتری را تحلیل و بازطراحی کنند و برای آن یک طراحی اختصاصی و قابل اجرا بسازند؛ بدون اینکه به دانش حرفهای برنامهنویسی نیاز داشته باشند.
چرا استفاده از یک طراحی ثابت برای همه صفحات اشتباه است؟
نوع کسبوکار باید زبان بصری صفحه را تعیین کند. ظاهر یک صفحه امداد خودرو نباید شبیه رزومه یک مدیر یا صفحه یک تعمیرکار یخچال باشد.
- یدککش و امداد خودرو: طراحی صنعتی، حس فوریت، رنگهای هشدار و دکمه تماس فوری.
- تعمیر یخچال: رنگهای سرد، سفید، سرمهای و فیروزهای با تأکید بر تخصص و اعتماد.
- رزومه و صفحه شخصی: طراحی رسمی، سوابق، مهارتها، افتخارات و اطلاعات حرفهای.
- سالن زیبایی: ظاهر لوکس، ظریف و تصویری.
- شرکت صنعتی: طراحی مهندسی، منظم و قدرتمند.
- پزشک یا خدمات درمانی: طراحی روشن، آرام و اعتمادآفرین.
بنابراین، وظیفه ChatGPT فقط «زیباتر کردن صفحه» نیست. هوش مصنوعی ابتدا باید ماهیت کسبوکار و نیاز مخاطبان آن را درک کند و سپس متناسب با این اطلاعات، رنگبندی، ساختار صفحه، CTA، منو، نوع باکسها و چیدمان مناسب را پیشنهاد دهد. این رویکرد باعث میشود طراحی هر صفحه iAM متناسب با هویت واقعی همان کسبوکار انجام شود.
گام اول: انتخاب قالب iAM
iAM دارای قالبهای مختلفی است و چیدمان هر قالب با دیگری تفاوت دارد. برخی قالبها ستون رنگی در کنار صفحه دارند، برخی اطلاعات اصلی را در قسمت بالای صفحه نمایش میدهند و بعضی دیگر برای رزومه، معرفی حرفهای یا صفحات محتوایی مناسبتر هستند.
به همین دلیل، اولین کاری که ChatGPT باید انجام دهد این است که از شما بپرسد:
در صورت امکان، تصویر قالبهای iAM یا حداقل تصویر قالب انتخابشده را نیز برای ChatGPT ارسال کنید تا ساختار واقعی آن را در طراحی در نظر بگیرد.
گام دوم: ارسال لینک و تحلیل صفحه
پس از انتخاب قالب، لینک صفحه فعلی iAM را برای ChatGPT ارسال کنید. هوش مصنوعی باید ابتدا صفحه را بررسی کرده و اطلاعات مهم موردنیاز برای بازطراحی صفحه iAM را استخراج کند.
- موضوع اصلی صفحه
- نام کسبوکار یا خدمت
- خدمات اصلی
- شمارههای تماس
- شهر و محدوده فعالیت
- کلمات کلیدی مهم برای سئو (SEO)
- متنهای تکراری یا ضعیف
- اطلاعات اشتباه یا مربوط به شهر و کسبوکار دیگر
- فرصتهای افزایش تماس، تعامل و تبدیل بازدیدکننده به مشتری
اگر از قبل صفحهای طراحی و منتشر کردهاید، فرایند بازطراحی آن با کمک هوش مصنوعی سادهتر خواهد بود؛ زیرا بخش مهمی از اطلاعات کسبوکار پیشتر جمعآوری و در صفحه درج شده است. اما اگر میخواهید یک صفحه iAM را برای نخستین بار طراحی کنید، ابتدا اطلاعات موردنیاز درباره کسبوکار را جمعآوری کرده و سپس آنها را بهصورت متنی در اختیار ChatGPT قرار دهید.
همچنین اگر وبسایت، صفحه معرفی یا منبع آنلاین دیگری در اختیار دارید که اطلاعات کامل و معتبری درباره کسبوکار ارائه میدهد، میتوانید لینک آن را نیز برای تحلیل در اختیار هوش مصنوعی قرار دهید.
قبل از طراحی، هدف صفحه را مشخص کنید
پیش از آنکه ChatGPT وارد مرحله طراحی، انتخاب رنگها، ساخت Hero یا تولید کد HTML شود، باید مشخص کنید هدف اصلی صفحه iAM چیست و انتظار دارید کاربر پس از ورود به صفحه چه اقدامی انجام دهد. این تصمیم، روی ساختار صفحه، ترتیب بخشها، نوع CTA و حتی محتوایی که باید در بالاترین قسمت صفحه قرار بگیرد تأثیر مستقیم دارد.
هدف همه صفحات iAM یکسان نیست. در یک صفحه خدمات فوری، مانند امداد خودرو یا تعمیرات، ممکن است مهمترین هدف برقراری سریع تماس باشد. در یک صفحه شرکتی، هدف میتواند معرفی خدمات و دریافت درخواست مشاوره باشد و در صفحات شخصی یا رزومهای، شاید معرفی تخصص، سوابق و ایجاد اعتماد اهمیت بیشتری داشته باشد. برخی صفحات نیز با هدف مشاهده نمونهکار، هدایت مخاطب به شبکههای اجتماعی، معرفی محصولات یا دریافت اطلاعات بیشتر طراحی میشوند.
بنابراین پیش از شروع طراحی، بهتر است هدف اصلی صفحه را در یک جمله مشخص کنید؛ برای مثال:
کاربر پس از ورود، سریع با مجموعه تماس بگیرد.
مخاطب خدمات را بشناسد و برای مشاوره اقدام کند.
بازدیدکننده با تخصص و سوابق صاحب صفحه آشنا شود.
کاربر نمونهکارها را مشاهده کند و سپس درخواست همکاری بدهد.
مخاطب ابتدا اطلاعات کافی درباره کسبوکار دریافت کند و در مرحله بعد وارد مسیر تماس یا ثبت درخواست شود.
گام سوم: انتخاب هویت بصری مناسب کسبوکار
پس از تحلیل صفحه، ChatGPT باید بر اساس نوع کسبوکار، مخاطبان و ماهیت خدمات، یک هویت بصری اختصاصی پیشنهاد دهد. این مرحله میتواند شامل انتخاب رنگها، فرم باکسها، نوع CTA، سبک منو و چیدمان کلی صفحه باشد.
گام چهارم: طراحی Hero
بخش Hero یا بخش اصلی ابتدای صفحه، نخستین قسمتی است که مخاطب پس از ورود مشاهده میکند و باید در چند ثانیه به سه سؤال اصلی پاسخ دهد:
۱. این صفحه مربوط به چه خدمت یا کسبوکاری است؟
۲. چرا باید این مجموعه را انتخاب کنم؟
۳. برای دریافت خدمات چه اقدامی باید انجام دهم؟
یک Hero مناسب میتواند شامل عنوان اصلی، توضیح کوتاه و متقاعدکننده، مهمترین مزایا، شماره تماس، دکمه CTA و چند عبارت کلیدی مرتبط با خدمت یا کسبوکار باشد.
گام پنجم: ساخت باکسهای مستقل iAM
بهتر است هر بخش از صفحه بهصورت یک باکس HTML مستقل طراحی شود. این روش، علاوه بر سادهتر کردن مدیریت و ویرایش صفحه، احتمال تداخل کدها و بههمریختگی قالب iAM را نیز کاهش میدهد.
بسته به نوع کسبوکار میتوان بخشهایی مانند موارد زیر ایجاد کرد:
- معرفی
- خدمات
- چرا ما؟
- مزیتهای رقابتی
- برندهای تحت پوشش
- مراحل دریافت خدمات
- محدوده فعالیت
- نمونه پروژهها
- گالری
- تعرفه خدمات
- سؤالات متداول
- مقالات و آموزش
- تماس با ما
وجود همه این قسمتها برای همه کسبوکارها ضروری نیست. ChatGPT باید فقط بخشهایی را پیشنهاد دهد که برای همان کسبوکار و مخاطبان آن ارزش واقعی ایجاد میکنند. هدف، طولانیتر کردن صفحه نیست؛ بلکه باید ساختاری ایجاد شود که معرفی کسبوکار، تجربه کاربر و نرخ تبدیل را بهبود دهد.
گام ششم: استفاده از ID برای اتصال منو
اگر صفحه دارای منوی داخلی باشد، هر بخش باید یک شناسه ثابت یا ID داشته باشد. به این ترتیب، گزینههای منو میتوانند کاربر را مستقیماً به بخش مربوط در همان صفحه هدایت کنند.
سپس دکمههای منو به همین IDها متصل میشوند:
منو بهتر است یا CTA ثابت؟
همه صفحات الزاماً به منو نیاز ندارند. گاهی یک دکمه تماس ثابت، بسیار مؤثرتر از یک منوی چندگزینهای است.
برای خدمات فوری مانند یدککش، امداد خودرو، تعمیرات، کلیدسازی یا لولهبازکنی، کاربر معمولاً با یک نیاز فوری وارد صفحه میشود و هدف اصلی او برقراری سریع تماس است. در چنین صفحاتی، استفاده از یک دکمه ثابت «تماس فوری» میتواند مسیر اقدام کاربر را کوتاهتر و نرخ تبدیل را افزایش دهد. در مقابل، صفحات شرکتی، رزومهها و صفحاتی که محتوای بیشتری دارند، معمولاً از منوی داخلی ساختاریافته بهره بیشتری میبرند.
ستون سمت راست یا چپ قالب را فراموش نکنید
یکی از قسمتهای مهمی که در طراحی صفحات iAM نباید نادیده گرفته شود، ستون ثابت موجود در برخی قالبهاست.
این قسمت ممکن است بهصورت پیشفرض شامل تصویر، نام، سمت، شماره تلفن یا لینک شبکههای اجتماعی باشد. بااینحال، در بسیاری از صفحات خدماتی میتوان بخشهای قابل ویرایش این ستون را به یک پنل کاربردی برای معرفی سریع خدمات و هدایت مخاطب به تماس تبدیل کرد.
برای مثال این پنل میتواند شامل موارد زیر باشد:
- عنوان اصلی خدمت
- محدوده فعالیت
- مهمترین خدمات
- ساعات پاسخگویی
- شماره تماس
- CTA
- مزیتهای کوتاه
محدودیتهای فنی مهم در کدنویسی iAM
برای جلوگیری از تداخل کدها یا بههمریختگی صفحه، بهتر است هنگام کدنویسی HTML برای iAM با ChatGPT چند اصل فنی مهم رعایت شود:
- استایلها تا حد امکان بهصورت درونخطی (Inline) نوشته شوند.
- از JavaScript استفاده نشود.
- وابستگی به فایلهای CSS یا فونتهای خارجی ایجاد نشود.
- از ساختارهای بیش از حد پیچیده، از جمله Gridهای غیرضروری، استفاده نشود.
- کدها برای نمایش در موبایل نیز بهینه و قابل استفاده باشند.
- شماره تلفنها با لینک
tel:ایجاد شوند. - برای نمایش صحیح شمارهها و کدهای USSD در محیط راستبهچپ، در صورت نیاز از
dir="ltr"استفاده شود.
تنظیمات SEO را هم از ChatGPT بگیرید
سئو صفحات iAM را هم با ChatGPT بهینه کنید. پس از طراحی صفحه، از ChatGPT بخواهید اطلاعات سئوی صفحه را نیز آماده کند:
- Slug
- عنوان SEO (SEO Title)
- کلمات کلیدی
- Meta Description توضیحات متا
- عنوان H1 اصلی
در صفحات خدماتی، معمولاً بهتر است یکی از محورهای اصلی سئو بر ترکیب «خدمت + موقعیت جغرافیایی» متمرکز باشد؛ البته فقط زمانی که محدوده جغرافیایی واقعاً برای آن کسبوکار اهمیت دارد. برای مثال:
- یدک کش فیروزکوه
- تعمیر یخچال بجنورد
- ساخت سردخانه شیراز
نام صاحب صفحه زمانی باید به یکی از محورهای اصلی سئو تبدیل شود که صفحه با هدف برند شخصی، معرفی فرد یا رزومه حرفهای ایجاد شده باشد.
پرامپت آماده طراحی صفحه iAM با ChatGPT
متن زیر را بهطور کامل کپی کنید و در ابتدای یک گفتوگوی جدید با ChatGPT قرار دهید. این پرامپت به هوش مصنوعی کمک میکند پیش از شروع کدنویسی، اطلاعات لازم را مرحلهبهمرحله دریافت و طراحی را متناسب با قالب و نوع کسبوکار انجام دهد:
میخواهم یک صفحه iAM شرکت iNoti را به شکل حرفهای بازطراحی کنم.
قبل از کدنویسی، ابتدا از من بپرس از کدام یک از ۴ قالب iAM استفاده میکنم و در صورت امکان از من بخواه تصویر قالب را ارسال کنم.
بعد از مشخص شدن قالب، لینک صفحه iAM را از من بگیر و محتوای آن را تحلیل کن. موضوع صفحه، خدمات، شماره تماس، شهر، محدوده فعالیت، کلمات کلیدی SEO، نقاط ضعف محتوا و فرصتهای افزایش تماس را استخراج کن. هیچ اطلاعاتی را حدس نزن.
براساس نوع واقعی کسبوکار یک هویت بصری اختصاصی پیشنهاد بده. نمیخواهم طراحی صفحات مختلف شبیه یکدیگر باشند.
کدها باید مناسب محیط iAM باشند. CSS را تا حد امکان Inline بنویس، از JavaScript و فایل CSS خارجی استفاده نکن و هر بخش را بهصورت یک قطعه HTML مستقل بده که بتوانم مستقیماً داخل یک باکس iAM قرار دهم.
Hero، خدمات، مزیتها، چرا ما، مراحل دریافت خدمات، محدوده فعالیت، FAQ، تماس و سایر بخشهای لازم را فقط در صورتی پیشنهاد بده که برای همان کسبوکار مفید باشند.
برای هر بخش ID ثابت ایجاد کن تا منو بتواند به آن متصل شود؛ مانند services، why، faq و contact.
بررسی کن آیا صفحه به منوی شناور نیاز دارد یا CTA ثابت تماس بهتر است. این تصمیم را براساس نوع کسبوکار بگیر.
قسمت ثابت سمت راست یا چپ Template را فراموش نکن. اگر عکس توسط خود قالب نمایش داده میشود، دوباره عکس اضافه نکن. برای بخش قابل ویرایش ستون، یک پنل متناسب با کسبوکار طراحی کن.
در پایان Slug، عنوان SEO، Keywords، Meta Description و H1 مناسب پیشنهاد بده و کل صفحه را از نظر موبایل، شماره تماسها، لینکهای داخلی، اطلاعات اشتباه، یکپارچگی رنگ و SEO کنترل کن.
چگونه نتیجه بهتری از ChatGPT بگیریم؟
هرچه اطلاعات دقیقتر و کاملتری در اختیار ChatGPT قرار دهید، احتمال دریافت یک خروجی مناسبتر بیشتر خواهد بود. اگر نتیجه اولیه دقیقاً مطابق انتظار شما نبود، بهجای شروع مجدد فرایند، اسکرینشات خروجی را ارسال و مشخص کنید کدام بخش باید اصلاح شود.
برای مثال میتوانید بگویید:
- ستون سمت راست هنوز با طراحی اصلی هماهنگ نیست.
- دکمه تماس در موبایل بیش از حد بزرگ است.
- منو شبیه طراحی صفحه قبلی شده و باید متفاوت باشد.
- متن معرفی کوتاه است و نیاز به توضیح بیشتری دارد.
- رنگها با نوع کسبوکار همخوانی ندارند.
این روش باعث میشود طراحی بهصورت مرحلهای تکمیل شود و خروجی نهایی بسیار دقیقتر، کاربردیتر و متناسبتر از یک درخواست کلی مانند «برای من یک صفحه زیبا بساز» باشد.
جمعبندی
ChatGPT میتواند به کارشناسان فروش کمک کند تا بدون نیاز به دانش پیشرفته برنامهنویسی، طراحی و بازطراحی صفحات iAM را حرفهایتر، سریعتر و متناسب با نیاز هر کسبوکار انجام دهند. نکته اصلی این است که هوش مصنوعی را صرفاً یک ابزار تولید کد نبینیم؛ بلکه از آن برای تحلیل کسبوکار، انتخاب هویت بصری، ساختاردهی محتوا، بهینهسازی CTA، کدنویسی HTML و تنظیم سئو نیز استفاده کنیم.
با رعایت این مراحل، میتوان برای هر کسبوکار یک صفحه iAM متفاوت، کاربردی و حرفهای ایجاد کرد؛ صفحهای که علاوه بر ظاهر مناسب، برای معرفی بهتر کسبوکار، افزایش تعامل مخاطب و حضور مؤثرتر در نتایج جستوجو نیز طراحی شده باشد.
