WEBデザイン
模写課題 - ECバナー・パッケージ
INDEX
目次

はじめに

この教材では、ECバナーとパッケージデザインの基本要素と構成原則を学ぶことで、セール告知バナー、商品紹介バナー、パッケージデザインの実践的なデザインスキルを身につけることを目標とします！

【1-1】 ECバナー・パッケージデザインの概要

目安の学習時間：20分

ECバナー・パッケージデザインの基本要素

ECサイトで目にするバナーやパッケージデザインには、見た人の心を動かし、購買意欲を高める重要な役割があります。まずは基本要素を確認しましょう。
ECバナーの基本要素
1. アイキャッチ：ユーザーの目を引く画像やイラストなどの視覚的要素
2. キャッチコピー：短く印象的な言葉で商品の魅力や特徴（割引率、期間限定、数量限定などの購買意欲を刺激する情報）を伝える文言
3. ブランドロゴ：ブランドのアイデンティティを示す要素
4. CTA（Call To Action）：「今すぐ購入」「詳細を見る」など、行動を促すボタンやテキスト
(25044)

ECバナーの種類
  • ECサイトのバナー広告
    集客や販促を目的に、外部サイトやECプラットフォームの広告枠に掲載するバナー。
    • 特徴：視覚的に目立たせ、クリックしてもらうための訴求力の高いデザインが必要になる。
    • 目的：集客や販促。
  • サイトバナー
    自社ECサイトやECプラットフォーム内で、ユーザーの回遊や情報提供の役割を担うバナー。
    • 特徴：バナー広告ほど視認性は求めず、サイトのデザインと統一感のあるデザインを重視。
    • 目的：ECサイトを訪れたユーザーの購買行動を促進する。
パッケージデザインの基本要素
1. ブランドアイデンティティ：ロゴ、カラーなどのブランド要素
2. 商品名・キャッチコピー：商品の特徴を簡潔に伝えるテキスト
3. 画像・イラスト：商品のビジュアルイメージを伝える要素
4. 素材感：印刷技術や素材選びによる質感の表現
5. 法的表記：必要な成分表示や注意事項など
(25046)

効果的なデザインの構成原則

効果的なECバナー・パッケージデザインには、いくつかの共通する構成原則があります。
1.視線の流れをコントロールする
  • 人間の視線は通常、左上から右下へと「Z」の形で移動する傾向があります。
  • この視線の流れを考慮し、重要な情報を適切に配置しましょう。
(25051)

2.コントラストで重要な情報を目立たせる
  • 色のコントラスト：補色や明暗の差を利用
  • サイズのコントラスト：重要な要素を大きく表示
  • 形のコントラスト：異なる形状を組み合わせて注目を集める
(25053)

3.余白を効果的に使う
  • デザイン要素の周りに適切な余白を設けることで、視認性が向上し、洗練された印象を与えられます。
  • 重要な情報や、より伝えたい情報に目が留まるように見せる上で活用できるポイントになります。
(25054)

  • 余白をうまく使う方法の１つとして、余白を左右均一にすることを意識すると良いでしょう。
    • 商品画像・テキストともに中央揃えにすることで、より整った印象を与えることができます。
(25061)

  • こちらの見本では、商品写真のバランスで高さが違うためどうしても右側に大きく余白が開くのでその余白を利用するように、レイアウトを変更しました。
    • 商品を左より、テキストを右寄りにすることで、余白の幅を均一にしています。
    • またCTA（Call To Action）を帯状→円状にして、右下に配置することで、全体のバランスを調整しました。
  • このように商品画像や商品の種類に応じて余白やレイアウトを効果的に使ってみましょう！
(25064)

4. 一貫性のあるデザイン要素を使用する
  • フォント、色、スタイルに一貫性を持たせることで、統一感のあるデザインになります。
  • これはブランドイメージの形成にも重要です。
(25067)

5. ターゲットオーディエンスを意識したデザイン
  • ターゲット層の年齢、性別、趣味嗜好によって、最適なデザインは変わります。
  • ターゲットに響くビジュアル表現を心がけましょう。
(25070)

  • こちらは30代後半〜40代をターゲットにしました。
    • 両脇の余白を均等にすることで整った印象を持たせます。
    • 単色の丸と四角の要素でシック・シンプルにまとめて落ち着いた印象でターゲティングをします。
    • さらに情報をまとめてわかりやすくして、お得→購入という導線で購買へと繋げる意図を持たせます。
    • タイトルを中央配置にし、商品の特徴であるアイキャッチで目を惹くように誘導します。
(25073)

  • 20代〜30代前半がターゲットであれば、若年層からの好印象を狙うために以下のような工夫が効果的です。
    • 吹き出しのような効果線や円から少しずらした細い線を使用します。
    • ラフなイラストを加えることで抜け感を演出しましょう。
(25076)

業界のトレンドと事例分析

デザインのトレンドは常に変化しています。
ここでは、現在のECバナーとパッケージデザインのトレンドを紹介するので、みなさんも実際に手を動かしてリサーチを行い、ご自身の目で確認しましょう！
デザインリサーチの方法については、「参考デザインのリサーチ方法」教材を参照してください。
現在のECバナーのトレンド
  1. ミニマルデザイン：余計な装飾を省き、シンプルに伝えるデザイン
  2. 鮮やかなグラデーション：2〜3色のグラデーションで目を引く背景
  3. リアルな商品写真と抽象的な背景の組み合わせ
  4. マイクロインタラクション：小さなアニメーションで注目を集める（Web上の動くバナー）
現在のパッケージデザインのトレンド
  1. サステナブルデザイン：環境に配慮した素材感やデザイン
  2. レトロなタイポグラフィ：ヴィンテージ感のあるフォントの活用
  3. 手描き風イラスト：温かみや親しみやすさを表現
  4. 素材感の強調：素材の質感や特性を活かしたデザイン
  5. カラフルなカラーブロック：大胆な色面構成

事例分析：成功しているECバナーとパッケージの特徴

成功している事例には、以下の共通点があります。
  • ターゲットの心理を的確に捉えている
  • 商品の独自の価値を表現している
  • ブランドの世界観と一貫性がある
  • 情報の優先順位が明確
(25084)

これらの特徴を意識しながら、これから模写に取り組んでいきましょう。

確認問題とまとめ

確認問題
  1. ECバナーの基本要素として、重要な４つの基本要素は何ですか？
  2. 人間の視線の一般的な流れはどのようなパターンになりますか？
  3. 現在のECバナーデザインで主流のトレンドは何ですか？
答え
  1. アイキャッチ、キャッチコピー、ブランドロゴ、CTA
  2. 左上から右下へのZ型の流れ
  3. ミニマルデザイン、鮮やかなグラデーション、リアルな商品写真と抽象的な背景の組み合わせ
まとめ
  • このセクションでは、ECバナーとパッケージデザインの基本要素と効果的な構成原則について学びました。
  • 次のセクションでは、セール告知バナーの模写と実践的な制作テクニックを学びます。

【1-2】セール告知バナーの模写

目安の学習時間：45分

サンプルバナーの分析と構造理解

まずは、プロが制作したセール告知バナーを分析してみましょう。サンプルとなるバナーを見て、その構造と特徴を理解することが重要です。
サンプルバナーの基本情報
  • サイズ：728×90px（リーダーボード型）または 300×250px（レクタングル型）
  • カラーモード：RGB
  • 解像度：72ppi（Web用）
(25095)

構造分析のポイント

1. 情報の優先順位を考える
背景、テキスト、画像、装飾などの構成要素を書き出して、優先順位を考えてみましょう。
想定される情報の優先順位づけの例：
  • 一番最初にユーザーの目に止まる要素：テキスト情報、CTAボタン、ロゴ
  • ターゲットが求めている要素：商品画像、装飾要素
  • あまり見えなくても問題ない要素：背景色/背景グラデーション
2.色使いを分析する
使用されている色の数、メインカラー、アクセントカラーを確認しましょう。
効果的な色使いの例：
  • ブランドカラーをベースにする
  • 1〜2色のアクセントカラーを使用する
  • 文字色は背景とコントラストが高いものを選ぶ
(25101)

3.視線誘導の仕組みを理解する
デザイン要素の配置によって、どのように視線を誘導しているか分析します。
(25104)

商品の魅力を引き出すレイアウト

セール告知バナーでは、商品の魅力を引き出しながら、セール情報も効果的に伝える必要があります。
効果的なレイアウトの特徴
  1. インパクトのある視覚要素を左側に配置
    左から右へ読む習慣に合わせて、最初に目に入る左側に印象的な視覚要素を配置します。
  2. 情報の優先順位に合わせたサイズ設定
    重要な情報ほど大きく、目立つサイズで表示します。
  3. 商品画像の効果的な切り抜き・配置
    商品の最も魅力的な部分や特徴が伝わるアングルで表示します。
  4. ユーザーが使用する端末に基づいたサイズ設定
    スマホユーザー向けであれば、スマホで見た時に商品の写真や文字がはっきり見えるように表示します。
実践：レイアウト作成のステップ
1. サンプルバナーと同じサイズの新規ドキュメントを作成します
2. 大まかな領域分けを行い、それぞれの要素のスペースを確保します
(25110)

テキストとビジュアル要素の配置

セール告知バナーでは、テキストとビジュアル要素のバランスが重要です。
今度は実際に模写を行いながら、２つの要素の制作のコツを学んでいきましょう。

効果的なテキストとビジュアル選びの特徴

1.商品画像の処理
  • 背景の切り抜き（必要に応じて）
  • 明るさ・コントラストの調整
(25115)

2.フォント選び
  • メインキャッチコピー：インパクトのある太字フォント
  • セール詳細：読みやすいフォント
※模写課題では、見本と似たようなフォントを使用して頂ければ大丈夫です！
3.テキストの階層
  • 情報の優先順位に合わせて、サイズや太さ、色などを変えます。
  • 例：「50%OFF」→「期間限定」→「詳細はこちら」
4.テキストエフェクト
  • まずはエフェクトを多用するのではなく、最小限の使用にとどめたシンプルなデザインを意識しましょう。
(25348)

5.CTAボタンのデザイン
  • 目立つ色と形
  • クリッカブルに見えるデザイン
  • 簡潔で行動を促す言葉
(25351)

6.装飾要素の配置
  • 背景に抽象的なパターンや写真
  • アクセントになる色やエフェクト
(25354)

7.全体のバランス調整
  • 色のバランス確認
  • 視線の流れの確認
  • 可読性の確認
(25357)

確認問題とまとめ

確認問題
  1. 構造分析の３つのポイントはなんですか？
  2. バナーデザインでテキストと背景のコントラストが重要な理由は何ですか？
  3. Webで表示されるバナーの一般的なカラーモードと解像度は何ですか？
答え
  1. 情報の優先順位を考える、色使いを分析する、視線誘導の仕組みを理解する
  2. テキストの可読性を高めるため
  3. RGBカラーモード、72ppi
まとめ
  • このセクションでは、セール告知バナーの模写を通じて効果的なレイアウトとビジュアル要素の配置について学びました。
  • 次のセクションでは、商品紹介バナーの模写と商品の魅力を引き出すデザイン手法を学びます。

【1-3】商品紹介バナーの模写

目安の学習時間：45分

サンプルバナーの特徴分析

商品紹介バナーは、セール告知とは異なり、商品自体の特徴や魅力を伝えることが主目的です。
サンプルとなる商品紹介バナーを見て、その特徴を分析しましょう。

サンプルバナーの基本情報

  • サイズ：640×300px（カスタムサイズ）または 1200×628px（SNSシェア用）
  • カラーモード：RGB
  • 解像度：72ppi（Web用）
(25372)

商品紹介バナーの特徴

  1. 商品のビジュアルを重視
    商品の写真やイラストが大きく、詳細に表示されています。
  2. 商品の特徴や利点を端的に説明
    箇条書きや短いフレーズで商品の魅力を伝えています。
  3. ブランドイメージと一貫性
    商品のブランドイメージや世界観を反映したデザインになっています。
  4. 情報の優先順位に合わせたサイズ設定
    重要な情報ほど大きく、目立つサイズで表示します。

サンプルバナーの構造分析

  1. レイアウトパターン
    代表的なレイアウトパターンには以下があります：
    • 左商品画像・右テキスト
    • 背景全体に商品・テキストをオーバーレイ
    • 上部商品画像・下部テキスト
  2. 色使いの特徴
    • 商品の色調に合わせた配色
    • ブランドカラーの効果的な使用
    • 背景と前景の明確な分離
  3. テキストの特徴
    • 商品名：目立つフォントと配置
    • キャッチコピー：簡潔で印象的な言葉
    • 特徴説明：短く具体的なポイント

商品の魅力を引き出すレイアウト

商品紹介バナーでは、商品そのものの魅力を最大限に引き出すレイアウトが重要です。

商品タイプ別の効果的なレイアウト

1.物理的な商品（衣類、家電など）
  • 商品を大きく、詳細がわかるように表示
  • 使用シーンや使用イメージも含める
  • 商品の質感や素材感が伝わるように調整
(25380)

2.デジタル商品（アプリ、ソフトウェアなど）
  • スクリーンショットや使用イメージを表示
  • 機能やメリットを視覚的に表現
  • シンプルで洗練されたデザイン
(25383)

3.サービス（旅行、体験など）
  • イメージ写真を効果的に使用
  • 感情に訴えかけるビジュアル
  • サービスの結果や効果を想像させる要素
(25386)

効果的な文字組みと画像処理

商品紹介バナーでは、文字の配置や画像処理の質が完成度に大きく影響します。
(25390)

文字組みのポイント

  1. 読みやすさを優先
    • 適切なフォントサイズと行間
    • 背景とのコントラスト
    • 読みやすいフォントの選択
  2. 情報の優先順位
    • 商品名やキャッチコピーなど、優先するテキストを決める。
    • ターゲットにとってどのくらい重要な情報なのかを考え、フォントサイズや配置を決める。
    • 商品名やキャッチコピーと同じくらい目立つデザインだと、画像全体が複雑になり、一番伝えたい要素が分かりにくくなる。
  3. テキストの装飾
    • 強調したい部分の色や大きさを変える。
    • 背景との区別を明確にする。（テキストボックスや下線など）
    • アイコンやマークで視認性を高める。

画像処理のポイント

  1. 商品画像の最適化
    • 色調補正（明るさ、コントラスト、彩度）
    • 不要な部分の切り抜きや加工
  2. 背景処理
    • 商品に合った背景の選択や作成
    • グラデーションや柄の効果的な使用
    • 商品を引き立てる陰影や光の表現
  3. 画像効果の追加
    • 光彩や輝きで高級感を演出
    • 部分的なぼかしで奥行きを表現
    • オーバーレイで統一感を出す

模写の実践ステップ

・制作見本
(25398)

・使用素材

ECバナー・パッケージ1-3(zip形式)

ECバナー・パッケージ1-3(zip形式)
1.サンプルバナーと同じサイズ(640×300px)の新規ドキュメントを作成
2.商品画像の配置と調整
  • 背景の切り抜き（必要な場合）
  • 画像の明るさ・コントラスト調整
  • 色味の調整
(25407)

3.テキストの配置
  • 商品名の配置
  • キャッチコピーの追加
  • 特徴や説明の追加
(25410)

4.装飾要素の追加
  • ブランドロゴの配置
  • CTAの配置
5.全体のバランス調整
  • 色のバランス確認
  • 視線の流れの確認
  • 可読性の確認
(25413)

確認問題とまとめ

確認問題
  1. 商品紹介バナーの特徴を２つ挙げてください。
  2. 商品画像を効果的に見せるために行うべき画像処理の例を2つ挙げてください。
  3. 商品紹介バナーで情報の優先順位を考える目的は何ですか？
答え
  1. 商品のビジュアルを重視、商品の特徴や利点を端的に説明、ブランドイメージと一貫性を保つ、情報の優先順位に合わせたサイズ設定のうち２つ
  2. 色調補正（明るさ・コントラスト・彩度の調整）、背景の処理、画像効果の追加など
  3. より効果的に商品の購買に誘導するため
まとめ
  • このセクションでは、商品紹介バナーの模写を通じて商品の魅力を効果的に伝えるレイアウトと画像処理のテクニックを学びました。
  • 次のセクションでは、パッケージデザインの模写と立体構造を考慮したデザインの作成方法を学びます。

【1-4】パッケージデザインの模写

目安の学習時間：45分

サンプルパッケージの構造分析

パッケージデザインは、商品を保護するだけでなく、ブランドイメージを伝え、購買を促進する重要な役割を持っています。
サンプルパッケージを分析して、その構造を理解しましょう。
(25424)

サンプルパッケージの基本情報
  • タイプ：箱型（または袋型、ボトル型など）
  • 展開図のサイズ：例）A3（420×297mm）
  • カラーモード：CMYK（印刷用）
  • 解像度：300ppi（印刷用）

パッケージデザインの特徴

  1. 立体構造を考慮したデザイン
    平面のデザインが立体になったときの見え方を考慮しています。
  2. ブランドの一貫性
    ロゴ、カラー、タイポグラフィなどがブランドイメージと一致しています。
  3. 情報の優先順位
    商品名、特徴、成分、使用方法などの情報が明確に整理されています。
  4. 技術的な要素への配慮
    印刷、折り目、のり代などの技術的要素が考慮されています。

パッケージの構造分析

  1. 面の構成
    • 正面（メイン面）：最も重要な商品情報
    • 背面：詳細情報、成分表示
    • 側面：補足情報、ブランド要素の継続
    • 上下面：ロゴや簡易情報
  2. デザイン要素の配置
    • ロゴの配置位置
    • 画像・イラストの使用箇所
    • テキスト情報の配置
    • 色の使い分け
  3. 素材感と印刷効果
    • 光沢、マット、エンボスなどの表現
    • 特色や箔押しなどの特殊印刷
    • 素材の質感表現

基本フォーマットの作成

パッケージデザインでは、まず展開図（平面状態）での基本フォーマットを作成します。
今回の模写では、パッケージの正面デザインの制作のみを想定して進めていきます。

フォーマットの作成手順

  1. 新規ドキュメントの設定
    • ロゴの配置位置
    • カラーモード：CMYK
    • 解像度：300ppi
  2. ガイドラインの設定
    • 3mmの裁ち落としと、重要情報を配置する安全領域（セーフティマージン）
    • その他、デザインを制作しやすいよう縦横中央ラインなど必要に応じて追加する

テンプレートの作成手順

  1. 色の設定
    • 基本カラーパレットの作成
    • グラデーションやパターンの設定
  2. フォント設定
    • メインタイトル用フォント
    • 本文用フォント
    • サブ情報用フォント

ブランド要素の配置と調整

基本フォーマットができたら、具体的なブランド要素を配置していきます。
特に商品が魅力的に感じられるようなレイアウトを心がけましょう。

ブランド要素の配置ポイント

  1. ロゴの配置
    • 視認性の高い位置に配置
    • サイズと余白の適切な設定
    • 背景との関係を考慮
  2. 基本カラーパレットの適用
    • ブランドカラーの正確な再現
    • 色のバランスと調和
  3. タイポグラフィの設定
    • 商品名：目立つサイズとフォント
    • 説明文：読みやすいフォントと適切なサイズ
    • 法的表記：必要十分なサイズと配置（正面に記載しない場合は不要）
  4. 画像・イラストの配置
    • 商品のビジュアル表現
    • 補足的なイラストや図解
    • テクスチャやパターン

要素配置の実践ステップ

・制作見本（今回は正面のパッケージデザインのみを制作します）
(25443)

・使用素材

実践課題：ECバナー・パッケージ1−4(zip形式)

実践課題：ECバナー・パッケージ1−4(zip形式)
  1. 必要な要素を書き出す
    • 要素を箇条書きでまとめる
    • それぞれの要素をどの面に配置するかを考える
    • 正面となるパッケージのサイズを確認
  2. デザイン（こちらは正面パッケージに必要と思う要素のみで問題ありません）
    • ロゴの配置（見本パッケージにある右下のロゴは「Zen Maru Gothic」を使用して制作しています）
    • 商品名・キャッチコピーの配置
    • メインビジュアルの配置
    • 補足情報の配置
  3. テキストの微調整
    • カーニング・トラッキングの調整
    • 行間の最適化
    • テキストボックスの整列
  4. 色調の調整
    • カラーバランスの確認
    • 印刷を考慮した色やサイズの調整

確認問題とまとめ

確認問題
  1. パッケージデザインで最も重要な面は何ですか？
  2. ブランド要素の配置において、最も重要なことはなんですか？
  3. 印刷用デザインで使用するカラーモードは何ですか？
答え
  1. 正面（メイン面）
  2. 商品が魅力的に感じられるようなレイアウト
  3. CMYK
まとめ
  • このセクションでは、パッケージデザインの模写を通じて立体構造を考慮したデザイン制作と印刷用データの作成方法について学びました。
  • 次のセクションでは、これまでに習得したスキルを活かした実践的な演習課題に取り組みます。

【1-5】 -演習課題- 学んだ要素を活かしたデザイン制作

目安の学習時間：120分

オリジナルセールバナーの制作

これまでに学んだ知識とスキルを活かして、オリジナルのセールバナーを制作していきましょう。
課題内容
架空のオンラインショップ「STYLE MARKET」の季節限定セール「Summer Sale」のバナーを制作してください。
条件
  • サイズ：728×90px（リーダーボード型）
  • カラーモード：RGB
  • 解像度：72ppi
  • 必須要素：
    • セール名「Summer Sale」
    • 割引情報「最大50%OFF」
    • セール期間「7/15-7/31」
    • CTAボタン「今すぐチェック」
    • ブランドロゴ（簡易的なものでOK）

ブランドロゴ-ECバナー・パッケージ1−5(zip形式)

ブランドロゴ-ECバナー・パッケージ1−5(zip形式)
ご自身で制作したものを使用してもOK

制作ステップ

  1. プランニング（10分）
    • セールのコンセプトを把握する（限定ということをアピール）
      • タイトル
      詳細
      ターゲット
      20代女性、プチプラだけど高見えする洋服が好き、おしゃれが好き
      掲載場所
      広告用バナーとして外部のサイトにランダムに掲載、セール商品の一覧ページへリンクする際に使用、スマホで見ることを想定している
      ブランドの特徴
      価格帯は5,000円〜10,000円程。ベーシックで使いやすいデザインの服が豊富
      与えたい印象
      人気商品がお得に購入できるチャンス、期間限定のキャンペーン
      使用する素材の要件
      特になし（商品画像も任意のフリー素材やバナー100本道場のもので構いません）
      制作メモの記載
      ①制作にかかった時間
      ②制作のコンセプト・こだわり
    • 全体のトンマナを決める（例：夏らしい明るい色調）
    • レイアウトの構想を簡単にスケッチする
  2. バナー制作（30分）
    • 新規ドキュメントの作成（728×90px、RGB、72ppi）
    • 背景デザインの作成
    • テキスト要素の配置
    • CTAボタンの作成
  3. チェックと微調整（5分）
    • 情報の過不足がないか確認
    • 視認性・可読性のチェック（スマホでも文字や画像が見えるか）
    • 色のバランスの確認
    • ファイルの保存（PSD/AIファイルとJPG/PNG）
      • 　＊コーチが確認しやすいように、それぞれのファイル名にご自身の名前を記載するようにしましょう。

商品紹介バナーの制作

次に、商品紹介バナーの制作に取り組みましょう。
課題内容
架空の商品「SmartFit Pro」（スマートウォッチ）の商品紹介バナーを制作してください。
条件
  • サイズ：728×90px
  • カラーモード：RGB
  • 解像度：72ppi
  • 必須要素：
    • 商品名「SmartFit Pro」
    • 商品キャッチコピー「あなたの健康管理を次のレベルへ」
    • 商品の3つの特徴（自由に設定）
    • 商品画像（ダミー画像またはイラスト）
    • CTAボタン「詳細を見る」

制作ステップ

  1. プランニング（10分）
    • 商品の特徴を3つ考える（例：24時間健康モニタリング、防水機能、バッテリー持続時間など）
      • タイトル
      詳細
      ターゲット
      屋外で長時間使用する機会が多い40代のビジネスマン（男女共にターゲットにしたい）
      掲載場所
      広告用バナーとして、商品の購買ページや商品サービスのページへリンクする際に使用、スマホで見ることを想定している
      商品の特徴
      日常使いしやすいシンプルなデザインと便利な長時間バッテリーの搭載
      与えたい印象
      洗練されたシンプルなデザインで、身につけていることを忘れるような使用感のイメージを伝えたい
      使用する素材の要件
      特になし（商品画像も任意のフリー素材で構いません）
      制作メモの記載
      ①制作にかかった時間
      ②制作のコンセプト・こだわり
    • 全体のトンマナを決める（例：夏らしい明るい色調）
    • レイアウトの構想を簡単にスケッチする
  2. バナー制作（30分）
    • 新規ドキュメントの作成（728×90px、RGB、72ppi）
    • 背景デザインの作成
    • 商品画像の配置と調整
    • テキスト要素の配置
    • CTAボタンの作成
  3. チェックと微調整（5分）
    • 情報の過不足がないか確認
    • 視認性・可読性のチェック
    • 色のバランスの確認
    • ファイルの保存（PSD/AIファイルとJPG/PNG）
      • ＊コーチが確認しやすいように、それぞれのファイル名にご自身の名前を記載するようにしましょう。

シンプルなパッケージデザインの制作

最後に、シンプルなパッケージデザインの制作に取り組みましょう。
今回の制作では、パッケージの正面デザインのみ制作すればOKです。
課題内容
架空の商品「Natural Soap」（天然石鹸）のパッケージデザインを制作してください。
条件
  • 形状：シンプルな箱型
  • サイズ：A4サイズ
  • カラーモード：CMYK
  • 解像度：300ppi
  • 必須要素：
    • 商品名「Natural Soap」
    • ブランド名「PURE ELEMENTS」
    • 内容量「100g」

制作ステップ

  1. プランニング（10分）
    • パッケージのコンセプトを考える（例：ナチュラル志向、エコフレンドリーなど）
      • タイトル
      詳細
      ターゲット
      子育て中の30代の女性、子育てと仕事の両立でいつも時間に追われている、子供の体に優しいものを使いたいナチュラル志向
      商品の特徴
      子どもや敏感肌にも優しい天然素材に拘っている、香りは強すぎず普段使いしやすい
      与えたい印象
      女性らしい繊細な印象、優しい印象
      使用する素材の要件
      特になし（商品画像も任意のフリー素材で構いません）
      制作メモの記載
      ①制作にかかった時間
      ②制作のコンセプト・こだわり
    • 全体のトンマナを決める
    • レイアウトの構想を簡単にスケッチする
  2. パッケージ制作（25分）
    • 新規ドキュメントの作成（A4サイズ、CMYK、300ppi）
    • 背景デザインの作成
    • ロゴ・商品名の配置
  3. チェックと微調整（5分）
    • 情報の過不足がないか確認
    • 視認性・可読性のチェック
    • 色のバランスの確認
    • ファイルの保存（PSD/AIファイルとJPG/PNG）
      • ＊コーチが確認しやすいように、それぞれのファイル名にご自身の名前を記載するようにしましょう。
これで「模写課題 - ECバナー・パッケージ」の解説を終わります。
お疲れ様でした!
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH