BrandJapanPicked 2026.09.26

原宿サン・アド 50th

ブランドのWebデザイン参考 — 広告・デザイン制作

出典: h-sunad.co.jp

Editor's note — 編集部の視点

周年サイトなのに、FVは青く染めた人の顔だらけ。

原宿サン・アドの50周年特設サイトは、ブルー1色のダブルトーン写真で“人”を主役に据え、出版やイベントの告知を、ステッカーが飛び交う雑誌のように読ませる。

LeoMotion & Direction

青い「パーティ！PARTY！」の帯をくぐったら、真っ赤な「祭」がドン！落ち着いた誌面が、ここで急にフェス会場に変わる！ライブで照明が一斉に点く瞬間みたいで鳥肌！

1FVの写真はすべてブルー1色のダブルトーン。ばらばらな人物写真が、ひとつの周年のトーンにまとまる
2出版、出版イベント、グッズ、新オフィス、新シンボルを縦1本に並べる。周年の話題を特集号のように読ませる
3本のタイトル「drive!」を紺・黄・シアンで3段に重ねる。ブルーの誌面に、急にポップな音が鳴る

Color

原宿サン・アド 50thの配色

Typography

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

和文見出し・本文

Aa あア

使用: DNP ShueiGoKinStd（秀英ゴシック金）
代替: Noto Sans JP

細めの和文テキスト

Aa あア

使用: DNP ShueiGoGinStd（秀英ゴシック銀）
代替: Zen Kaku Gothic New

FVの英字・キャプション・リンク

Aa あア

使用: Helvetica Neue
代替: Inter

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

見出しKatapick 型60px · 1 · 300
本文The quick brown fox — 参考を型にする50px · 1.4 · 300
ボタンKatapick 型16px · 1 · 400
注釈The quick brown fox — 参考を型にする22px · 1.82 · 300

Structure

ページ構成（上から順）

01
キービジュアル
ブルーのダブルトーンに染めた人物写真を4列2段のタイルで敷き詰め、下端に細い英字の「Harajuku SunAd」を大きく重ねる。SPでは2列にし、英字を縦に回転させて置く。
02
本の出版
「原宿サン・アド、本を出版します。」の見出しと日付の赤いバッジ、本の紹介文と書影。紺・黄・シアンで3段に重ねた「drive! drive! drive!」のロゴ。
03
50台 50人と 50周年に
丸いピルに入れた縦組みの見出しの下に、ダブルトーン写真と手描きイラストに縦組みの名前と引用を重ねたインタビューカードを3列で並べ、「もっと見る」で続きを開く。
04
出版イベント
「パーティ！PARTY！」の青いマーキー帯のあと、「出版イベント開催決定 in 原宿エコファーム632」の囲み見出し、赤い丸の「祭」、POP UP・FOODS・SWEETS のステッカー風ロゴと写真をコラージュする。
05
会場エリアマップ
Popup Store・Gran Turismo・原宿Tube・Food&Drink の4つの企画を、青い線画の会場図の四隅に割り振って紹介する。
06
GOODS
Tシャツ、キーホルダー、キャップ、トートバッグ、缶バッジ、ステッカーを、色の違う背景の写真で並べ、販売日と会場の地図を添える。
07
ニューオフィス
「眺めのいい、ニューオフィスできました。」の見出しで新オフィスを紹介する。
08
新シンボル・フッター
「新しいシンボルも、デビューです。」で刷新したVIを見せ、ENTRANCE・NORTH AREA・CAFE AREA などのエリア名の見出しを経てフッターで締める。

Interaction

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

「パーティ！PARTY！」の帯は、同じ文字列を横に流す無限マーキーと思われる。@keyframes で translateX をループさせると再現可能
stack に Three.js と WebGL があり、FVの写真タイルの切り替えにシェーダーを使っていると思われる。キャプチャでは同じ写真が複数タイルに並ぶ瞬間があり、写真が順に入れ替わる演出の可能性がある
stack に Lottie があり、ステッカー風のロゴやアイコンの動きに使われていると思われる
写真のダブルトーンは、グレースケール画像に mix-blend-mode: screen / multiply でブルーを重ねるか、CSS filter と SVG の feColorMatrix で再現可能

スクロールのコマ撮りLenis · 250–4000ms

検出された技術:Three.jsLenisAdobe FontsLottieWebGL

Reproduce

再現するときのポイント

01人物写真はすべて同じブルーのダブルトーンに加工し、撮影条件の違いを色で揃える
02ベースは白とブルーの2色に絞り、イベントやグッズの箇所だけに黄・シアン・赤のステッカー色を解禁する
03周年トピック（出版・イベント・グッズ・オフィス・シンボル）を1本の縦長ページに章立てし、見出しは語りかける口語にする
04インタビューは縦組みの名前と短い引用を写真に重ね、雑誌の誌面のように組む

再現MDに含まれるもの

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

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

harajuku-sunad-50th.katapick.md

1---
2title: "原宿サン・アド 50th 再現用デザイン仕様書"
3source: https://h-sunad.co.jp/50th/
4katapick: https://katapick.com/sites/harajuku-sunad-50th
5category: ブランド
6region: 国内 (JP)
7tags: [周年, ブルー基調, 写真主体, ビビッド, マーキー, ロングページ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# 原宿サン・アド 50th — 再現用デザイン仕様書
17 
18> 周年サイトなのに、FVは青く染めた人の顔だらけ。原宿サン・アドの50周年特設サイトは、ブルー1色のダブルトーン写真で“人”を主役に据え、出版やイベントの告知を、ステッカーが飛び交う雑誌のように読ませる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22