Works

熊撃退スプレー 商品画像

熊撃退スプレー
商品画像・LP・DTP制作

内容:OEM商品(熊撃退スプレー)の楽天出品に伴う一連の制作業務
担当範囲:商品画像作成 / 仕様書パンフレット作成 / ラベルデザイン / 説明書(プリントパック入稿) /
     特設LP制作(ワイヤーフレーム〜公開)/ フロントページ誘導エリア実装 / サーバーアップロード

  • Adobe XD
  • Photoshop
  • Illustrator
  • HTML / CSS
  • JavaScript
  • JSON-LD(LLMO対策)
  • aria-label(SEO)
  • プリントパック
  • 楽天市場

制作の背景:
熊スプレーの楽天出品に際し、なるべく早く公開するよう指示があったため、 XDを使ったワイヤーフレーム制作から着手し、ページ構築・画像加工・レスポンシブ化・ SEO対応・サーバーアップロードまで、一連の作業をすべて担当しました。

特設LPはBtoB向けのためPCメインのデザインですが、レスポンシブ対応も実施。 SEO施策としてaria-labelを積極的に活用し、LLMOを意識したJSON-LDによるサイト情報の構造化も行っています。

また、出品に際してはDTP業務も担当し、商品仕様書パンフレット・ラベル・説明書のデータ作成から プリントパックを使った印刷入稿まで、デジタル〜印刷物制作の両面を経験しました。


商品画像・仕様書制作

楽天市場掲載用 / 画像作成・仕様書パンフレット・ラベル・説明書

商品画像
熊撃退スプレー 商品画像
仕様書
熊撃退スプレー 仕様書

担当内容:
商品のモノタロウ・アスクル・卸売りでの出品に向けて、サムネイル〜翻訳画像・各パーツの画像の作成を担当しました。 動画から静止画を切り出して加工する作業も含め、掲載に必要な画像素材から制作しています。 また、動画のサムネイル用画像も別途作成しました。

DTPについて:
仕様書パンフレット・ラベル・製品説明書のデザインデータを作成し、 説明書はプリントパックを利用した実務としてのDTP経験となりました。 実際に印刷物特有のデータ形式・トンボ・塗り足し等を業務で扱う初の案件になりました。


廃棄処理用キット 商品画像制作

熊撃退スプレー 廃棄処理用キット(1本・5本・10本分)/ 追加撮影・イラスト・レイアウト制作

熊撃退スプレー廃棄処理用キット サムネイル 廃棄処理キット 課題訴求画像 廃棄処理キット 内容品一覧 廃棄処理手順1 事前準備 廃棄処理手順2 中身の排出① 廃棄処理手順2 中身の排出② 廃棄処理手順3 凝固剤で固める・手順4 廃棄 廃棄処理キット 注意事項 処理本数ごとのキット内容一覧

制作の経緯:
廃棄処理キットの出品にあたり、動画からの静止画切り出しだけでは素材が不足していたため、 実際に追加の撮影も行いました。保護具の装着・バケツへの注水・スプレー缶を水中に沈める作業・ 凝固剤で固める工程など、一連の廃棄手順をステップごとに記録し画像素材として使用しています。

画像構成のポイント:
「中身が残ったまま処分できない」という購入者の課題を最初に提示し、 キットの必要性を感じてもらうストーリー型の構成にしました。 内容品一覧では実物を並べて撮影し、購入前の不安を取り除く情報設計を意識しています。 処理手順(事前準備→中身の排出→凝固→廃棄)は4ステップに分けて視覚的に説明し、 はじめての方でも安心して作業できるよう丁寧なレイアウトで仕上げました。

バリエーション展開:
1本分・5本分・10本分の3バリエーションで展開。 処理本数ごとの内容品一覧を図解でまとめ、 購入者が自分の用途に合ったキットを選びやすいよう整理しています。

本店 掲載ページを見る →

動画サムネイル制作

YouTube・楽天動画向け / Photoshop・Illustratorで制作

UDAP熊撃退スプレー225g 使い方動画サムネイル(青系)
使い方動画 サムネイルver.1
射程・安全設計などの主要スペックを前面に訴求
UDAP熊撃退スプレー225g 使い方動画サムネイル(緑系)
使い方動画 サムネイルver.2
商品を手に持った写真をメインビジュアルに配置
熊撃退スプレー 廃棄処理方法動画サムネイル
廃棄処理方法動画 サムネイル
内容物が残っている場合の廃棄処理キット紹介動画用

制作のポイント:
動画から静止画を切り出して加工する方法と、別途イラスト・テキストを組み合わせてゼロから作成する方法を 用途に応じて使い分けました。サムネイルは動画の内容が一目でわかるよう、 商品スペック(射程・誤射防止・内容量)をアイコンとテキストで視覚的に整理しています。

バリエーション展開:
使い方動画用は青系・緑系の2デザインを制作し、掲載プラットフォームや用途に合わせて 使い分けられるようにしました。廃棄処理方法動画は内容の特殊性を考慮し、 スプレーの実物写真を大きく配置してひと目で内容が伝わるデザインにしています。


特設サイト(LP)制作

BtoB向けPC主体 / レスポンシブ対応 / ワイヤーフレーム〜公開まで一貫担当

LANDING PAGE
熊撃退スプレーの商品展開に際し、社内サイトに特設ページを制作しました。 Adobe XDでPC・スマホそれぞれのワイヤーフレームを作成後、HTML/CSS/JavaScriptでのコーディング、 レスポンシブ化、SEO対策(aria-label)、JSON-LDによる構造化データの記述、サーバーアップロードまで 一連の工程をすべて担当しています。また、フロントページにも特設サイトへの誘導エリアを実装しました。
ワイヤーフレーム(Adobe XD)

制作の流れ:
なるべく早く公開するよう指示があったため、スピードを意識して進行しました。 まずXDでPC・スマホ両方のワイヤーフレームを制作し、方向性を固めてからコーディングに着手。 BtoB向けのためPCメインのデザインとしつつ、スマホ閲覧にも対応できるようレスポンシブも実施しています。

SEO・LLMO対応:
aria-labelを積極的に活用したSEO施策のほか、LLMOを意識してJSON-LDでのサイト情報構造化も実施しました。 検索エンジンだけでなく、AIによる情報参照にも対応できるよう意識した実装です。

Top
戻る