CorporateOverseas / FIPicked 2026.09.26

Hildén & Kaira

コーポレートのWebデザイン参考 — SNSマーケティング・コンテンツ制作エージェンシー

出典: hildenkaira.fi

Editor's note — 編集部の視点

いきなりケンカ腰のコピーで自己紹介してくる。

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

LunaType & Whitespace

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

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

Color

Hildén & Kairaの配色

Typography

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

見出し・コピー・引用

Aa あア

使用: PP Editorial New
代替: Instrument Serif

本文・ナビ・ボタン

Aa あア

使用: PP Neue Montreal
代替: Inter

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

特大見出しKatapick 型62.8px · 0.9 · 400
見出しKatapick 型47.1px · 0.9 · 400
小見出しKatapick 型41.9px · 1.1 · 500
本文The quick brown fox — 参考を型にする10.5px · 1.3 · 500
ボタンKatapick 型13.1px · 1.1 · 500

Structure

ページ構成（上から順）

01
ヒーロー
グレージュの地に、画面幅いっぱいのクローム調ロゴ「hildén & kaira」。その下に中央揃えのナビ、左右に傾けた写真2枚、3行のセリフ体コピーとリード文、黒とライムの2つのボタン。
02
ステートメント
ジムで撮影する様子の全画面写真に、ライム色のセリフ体で2行のメッセージを重ね、左右下に星評価付きの短い推薦コメントを置く。
03
事例スライダー
白いカードの左にクライアントロゴと見出し、「Social reach from past 30 days」の数値パネル（Organic views / Likes）、右に縦型動画のサムネイルを扇状に重ねる。次のカードが右端から覗き、左右矢印で送る。
04
Our services
黒地の中央見出しの下に、Organic content（ライム）・Ads for social（白）・Training（グリーン）の3枚のカードを少しずつ傾けて積み重ねる。各カードに番号・説明・縦型の画像とボタン。
05
お客様の声
グレージュの地に大きなセリフ体の引用文、クライアントのアイコンと肩書き、「3/5」の枚数表示と左右矢印。
06
問いかけCTA
全画面写真にライム色のセリフ体「Does your brand have self-esteem issues?」を重ね、傾けた写真と2つのボタンを添える。
07
コンタクト
黒地に「Ready to work with us?」と、ライムの「We'll call you」カード、黒の「Contact us」カードを並べる。それぞれにクローム調の電話・封筒のオブジェ。
08
フッター
フルページキャプチャは9000pxで切れており未確認。抽出データでは Podcast と Social の見出しを含むフッターが続く。

Interaction

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

ロゴ周りのクローム調オブジェ（スマイル・ハート・炎など）はPC・SP・フルページで写るものが異なり、抽出データの Lottie か動画で差し替え・浮遊させていると思われる
Our services のカードはフルページキャプチャで同じ見出しの下に少しずつ重なって写っており、GSAP ScrollTrigger でセクションを pin し、カードを傾けながら積み上げる演出と思われる
事例スライダーとお客様の声は左右矢印で送る Swiper。事例では次のカードを右端に覗かせる slidesPerView の設定で横に続くことを示している
FVでロゴ下にあったナビは、スクロール後に小さなロゴマーク・ナビ・言語切替・ライムの「Get in touch」を持つ固定ヘッダーに切り替わる。慣性スクロールは Lenis

スクロールのコマ撮りLenis · 200–1000ms

検出された技術:GSAPLenisSwiperWebflowGoogle FontsLottie

Reproduce

再現するときのポイント

01見出しは字幅の狭いセリフ体を大きく使い、行間を詰めてコピーの強さを出す
02地色はグレージュ #eae9e6 と黒 #181818 の2つに絞り、ライム #ecfdad をボタンと数値に限定して使う
03写真や動画サムネイルを数度傾けて配置し、SNSの投稿らしいラフさを出す
04クローム調の立体ロゴとオブジェは3Dソフトで書き出した画像か動画で用意する

再現MDに含まれるもの

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

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

hilden-kaira.katapick.md

1---
2title: "Hildén & Kaira 再現用デザイン仕様書"
3source: https://www.hildenkaira.fi/
4katapick: https://katapick.com/sites/hilden-kaira
5category: コーポレート
6region: 海外 (FI)
7tags: [セリフ体, 大胆なタイポ, 写真主体, スクロール演出, カルーセル]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# Hildén & Kaira — 再現用デザイン仕様書
17 
18> いきなりケンカ腰のコピーで自己紹介してくる。フィンランドのSNSエージェンシーHildén & Kairaのサイトは、クローム調の巨大ロゴと喧嘩腰のセリフ体コピーで、実績より先に態度で自信を示す。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22