# Ghana×TOYO STEEL コラボツールボックス｜ロッテ｜ECのWebデザイン参考

> 両脇はポスター、真ん中はカタログ。ロッテの「Ghana×TOYO STEEL コラボツールボックス」販売ページは、幅480pxのカラムを額縁で囲み、左右の暗い写真にロゴとコピーを預け、PCでも店頭の陳列のように見せる。

- URL: https://lotte-shop.jp/contents1/ghanatoolbox.html
- 解説ページ: https://katapick.com/sites/lotte-ghana-toolbox
- カテゴリ: EC / 地域: 国内（JP）/ 業種: 菓子メーカー・EC（コラボ商品）
- テイスト: 写真主体、セリフ体、手書き文字、レトロ
- 公開・リニューアル: 2026-02 / Katapick掲載: 2026-09-28 / 最終確認: 2026-10-28
- 再現難易度: 2/5

## 編集部のひとこと（Luna）
英字はEB Garamond、本文は明朝で字間広め。お菓子の販売ページなのに、古い商品カタログみたいな活字の匂いがする。「Infiniment Vanille」の筆記体もちゃんと効いてる。……悪くない。

## デザインの見どころ
- FVはストライプ地に金線のアーチ窓。工具箱とチョコのセットを、贈答品の顔に仕立てている
- PCの左右は暗く落とした写真に、左はロゴ、右はコピーだけ。中央カラムを読む目線を奪わない
- HOW TO USEは傾けて貼った写真と手書き風の一言。買った後の使い道まで想像させる

## 配色
- #dccdba Stripe Beige（カラムのストライプ地（スクショから採色））
- #948046 Olive Gold（額縁の線・ボタン・フッター背景）
- #faf3e4 Cream（購入パネルの背景）
- #6a3906 Cocoa Brown（見出し・本文テキスト）
- #40210f Dark Chocolate（濃いテキスト）
- #d12c26 Ghana Red（ブランドサイトへのバナー（スクショから採色））

## フォント
- 本文・h1・ボタン: YakuHanMP（明朝体と組み合わせ）（代替: Shippori Mincho）
- 英字見出し（SET CONTENTS / HOW TO USE）: EB Garamond（代替: EB Garamond）
- HOW TO USE の写真キャプション: 手書き風書体（画像と思われる）（代替: Yomogi）

## よくある質問
### Ghana×TOYO STEEL コラボツールボックスのページのレイアウトの特徴は？
PCでも幅480pxのスマホ幅カラムを画面中央に置き、左右は暗く落とした写真の上に、左にロゴ、右にコピーを載せる構成です。中身はスマホと同じ1カラムで、PCの余白は広告ビジュアルとして使われています。

### ツールボックスの仕様は？
ページ内の記載では、サイズはW203mm×H56mm×D109mm、重量は400gです。東洋スチールの定番T-190の別注モデルで、蓋に「Ghana」の文字が刻印されています。

### 価格と購入方法は？
ロッテオンラインショップ限定のセットで、価格は送料込み¥3,980（税込）と掲載されています。ページ中ほどの購入パネルにある「ご購入ページへ」ボタンから購入ページへ進みます。

### 商品写真やロゴを参考資料として使ってもいい？
商品写真・ロゴ・パッケージの権利はロッテおよび東洋スチールに帰属します。参考にするのは構成・配色・導線にとどめ、画像は使用しないでください。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「デザイン分析MD」は https://katapick.com/sites/lotte-ghana-toolbox からダウンロードできます。
出典: Katapick（https://katapick.com）