見出し画像

架空【和菓子バナー】のデザインプロセス|アイデアから完成まで

今回は、和菓子通販サイト用に作成したバナーのデザインプロセスを共有したいと思います。
このプロジェクトでは、「ChatGPT」「Adobe Express」「Pinterest」を利用しました。一連のステップを経て、バナーがどのように完成したかを詳しく解説します。


デザインツールの選定

今回は以下の目的でデザインツールを選定しました。

  • 「ChatGPT」でユーザーの深掘り、和菓子屋さんを設定

  • 「Adobe Express」で画像生成

  • 「Pinterest」でデザイン参考探す

01,「ChatGPT」でユーザー設定

始めに、ユーザーの深掘りを行いました。

👩‍💻:あなたは世界最高峰のUXデザイナーです。和菓子を女性向けに販売したいです。 ペルソナを設定する際に必要な情報をもとにデータを作成してください。

すると、ペルソナの『佐藤 真美』さんを作成してくれました。

以下の情報をまとめてくれます。

  • 基本情報

  • 興味・関心事

  • 生活状況

  • 購買行動

  • 価値観

02,「ChatGPT」で和菓子屋さんの設定

次に、想定クライアントの和菓子屋さんを設定します。

👩‍💻:ユーザーのニーズに合った和菓子屋さんの店名、コンセプト、商品などの情報を定義してください。

すると、店名やコンセプトを設定して提案してくれます。
自分で細かな設定をするのは大変なので、想定の顧客として細かい情報を定義してくれるのはありがたいですね。

店名: 菓風月(かふうげつ)

  • コンセプト: 「季節を味わう、心和む一時」をコンセプトに、季節ごとの自然の美しさと旬の食材を反映した和菓子を提供。伝統的な技術と現代的な感性を融合させた新しいスタイルの和菓子を展開します。

  • ターゲット顧客: 和菓子や日本の文化に興味がある国内外の若者から高齢者まで、幅広い年齢層。

  • 立地・設計: 日本の風情を感じさせる自然豊かな場所に店舗を構え、内装には和紙や木材を基調とし、静かで落ち着いた空間を提供。

商品ラインナップ

  • 季節の生菓子: 春は桜餅、夏は水まんじゅう、秋は栗きんとん、冬は薯蕷饅頭など、季節に合わせた限定商品。

  • 常設商品: どら焼き、大福、せんべい、抹茶の和菓子など、一年中楽しめる定番商品。

  • 特別商品: 地元産の食材を使用したコラボレーション商品や、祭事、行事(例:節分、七五三)に合わせた特別な和菓子。

ECサイトの特徴

  • サイト名: 菓風月オンラインショップ

  • 機能:

    • ユーザーフレンドリーなインターフェースで簡単に注文可能。

    • 季節の和菓子の予約購入機能。

    • 商品の詳細説明と原材料、アレルゲン情報提供。

    • 多言語対応で国内外からのアクセスを促進。

    • SNS統合で最新情報や限定販売の告知。

    • 安全な支払いシステムと迅速な配送オプション。

03,「ChatGPT」でテキストの生成

次に、バナーのターゲットをChatGPTに入力し、テキスト案を提案してもらいました。
デザインに適した魅力的なテキストを短時間で作成するのに便利ですね。

👩‍💻:あなたは世界最高峰の女性向けコンテンツ専門のライターです。以下のターゲットに向けて新商品和菓子のバナーを作成してください。構成を考えた後、構成に基づいてタイトルとテキストを考えてください。

ターゲットに分かりやすいテキストを選びます。

04,Pinterestで参考画像を見つける

これまで得た情報をもとに参考画像を探します。

デザインのインスピレーションは、Pinterestで「和菓子」や「バナー」というキーワードで検索して得た数々の画像から得ました。
特に目を引いたのは、色鮮やかな和菓子の写真と、それらを引き立てるシンプルな背景の画像です。
これらの画像を参考に、バナーの基調を決定しました。

参考画像を集めることで、和菓子らしいデザインがわかる

05,Adobe Fireflyで画像を生成

Adobe Firefly

まずはテキストを入れて生成します。

👩‍💻:水まんじゅう / 白い皿

白いパンが生成されました
水まんじゅうのまんじゅうから、あんぱんかな?

上手く伝わらなかったので、参考画像をアップロードします。

構成とスタイルに参考画像をアップロード
水まんじゅうっぽい画像になった!

06,Adobe Expressでデザインをする

Adobe Express

最後にデザインをしていきます。
Adobe Expressを選んだ理由は、その使いやすさとプロフェッショナルなデザインが簡単に作れる点にあります。特に、テンプレートの豊富さとカスタマイズの自由度が高いので、初心者から上級者まで幅広く対応可能です。

Adobe Expressに参考画像から得た情報を入れます。 


※先ほど作った水まんじゅうの画像ですが、皿が見切れていたため、無料サイトから画像をダウンロードしました。


画像をアップロードし、色調整、テキストの配置、フォントの選択を行いました。
特に重要視したのは、和菓子の魅力を最大限に引き出しつつ、読みやすく情報もしっかり伝えることができるレイアウトを確立することでした。

デザイン完成!


完成したバナーは、シンプルでありながらも目を引くデザインとなりました。和紙の質感を模した背景は、和菓子の色と良く合い、全体として和の雰囲気を感じさせる仕上がりに。また、テキストは情報を的確に伝えつつ、視覚的にもバランスを整えました。

まとめ

このプロジェクトを通じて、Adobe Expressのポテンシャルと、ピンタレストとChatGPTの組み合わせの効果を改めて実感しました。これらのツールは、個人のプロジェクトだけでなく、ビジネスのプロモーションにも大いに役立つことでしょう。
皆さんも是非、これらのツールを使ってみて、自分だけの素敵なデザインを創り出してください!

この記事が気に入ったらサポートをしてみませんか?