# 原宿サン・アド 50th｜ブランドのWebデザイン参考

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

- URL: https://h-sunad.co.jp/50th/
- 解説ページ: https://katapick.com/sites/harajuku-sunad-50th
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: 広告・デザイン制作
- テイスト: 周年、ブルー基調、写真主体、ビビッド、マーキー、ロングページ
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

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

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

## 配色
- #17288b SunAd Blue（メインカラー / 見出し / マーキー帯）
- #ffffff White（背景 / FVの英字）
- #00ffff Cyan Pop（「drive!」・インタビューの名前などの差し色）
- #f2f700 Highlighter Yellow（「drive!」・GOODS見出しの差し色）
- #ff0000 Festival Red（「祭」・日付バッジ）
- #000000 Black（本文テキスト）

## フォント
- 和文見出し・本文: DNP ShueiGoKinStd（秀英ゴシック金）（代替: Noto Sans JP）
- 細めの和文テキスト: DNP ShueiGoGinStd（秀英ゴシック銀）（代替: Zen Kaku Gothic New）
- FVの英字・キャプション・リンク: Helvetica Neue（代替: Inter）

## よくある質問
### 原宿サン・アド50周年サイトで使われているフォントは？
和文に DNP の秀英ゴシック金・銀（Adobe Fonts）、英字に Helvetica Neue が使われています。無料で近づけるなら Noto Sans JP、Zen Kaku Gothic New、Inter の組み合わせがおすすめです。

### 写真をブルー1色のダブルトーンにするには？
写真をグレースケールにしてから、ブルーの面を mix-blend-mode で重ねるのが手軽です。より正確に色を合わせたい場合は、SVG の feColorMatrix フィルターや、書き出し時に Photoshop でダブルトーン加工しておく方法があります。

### どんな業種の参考になる？
広告・デザイン会社や出版社の周年サイト、書籍の出版記念サイト、ポップアップイベントの特設サイトなど、複数の周年企画を1ページで楽しく見せたいサイトの参考になります。

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