Service / SaaSJapanPicked 2026.09.26

STORES（ストアーズ）

サービス / SaaSのWebデザイン参考 — 店舗運営SaaS（POSレジ・決済・予約・ネットショップ）

出典: stores.fun

Editor's note — 編集部の視点

機能はてんこ盛り、なのに最初の画面はすっきり。

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

BrunoStructure & IA

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

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

Color

STORES（ストアーズ）の配色

Typography

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

見出し

Aa あア

使用: baBold（独自の登録名で読み込まれたWebフォント）
代替: Zen Kaku Gothic New

ボタン・ナビ・料金の数字

Aa あア

使用: baRegular
代替: Noto Sans JP

本文・説明文

Aa あア

使用: baBook
代替: Noto Sans JP

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

特大見出しKatapick 型64px · 1.1 · 600
見出しKatapick 型48px · 1.15 · 600
小見出しKatapick 型17px · 1.75 · 600
本文The quick brown fox — 参考を型にする17px · 1.4 · 400
ボタンKatapick 型17px · 1 · 600

Structure

ページ構成（上から順）

01
お知らせバー・ヘッダー
最上部に淡いピンクの帯で告知と黒い「詳しく見る」ボタン。その下に左ロゴ、4項目のナビ、右にサポートとグレーのピル型ログインボタン。
02
ヒーロー
角丸の小さな告知カード、中央揃えの大きな2行見出し、2行のリード、青の「無料ではじめる」と白枠の「資料を見る（無料）」を並べ、下に角丸の大きな店舗写真を置く。
03
サービス一覧
左揃えの見出しと説明のあと、キャッシュレス決済・ネットショップ・予約システム・POSレジなど6サービスを写真付きカードの3列グリッドで並べ、「すべてのサービスを見る」ボタンで締める。
04
おまかせスタート
設定代行の流れを、オレンジ系・ブルー系・レッド系の背景色で塗り分けた3枚のイラスト／写真カードで説明する。
05
料金プラン
フリー・スタンダード・個別相談の3列。アイコン、プラン名、大きな月額の数字、各プランのボタンを縦に揃え、スタンダードのみ青い塗りボタン。
06
導入事例
店舗の人物写真を全幅で敷き、利用者の声を白い大きな文字で重ねる事例スライド。下に「事例一覧で詳しく見る」。
07
無料資料
カタログや業種別（小売・美容サロン・飲食）の紹介資料を、表紙画像の2列カードで並べてダウンロードへ誘導する。
08
お知らせ・FAQ
日付・サムネイル・タイトルの横長リストでニュースを並べ、よくある質問は左に見出しと問い合わせボタン、右にアコーディオンを置く2カラム。
09
最終CTA・フッター
「お店作りを、はじめましょう。」の締めの見出しまではキャプチャで確認できる。フルページが9000pxで切れているため、以降のフッター（サービス・業種別・規約・SNS等の見出し）は抽出データの見出しのみで確認。

Interaction

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

スクロールすると、ロゴ・ナビ・告知・「相談する」「無料ではじめる」を1行にまとめた固定ヘッダーに切り替わる（position: sticky と、しきい値を越えたらクラスを付け替える実装で再現可能）
画面右下にキャンペーンのバナーが閉じるボタン付きで固定表示される。position: fixed と、閉じた状態を sessionStorage に保存する実装が扱いやすい
ヒーローの告知カードと店舗写真は、PC・SP・フルページのキャプチャで内容が異なり、一定時間で切り替わるスライドまたは動画と思われる
FAQ は details / summary 要素相当のアコーディオンで、右端の矢印が開閉を示すと思われる

スクロールのコマ撮り150–11000ms

検出された技術:Next.js

Reproduce

再現するときのポイント

01背景は #ffffff・#fafaf8・#f2f2f0 のわずかな差で面を分け、色は青（#0066ff）のCTAに集中させる
02見出しは太いゴシックを大きく、本文は細めのウェイトにして、ウェイト差で階層をつくる
03写真・カード・ボタンはすべて角丸で統一し、ボタンはピル型にする
04サービスや資料など同種の情報は3列または2列のカードに揃え、各セクションの最後に一覧ページへのボタンを置く

再現MDに含まれるもの

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

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

stores.katapick.md

1---
2title: "STORES（ストアーズ） 再現用デザイン仕様書"
3source: https://stores.fun/
4katapick: https://katapick.com/sites/stores
5category: サービス / SaaS
6region: 国内 (JP)
7tags: [ライト, 余白, 角丸, グリッド, 固定ナビ, 写真主体]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# STORES（ストアーズ） — 再現用デザイン仕様書
17 
18> 機能はてんこ盛り、なのに最初の画面はすっきり。レジ・決済・予約・ネットショップをまとめた店舗運営サービスSTORESのサイトは、白地に中央揃えの見出しと2つのボタンだけでFVを組み、機能の多さを段階的に開いていく。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22