# ねこふる｜ECのWebデザイン参考

> 三毛猫の毛色が、そのままサイトの配色になってる。猫好きのためのふるさと納税サイト「ねこふる」は、オレンジと濃グレーの不定形シェイプを生成りの地に散らし、返礼品選びの手続き感を猫の毛並みでやわらげている。

- URL: https://necofuru.com/
- 解説ページ: https://katapick.com/sites/necofuru
- カテゴリ: EC / 地域: 国内（JP）/ 業種: ふるさと納税・保護猫支援
- テイスト: イラスト、角丸、カルーセル、グリッド、固定ナビ、ロングページ
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

## 編集部のひとこと（Bruno）
検索窓がヘッダーと全幅の帯で2か所あるんだよね。欲しい品が決まってる人はキーワードへ、決まってない人は下のパネルへ。入口を目的で分けてるの、これはうまい。

## デザインの見どころ
- オレンジと濃グレーのシェイプは三毛猫の毛色。ロゴから背景まで、配色の根拠が一本に通る
- スライダーの送りまで肉球アイコンに。機能部品にも猫を宿し、細部で“好き”を裏切らない
- 金額帯とカテゴリの2軸をタブ付きパネル1枚に集約。75万品以上の中から、最短で絞り込める

## 配色
- #f0efec Paper Beige（ページ背景）
- #ffffff White（カード・パネル背景）
- #f18614 Calico Orange（アクセント / ボタン / 強調文字）
- #c54f00 Burnt Orange（検索帯の背景）
- #231815 Cocoa Black（テキスト）
- #2c6d10 Leaf Green（アクティブタブ）

## フォント
- 見出し・本文・ナビ: 秀英にじみ丸ゴシック B（代替: Zen Maru Gothic）
- 日付・英字ラベル: Lexend Deca（代替: Lexend Deca）

## よくある質問
### ねこふるのサイトで使われているフォントは？
見出しから本文まで秀英にじみ丸ゴシック B、日付や英字ラベルに Lexend Deca が使われています。無料で近づけるなら Zen Maru Gothic と Lexend Deca の組み合わせが使えます。

### ねこふるのような肉球のページネーションはどう作る？
Swiper の pagination で renderBullet を使い、各 bullet に肉球のSVGを入れます。アクティブ時だけ色を濃くし、非アクティブは薄いグレーにすると同じ見え方になります。

### ねこふるのデザインはどんなサイトの参考になる？
ペット関連EC、ふるさと納税や寄付のプラットフォーム、地域の物産サイトなど、商品数が多くても親しみやすさを保ちたいECサイトの参考になります。

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