Ghana×TOYO STEEL コラボツールボックス｜ロッテ

1. 01

   PCの左右エリア

   左は皿に載ったチョコの写真に「Ghana × TOYO STEEL Toolbox Set」のロゴ、右は赤い工具箱の写真に「日々の生活に「一生モノ」のこだわりを。」のコピー。どちらも暗く落として中央カラムの両脇に敷く。

2. 02

   ファーストビュー

   ストライプ地に金の線で縁取ったアーチ窓を置き、中にロゴ、コピー、商品写真、Ghana×TOYOのロゴを収める。左端には縦書きの「SCROLL」。

3. 03

   コンセプト

   とろけるチョコと工具箱の写真を左右に分けた画像の下に、h1「継承される「本物」と、進化を止めることのない「情熱」の共鳴」と両社の紹介文、「東洋スチールとは」のピルボタンを置く。

4. 04

   SET CONTENTS

   写真に英字見出しを重ねた扉のあと、四隅に丸飾りの付いた額縁カードが2枚続く。「ORIGINAL TOOL BOX」はサイズと重量、「PREMIUM Ghana」は01〜03の番号付きで3品を紹介する。

5. 05

   ブランドバナー

   赤地に金文字の「Ghana」と「ブランドサイトはこちら」を載せた1枚のバナー。

6. 06

   購入パネル

   「ロッテオンラインショップ限定」のリボンとセット写真の下に、同梱内容の箇条書き、梱包イメージ、「送料込み ¥3,980（税込）」、「ご購入ページへ」ボタンをクリーム色のパネルにまとめる。

7. 07

   HOW TO USE

   写真に見出しとコピーを重ねた扉の下に、少し傾けた白フチ写真を3枚。調味料・文房具・趣味の道具の収納例に手書き風のキャプションを添える。

8. 08

   フッター

   オリーブ色の地にInstagramへの誘導、Facebook・X・LINEのアイコン、サイトポリシー等のリンク、LOTTEのロゴと権利表記。

• 左右の写真はフルページキャプチャで900pxごとに同じ位置へ繰り返し写り込んでおり、position: fixed などで固定した背景と思われる
• FVのアーチ内はPC・SP・フルページで写る写真が異なり、フルページでは2枚が重なって写っているため、Swiper によるフェード切替のスライドショーと思われる
• アーチ窓は上側だけ大きな border-radius を取った要素と二重の枠線で再現できる
• HOW TO USE の写真は transform: rotate でわずかに角度を変えると、貼り付けたような揺らぎを再現できる

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

検出された技術:SwiperGoogle Fonts

• 01PCでは幅480pxの1カラムを中央に置き、左右には固定した写真を敷く。左にロゴ、右にコピーと役割を分ける
• 02左右の写真には暗いオーバーレイをかけ、明るいベージュの中央カラムとの明度差で読む場所を示す
• 03英字見出しはEB Garamond、本文は明朝体で字間を広めに取り、商品カタログの調子に揃える
• 04商品カードは四隅に丸飾りのある二重線の額縁で統一し、「01〜03」の番号を大きく置く

1---
2title: "Ghana×TOYO STEEL コラボツールボックス｜ロッテ デザイン分析書"
3source: https://lotte-shop.jp/contents1/ghanatoolbox.html
4katapick: https://katapick.com/sites/lotte-ghana-toolbox
5category: EC
6region: 国内 (JP)
7tags: [写真主体, セリフ体, 手書き文字, レトロ]
8launched: 2026-02
9verified: 2026-10-28
10measured: 2026-09-27 (Chromium 1440x900)
11difficulty: 2/5
12generator: Katapick
13---
14 
15# Ghana×TOYO STEEL コラボツールボックス｜ロッテ — デザイン分析書
16 
17> 両脇はポスター、真ん中はカタログ。ロッテの「Ghana×TOYO STEEL コラボツールボックス」販売ページは、幅480pxのカラムを額縁で囲み、左右の暗い写真にロゴとコピーを預け、PCでも店頭の陳列のように見せる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-27 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22