URL
http://tmytsd.site/hokuhoku-corp
概要・コンセプト
地産地消をスローガンとして九州地方の農産物、主にさつまいもを販売している業者。商品開発にも意欲的で、さつまいもチップスやさまざまなレシピを考案し、販促に繋げようとしている。
担当
デザイン・コーディング
サイトの目的(コンバージョン)
ブランド・商品の認知拡大と、商品購入ページへの流入。求人のお問い合わせ。新規キャンペーンの告知から商品購入に繋げる。
構成・デザインについて
ファーストビューには、一目見て農業関連だとわかるよう仮想で設定した九州地方の風景を入れて、左下にメッセージを入れました。スクロールしていくと商品の一覧と、ニュースがスライドショーで出るようになっています。
ユーザーターゲット
健康意識や、季節の食品にこだわりを持つ30代以降の男女。食品を見たときに産地や成分などを吟味し、カロリーやその他の栄養素に関しても一定の知識を持つ。体型維持や見た目にもこだわりがあり食生活にお金をかけるようにしている。衝動買いは少なくある程度情報を吟味し、比較して購入するかを検討する。
設計について
レスポンシブ対応にするため、max-width: 430px(iPhone15 Pro Max を想定)でハンバーガメニューを設置しており、どのサイズでも使えるように意識してコーディングしました。またJqueryのbxsliderを入れ込みデザイン性を高めました。
ワイヤーフレームについて
XDを用いて、コーディング前にブレークアウトポイントを設計しました。フォントサイズを事前に想定して設計することによりCSSにおいて時間短縮ができるよう意識しました。また、構成を考える上でマージンをどれだけ取るのか、設計したhtmlをcssで制御する際に、flexで仕上げようといった着想をXD設計の時点で考え、行き当たりばったりなwebサイト設計をなるべく避けて製作を進めるよう心がけました。
