# 越前信用金庫 採用サイト｜採用のWebデザイン参考

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

- URL: https://www.shinkin.co.jp/echishin/recruit/
- 解説ページ: https://katapick.com/sites/echishin-recruit
- カテゴリ: 採用 / 地域: 国内（JP）/ 業種: 信用金庫・金融
- テイスト: レッド基調、ビビッド、写真主体、マーキー、縦書き、固定ナビ
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 30 時間）

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

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

## 配色
- #e7594d Coral Red（メイン背景）
- #f6f5f0 Washi Ivory（セクション背景）
- #ffffff White（ヘッダー / カード / 白フチ）
- #e50012 Signal Red（ENTRYボタン / ロゴ）
- #2f2828 Warm Charcoal（テキスト）

## フォント
- 和文見出し: Zen Kaku Gothic New（代替: Zen Kaku Gothic New）
- 本文: Noto Sans JP（代替: Noto Sans JP）
- 英字（RECRUIT・VIEW MORE・数字）: Geologica（代替: Geologica）
- 筆記体の英字見出し: Lobster（代替: Lobster）

## よくある質問
### 越前信用金庫の採用サイトで使われているフォントは？
和文見出しに Zen Kaku Gothic New、本文に Noto Sans JP、英字に Geologica、筆記体の見出しに Lobster が使われています。いずれも Google Fonts で無料で利用できます。

### 写真をステッカー風に切り抜くにはどうする？
背景を透過したPNG/WebPを用意し、filter: drop-shadow(0 0 0 #fff) を上下左右に重ねて白フチを作ります。少しの回転（rotate）と薄い影を足すと、貼ったシールのような見え方になります。

### どんな業種の参考になる？
信用金庫や地方銀行、自治体、地域密着の企業など、堅い印象をやわらげて地元の学生に親しみを持ってもらいたい新卒採用サイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/echishin-recruit からダウンロードできます。
出典: Katapick（https://katapick.com）