「アラビックヤマト」50周年｜ヤマト株式会社

1. 01

   PCの背景

   紺の夜空に、ぼかした風船、線香花火、紙吹雪、段になったケーキのイラストを画面幅いっぱいに敷く。左右にはテキストを置かない。

2. 02

   キービジュアル

   朱色の「50 years」ロゴの0の中に本体を入れ、その下でパーティー帽・蝶ネクタイ・花束を着けたアラビックヤマトがスポットライトを浴びてケーキの上に立つ。カード列の右上に丸いハンバーガーメニュー。

3. 03

   50周年メッセージ

   白い角丸カードに「50周年 これからもあなたのそばに」と、1975年の発売から50周年を迎えた感謝の文章。カードの角に風船のイラストを添える。

4. 04

   コンテンツ入口

   「アラビックヤマト大図鑑」（紫）、「研究所」（緑）、「クエスト」（赤）の3枚を縦に積む。各カードは本体のイラストと「歴史をのぞいてみよう」などの小見出しを持つ。

5. 05

   NEWS

   黄色の角丸パネルに、写真・「開催中」「終了」ラベル・タイトルを持つ白いカードを5件並べ、朱色の「もっとみる」ボタンで締める。

6. 06

   LINE UP

   ベージュのパネルに商品カードのスライダーを置き、前へ・一時停止・次へのボタンと「もっとみる」ボタンを添える。

7. 07

   フッター

   朱色の角丸パネルにFOLLOW US（X・Instagram）、ヤマト株式会社のロゴ、ポリシー類のリンク、権利表記を中央揃えで置く。

• 背景のイラストはフルページキャプチャで900pxごとに同じ位置へ繰り返し写り込んでおり、固定背景の上をカード列だけがスクロールする作りと思われる
• LINE UP のスライダーには一時停止ボタンがあり、自動で送られるスライダーと思われる
• 風船のぼかしは背景画像側で処理されていると思われ、CSS の filter: blur を重ねても近い奥行きを出せる
• ノーコードツールSTUDIOで構築され、Nuxtで出力されたサイト。ボタンのアイコンには Material Icons が使われている

スクロールのコマ撮り300–400ms

検出された技術:STUDIONuxtGoogle Fonts

• 01PCでも幅約340pxのカード列を中央に置き、背景は画面幅いっぱいの固定イラストにする。左右は風船やケーキの装飾だけにして、情報は中央に集める
• 02カードは角丸を大きく取り、コンテンツごとに紫・緑・赤の地色を割り振る
• 03朱色はロゴ・ボタン・フッターに絞り、紺の夜空の上で目印として使う
• 04NEWSカードには「開催中」「終了」の状態ラベルを付け、日付より先に参加できるかを伝える

1---
2title: "「アラビックヤマト」50周年｜ヤマト株式会社 デザイン分析書"
3source: https://na-150-50th.studio.site/
4katapick: https://katapick.com/sites/arabic-yamato-50th
5category: ブランド
6region: 国内 (JP)
7tags: [イラスト, ダーク, 周年, 角丸, カルーセル]
8launched: 2025-07
9verified: 2026-10-28
10measured: 2026-09-27 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# 「アラビックヤマト」50周年｜ヤマト株式会社 — デザイン分析書
16 
17> 真ん中はカード、まわりは全部ケーキと風船。ヤマトの液状のり「アラビックヤマト」50周年特設サイトは、幅約340pxのカード列を夜空とケーキのイラストに立て、PCの余白をまるごと誕生日会の会場にしている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-27 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22