# スタジオあかり｜kids photo studio｜サービス / SaaSのWebデザイン参考

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

- URL: https://studioakari.jp/
- 解説ページ: https://katapick.com/sites/studio-akari
- カテゴリ: サービス / SaaS / 地域: 国内（JP）/ 業種: キッズフォトスタジオ
- テイスト: ビビッド、写真主体、固定ナビ、角丸、ロングページ
- 公開・リニューアル: 2026-06 / Katapick掲載: 2026-09-28 / 最終確認: 2026-10-28
- 再現難易度: 3/5

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

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

## 配色
- #faf4da Cream（中央カラムの背景（方眼地））
- #1665cc Studio Blue（スタジオ撮影セクションの背景・見出し・本文）
- #ff87b9 Bubblegum Pink（ロケーション撮影セクションの背景・注意書きの帯）
- #f1423e Tomato Red（ロゴ・TOPタブ）
- #fffa70 Lemon Yellow（オンラインアルバムのボタン）
- #8ad3d4 Mint（FAQタブ・MENUボタン）

## フォント
- 本文・見出し・価格: LINE Seed JP（代替: M PLUS Rounded 1c）
- PLAN・STUDIO・LOCATION などの英字見出し、タブの文字: 極太の丸い英字ディスプレイ書体（画像と思われる）（代替: Bagel Fat One）

## よくある質問
### スタジオあかりのサイトのレイアウトの特徴は？
PCでも幅480pxのスマホ幅カラムを画面中央に置き、左上にロゴ、右端に色違いのタブ型ナビを並べる構成です。中身はスマホと同じ1カラムのまま、PCの余白をナビゲーションに使っています。

### どんな撮影プランが載っている？
常設ブースでのスタジオ撮影（撮影会・スタンダードプラン・プレミアムプラン）と、屋外でのロケーション撮影（スタンダードプラン・プレミアムプラン）が掲載されています。各プランに価格・カット数・撮影時間が記載されています。

### 予約はどこからする？
サイトの案内では、予約は公式LINEから受け付けています。プランにより申し込み日程が異なると記載されています。

### サイト内の写真を参考資料として使ってもいい？
写真・ロゴの権利はスタジオあかりに帰属し、写っている子どもの肖像にも配慮が必要です。参考にするのは構成・配色・導線にとどめ、写真は使用しないでください。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「デザイン分析MD」は https://katapick.com/sites/studio-akari からダウンロードできます。
出典: Katapick（https://katapick.com）