# ANDMADE Inc.｜ポートフォリオのWebデザイン参考

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

- URL: https://andmade.jp/
- 解説ページ: https://katapick.com/sites/andmade
- カテゴリ: ポートフォリオ / 地域: 国内（JP）/ 業種: デザインスタジオ・アートディレクション
- テイスト: ミニマル、テキスト主体、余白、グリッド、等幅フォント、ライト
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 14 時間）

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

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

## 配色
- #f6f6f4 Unbleached Paper（背景）
- #000000 Ink Black（テキスト / SPのMenuボタン）
- #8c8c8a Pencil Gray（種別・担当・日付などの補足テキスト）
- #0022ff Signal Blue（アクセント（テキスト色として検出））
- #ffffff White（Menuボタンの文字）

## フォント
- ステートメント・案件名・ナビ・本文: Akzidenz-Grotesk Next Pro（代替: Inter Tight）
- 年月・フッターのラベル: Courier Prime（代替: Courier Prime）

## よくある質問
### ANDMADEのサイトで使われているフォントは？
本文・見出しに Adobe Fonts の Akzidenz-Grotesk Next Pro、年月などの細部に Courier Prime が使われています。無料で近づけるなら Inter Tight と Courier Prime（Google Fonts）の組み合わせがおすすめです。

### ANDMADEのような画像を使わない実績一覧はどう作る？
CSS Grid で3列の一覧を組み、各案件を「名前・種別・担当・年月」の固定フォーマットで並べます。年月だけ等幅書体にし、補足はグレーに落とすと、画像がなくても情報の階層がはっきりします。

### どんな業種の参考になる？
デザインスタジオ、アートディレクター、建築・設計事務所など、実績の数と幅を落ち着いたトーンで見せたいポートフォリオサイトの参考になります。

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