PortfolioOverseas / USPicked 2026.09.26

House of Honey

ポートフォリオのWebデザイン参考 — インテリアデザインスタジオ

サイトを見るhouseofhoney.com

www.houseofhoney.com開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

極太ロゴの間に細い「of」を挟んだ落差が効いてる。

米カリフォルニアのインテリアデザインスタジオHouse of Honeyのポートフォリオサイトは、書体の重さと軽さの落差を全ページへ広げ、感性を文字組みで先に伝えている。

LunaType & Whitespace

ナビは小さい文字の細いバーで、極太ロゴの邪魔をしない。コピーも左右の端に逃がして、真ん中を空けてる。わかってるじゃん。……いいね！！

1見出しの背後に、画面からはみ出すピンクの筆記体。こげ茶とベージュの静かな2色に体温を足す
2施工事例の名前の下に緯度・経度。場所を地名でなく座標で示し、一件ごとを唯一の作品として扱う
3フッターはロゴマークを四角と四分円に分解して並べる。最後の一画面まで、形でブランドを語り切る

Color

House of Honeyの配色

Typography

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

背景に重ねる大きな筆記体

Aa あア

使用: Canora
代替: Pinyon Script

見出し・キャッチコピー（大文字のセリフ体）

Aa あア

使用: Noe Text
代替: Playfair Display

ナビ・キャプション・本文

Aa あア

使用: Neue Haas Grotesk
代替: Inter

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

見出しKatapick 型44.9px · 1 · 400
小見出しKatapick 型17.7px · 1.3 · 400
本文The quick brown fox — 参考を型にする15.7px · 1.3 · 400

Structure

ページ構成（上から順）

01
固定ナビ
左にHの形を崩したロゴマークと Studio / Spaces / The Buzz / Dear Honey / Press Room、右に「Get in Touch」と四角の矢印ボタン。小さな文字の細いバーで、スクロール中も上部に固定される。
02
ファーストビュー
ピンクベージュの地に、極太のサンセリフ「HOUSE」「HONEY」の間へ細い筆記体の「of」を挟んだロゴを画面幅いっぱいに置き、左右に大文字セリフのコピー。下に全幅の室内写真。
03
Studio
こげ茶の背景に、スタジオの紹介文を大文字セリフで中央に組み、背後にピンクの筆記体「House of…」を大きく重ねる。
04
Spaces with story
ピンクベージュの地に見出しと背景の筆記体を置き、施工事例を3列×2段の写真グリッドで並べる。各写真の下にプロジェクト名と緯度・経度、最後に「See More Projects」の行。
05
Dear Honey
こげ茶の背景に見出しと大きな筆記体を重ね、下にコラムの記事を全幅の写真と番号・日付付きで紹介する。「The Trick is Layers, Love」などの記事タイトルと Read More が続く。
06
お問い合わせ
室内写真の上にピンクベージュのカードを重ね、「It would be a privilege to hear from you」の見出しと Get in Touch の行を置く。
07
フッター
こげ茶の地にロゴマークを大きく分解した図形（四角と四分円）を配置し、下にメニュー、Instagram、採用連絡先、2拠点の住所を4列で並べる。

Interaction

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

Lenis による慣性スクロールで、写真とタイポが続く長いページをゆったり見せている
背景の大きな筆記体は、フルページキャプチャで位置がずれて写っていることから、スクロールで横に流れるかパララックスで動くと思われる（GSAP ScrollTrigger で x を scrub させて再現可能）
ナビはキャプチャの各所に写っており、position: fixed の細いバーとして常に表示されている
施工事例の写真はホバーで拡大やトーン変化が付く可能性がある（静止画からは断定できない）。overflow: hidden の枠内で img を scale させるのが定番

スクロールのコマ撮りLenis · 400–121668ms

検出された技術:LenisNext.js

Reproduce

再現するときのポイント

01色はこげ茶 #331917 とピンクベージュ #edccbe の2色を背景と文字で反転させながら使い、ピンク #fc72c4 は背景の筆記体だけに限定する
02書体を極太サンセリフ（ロゴ）、大文字のセリフ体（見出し）、細い筆記体（装飾）、小さなグロテスク（UI）の4役にはっきり分ける
03背景の筆記体は font-size を画面幅以上にし、見出しの後ろへ overflow させて重ねる
04写真は角丸や影を付けず、全幅または3列グリッドで余白を詰めて並べる

再現MDに含まれるもの

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

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

house-of-honey.katapick.md

1---
2title: "House of Honey 再現用デザイン仕様書"
3source: https://www.houseofhoney.com/
4katapick: https://katapick.com/sites/house-of-honey
5category: ポートフォリオ
6region: 海外 (US)
7tags: [セリフ体, 手書き文字, 写真主体, 大胆なタイポ, くすみカラー, 固定ナビ]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# House of Honey — 再現用デザイン仕様書
17 
18> 極太ロゴの間に細い「of」を挟んだ落差が効いてる。米カリフォルニアのインテリアデザインスタジオHouse of Honeyのポートフォリオサイトは、書体の重さと軽さの落差を全ページへ広げ、感性を文字組みで先に伝えている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22