# Hildén & Kaira｜コーポレートのWebデザイン参考

> いきなりケンカ腰のコピーで自己紹介してくる。フィンランドのSNSエージェンシーHildén & Kairaのサイトは、クローム調の巨大ロゴと喧嘩腰のセリフ体コピーで、実績より先に態度で自信を示す。

- URL: https://www.hildenkaira.fi/
- 解説ページ: https://katapick.com/sites/hilden-kaira
- カテゴリ: コーポレート / 地域: 海外（FI）/ 業種: SNSマーケティング・コンテンツ制作エージェンシー
- テイスト: セリフ体、大胆なタイポ、写真主体、スクロール演出、カルーセル
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 32 時間）

## 編集部のひとこと（Luna）
本文のPP Neue Montrealは小さく、おとなしく。だからセリフ体の毒舌だけがちゃんと刺さる。口は悪いのに、組版はやたら礼儀正しい。……いいね！！

## デザインの見どころ
- FVはクローム調のロゴを画面幅いっぱいに。細いセリフ体のコピーとの質感の差が、視線を離さない
- 実績はSNSの再生数「1 631 014」をライムのパネルに大きく。主張の裏付けを、数字で即座に差し出す
- サービス3種は傾いたカードを黒地に積み重ねる。整列させない配置が、型にはまらない姿勢を映す

## 配色
- #eae9e6 Greige（背景）
- #181818 Off Black（テキスト / ダークセクション背景 / ボタン）
- #ffffff White（カード背景）
- #ecfdad Lime Cream（アクセント / CTAボタン・数値パネル・見出し）
- #3fae86 Emerald（サービスカード（Training））
- #ff4c24 Signal Orange（小さなアクセント）

## フォント
- 見出し・コピー・引用: PP Editorial New（代替: Instrument Serif）
- 本文・ナビ・ボタン: PP Neue Montreal（代替: Inter）

## よくある質問
### Hildén & Kairaのサイトで使われているフォントは？
見出しとコピーに PP Editorial New、本文とナビに PP Neue Montreal（いずれも Pangram Pangram の書体）が使われています。無料で近づけるなら Instrument Serif と Inter の組み合わせがおすすめです。

### カードを傾けて積み重ねるスクロール演出はどう作る？
セクションを GSAP ScrollTrigger で pin し、各カードに rotate と translateY を付けたタイムラインを scrub で進めます。カードを position: sticky で上部に留め、top を少しずつずらす方法でも近い表現になります。

### Hildén & Kairaのデザインはどんな業種の参考になる？
SNS運用・広告・コンテンツ制作などのマーケティング会社や、実績の数値で信頼を示したいクリエイティブエージェンシーのサイトの参考になります。

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