PortfolioJapanPicked 2026.09.26

ANDMADE Inc.

ポートフォリオのWebデザイン参考 — デザインスタジオ・アートディレクション

出典: andmade.jp

Editor's note — 編集部の視点

写真ゼロ、実績はテキストの目録だけ。

デザインスタジオANDMADE Inc.の公式サイトは、生成り地に黒のグロテスクと等幅の年月だけで27件の実績を3列に並べ、作品を見せる前に“判断の確かさ”を文字組みで伝えている。

LunaType & Whitespace

年月だけ Courier Prime の等幅にしてるの、細かい。グロテスクの中で May.2026 が少し機械っぽく浮いて、目録らしさが増す。右上の「No music playing.」は気取りすぎ。……でも、いいね！！

1実績は案件名・種別・担当・年月の4行だけ。画像を切った目録が、積み重ねた仕事の量をそのまま見せる
2左端に「What Matters」「Made Here」の小見出し列を分ける。長いリストでも、ページの骨格が崩れない
3右端には Studies の記事を縦組みの英字で積む。本編の目録と読み物の入口を、文字の向きで分けている

Color

ANDMADE Inc.の配色

Typography

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

ステートメント・案件名・ナビ・本文

Aa あア

使用: Akzidenz-Grotesk Next Pro
代替: Inter Tight

年月・フッターのラベル

Aa あア

使用: Courier Prime
代替: Courier Prime

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

本文The quick brown fox — 参考を型にする12px · 1.5 · 500
ボタンKatapick 型12px · 1.2 · 500

Structure

ページ構成（上から順）

01
ヘッダー
左に「ANDMADE Inc.」、中央に「Projects , About , Studies , Contact」とカンマ区切りのテキストナビ、右端に「No music playing.」の小さな表示。SPではナビを画面下部の黒い「Menu」ピルに集約する。
02
What Matters
左に小見出し、中央に大きめの英文ステートメント3行と「Who we are →」。右端に「A sound archive that turns everyday listening into color.」と「Colors of Sound」へのリンク。
03
Made Here（実績一覧）
左に「Made Here」「27 Cases」と「Txt - Img」の切替。中央3列のグリッドに、下線付きの案件名・種別・担当領域・年月を並べる。
04
Studies
画面右端に、日付と記事タイトルを縦組みの英字で並べたリンクを置く。
05
フッター
大きな「©2026 ANDMADE Inc.」、Inquiries のメールアドレスと Social のリンク、Back to top、右下に円形のモノグラム。

Interaction

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

「Txt - Img」の切替で、テキストの目録と画像付きの一覧を切り替えると思われる。表示モードをクラスで持ち、グリッドの中身を差し替えると再現可能
右上の「No music playing.」は、Colors of Sound と連動した音楽再生のステータス表示と思われる
stack に Lenis があり、長い一覧を慣性スクロールで滑らかに見せていると思われる
Studies のリンクは writing-mode: vertical-rl で縦組みにした英字で再現可能

スクロールのコマ撮りLenis · 150–900ms

検出された技術:LenisNext.jsAdobe Fonts

Reproduce

再現するときのポイント

01背景は純白ではなく #f6f6f4 の生成りにし、文字は黒とグレーの2色に絞る
02左端に小見出し専用の列、中央に3列の本文グリッド、右端に縦組みのリンク列と、列の役割を固定する
03年月だけ等幅の Courier Prime にして、グロテスク体の中で目録らしいリズムをつくる
04案件名は下線付きのリンクで統一し、ホバー以外の装飾を足さない

再現MDに含まれるもの

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

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

andmade.katapick.md

1---
2title: "ANDMADE Inc. 再現用デザイン仕様書"
3source: https://andmade.jp/
4katapick: https://katapick.com/sites/andmade
5category: ポートフォリオ
6region: 国内 (JP)
7tags: [ミニマル, テキスト主体, 余白, グリッド, 等幅フォント, ライト]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 14
13generator: Katapick
14---
15 
16# ANDMADE Inc. — 再現用デザイン仕様書
17 
18> 写真ゼロ、実績はテキストの目録だけ。デザインスタジオANDMADE Inc.の公式サイトは、生成り地に黒のグロテスクと等幅の年月だけで27件の実績を3列に並べ、作品を見せる前に“判断の確かさ”を文字組みで伝えている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22