カラーミーを使ったショップサイトの作成

デザインコンセプト

現在メルカリを使ってよもぎ商品を販売しているが、当社商品を販売する通販サイトを作りたい。さらに、当社オリジナルのグッズも販売したい。

ターゲットユーザー

30代～40代。よもぎを使った商品の購入を検討している方。

担当領域

• デザイン（XDを使ったレイヤーカンプ作成）

プロジェクトメンバー

計3名となりました。

• ディレクター
• デザイナー
• コーダー

製作期間

現在制作中の為仕掛中。デザイン自体は1か月ほど。

使用ソフト

XD、カラーミー

工夫したこと

不明瞭な情報が多かったので、エクセルシートにてなんの商品をいくらで販売するのか、その他欲しい情報をまとめ共有しました。

共有する際に注意した点は、欲しい情報のイメージが視覚的にしやすい形で情報提供を促しました。こちらフリー画像ではないので実際の使用は不可能ですが、サンプル画像があることによりどんな画像を提供すれば良いのかクライアントに分かります。

商品をクリックした先に飛ぶページも細かくデザイン、コーダーさんに指示を出しています。値段と商品が違わないよう要チェックしました。

こちらは、ティーカップの背景をPhotoshop画像生成機能を使って作成しました。

他も2～3案程提案

最終案決定まで2～3案ほど提案しました。テンプレートの良さをなるべく崩さず、わずかに変更を加えたものを作成しました。こちらは、本来のテンプレートの良さを生かしたデザインです。

こちらは様々なサイトで見られる形のものです。見出しがあり、以下に紹介文や自社製品紹介です。幅広い年代の方に見やすいデザインを意識しました。

生成AIを使用した仮画像配置にチャレンジ。

今回の案件で苦慮した点は、写真の選定でした。案件が先に進むまでは、どんなHPでもフリー素材を使用したり、そのまま本番環境に使用することがありますが、今回の案件はよもぎの商品を推し出すショップページとなります。よもぎのフリー素材は大変少なく、このときにAI生成機能を使用しました。今はPhotoShopにも生成画像の機能がついているため、画像加工をしながら背景画像の生成を行い、違和感の無い形に仕上げることが出来ます。

ミーティングとデザインで明るみになった課題

このショップページの目的はよもぎの商品を販売する＋過程で出来たオリジナル商品をネット販売したいという希望がありました。しかし、実際に存在するオリジナル商品はHPのテイストとは合わないポップなものでした。そのためオリジナル商品は別ページに移動する案を提示し、さらにもう少し顧客受けするデザインを作成してみてはどうかという意見も提示しました。