# House of Honey｜ポートフォリオのWebデザイン参考

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

- URL: https://www.houseofhoney.com/
- 解説ページ: https://katapick.com/sites/house-of-honey
- カテゴリ: ポートフォリオ / 地域: 海外（US）/ 業種: インテリアデザインスタジオ
- テイスト: セリフ体、手書き文字、写真主体、大胆なタイポ、くすみカラー、固定ナビ
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

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

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

## 配色
- #331917 Espresso（テキスト・セクション背景）
- #edccbe Blush Sand（背景・反転時のテキスト）
- #0e0e0e Near Black（セクション背景）
- #fc72c4 Honey Pink（アクセント / 背景の筆記体）
- #ffffff White（サーフェス）

## フォント
- 背景に重ねる大きな筆記体: Canora（代替: Pinyon Script）
- 見出し・キャッチコピー（大文字のセリフ体）: Noe Text（代替: Playfair Display）
- ナビ・キャプション・本文: Neue Haas Grotesk（代替: Inter）

## よくある質問
### House of Honeyのサイトで使われているフォントは？
抽出データでは、背景の筆記体に Canora、見出しに Noe Text、ナビや本文に Neue Haas Grotesk が使われています。無料で近づけるなら Pinyon Script、Playfair Display、Inter の組み合わせが候補になります。

### 2色だけで上品に見せるにはどうする？
こげ茶とピンクベージュのように明度差の大きい2色を選び、セクションごとに背景と文字を反転させる方法が有効です。差し色は1色に絞り、装飾的な要素だけに使います。

### House of Honeyのデザインはどんな業種の参考になる？
インテリア・建築・ホテル・ライフスタイルブランドなど、写真の世界観とブランドの人柄を両方伝えたいクリエイティブスタジオのサイトの参考になります。

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