Service / SaaSJapanPicked 2026.09.28

スタジオあかり｜kids photo studio

サービス / SaaSのWebデザイン参考 — キッズフォトスタジオ

サイトを見るstudioakari.jp

studioakari.jp開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

右端の色とりどりのタブが、そのままメニュー。

キッズフォトスタジオ「スタジオあかり」の公式サイトは、中央480pxの1カラムに撮影プランを詰め、左上のロゴと右のタブ型ナビでPCの余白を案内板に変えている。

BrunoStructure & IA

PLANの冒頭で「STUDIO」「LOCATION」の2択ボタンを先に見せてるんだよね。料金が長く続くページでも、自分に関係ある方へまっすぐ飛べる。入口を最初に分けておく判断が、地味に効いてる。

1PCの右端に色違いのタブを縦積み。セクション名と予約・アルバムの入口を、中央カラムの外に逃がしている
2スタジオ撮影は青、ロケーション撮影はピンクの地。長いプラン一覧でも、いまどちらを読んでいるか迷わない
3価格の隣に「80cut」「90分」のバッジ。プランの違いを、数字を拾うだけで比べられる

Color

スタジオあかり｜kids photo studioの配色

Typography

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

本文・見出し・価格

Aa あア

使用: LINE Seed JP
代替: M PLUS Rounded 1c

PLAN・STUDIO・LOCATION などの英字見出し、タブの文字

Aa あア

使用: 極太の丸い英字ディスプレイ書体（画像と思われる）
代替: Bagel Fat One

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

見出しKatapick 型21.6px · 1.8 · 400
小見出しKatapick 型21.6px · 1.8 · 400
本文The quick brown fox — 参考を型にする19.2px · 2.5 · 700

Structure

ページ構成（上から順）

01
PCの左右エリア
左上にロゴ、右端にTOP・PLAN・RESERVE・FAQ・ABOUTの色違いタブと「ご予約はこちら」「オンラインアルバム」の2枚を縦に並べる。背景は白地の斜め格子に、さくらんぼ・チューリップ・キャンドルなどの小物写真を薄く散らす。
02
ファーストビュー
方眼地にロゴを置き、雲形に切り抜いた子どもの写真を横に並べる。下にスタジオの紹介文。SPではその下にオンラインアルバムのボタンと、RESERVE・MENUのボタンが続く。
03
WELCOME
青いチューリップ、赤い電話、黄色い風船の犬の写真の間に、「WELCOME!」の円形スタンプと下向きの矢印を置く。
04
PLAN
英字見出しと説明文の下に、青の「STUDIO」とピンクの「LOCATION」の2つのボタンを並べ、各プランへ案内する。
05
STUDIO（スタジオ撮影）
青地に半円の見出し、英字の帯、ブース写真。続いてSTUDIO 01（撮影会）とSTUDIO 02（スタンダード・プレミアム）のカードに、料金表、写真、サムネイル5枚、アイコン付きの特典、オプション料金を収める。
06
LOCATION（ロケーション撮影）
ピンク地に半円の見出しと説明文。スタンダードプランとプレミアムプランを、写真とサムネイル付きのカードで紹介する。
07
RESERVE
「ご予約は公式LINEから受付中です」と、プランにより申し込み日程が異なる旨を伝える予約案内。
08
FAQ
よくある質問をまとめ、解決しない場合は公式LINEから問い合わせるよう案内する。
09
ABOUT
「360度かわいいで埋め尽くされた小さなお部屋」としてスタジオを紹介するセクション。

Interaction

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

右端のタブ型ナビはフルページキャプチャで900pxごとに同じ位置へ繰り返し写っており、position: fixed で常駐していると思われる
FVの写真は左右に隣の写真がのぞいており、横に送るカルーセルと思われる
STUDIOセクションの英字帯「Traveling Carnival booth」は両端が切れた状態で写っており、横に流れるマーキーと思われる
写真の雲形・花形の切り抜きは、SVGを使った mask-image か clip-path で再現できる
ノーコードツールSTUDIOで構築され、Nuxtで出力されたサイト

スクロールのコマ撮り300–2824000ms

スタジオあかり｜kids photo studioをスクロールしたときのフレーム1 — 01

スタジオあかり｜kids photo studioをスクロールしたときのフレーム2 — 02

スタジオあかり｜kids photo studioをスクロールしたときのフレーム3 — 03

スタジオあかり｜kids photo studioをスクロールしたときのフレーム4 — 04

スタジオあかり｜kids photo studioをスクロールしたときのフレーム5 — 05

スタジオあかり｜kids photo studioをスクロールしたときのフレーム6 — 06

検出された技術:STUDIONuxtGoogle Fonts

Reproduce

再現するときのポイント

01PCでは幅480pxの1カラムを中央に置き、左上にロゴ、右端にタブ型ナビを固定する。背景は斜め格子に小物の写真を薄く散らす
02セクションごとに地色を変え、スタジオ撮影は青、ロケーション撮影はピンクで塗り分ける
03料金は「価格＋カット数・時間のバッジ」の形に統一し、プラン間で比較しやすくする
04写真は雲形・花形のマスクで切り抜き、メイン写真の下にサムネイル5枚を並べる

デザイン分析MDに含まれるもの

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

Katapick のデザイン分析MDは何がすごい？ →

studio-akari.katapick.md

1---
2title: "スタジオあかり｜kids photo studio デザイン分析書"
3source: https://studioakari.jp/
4katapick: https://katapick.com/sites/studio-akari
5category: サービス / SaaS
6region: 国内 (JP)
7tags: [ビビッド, 写真主体, 固定ナビ, 角丸, ロングページ]
8launched: 2026-06
9verified: 2026-10-28
10measured: 2026-09-27 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# スタジオあかり｜kids photo studio — デザイン分析書
16 
17> 右端の色とりどりのタブが、そのままメニュー。キッズフォトスタジオ「スタジオあかり」の公式サイトは、中央480pxの1カラムに撮影プランを詰め、左上のロゴと右のタブ型ナビでPCの余白を案内板に変えている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-27 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22