ねこふる

1. 01

   ヘッダー

   白い角丸バーにロゴ、点線区切りのグローバルナビ、角丸の検索窓を配置。スクロール後も上部に固定される。

2. 02

   メインスライダー

   中央に大きな角丸バナー、左右に前後のバナーを見切れさせたカルーセル。下に肉球型のページネーション、脇に吹き出し型の「75万品以上」の告知と猫イラスト。

3. 03

   重要なお知らせ

   見出し「重要なお知らせ / NEWS」と、日付＋タイトルの白い角丸バー1行。

4. 04

   キーワード検索帯

   濃いオレンジの全幅帯に猫イラスト、大きな検索窓、注目ワードのタグを並べる。

5. 05

   返礼品を探す

   「返礼品から探す / エリアから探す」のタブ付き白パネル。左に金額帯のリスト、右にアイコン付きのカテゴリボタンを4列で並べる。

6. 06

   おすすめ返礼品・ランキング

   おすすめ返礼品のカードグリッドと、総合・新着の人気ランキングを順位バッジ付きの横並びカードで表示。

7. 07

   おすすめ特集

   特集バナーを正方形のタイルで4列に並べ、「もっと見る」のピル型ボタンへつなぐ。

8. 08

   ねこふるとは・保護猫支援

   左に縦長のコピーと本文、右に角丸の猫写真。下に保護猫支援・地域支援のタブで活動記事を一覧表示。

9. 09

   口コミ・お知らせ・フッター

   利用者の口コミカード、お知らせ一覧のあと、ベージュ地のフッターに返礼品カテゴリやガイドのリンクを多段で並べる。

• メインスライダーは中央1枚＋左右見切れの構成で、Swiper の centeredSlides と slidesPerView: 'auto' で再現できる。ページネーションの bullet を肉球SVGに差し替える
• ヘッダーは position: sticky（または fixed）で常時表示。フルページ撮影でも各所にヘッダーが写り込んでおり、追従していると思われる
• ランキングは横スクロールのカルーセルで、左右の矢印ボタンで送る形式と思われる
• 背景の不定形シェイプは SVG の path を absolute 配置した静的な装飾と思われる

スクロールのコマ撮り400–5000ms

検出された技術:WordPressGoogle Fonts

• 01背景は純白ではなく #f0efec 前後の生成りにし、白いパネルとの差でカードを浮かせる
• 02オレンジ・濃グレー・白の三色の不定形シェイプをセクションの境目にまたがせて配置し、猫の毛柄のリズムをつくる
• 03丸ゴシック1書体で見出しから本文まで統一し、英字ラベルだけ Lexend Deca にする
• 04ボタン・カード・バナーすべてに大きめの角丸をかけ、アイコンは手描き風の線で揃える

1---
2title: "ねこふる 再現用デザイン仕様書"
3source: https://necofuru.com/
4katapick: https://katapick.com/sites/necofuru
5category: EC
6region: 国内 (JP)
7tags: [イラスト, 角丸, カルーセル, グリッド, 固定ナビ, ロングページ]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# ねこふる — 再現用デザイン仕様書
17 
18> 三毛猫の毛色が、そのままサイトの配色になってる。猫好きのためのふるさと納税サイト「ねこふる」は、オレンジと濃グレーの不定形シェイプを生成りの地に散らし、返礼品選びの手続き感を猫の毛並みでやわらげている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22