「伝統」と「革新」
長い歴史を誇る喜栄堂の「伝統」を感じさせる要素を配置しつつ、新しい世代の主に女性に親近感をもってもらえるようレガシーサイトからの脱却を目指す。
URL
デザインカンプURL
担当
企画・ワイヤーフレーム・デザイン・コーディング・画像加工
コンバージョン
サイト訪問者数アップ ネット販売数アップ
ターゲット
20代後半〜40代前半の女性
デザインについて
ペルソナの設定
おしゃれなカフェも赤提灯居酒屋も好きなグルメ女性。
ビジネスの手土産を選ぶ機会も増え、日々ネタ探し。
BRUTUSの手土産特集はなんだかんだチェックしてしまう。
ブランドイメージは「繊細で柔らかさや優しさを持った和菓子」
メインカラーを桃色、ベースカラーをベージュにして優しい印象に。
コンテンツの画像は円で表現し、柔らかい印象を持たせる
明朝体をメインにし、高級感のあるイメージにする
ネット販売促進のために
カードを固定で設置
コーディングで考慮したこと
前作「喜納組」で初めて複数ページでのarticleやsectionを使用しクラス名の付け方に苦戦した経験を生かし、このサイトではよりarticleとsection、クラス名を整理して使用した。
また今回は波型の背景を使用するにあたり、画像をFigmaで作成しSVGで書き出し、コンテンツエリアを＜波型＞の画像で挟んで制作を行なった。
制作時間
要件定義・画面設計：10時間
デザインカンプ：20時間
コーディング：35時間
使用アプリ・言語
デザインカンプ：Figma
画像加工：Adobe Photoshop
コーディング：HTML／CSS／jQuery／JavaScript