# NITTOH 100 PICNIC｜LPのWebデザイン参考

> 記事が1本増えるたびに、100周年が進んでいく。日東紅茶の100周年特設サイト「NITTOH 100 PICNIC」は、大型ロゴと「07/100」のカウンターで、記事が積み上がる過程そのものを祝祭にしている。

- URL: https://100th.nittoh-tea.com/
- 解説ページ: https://katapick.com/sites/nittoh-100-picnic
- カテゴリ: LP / 地域: 国内（JP）/ 業種: 紅茶・飲料メーカー
- テイスト: レトロ、レッド基調、大胆なタイポ、グリッド、イラスト
- 公開・リニューアル: 2026-03 / Katapick掲載: 2026-09-21 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

## 編集部のひとこと（Iris）
赤とクリームだけでも十分かわいいのに、ところどころにオリーブを差してるのがすき。紅茶の葉っぱみたいな渋い緑で、甘くなりすぎないの。大人のピクニックって感じ。

## デザインの見どころ
- 「07/100」のカウンターをFVに。完成形ではなく途中経過を見せることで、再訪の理由をつくる
- 記事カードは黄・橙・水色の色面に、写真を楕円や窓形で切り抜く。グリッドなのに一覧が堅くならない
- 未公開の枠も色面と図形だけで並べる。空きマスが、これから増える記事への予告になる

## 配色
- #f3e7d7 Cream（背景）
- #e60012 Nittoh Red（メインカラー / テキスト・罫線・ロゴ）
- #f5cd20 Mustard（カードの色面）
- #f18231 Tangerine（カードの色面）
- #6db8cf Sky（カードの色面）
- #88811a Olive（アクセント / 図形・サブテキスト）

## フォント
- 和文見出し・記事タイトル: 見出ゴMB31（代替: Zen Kaku Gothic Antique）
- 和文本文: 中ゴシックBBB（代替: Zen Kaku Gothic New）
- 英字ナビ・ラベル: Raleway（代替: Raleway）
- 記事番号・PROGRESS の数字: Unna（代替: Unna）

## よくある質問
### NITTOH 100 PICNICのフォントは？
和文見出しにモリサワの見出ゴMB31、本文に中ゴシックBBB、英字に Raleway、記事番号などの数字に Unna が使われています。無料で近づけるなら、見出しに Zen Kaku Gothic Antique、本文に Zen Kaku Gothic New を合わせるのがおすすめです。

### 企業の周年記念サイトを作るには？
周年ロゴを大きく見せるファーストビューと、周年企画の記事を追加していけるCMSのグリッドを組み合わせる構成が運用しやすい方法です。NITTOH 100 PICNIC のように「07/100」といった進捗表示を置くと、継続的に更新される企画であることが伝わります。

### NITTOH 100 PICNICのデザインはどんな業種の参考になる？
食品・飲料メーカーの周年サイトやブランドのオウンドメディア、レトロなパッケージを持つ老舗ブランドのキャンペーンサイトの参考になります。

### NITTOH 100 PICNICは何で作られている？
抽出データでは ノーコードのWeb制作ツール STUDIO が検出されています。記事一覧とカテゴリ絞り込みは STUDIO の CMS 機能で構築されていると思われます。

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