# Asobica｜コーポレートのWebデザイン参考

> ロゴの一部を、でっかく切り抜いて背景にしてる。coorumなどを手がけるAsobicaのコーポレートサイトは、ロゴタイプをトリミングした黒い曲面を写真と組み合わせ、白・グレー・黒だけの画面に動きと熱量を持ち込んでいる。

- URL: https://asobica.co.jp/
- 解説ページ: https://katapick.com/sites/asobica
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: SaaS・カスタマーデータプラットフォーム
- テイスト: モノクロ、写真主体、大胆なタイポ、角丸、固定ナビ
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

## 編集部のひとこと（Bruno）
ナビは中央の白い箱に5項目、採用情報だけ右上の別ボタンに切り出してるんだよね。会社を知りたい人と働きたい人、2種類の訪問者を最初の1画面で振り分けてる。これはうまい。

## デザインの見どころ
- FVは写真と、ロゴを切り抜いた黒い曲面の2分割。コピーを曲面に載せ、図形そのものを看板にする
- 製品紹介の直後に導入企業のロゴを2段で並べる。何をする会社かの説明に、すぐ実績の裏づけが続く
- フッターの下に、画面を埋める巨大なロゴの断片。最後までVIの図形でページを締めくくる

## 配色
- #222222 Charcoal（テキスト / ロゴの図形 / ボタン）
- #dedad9 Warm Pebble（FVの図形の地）
- #efedec Greige（背景）
- #f9f8f7 Soft Paper（セクション背景）
- #ffffff White（カード / ナビの箱）

## フォント
- 和文見出し・キャッチ: 石井ゴシック B（代替: Zen Kaku Gothic New）
- 本文・ナビ: 石井ゴシック M（代替: Zen Kaku Gothic New）
- 英字見出し（Products / News / Recruit）: Inter（代替: Inter）

## よくある質問
### Asobicaのサイトで使われているフォントは？
和文に石井ゴシックの M と B、英字見出しに Inter が使われています。石井ゴシックの代わりには Google Fonts の Zen Kaku Gothic New が近い雰囲気です。

### Asobicaのようにロゴを切り抜いた図形を使うにはどうする？
ロゴの SVG を大きく拡大して一部だけを表示するよう viewBox を調整するか、clip-path で切り抜きます。写真と組み合わせる場合は、図形側を単色にしてコピーを載せると読みやすくなります。

### Asobicaのデザインはどんなサイトの参考になる？
SaaS やテック企業のコーポレートサイト、VI をリニューアルした企業のブランドサイトなど、ロゴや図形でブランドの勢いを見せたいサイトの参考になります。

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