架空サイトLPデザイン(無農薬野菜販売サイト)

OVERVIEW

Webサイト

【概要】

デジタルハリウッドSTUDIOの課題です。

無農薬野菜の販売を行う架空店舗のLPデザインです。


【お題内容】
サイトコンセプト:『新鮮さ』『信頼感』『安心感』『健やかさ』『ヘルシー』
ターゲットユーザー:成長期の子供がいて食にこだわりがあり、そこそこ食にお金をかけられる20~40代の主婦層
訴求したい事項:
①無農薬・有機野菜・オーガニック野菜
②身体にいいものを販売しているというブランディング
③産地直送
 ④旬のものが味わえる

 

【制作期間】

2021年11月〜2022年01月


【意図・ポイント】

メインビジュアルは、無農薬野菜のナチュラルさと沢山の野菜が贈り物のように自宅に届くイメージを与えられるように素朴なデザインの葉っぱやリボンを使用しました。
 ヘッダーを画面に固定しており、右上の赤いボタンから少量お試しセットの場所まで移動できるようにしています。

ターゲットに伝えたい情報や「もっと読みたい」と思わせる内容を優先的に上部に配置しました。

安心感が得られるように産地の方の顔写真が入ったスライダーをjQueryで取り入れています。

また、信頼感や安心感を得られるように土をイメージさせる茶系の背景や明朝体を選びました。

新鮮さや健やかさは野菜そのもののカラフルな色合いを生かしています。

 

【問題と解決策】

野菜の新鮮さや旬のものであることと、無農薬の安心感を同時にデザインに落とし込むことに苦戦しました。新鮮さや旬のものであることはカラフルな野菜の画像で十分伝わると考え、その他の色合いはナチュラルな土のぬくもりを感じる色をベースにしました。
少量お試しセットの内容はサイト内で一番重要なので、他の場所はできるだけ彩度を抑えようとしましたが、なかなか上手くまとまらずに苦戦しました。
 少量お試しセットの内容が書かれているエリアを、お店のような屋根のあるデザインで目に留まるように工夫したことで解決しました。

 

【担当内容】

ワイヤーフレーム / デザイン / コーディング

 

【使用ツール・言語】

Illustrator/Photoshop / HTML&CSS / jQuery


【モバイル版デザインカンプ】


【PC版デザインカンプ】