採用担当者の思いを100%表現し、応募動線を最適化したLPと、
Playwrightによる品質保証の自動化
制作者:牧野
2024年8月
Playwrightによる自動テストを導入し、UI変更時の品質維持を実現
エンジーニアス採用LP
https://engenius.jp/recruit/momo/
笑顔写真+共感メッセージで「話しやすさ」を最大化
「話しかけやすい人事」がモットーです。
💭 もっとスキルアップしたいけど、今の職場じゃ機会がなくて…
💭 頑張りが正当に評価されてない気がして、モヤモヤする…
💭 会社の雰囲気や人間関係が、なんだか合わないかも…
よくある悩みを吹き出しで表現
ユーザーの心の声を代弁し、心理的な距離を縮める
実際の福利厚生や働き方の強みを具体的に
権威性よりも共感を重視したテキストライティング
「転職がすべてだとは思いません。でも、今の場所で悩み続ける必要もありません。」
LP更新頻度が高く、フォームやCTAのリンク切れリスクあり
import { test, expect } from '@playwright/test'; test('エンジーニアス採用LP - CTA動作確認', async ({ page }) => { // LPにアクセス await page.goto('https://engenius.jp/recruit/momo/'); // ファーストビューのCTAボタンを確認 const firstCta = page.locator('.cta-button').first(); await expect(firstCta).toBeVisible(); // スマホ表示での要素確認 await page.setViewportSize({ width: 375, height: 667 }); await expect(firstCta).toBeInViewport(); // フォーム送信テスト await page.fill('input[name="email"]', 'test@example.com'); await page.click('button[type="submit"]'); // 送信完了ページの確認 await expect(page).toHaveURL(/.*thank-you.*/); }); test('全CTAリンクの健全性チェック', async ({ page }) => { await page.goto('https://engenius.jp/recruit/momo/'); const ctaButtons = await page.locator('.cta-button').all(); for (const button of ctaButtons) { const href = await button.getAttribute('href'); if (href) { const response = await page.request.get(href); await expect(response.status()).toBeLessThan(400); } } });
セマンティックマークアップ
レスポンシブデザイン
CMS実装
E2Eテスト自動化
採用LPでは「機能」より「感情価値」が重要
技術力アピールよりも、人柄や企業文化の伝達が転職決定の鍵
共感ファーストデザインの効果
ユーザーの悩みを代弁することで心理的距離を大幅に短縮
継続的品質保証の重要性
頻繁な更新があるLPこそ自動テストの価値が最大化
CTAボタンの色やテキストを変更した際の効果測定
Core Web Vitalsの改善によるSEO強化
WCAG 2.1準拠による利用者層拡大
複数要素の組み合わせ最適化
「技術的な実装力と
ユーザー心理への深い理解、
そして継続的な品質保証―
この3つを統合することで、
真に価値のあるWebプロダクトが
生まれる」
本プロジェクトは、採用担当者の想いを
ユーザーに直接届けるデザインと、
継続的に品質を守る仕組みを両立しました。
UI/UX Design × Frontend Development × Test Automation
Thank you for reading
Created with ❤️ by Makino - August 2024