採用担当ももさん

LP制作・UI/UX設計
+ E2Eテスト自動化

エンジーニアス採用LP制作事例

採用担当者の思いを100%表現し、応募動線を最適化したLPと、
Playwrightによる品質保証の自動化

制作者:牧野

2024年8月

プロジェクト概要

目的

  • 採用担当者「ももさん」の人柄を前面に出し、20代初級エンジニアが「気軽に相談」できる心理的ハードルを下げる
  • LINE相談・エントリーのCVR(コンバージョン率)向上

ターゲット

  • 20代 初級エンジニア
  • 現職への不安や転職意欲があるが、まだ行動できていない層

成果

Playwrightによる自動テストを導入し、UI変更時の品質維持を実現

LPスクリーンショット

エンジーニアス採用LP

https://engenius.jp/recruit/momo/

LPデザインの全体構成

1. ファーストビュー

笑顔写真+共感メッセージで「話しやすさ」を最大化

「話しかけやすい人事」がモットーです。

ファーストビュー

共感セクション例

💭 もっとスキルアップしたいけど、今の職場じゃ機会がなくて…

💭 頑張りが正当に評価されてない気がして、モヤモヤする…

💭 会社の雰囲気や人間関係が、なんだか合わないかも…

2. 共感セクション

よくある悩みを吹き出しで表現

ユーザーの心の声を代弁し、心理的な距離を縮める

3. 解決策提示

実際の福利厚生や働き方の強みを具体的に

有給上限突破制度(268%実績)
案件選択制+待機中給与100%保証
残業月10時間以内

福利厚生の強み

268%
有給取得率
10,000+
案件選択肢
10h
月残業時間
100%
給与保証

UI/UX設計の工夫

ユーザー心理に合わせたCTA配置

  • 上部・中部・下部にCTAを分散配置
  • 「話してみる」ボタンを強調色で統一

スマホ最適化

  • ファーストビューで縦スクロール3秒以内にCTAが視認可能
  • タップしやすいボタンサイズと配置

共感ファースト設計

権威性よりも共感を重視したテキストライティング

「転職がすべてだとは思いません。でも、今の場所で悩み続ける必要もありません。」

UI設計プロセス

1 ユーザー心理分析
2 ワイヤーフレーム設計
3 プロトタイプ検証
4 レスポンシブ実装

Playwrightによる自動テスト

導入背景

LP更新頻度が高く、フォームやCTAのリンク切れリスクあり

テスト内容

  • フォーム入力〜送信動作確認
  • 各CTAリンクの遷移確認
  • スマホ表示での要素崩れ検出

効果

5分
手動確認時間
15秒
自動テスト時間
ヒューマンエラーゼロ化達成
playwright-test.js
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);
    }
  }
});
                        
✓ All tests passed in 15.2s

技術スタック

HTML5

セマンティックマークアップ

CSS3

レスポンシブデザイン

WordPress

CMS実装

Playwright

E2Eテスト自動化

開発フロー

要件定義
UI/UX設計
フロントエンド実装
テスト実装
リリース

成果と振り返り

定量的成果

100%
テスト合格率
UI変更後も安定
95%
工数削減
5分 → 15秒
0
ヒューマンエラー
自動化により実現
24/7
監視体制
継続的テスト実行

学びと洞察

採用LPでは「機能」より「感情価値」が重要

技術力アピールよりも、人柄や企業文化の伝達が転職決定の鍵

共感ファーストデザインの効果

ユーザーの悩みを代弁することで心理的距離を大幅に短縮

継続的品質保証の重要性

頻繁な更新があるLPこそ自動テストの価値が最大化

改善点と今後の展開

A/Bテストの導入

CTAボタンの色やテキストを変更した際の効果測定

パフォーマンス最適化

Core Web Vitalsの改善によるSEO強化

アクセシビリティ向上

WCAG 2.1準拠による利用者層拡大

マルチバリアント テスト

複数要素の組み合わせ最適化

プロジェクトの価値

「技術的な実装力と
ユーザー心理への深い理解、
そして継続的な品質保証―

この3つを統合することで、
真に価値のあるWebプロダクトが
生まれる」
制作風景

制作プロセス

ユーザーインタビュー
デザインワークショップ
アジャイル開発
継続的テスト

まとめ

本プロジェクトは、採用担当者の想いを
ユーザーに直接届けるデザインと、
継続的に品質を守る仕組みを両立しました。

感情価値 × 技術力

連絡先

makino@example.com
github.com/makino
portfolio.makino.dev
linkedin.com/in/makino

UI/UX Design × Frontend Development × Test Automation

Thank you for reading

Created with ❤️ by Makino - August 2024