Herbelle案件支給素材

模擬トライアル案件・支給素材

Herbelle案件支給素材ダウンロード

全14点 Lesson 1-2「Herbelle案件のデザインと実装」で使用

← レッスンに戻る

このページでは、Herbelle案件の制作に必要な支給素材14点をすべて取得・確認できます。画像素材はサムネイルを確認のうえダウンロードし、テキスト素材はそのままコピーして使用してください。

素材を使う前に必ず確認してください

本教材における「Herbelle」は架空のブランドであり、実在する商標・企業とは無関係です。
支給素材（ロゴ・商品画像・植物素材・簡易構成案）はすべてAI生成です。
これらの素材は本教材の学習目的での利用に限定してください。
実務案件では、支給素材を使用する権利があるか・取得元と利用条件が明確かを必ず確認します。本教材ではこの確認プロセス自体を学ぶことも目的としています。

ブランドロゴ（herbelle_logo）

欧文ロゴ「Herbelle」。明るい背景用と、暗い背景用の反転版を用意しています。

herbelle_logo

1024×1024／背景透過

PNG SVG

ロゴ使用ルール	内容
最小使用サイズ	幅80px相当
セーフエリア	ロゴ高さの50%相当を四辺に確保する
背景色別の使用可否	クリーム系の明るい背景での使用を想定。暗い背景（フォレスト等）ではクリーム色の反転版を使用する
NGな使い方	縦横比の変更、色の変更、背景とのコントラスト不足での配置

簡易構成案（wireframe_simple）

必須セクション順と購入導線だけを示すグレースケールのブロック図です。レイアウトの完成解答ではありません。

wireframe_simple

PC・SP併記

ダウンロード

セクション順：FV → 悩み → 商品特徴 → テクスチャ → 使い方 → 配合成分の説明 → 商品情報 → 利用者コメント → FAQ → 購入CTA

商品画像（product_photo）

正面・斜め・開封・テクスチャ・使用量の計5点。効能訴求ではなく質感・使い心地が伝わる構図で統一しています。

product_photo_front

正面／1600×1600

ダウンロード

product_photo_angle

斜め45度／1600×1600

ダウンロード

product_photo_unboxed

開封シーン／1600×1600

ダウンロード

product_photo_texture

テクスチャ接写／1600×1600

ダウンロード

product_photo_usage_amount

使用量接写／1600×1600

ダウンロード

植物・背景素材（botanical_material）

背景透過PNG4点。各セクションの背景装飾として、商品写真の主役性を邪魔しない範囲で使用します。

botanical_material_01

1024×1024／背景透過

ダウンロード

botanical_material_02

1024×1024／背景透過

ダウンロード

botanical_material_03

1024×1024／背景透過

ダウンロード

botanical_material_04

1024×1024／背景透過

ダウンロード

必須コピー一覧（required_copy）

文言変更不可。このとおり正確に使用してください。

項目名	文言（確定）	使用箇所・備考
ブランドロゴ	Herbelle（ロゴ画像を使用）	FV上部／`herbelle_logo`素材を使用、文言変更不可
商品名	Herb Dew Cleansing Balm	商品名表示部分／英字表記のまま使用
メインコピー	一日の終わりを、やさしくほどく。	FV中央
内容量・価格	90g／3,480円（税込）	FV・商品情報セクション／税込表記を省略しない
CTA	商品をチェック	FV・購入CTAボタン／文言変更不可

商品情報シート（product_info_sheet）

商品名	Herb Dew Cleansing Balm
ブランド名	Herbelle（ハーベル）
内容量	90g
価格	3,480円（税込）
使用方法	乾いた手・乾いた顔にパール大（約2プッシュ相当）をなじませ、ぬるま湯で洗い流す

注意事項（教材内で事実として扱ってよい範囲）

傷、はれもの、湿疹等、異常のある部位には使用しないでください。肌に合わないときは使用を中止し、皮膚科専門医等にご相談ください。使用中または使用後に赤み・かゆみ・刺激等の異常が現れた場合は、使用を中止してください。直射日光の当たらない涼しい場所に保管してください。上記以外の注意事項・数値は追加しないでください。

成分説明シート（ingredient_sheet）

広告上使用できる表現のみを記載しています。効果を保証・断定する表現は追加しないでください。

配合成分	教材内で使用してよい説明表現
ホホバオイル	植物由来のオイル成分として配合しています。
シアバター	植物由来の油脂成分として配合しています。
カモミールエキス	植物由来のエキス成分として配合しています。

「無添加」「オーガニック」「No.1」等の表現は、根拠となる基準・認証情報が支給されていないため使用できません。「改善する」「治る」等の医薬品的な効果表現も使用できません。

ブランドガイド・実装要件（brand_implementation_guide）

カラーパレット

役割	色名	Hex	使用比率の目安
メイン	フォレスト	#304A3B	ロゴ・見出し・CTA
サブ	ハーブ	#8FA886	アクセント・アイコン
ベース	サンド	#E8DDCD	セクション区切り・カード背景
背景	クリーム	#FBF8F2	背景の大部分

ボイス＆トーン

自然／静けさ／上質／透明感。

Wix・WordPress・HTML/CSS系で共通する実装要件

項目	要件
レスポンシブ	PC・SPの2ブレークポイントで横スクロール・要素の重なりが発生しない
ページ内リンク	目次やナビゲーションがある場合、該当セクションへ正しく遷移する
CTAリンク	「商品をチェック」ボタンがすべて購入ページURLへ遷移する
画像最適化	表示サイズに対して過大な元画像を使わず、WebP等の圧縮形式を優先する
hover	CTAボタン・カード要素等に基本的なhover変化（色・影の変化程度）を付ける
メタ情報	タイトルとmeta descriptionを商品名・ブランド名・訴求内容が伝わる形で設定する

Do / Don't実例

Do（良い例）	Don't（NG例）
クリームを土台に、フォレストとハーブをアクセントとして使う	背景全体を彩度の高い色で塗りつぶす
商品写真とコピーを引き立てる余白を確保する	装飾やアイコンを大量に敷き詰めて余白を埋める
必須コピーの文言をそのまま使用する	必須コピーの言い回しや数値を独自に変更する
事実として扱ってよい範囲の特徴のみ記載する	「無添加」「オーガニック」「No.1」等の根拠のない表現を追加する

購入ページURL・素材利用上の注意事項（purchase_url／asset_notice）

架空の商品購入ページURL

https://shop.herbelle-skincare.example.com/products/herb-dew-cleansing-balm
.example.comはドキュメント・教材用に予約されたドメインであり、実在のWebサイトには到達しません。LP内のCTAボタンのリンク先として使用してください。

素材利用上の注意事項

本教材における「Herbelle」は架空のブランドであり、実在する企業・商品とは無関係です。
支給素材（ロゴ・簡易構成案・商品画像・植物素材）はすべて教材用に新規作成したものです。
これらの素材は本教材の学習目的での利用に限定してください。
実装に使用する外部ライブラリ・フォント・アイコン等を追加する場合は、利用条件（商用利用可否・埋め込み可否）を確認したうえで使用してください。
実務では、支給素材を案件で使用する権利があるか・素材の取得元と利用条件が明確かを必ず確認する必要があります。本教材ではこの確認プロセス自体を学ぶことも目的としています。

レッスンに戻って制作を続ける →