CorporateJapanPicked 2026.09.26

Asobica

コーポレートのWebデザイン参考 — SaaS・カスタマーデータプラットフォーム

出典: asobica.co.jp

Editor's note — 編集部の視点

ロゴの一部を、でっかく切り抜いて背景にしてる。

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

BrunoStructure & IA

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

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

Color

Asobicaの配色

Typography

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

和文見出し・キャッチ

Aa あア

使用: 石井ゴシック B
代替: Zen Kaku Gothic New

本文・ナビ

Aa あア

使用: 石井ゴシック M
代替: Zen Kaku Gothic New

英字見出し（Products / News / Recruit）

Aa あア

使用: Inter
代替: Inter

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

本文The quick brown fox — 参考を型にする24px · 1.8 · 400
ボタンKatapick 型16px · 1 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左にロゴ、中央の白い箱に会社概要 / プロダクト / メンバー / お知らせ / お問い合わせ、右に枠線付きの「採用情報 →」。スクロール中も固定表示。SPでは Menu ボタンに集約。
02
ヒーロー
画面を写真と、ロゴタイプを切り抜いた黒い曲面で2分割し、曲面の上に「遊びのような熱狂で、世界を彩る」。キャプチャごとに写真と図形の左右が入れ替わっている。
03
ビジョン
「顧客中心の経営をスタンダードにする。」の見出しと本文、経営理念をみるボタン。右下に「Color the world with Asobica innovation」と大きなロゴ。
04
写真帯
オフィスで働く様子の写真3枚を画面幅いっぱいに横並び。
05
Products
英字見出しの下、角丸の白いカードに coorum のロゴ・製品画像・説明とプロダクト紹介ボタン。続けて導入企業のロゴを2段で並べる。
06
News
左に英字見出しと一覧をみるボタン、右にサムネイル・日付・タイトル・カテゴリラベル（PRESS / INFORMATION）のリスト。
07
Recruit
角丸の写真パネルに「世界をアソビカしよう。」と募集の一文、社員の顔写真3枚と矢印ボタン。
08
フッター
カテゴリ別のリンク群と大きなロゴ、SNS。最下部に画面を埋める巨大なロゴの断片を敷く。

Interaction

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

FV は写真とロゴの曲面の組み合わせが切り替わるスライド。曲面は SVG の path として置き、clip-path やマスクで写真と組み合わせると再現可能
ヘッダーは固定表示。中央のナビを白い箱にまとめ、写真の上でも読めるようにしている
導入企業のロゴは画面端で切れているため、横に流れるマーキーと思われる
STUDIO で制作されており、ボタンの矢印やカードのホバーは STUDIO のインタラクション設定で作れる

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

検出された技術:STUDIONuxtGoogle Fonts

Reproduce

再現するときのポイント

01ロゴタイプの一部を大きくトリミングした図形を用意し、写真と半々に組んで FV の主役にする
02色は #222222 と、グレージュ〜白の3段階だけに絞り、写真の色味で温度を足す
03英字見出しは Inter の太字で大きく、和文ラベルを小さく添えて Products / News / Recruit の型を揃える
04製品説明のすぐ下に導入企業ロゴを置き、BtoB の信頼を補う

再現MDに含まれるもの

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

Katapick の再現MDは何がすごい？ →

asobica.katapick.md

1---
2title: "Asobica 再現用デザイン仕様書"
3source: https://asobica.co.jp/
4katapick: https://katapick.com/sites/asobica
5category: コーポレート
6region: 国内 (JP)
7tags: [モノクロ, 写真主体, 大胆なタイポ, 角丸, 固定ナビ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# Asobica — 再現用デザイン仕様書
17 
18> ロゴの一部を、でっかく切り抜いて背景にしてる。coorumなどを手がけるAsobicaのコーポレートサイトは、ロゴタイプをトリミングした黒い曲面を写真と組み合わせ、白・グレー・黒だけの画面に動きと熱量を持ち込んでいる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22