Katapick

Landing PageJapan

NITTOH 100 PICNIC

LPのWebデザイン参考 — 紅茶・飲料メーカー

出典: 100th.nittoh-tea.com
NITTOH 100 PICNICのPC版ファーストビュー

Editor's note — 編集部の視点

記事が1本増えるたびに、100周年が進んでいく。

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

IrisColor & Brand
赤とクリームだけでも十分かわいいのに、ところどころにオリーブを差してるのがすき。紅茶の葉っぱみたいな渋い緑で、甘くなりすぎないの。大人のピクニックって感じ。
  • 1「07/100」のカウンターをFVに。完成形ではなく途中経過を見せることで、再訪の理由をつくる
  • 2記事カードは黄・橙・水色の色面に、写真を楕円や窓形で切り抜く。グリッドなのに一覧が堅くならない
  • 3未公開の枠も色面と図形だけで並べる。空きマスが、これから増える記事への予告になる

Color

NITTOH 100 PICNICの配色

Typography

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

和文見出し・記事タイトル

Aa あア

使用
見出ゴMB31
代替
Zen Kaku Gothic Antique

和文本文

Aa あア

使用
中ゴシックBBB
代替
Zen Kaku Gothic New

英字ナビ・ラベル

Aa あア

使用
Raleway
代替
Raleway

記事番号・PROGRESS の数字

Aa あア

使用
Unna
代替
Unna

Structure

ページ構成（上から順）

  1. 01

    マーキー帯

    画面最上部の赤い帯に、生成り色の斜体コピーを横に流し続ける。

  2. 02

    ニュースティッカー・検索

    最新記事の日付を赤枠のピルで示してタイトルを1行表示し、右端に角丸の検索窓を置く。

  3. 03

    ヒーロー

    左に日東紅茶ロゴと100th ANNIVERSARYのエンブレム、About / Tea Friends / News / Contact のナビとピクニックのイラスト。中央に大型ロゴ、右に「今コレがおすすめ!!」の円形写真と記事リンク、PROGRESS カウンター。

  4. 04

    カテゴリフィルター

    すべて / #プロダクト / #コンテンツ / #ジャーナル / #レポート を赤枠のピルで並べ、選択中は赤で塗りつぶす。

  5. 05

    記事グリッド

    PCは3列、SPは2列。赤の細罫で区切り、上半分に色面と切り抜き写真、下半分にカテゴリ・日付・タイトル・執筆者・ティーポットアイコン・通し番号を置く。

  6. 06

    Coming Soon

    未公開の記事枠も同じグリッドに色面と図形だけで並べ、今後の追加を予告する。

  7. 07

    フッター

    ティーポットのアイコンを挟んだ「NITTOH 100 PICNIC」のロゴタイプを横幅いっぱいに置き、サイト説明文、イラスト、ナビ、ブランドサイト・オンラインショップへのリンク、SNSアイコンを並べる。

Interaction

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

  • 最上部のコピーは横に流れるマーキー。テキストを2回繰り返して並べ、CSS の @keyframes で translateX(-50%) までループさせると継ぎ目なく再現できる
  • スクロールするとロゴ・ナビ・検索窓を1行にまとめたコンパクトなヘッダーが上部に固定表示される（フルページキャプチャの途中に同じヘッダーが写り込んでいる）
  • カテゴリのピルで記事を絞り込む。抽出データにある STUDIO の CMS とフィルター機能で構築されていると思われる
  • 写真の楕円・アーチ形の切り抜きは border-radius: 50% や clip-path で再現できる

検出された技術:STUDIOGoogle Fonts

Reproduce

再現するときのポイント

  • 01背景は純白ではなく生成りの #f3e7d7 にし、文字・罫線・ロゴをコーポレートレッド #e60012 の1色でそろえる
  • 02記事カードの色面は黄・オレンジ・水色・赤をローテーションし、写真を楕円やアーチ形にマスクする
  • 03記事番号を Unna のようなセリフ体で大きく置き、100本まで増えていく企画であることを見せる
  • 04見出しは太めのゴシック（見出ゴMB31 相当）で行間を詰め、昭和の広告のような雰囲気を出す

再現MDに含まれるもの

CSS変数化したカラートークン / Google Fonts 読み込みタグ / 全7セクションの仕様 / つまずきポイント / Claude Code・Cursor・v0 用の実装プロンプト / 仕上げチェックリスト

nittoh-100-picnic.katapick.md
1---
2title: "NITTOH 100 PICNIC 再現用デザイン仕様書"
3source: https://100th.nittoh-tea.com/
4katapick: https://katapick.com/sites/nittoh-100-picnic
5category: LP
6region: 国内 (JP)
7tags: [レトロ, レッド基調, 大胆なタイポ, グリッド, イラスト]
8launched: 2026-03
9verified: 2026-09-26
10difficulty: 3/5
11estimated_hours: 24
12generator: Katapick
13---
14 
15# NITTOH 100 PICNIC — 再現用デザイン仕様書
16 
17> 記事が1本増えるたびに、100周年が進んでいく。日東紅茶の100周年特設サイト「NITTOH 100 PICNIC」は、大型ロゴと「07/100」のカウンターで、記事が積み上がる過程そのものを祝祭にしている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せる構成になっています（→「7. AI実装プロンプト」）。
21 
22## 1. 見どころ

NITTOH 100 PICNICについてよくある質問

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 機能で構築されていると思われます。

NITTOH 100 PICNICに似た参考サイト

出典: Katapick編集部（2026年9月26日 確認）。掲載サイトのデザイン・文章・画像の権利は各権利者に帰属します。 AI・LLM 向けの要約は Markdown 版 を参照してください。