Hans Leutenegger SA
スイスの求人ポータル。3つの言語、2つの利用者層、そして即座に応答すべき検索エンジン。
- 年
- 2026
- 制作期間
- 6週間
- 技術スタック
- Next.js · React · Tailwind · Vercel
- 情報設計
- デザイン
- 開発
- 多言語対応
- SEO
Kayzen WebがVercelのアドレスで公開しているデモ版です。正式なドメインはクライアントに帰属します。
- つの言語、3つのディレクトリ構造
- 3
- 創業年
- 1965
- つの見積もり済みの最適化課題
- 2
解決すべき課題。
背景
Hans Leutenegger SAは、1965年創業のスイスの工業系人材紹介会社です。製造業、建設業、技術分野で、人材派遣と正社員紹介を手がけています。
制約
3つの利用者層と3つの言語。求職者は、自宅の近くで、自分の職種の求人を、今すぐ探しています。企業は採用のパートナーを探しています。そしてスイスでは、ドイツ語、フランス語、イタリア語の多言語対応は選択肢ではなく、存在するための条件です。
解決策
求人検索エンジンをトップページにしました。地域と職種で絞り込むフィルター、再読み込みなしの即時表示。企業向けスペースは、並行して設けた完全な入り口です。各言語には、固有のURLとhreflangを持つ実在のディレクトリ構造があります。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
検索をトップページに
最初の画面に地域と職種のフィルター、その下に検索結果。検索する前にサイト内を移動しなければならない求職者は、離れていく求職者です。
自主応募を常に表示
紹介の成立の多くは、公開された求人から生まれるものではありません。自主応募は、ページ下部の注記ではなく、第一階層の導線です。
はっきり分けた2つの入り口
求職者と企業のニーズは正反対です。その区別は、3つの言語のいずれでも、ヘッダーから明示されています。
プロジェクトのカラーパレット
スイスレッド
#B21E2A
アイデンティティ
インダストリアルグレー
#4A5158
構造
ホワイト
#FFFFFF
背景
インク
#1B1E22
テキスト
タイポグラフィ体系
見出し用書体
Inter 700
本文用書体
Inter 400
3つの言語にひとつのフォントファミリー。ドイツ語は長い単語を、イタリア語は短い行を生みます。収録文字が多く、ハイフネーションに優れたファミリーを使うことで、3種類のレイアウトを作らずに済んでいます。
その裏側にある技術。
- Next.js
- React
- Tailwind
- Vercel
クライアント側での即時検索
絞り込みは、ページを再読み込みせずに行われます。求人ポータルでは、サーバーとの往復のたびに離脱という代償を払うことになります。
実在する3つのディレクトリ構造
/de/、/fr/、/it/に、相互のhreflangと固有のcanonicalを設定しています。クライアント側で切り替える方式では、インデックスされる言語がひとつだけになっていたでしょう。
特定済みの2つの課題
パフォーマンスは62、SEOは92です。前者は、初回表示ですべての求人を読み込んでいることが原因で、サーバー側のページネーションを修正策として採用しています。後者は、一部の職種ページでdescriptionが欠けていることが原因です。どちらも見積もり済みです。
検索で見つけてもらうための仕組み。
職種と地域ごとに1ページ
「Emploi soudeur Suisse romande（スイス・ロマンド 溶接工 求人）」「Stellen Elektriker Bern（ベルン 電気技師 求人）」。職種×地域の掛け合わせが、求人ポータルのSEOの土台です。
JobPostingのマークアップ
各求人に、種類、勤務地、契約形態、有効期限を記述しています。これにより、求人の検索結果に表示されるようになります。
納品したもの。
- トップ — 求人検索
- 職種別の求人
- 地域別の求人
- 自主応募
- 企業向けスペース
- 1965年からの会社の歩み
プロジェクトの流れ。
アーキテクチャ
検索をトップに、2つの入り口、3つの言語。
デザイン
即時のフィルター、自主応募を第一階層に。
開発
クライアント側の絞り込み、多言語のディレクトリ構造、JobPosting。
今後の予定
求人のサーバー側ページネーション、職種ページのdescription。
