# YOMA inc.（余間）｜ポートフォリオのWebデザイン参考

> Webサイトが、段ボールのファイルフォルダになってる。クリエイティブスタジオYOMA（余間）の公式サイトは、プロフィールも実績もカレンダーも紙の書類としてフォルダに挟み、スクロールのない1画面を“机の上”に見立てている。

- URL: https://yoma.inc/
- 解説ページ: https://katapick.com/sites/yoma
- カテゴリ: ポートフォリオ / 地域: 国内（JP）/ 業種: クリエイティブスタジオ・ブランディング
- テイスト: くすみカラー、大胆なタイポ、レトロ
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

## 編集部のひとこと（Iris）
段ボールの茶色に深緑、ラベンダー、オレンジ。どれもちょっとくすんでて、古い紙ものの箱をひっくり返したみたいな温度なのがすき。右上の地球だけ妙にリアルなのも、いいアクセント。

## デザインの見どころ
- 段ボールのフォルダに紙の書類を重ねる。スクロールさせず、1画面をそのまま机の上として見せる
- 下端に4つのナビを画面幅いっぱいに散らす。コラージュの外に、迷わない出口を残す
- 実績は黒い紙に罫線付きの一覧表。散らかった画面でも、案件名とクライアントだけは表で読ませる

## 配色
- #e3e3e3 Paper Gray（背景）
- #948371 Cardboard（ファイルフォルダ）
- #374826 Moss Sheet（Profile シートの背景）
- #bda1e4 Lavender Ink（「Profile」の文字・肖像写真の色調）
- #f78301 Tangerine（About シート / カレンダーの文字）
- #333333 Charcoal（OUR PROJECTS シートの背景）

## フォント
- 和文の見出し・案件名: ゴシックMB101 DB JIS2004（代替: Zen Kaku Gothic New）
- 和文本文: ゴシックMB101 M JIS2004（代替: Zen Kaku Gothic New）
- ロゴ・英字見出し・下部ナビ: Helvetica Now Display（代替: Inter）
- 一部の小さな表示（ドット書体）: VT323（代替: VT323）

## よくある質問
### YOMA（余間）のサイトで使われているフォントは？
和文にゴシックMB101（DB・M）、英字に Helvetica Now Display、一部にドット書体の VT323 が使われています。無料で近づけるなら Zen Kaku Gothic New と Inter の組み合わせがおすすめです。VT323 は Google Fonts で利用できます。

### YOMAのような紙の書類を重ねたレイアウトはどう作る？
各シートを position: absolute で重ね、紙や段ボールのテクスチャを背景画像にします。色は mix-blend-mode: multiply で乗せ、前面に出すシートだけ z-index と opacity を切り替えると、書類をめくるような見せ方になります。

### どんな業種の参考になる？
個人や少人数のクリエイティブスタジオ、デザイン事務所、編集・出版系のポートフォリオなど、実績一覧だけでなく“人柄”や手ざわりを伝えたいサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/yoma からダウンロードできます。
出典: Katapick（https://katapick.com）