BrandJapanPicked 2026.09.28

depsoa（デプソア）| 土屋鞄のランドセル

ブランドのWebデザイン参考 — ランドセル

サイトを見るtsuchiya-randoseru.jp

tsuchiya-randoseru.jp/collections/depsoa開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

PCで見ても、幅はスマホ1台ぶんだけ。

土屋鞄の新ランドセルブランドdepsoa（デプソア）のページは、雲の写真を左右に敷き、罫線で仕切った375px幅のカラムに機能と全10モデルを縦に並べて、カタログのように見せる。

LunaType & Whitespace

ランドセルのページで、欧文グロテスクをここまで大きく使うとはね。「Lineup」は大きく、「ラインアップ」はぐっと小さく。ジャンプ率に迷いがない。罫線も細くて、うるさくないのが分かってる。

1左右は雲の写真に、ロゴ・キャラクター・InstagramのQRだけ。PCの余白をSNSへの入口に使い切る
2機能は写真と文字を左右に分けた3行。数字入りのタグと縦書きのFeature番号で、仕様書のように読める
34シリーズとも、スライダー→説明→2列の商品グリッドの同じ型。10モデルあっても迷わない

Color

depsoa（デプソア）| 土屋鞄のランドセルの配色

Typography

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

和文の見出し・本文

Aa あア

使用: dnp-shuei-gothic-gin-std（秀英角ゴシック銀）
代替: Zen Kaku Gothic New

英字見出し（Beyond Function・Lineup・シリーズ名）

Aa あア

使用: roc-grotesk
代替: Archivo

商品名・機能タグなどの小さな文字

Aa あア

使用: ryo-gothic-plusn（りょうゴシック）
代替: M PLUS 1p

縦書きのFeature番号などのラベル

Aa あア

使用: Roboto Mono
代替: Roboto Mono

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

見出しKatapick 型22px · 1.6 · 400
小見出しKatapick 型20px · 1.6 · 400
本文The quick brown fox — 参考を型にする14px · 1.7 · 500
ボタンKatapick 型14px · 1.6 · 400

Structure

ページ構成（上から順）

01
カラム外の固定要素
1440px幅では中央375pxの外側に雲の写真を全面に敷き、左上に白いdepsoaロゴ、左下に翼のある黒いキャラクターのイラスト、右にInstagramのQRコードだけを置く。
02
KV
ランドセルや光のビジュアルの上に、白いdepsoaロゴと「by TSUCHIYA RANDOSERU」、枠線だけのLINEUP・STOREボタン、白いピル型の「ランドセルカタログ請求受付中」ボタンを積む。
03
Concept
紺から青へのグラデーションの面に、英字の「Beyond Function」、コピー「感じるままに、進め。」と短い本文、「View MOVIE」ボタンを置く。
04
Functions & Features
大きな英字見出しと「タフで機能的、安心のフルスペック装備」の下に、軽量・耐久性・多機能を写真左・文字右の行で3つ積む。各行に「980g - 1,230g前後」「6年間無料修理保証」などの青いタグと縦書きのFeature番号。
05
Lineup
全10モデルの導入文とメイン写真のあと、Edgetone・Optcolor・Hueline・Actlightの4シリーズごとに、写真スライダー、青い英字のシリーズ名と説明、価格付きの2列商品グリッドを繰り返す。受付を終えたモデルには「受付終了」を重ねる。
06
Support Goods
ランドセルカバー、レッスンバッグ、キッズキャップの3点を、シリーズと同じ写真＋2列グリッドの型で並べる。
07
Ranking
青い「NO.1」ラベルの下に、No.101 エッジトーンジェットブラックの商品写真を置く。
08
Stores〜フッター
旗艦店「depsoa 中目黒」を含む店舗情報、2028年ご入学用ランドセルのカタログ請求、News、SNS、CONTACT・BRANDのフッターが続く。

Interaction

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

ロゴ・キャラクター・QRコードは position: fixed でカラムの外に常駐している（フルページキャプチャの各所に同じ位置で写り込んでいる）
各シリーズの写真はドット付きのスライダーで、抽出データにある Swiper によるものと思われる
KVはPC・スマホ・フルページの各キャプチャで絵柄が違い、映像か自動で切り替わるスライドと思われる
Shopify のコレクションページをセクション単位で組んだ構成で、「受付終了」の表示は商品の販売状況と連動していると思われる

スクロールのコマ撮り125–500ms

depsoa（デプソア）| 土屋鞄のランドセルをスクロールしたときのフレーム1 — 01

depsoa（デプソア）| 土屋鞄のランドセルをスクロールしたときのフレーム2 — 02

depsoa（デプソア）| 土屋鞄のランドセルをスクロールしたときのフレーム3 — 03

depsoa（デプソア）| 土屋鞄のランドセルをスクロールしたときのフレーム4 — 04

depsoa（デプソア）| 土屋鞄のランドセルをスクロールしたときのフレーム5 — 05

depsoa（デプソア）| 土屋鞄のランドセルをスクロールしたときのフレーム6 — 06

検出された技術:SwiperShopifyGoogle FontsAdobe Fonts

Reproduce

再現するときのポイント

01PCでも幅375pxのカラムを中央に置き、左右を細い罫線で縁取る。カラム外には雲の写真を画面に固定して敷く
02カラム外に置くのはロゴ・キャラクター・QRコードの3つだけにし、商品情報はすべてカラム内に収める
03英字見出しはグロテスク体で大きく、和文の読みを小さく添えてジャンプ率をつける
04機能紹介は写真と文字を左右に分けた行を罫線で区切って積み、右端に縦書きの番号を入れる
05シリーズごとにスライダー・説明・2列グリッドの同じ型を繰り返し、10モデルを比べやすくする

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

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

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

tsuchiya-depsoa.katapick.md

1---
2title: "depsoa（デプソア）| 土屋鞄のランドセル デザイン分析書"
3source: https://tsuchiya-randoseru.jp/collections/depsoa
4katapick: https://katapick.com/sites/tsuchiya-depsoa
5category: ブランド
6region: 国内 (JP)
7tags: [写真主体, モノクロ, グリッド, カルーセル, 固定ナビ, ロングページ]
8launched: 2025-10
9verified: 2026-10-28
10measured: 2026-09-27 (Chromium 1440x900)
11difficulty: 2/5
12generator: Katapick
13---
14 
15# depsoa（デプソア）| 土屋鞄のランドセル — デザイン分析書
16 
17> PCで見ても、幅はスマホ1台ぶんだけ。土屋鞄の新ランドセルブランドdepsoa（デプソア）のページは、雲の写真を左右に敷き、罫線で仕切った375px幅のカラムに機能と全10モデルを縦に並べて、カタログのように見せる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-27 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22