株式会社週刊つりニュース
株式会社週刊つりニュース
この記事では、株式会社週刊つりニュース様の求人ページにおける 「求人ボックスAPI連携」 と 「求人一覧UIのデザイン調整」 を中心に、実装事例をご紹介します。
求職者が迷わず求人を探せる検索UIと、外部求人データをサイト内に自然に馴染ませる表示設計を重視しました。
| クライアント | 株式会社週刊つりニュース 様 |
| 対象 | 求人ページ |
| 制作期間 | 1ヶ月 |
| サイトURL | https://tsurinews.jp/jobnavi/ |
| 主な対応 | 求人一覧UIのデザイン調整／求人ボックス（求人検索API）連携 |
| 制作方法 | PHP / JavaScript / HTML / CSS（ほか） |
プロジェクト概要
本プロジェクトでは、TSURINEWS内の求人ページにおいて、都道府県・雇用形態などの絞り込みUIと、求人カードの表示（求人ボックスへの遷移を含む）を整備しました。実際の求人カードには “sponsored by 求人ボックス” が表示され、クリックすると求人ボックス側の求人詳細へ遷移する導線になっています。
求人ボックスの「求人検索API（パブリッシャープログラム）」は、外部サイトが求人ボックス保有の求人を API経由で取得し（JSONレスポンス）、自社サイト上に表示できる仕組みで、表示デザインはサイト側で調整できます。
この仕組みを活用し、TSURINEWSのユーザー体験に合う形で求人コンテンツを組み込みました。
目的
- 求人検索の体験向上：絞り込み〜一覧表示までを分かりやすくし、探しやすい状態を作る
- 外部求人データの自然な組み込み：サイトの世界観を崩さず、求人情報を違和感なく表示
- API連携の安定運用：API仕様に沿ったリクエスト/レスポンス処理で、継続運用できる実装にする
デザイン・実装のポイント
1）絞り込みUI（都道府県／雇用形態）の整理
求人ページでは 都道府県 と 雇用形態 を軸に絞り込みができ、検索結果へスムーズに反映される設計です。
「まず条件を選ぶ→検索する」という行動が直感的にできるよう、操作の分かりやすさを優先しました。
2）求人カードの見せ方を整える（情報の優先順位）
求人カードは、職種・会社名・勤務地・給与など、判断に必要な情報が多くなりがちです。
そこで、視線移動が少なくなるように情報の並びと余白感を調整し、スマホでもストレスなく一覧を追える見せ方に寄せています。
3）求人ボックスAPI連携（取得→表示）
求人検索APIは、API仕様に沿ってリクエストを送信し、レスポンスを受け取り、求人情報を画面に表示する形が基本です。
本案件でもこの流れで実装し、ユーザーが求人をクリックすると求人ボックス側へ遷移する導線を構築しています。
4）“外部連携”を前提にした表示設計
サイト側のUIに合わせた実装ができたため、それを活かし、TSURINEWS側のページデザインに馴染む形で、求人一覧のUIを整えました。
制作を振り返って
求人ページは「情報量が多い」うえに「探す行動」が前提なので、デザインは作り込むよりも、迷わせない情報設計とサクサク動く検索体験の方が成果に直結します。
また、求人ボックスAPIのような外部連携では、API仕様に沿った取得・表示の基本を固めることが、運用フェーズのトラブル回避につながります。
ホームページ制作をお考えの方へ
私たちがお手伝いできること- 地元のお客様に届く、魅力が伝わるホームページ制作
- 新規オープン・リニューアルの集客強化
- デザインからコーディングまでワンストップ対応
- 公開後の更新・運用サポート
地域密着の対応はもちろん、全国どこからでもご相談いただけます。 まずはお気軽にご相談ください
こちらのプロジェクトに関わった人
tkmt design 合同会社について
tkmt design合同会社は、神奈川県川崎市宮前区を拠点とするWeb制作会社です。ホームページ制作・Webデザイン・グラフィックデザイン・映像制作を通じて、地域の中小企業や店舗のビジネスをサポートしています。
私たちの強みは、企画・デザインからコーディング・公開後の運用まで、ワンストップで対応できること。お客様のご要望を直接お伺いし、スピーディーかつ柔軟に形にしていきます。「大手に頼むほどではないけど、しっかりしたものを作りたい」——そんなお客様にこそ、私たちのサービスが最適です。
川崎市をはじめ、横浜市・東京都内など近隣エリアのお客様を中心に、オンラインでの対応により全国からのご依頼も承っております。
私たちが大切にしていること
「つくることが好き」——それが私たちの原点です。
ユーザーにとって使いやすく、クライアントのビジネスに貢献するWebサイトを。そして、地元・川崎から価値あるクリエイティブを届けていきたい。小さな会社だからこそ、一つひとつの案件に丁寧に向き合い、大きな成果を生み出すことを目指しています。
川崎市のホームページ制作 対応エリア
tkmt designは川崎市宮前区を拠点に、
川崎市全域および周辺地域のお客様にホームページ制作サービスを提供しています。
神奈川県内・東京都内はもちろん、全国対応もさせていただいております。
川崎市
- 宮前区（宮前平、宮崎、鷺沼、土橋、馬絹、菅生、有馬、東有馬、犬蔵など）
- 高津区（溝の口、高津、久本、二子、坂戸、末長、久地など）
- 中原区（武蔵小杉、新丸子、元住吉、平間、丸子通など）
- 多摩区（登戸、向ヶ丘遊園、生田、読売ランド前など）
- 麻生区（新百合ヶ丘、柿生、百合ヶ丘、栗平など）
- 幸区（川崎、鹿島田、新川崎など）
- 川崎区（川崎駅周辺、京急川崎など）
横浜市
青葉区、都筑区、港北区、緑区など
東京都
世田谷区、狛江市、調布市、町田市、稲城市など
その他
オンラインでのお打ち合わせにより、 神奈川県内・東京都内はもちろん、全国対応も可能です。