YOMA inc.（余間）

1. 01

   ヘッダー

   左に「YOMA」のワードマークと「人とブランドをつなぐ、クリエイティブスタジオ」の2行、右上に地球の画像を置く。

2. 02

   ファイルフォルダ

   薄いグレーの紙地に、タブ付きの段ボール質感のフォルダを画面いっぱいに開いて置く。SPではクリップで留めたバインダー風になる。

3. 03

   Profile シート

   深緑の紙にブランドディレクターの肩書き・名前・経歴とSNSアイコン、ラベンダーに染めた肖像写真、下部にラベンダーの巨大な「Profile」。

4. 04

   About シート

   オレンジの紙に YOMA のステートメントと写真を載せたシート。背面で半透明に重なって見える。

5. 05

   Calendar シート

   右奥の紙に「Calendar 2026」。SPでは日付のグリッドと、日記のような短い文章が見える。

6. 06

   OUR PROJECTS

   チャコールの紙に Contents / Client の2列で、案件名とクライアント名を罫線区切りで一覧にする。

7. 07

   下部ナビ

   画面下端の白い帯に Project・Diary・About・Contact を画面幅いっぱいに均等配置する。

• 紙のシートは重なり順と不透明度が場面によって異なり、クリックやホバーで前面に出る、または読み込み時に重なっていく演出と思われる。z-index と opacity のトランジションで再現可能
• 段ボールや紙の質感はテクスチャ画像を背景に敷き、色面に mix-blend-mode: multiply で重ねると再現可能
• stack に STUDIO と Nuxt があり、STUDIO で1画面に収まる固定レイアウトとして組まれていると思われる

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

検出された技術:STUDIONuxtGoogle Fonts

• 01ページの高さを画面1枚に固定し、情報はすべてフォルダの中の“書類”として重ねる
• 02書類ごとに深緑・オレンジ・インディゴ・チャコールと色を変え、どれも少しくすませて紙らしさを出す
• 03大見出しは極端に太く縦長の英字を1語だけ置き、本文は小さなゴシックで詰めて組む
• 04ナビは下端に4語だけ。コラージュの外側に固定し、どこからでも移動できるようにする

1---
2title: "YOMA inc.（余間） 再現用デザイン仕様書"
3source: https://yoma.inc/
4katapick: https://katapick.com/sites/yoma
5category: ポートフォリオ
6region: 国内 (JP)
7tags: [くすみカラー, 大胆なタイポ, レトロ]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# YOMA inc.（余間） — 再現用デザイン仕様書
17 
18> Webサイトが、段ボールのファイルフォルダになってる。クリエイティブスタジオYOMA（余間）の公式サイトは、プロフィールも実績もカレンダーも紙の書類としてフォルダに挟み、スクロールのない1画面を“机の上”に見立てている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22