RecruitJapanPicked 2026.09.26

越前信用金庫採用サイト

採用のWebデザイン参考 — 信用金庫・金融

出典: shinkin.co.jp

Editor's note — 編集部の視点

職員も恐竜もおそばも、ステッカーみたいに切り抜いてる。

越前信用金庫の新卒採用サイトは、白フチで切り抜いた職員と地元のモチーフをコーラルレッドの上に散らし、金融機関の堅さを「地域の笑顔」の賑わいに変えている。

PipTrends & VTuber

え、待って、恐竜いる！？そばもお城も並んでて、地元の学生なら「わかる〜！」ってなりそう。職員さんのジャンプ写真まで混ざってて、銀行の採用でこのノリは親近感すぎる！！

1職員の写真に白フチを付けてシール風に。スーツ姿でも、手帳に貼ったような親しみが先に来る
2数字パートは「離職率0%」などを赤い大きな数字で。制度の説明より先に、働きやすさを掴ませる
3英字見出しにLobsterの筆記体を添える。金融の硬い語彙の横に、少しだけ遊びが入る

Color

越前信用金庫採用サイトの配色

Typography

使用フォントと無料の代替

和文見出し

Aa あア

使用: Zen Kaku Gothic New
代替: Zen Kaku Gothic New

本文

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

英字（RECRUIT・VIEW MORE・数字）

Aa あア

使用: Geologica
代替: Geologica

筆記体の英字見出し

Aa あア

使用: Lobster
代替: Lobster

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型16px · 1.6 · 600
見出しKatapick 型16px · 1.6 · 600
小見出しKatapick 型36px · 1.1 · 800
本文The quick brown fox — 参考を型にする15.3px · 1.8 · 600

Structure

ページ構成（上から順）

01
ヘッダー
白い角丸バーにロゴと「RECRUIT」、テキストナビ、募集要項・採用スケジュールのピル、赤いENTRYボタン。固定表示。
02
ヒーロー
コーラルレッドの地に、白フチで切り抜いた職員、恐竜の模型、そば、城、看板を散らし、「あつまれ地域の笑顔」のコピーと流れる「RECRUIT」の大文字を重ねる。
03
お知らせ
縦書きの「お知らせ」見出しと、日付・カテゴリラベル付きのリスト。右にインターンシップとパンフレットのバナー。
04
Company Movie
YouTube動画のサムネイルを並べたカルーセル。
05
えちしんのこと
アイボリーの地に店舗写真と「地域密着型の信用金庫」の見出し。創業年、残業時間、有給消化率、離職率、男女比などを赤い大きな数字と円グラフで見せる。
06
えちしんの取組み
女性活躍推進、子育て支援、SDGsなどの認定を白いカード4枚で並べる。
07
Initiative
「#01 福利厚生・キャリア」「#02 採用FAQ」「#03 地域貢献活動」を写真と左右交互に配置。左端に縦に流れる英字の帯。
08
Interview & Episode・Message
先輩職員の集合写真から「仕事・人・ストーリー」へ誘導し、理事長と採用担当者のメッセージを2カラムで並べる。
09
フッター
赤いENTRYカード、募集要項・採用スケジュールのボタン、切り抜きの職員写真で締める。

Interaction

アニメーション・インタラクション

FVの「RECRUIT」とInitiativeの縦の英字帯は、@keyframes で translateX / translateY させる無限マーキー
Company Movie は矢印ボタン付きの Swiper カルーセル
切り抜き写真の白フチは画像側で付けるか、filter: drop-shadow を複数重ねると再現できる
数字パートはスクロールで数値がカウントアップする演出と思われる

スクロールのコマ撮り300–30000ms

検出された技術:SwiperGoogle Fonts

Reproduce

再現するときのポイント

01切り抜き写真に太めの白フチと薄い影を付け、ステッカーのように少し傾けて散らす
02背景は純赤ではなく #e7594d のコーラル寄りにし、ENTRYだけ #e50012 で強める
03英字見出しは Lobster の筆記体、和文は Zen Kaku Gothic New の太字で温度差をつける
04数字は大きく赤で、単位と説明は小さく。ジャンプ率で見せる

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

echishin-recruit.katapick.md

1---
2title: "越前信用金庫 採用サイト 再現用デザイン仕様書"
3source: https://www.shinkin.co.jp/echishin/recruit/
4katapick: https://katapick.com/sites/echishin-recruit
5category: 採用
6region: 国内 (JP)
7tags: [レッド基調, ビビッド, 写真主体, マーキー, 縦書き, 固定ナビ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 30
13generator: Katapick
14---
15 
16# 越前信用金庫 採用サイト — 再現用デザイン仕様書
17 
18> 職員も恐竜もおそばも、ステッカーみたいに切り抜いてる。越前信用金庫の新卒採用サイトは、白フチで切り抜いた職員と地元のモチーフをコーラルレッドの上に散らし、金融機関の堅さを「地域の笑顔」の賑わいに変えている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22