55万円請求を生んだ、公開ページと従量課金APIを直結する落とし穴
公開ページへの機械的な大量アクセスが従量課金APIの大量実行へ増幅され、約55万円の請求に至った経験から、外部APIの費用上限、クォータ、キャッシュ、監視の設計を整理します。
求人検索から応募・CRM登録までをつなぐ、新規転職サービス構築
新しい転職支援サービスの立ち上げにあたり、求人検索、求人詳細、応募フォーム、転職相談フォームを備えたWebサイトを新規構築しました。要件整理、サイト構成、ワイヤーフレーム、デザイン、コーディングに加え、LaravelによるWebシステムとZoho CRMとのAPI連携までを約3か月で担当しています。 利用者が求人を素早く探して応募できるフロント画面と、運営側が求人・応募情報を扱う管理機能を一体で設計しました。検索結果の表示速度やフォーム完了までの待ち時間も調整し、サービスの第一印象だけでなく、実際の利用場面でストレスを感じにくい導線を整えています。
| クライアント名 | 某人材・リクルート関連企業 |
|---|---|
| 業種 | |
| サイトのカテゴリ | |
| サイトの特徴 | |
| 制作範囲 | |
| 制作期間 | 3か月 |
サービス構想を初めてWebサイトとして具体化する案件であり、参考サイトの見た目を再現するのではなく、誰がどのように求人を探し、何を確認して応募するのかを整理する必要がありました。求人一覧では条件検索と結果の見やすさ、詳細ページでは仕事内容や担当者情報の優先順位、応募と転職相談では入力項目と完了までの分かりやすさが求められました。
さらに、応募情報をZoho CRMへ安全に連携し、運営側の業務へつなぐことが重要でした。APIは認証手順が複数段階に分かれ、トークンの更新やサーバー環境の差異にも対応が必要です。Web制作に慣れていない担当者にも、画面の完成像、更新方法、確認ポイントを具体的に共有しながら進めること、求人に写真がない場合や検索結果が少ない場合にも画面が成立することが求められました。
競合サービスを調査し、求人検索で利用者が慣れている入力方法や結果表示を踏まえつつ、サービスの目的に必要な情報だけを整理しました。トップページの時点でinput、select、ボタン、カードを共通パーツとして作り、求人一覧、詳細、応募、相談へ同じ操作感で展開しています。結果件数が少ない場合や写真がない求人も想定し、情報量に左右されにくい表示ルールを設計しました。
システムはLaravelで構築し、求人データと応募導線、管理機能を分離。Zoho CRMとの連携では英語のAPI仕様を確認し、認証トークンを取得・更新する手順を管理画面上で確認できるようにしました。フォーム送信は、外部連携処理を整理して完了画面への遷移を早め、利用者を待たせにくい構成へ改善。デザイン、フロント、APIの差分を共有しやすいよう、画面と機能の対応関係を明確にして進行しました。
情報量の多い求人サイトとして、余白を広く取りすぎるのではなく、条件、求人の特徴、勤務地、担当者情報、応募ボタンを短い視線移動で確認できる密度を目指しました。転職サービスで一般的なUIを研究し、利用者が操作方法を学ばなくても検索できることを優先しながら、ブランドカラーと見出しでサービスらしさを加えています。
求人ごとに写真や文章量が異なるため、写真の有無で情報の優先順位が変わらないカードを設計しました。担当者メッセージが長くなる場合、検索結果が少ない場合、スライド件数が少ない場合など、実データで起こり得る状態も想定しています。入力フォームは、検索条件と応募情報で同じ部品を共有し、画面が変わっても操作感がぶれないようにしました。
Laravelでフロント、管理画面、APIの役割を分け、求人検索・詳細・応募・転職相談を一つのサービスとして構築しました。検索条件の処理と結果取得を調整し、条件を変更したときに待ち時間を感じにくい表示へ改善しています。フォームは共通テンプレートを活用しながら、入力チェック、確認、送信、完了までを実装し、外部連携の処理順を見直すことで完了画面への遷移を高速化しました。
Zoho CRM連携では、認証コード、アクセストークン、更新トークンを扱う手順を整理し、担当者が設定状況を確認できる管理画面を用意しました。APIの失敗時に画面全体が停止しないよう処理を分け、ログから原因を追える構成としています。Dockerを用いたローカル環境でPHP・MySQLの条件を揃え、サーバー環境の変更にも対応。フロント側の修正とAPI接続後の差分を分けて管理し、連携機能を保ったまま画面を改善できる実装にしました。
この案件で確認した判断を、複数の制作記録と照合し、ほかのWeb制作でも使える確認事項として整理しています。
公開ページへの機械的な大量アクセスが従量課金APIの大量実行へ増幅され、約55万円の請求に至った経験から、外部APIの費用上限、クォータ、キャッシュ、監視の設計を整理します。
紙やPDFで行ってきた申込・注文業務をWeb化するとき、利用者の操作、受付側の確認、例外処理、計算、保存、外部連携までを一続きで設計する方法を整理します。
APIや定期同期について、接続先の停止、通信遅延、再送、部分失敗を検知し、安全に復旧する仕組みを整理します。
新しい会社・事業の立ち上げに伴うコーポレートサイト制作です。企業情報や事業内容などの大枠は見えていた一方、各ページの役割、事業を表す言葉、ブランドの見...
既存の企業サイトとMovable Typeが稼働する環境に、施設サイトと新しい更新担当部門を追加したリニューアルです。ページ制作だけでなく、既存ドメイン・サーバー...
業界団体の会員向けポータルをリニューアルした案件です。蓄積されたお知らせ、資料、マニュアル、各種フォームを整理し、会員認証、検索、公開期間、管理画面、...
日本語と英語の二言語サイトを限られた期間で並行制作した案件です。日本語版を基準に共通テンプレートを整えながら、後から届く翻訳原稿、言語ごとの文字量と改...