# STORES（ストアーズ）｜サービス / SaaSのWebデザイン参考

> 機能はてんこ盛り、なのに最初の画面はすっきり。レジ・決済・予約・ネットショップをまとめた店舗運営サービスSTORESのサイトは、白地に中央揃えの見出しと2つのボタンだけでFVを組み、機能の多さを段階的に開いていく。

- URL: https://stores.fun/
- 解説ページ: https://katapick.com/sites/stores
- カテゴリ: サービス / SaaS / 地域: 国内（JP）/ 業種: 店舗運営SaaS（POSレジ・決済・予約・ネットショップ）
- テイスト: ライト、余白、角丸、グリッド、固定ナビ、写真主体
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 24 時間）

## 編集部のひとこと（Bruno）
スクロールすると、ヘッダーが「相談する」「無料ではじめる」入りの1行にまとまるんだよね。どこまで読んでも、申し込みの入口がずっと手元にある。多機能なサービスほど、これが効く。これはうまい。

## デザインの見どころ
- FVは太いゴシックの2行見出しと青・白の2ボタンだけ。迷わせないことを、最初の1画面で約束する
- 6つのサービスは写真付きカードの3列グリッドに。同じ型で並べるから、違いだけが浮かび上がる
- 料金は3列のうちスタンダードだけ青の塗りボタン。色ひとつの差で、推奨プランへ視線を寄せる

## 配色
- #ffffff White（背景）
- #fafaf8 Paper White（セクション背景）
- #f2f2f0 Warm Gray（カード / ボタン背景）
- #2a2a2a Ink（テキスト / 黒ボタン）
- #0066ff Stores Blue（アクセント / 主要CTA）
- #ffebeb Blush（最上部のお知らせバー）

## フォント
- 見出し: baBold（独自の登録名で読み込まれたWebフォント）（代替: Zen Kaku Gothic New）
- ボタン・ナビ・料金の数字: baRegular（代替: Noto Sans JP）
- 本文・説明文: baBook（代替: Noto Sans JP）

## よくある質問
### STORESのサイトで使われているフォントは？
抽出データでは baBook・baRegular・baBold という独自の登録名のWebフォントが使われており、元の書体名は特定できません。近い印象を無料で出すなら、見出しに Zen Kaku Gothic New、本文に Noto Sans JP が扱いやすいです。

### STORESのような多機能SaaSのトップページはどう構成すればいい？
FVは見出しと2つのCTAに絞り、サービス一覧→導入支援→料金→事例→資料→FAQの順で、検討段階に沿って情報を並べる構成が参考になります。

### STORESのデザインはどんなサイトの参考になる？
機能が多いBtoB SaaSや、中小事業者向けの決済・予約サービスなど、料金や導入事例を明快に見せたいプロダクトサイトの参考になります。

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