# depsoa（デプソア）| 土屋鞄のランドセル｜ブランドのWebデザイン参考

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

- URL: https://tsuchiya-randoseru.jp/collections/depsoa
- 解説ページ: https://katapick.com/sites/tsuchiya-depsoa
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: ランドセル
- テイスト: 写真主体、モノクロ、グリッド、カルーセル、固定ナビ、ロングページ
- 公開・リニューアル: 2025-10 / Katapick掲載: 2026-09-28 / 最終確認: 2026-10-28
- 再現難易度: 2/5

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

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

## 配色
- #69737f Cloud Gray（カラム外の雲の写真（スクショから採色））
- #f5f6f3 Paper White（中央カラムの背景）
- #464645 Graphite（本文・見出しテキスト）
- #5f73ff Signal Blue（シリーズ名・機能タグ・カタログボタンの文字）
- #212540 Deep Navy（Conceptのグラデーション（スクショから採色））
- #ffffff White（KVのロゴ・ボタン）

## フォント
- 和文の見出し・本文: dnp-shuei-gothic-gin-std（秀英角ゴシック銀）（代替: Zen Kaku Gothic New）
- 英字見出し（Beyond Function・Lineup・シリーズ名）: roc-grotesk（代替: Archivo）
- 商品名・機能タグなどの小さな文字: ryo-gothic-plusn（りょうゴシック）（代替: M PLUS 1p）
- 縦書きのFeature番号などのラベル: Roboto Mono（代替: Roboto Mono）

## よくある質問
### depsoa のページはPCでどう見える？
PCでも幅375pxのスマホ幅カラムを画面中央に置き、左右は雲の写真で埋める構成です。カラム外にはロゴ、キャラクター、InstagramのQRコードだけを固定し、商品情報はすべて中央のカラムで読ませています。

### 多くのモデルを1ページで見せるには？
4つのシリーズごとに、写真スライダー、シリーズ名と説明、2列の商品グリッドという同じ型を繰り返しています。型が揃っているので、10モデルあっても価格や色を比べやすくなっています。

### 機能や仕様をカタログのように見せるコツは？
写真と文字を左右に分けた行を罫線で区切り、重量や保証期間を青い小さなタグにまとめる方法が参考になります。縦書きのFeature番号が、仕様書のような読み心地を足しています。

### サイト内のランドセル写真やキャラクターを使ってもいい？
商品写真・キャラクター・ロゴの権利は土屋鞄に帰属します。参考にするのはカラム構成や罫線の使い方、見出しの組み方にとどめ、画像は使用しないでください。

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