音声ガイド付きの採用ページ
採用ページは文字が多く、仕事内容や社風を読み切る前に離脱されやすい
- 想定した利用者
- IT企業への転職・就職を考えていて、会社の雰囲気を短い時間でつかみたい人
- 取り組んだ工程
画面
目的
文章を読み込まなくても、会社の仕事と働き方の印象が伝わる採用ページにする
課題
採用ページは情報が多く、求職者は流し読みで終わりやすい。社員の雰囲気も、文字だけでは伝わりにくい
進め方
- ページを6つの区切り(冒頭・仕事・社員の声・福利厚生・1日の流れ・応募)に分け、区切りごとにナレーション音声を用意した
- ナレーションの進行に合わせて、読み上げている項目のカードを強調し、下の空きスペースに対応する写真を自動で表示した(例:「AI・新規サービス開発」を話す間は、その仕事の写真が出る)
- ヘッダーに音声ガイドの開始・停止ボタン、前後のセクションへ移るボタン、進み具合を示すバーを固定した
- 仕事内容は3つの分野、福利厚生は休日・リモート・教育支援・評価の4つに絞り、カードで並べた
- エンジニアの1日を時刻つきの流れで示し、読み上げに合わせて該当の時刻を強調した
工夫した点
- 冒頭に「イヤホンやヘッドフォンの使用を推奨」と添え、音声を使う前提を最初に伝えた
- 写真は話題に入った時点で出して切り替え、聞きながら見る内容が一致するようにした
- 音声を再生しなくても同じ内容を文章で読めるようにし、音を出せない場面でも使えるようにした
- トップの背景に短い動画を入れ、写真だけの採用ページよりも動きのある印象にした
使用した技術
- HTML / CSS / JavaScript
- 音声の再生とセクション切り替えだけで足り、重いフレームワークが不要なため
- Cloudflare Pages
- 静的なページと音声ファイルをそのまま公開できるため
関連リンク
ほかの制作物
VTuber・配信者がグッズを売るとき、在庫・梱包発送・身バレのリスクが重く、始めにくい
Asteer アクリルグッズ販売サポートのLP(ランディングページ・2026年)
中小企業や個人事業主の現場にどんな業務の困りごとがあるのか、実情を知る機会が少ない
中小企業の業務課題ヒアリング募集ページ(ランディングページ・2026年)
SNS動画やLPで集客したい店舗・事業者に、何を頼めて、いくらで、どう進むのかが伝わりにくい
ハロスマイル SNS動画・LP制作サービスのLP(ランディングページ・2026年)