Works webdesign
next
Port folio site by Ayu Kamioka
老舗和菓子店「さむらい堂」の仮想サイト
担当部分
デザイン、コーディング
制作期間
約1ヶ月(デザイン2週間、コーディング3週間)
使用技術
Photoshop、HTML/CSS、jquery
要望
- 目的：若い人へ客層を広げるためWebサイトを作成する
- キャッチコピー：「午後のティータイムは、緑茶と和菓子」
- 和菓子の写真
- グローバルメニュー（HOME、店舗紹介、商品紹介、アクセス、お問い合わせ）
- 新着情報を表示するエリア
- さむらい堂のこだわり（文章はダミーでOK）
- ターゲット：和菓子離れしてしまった20代女性を新規客として獲得したい
- メインカラー：お店ののれんが緑なので緑色を使用
- TwitterなどのSNSで発信していきたい
- 「さむらい堂」のロゴを入れてほしい（テキストで入れても画像で作成してもどちらでもOK）
コンセプト
『老舗』という20代前半から離れたイメージを、淡い配色や柔らかなモチーフを配置して20代女性に興味をもってもらえるデザインに作成しました。どのような和菓子があるかこのサイトを見にきたユーザーが、さむらい堂の和菓子に魅力を感じて実際にお店に足を運んでくれることをゴールとして考えていたため、コンテンツの順番にも気をつけています。
ペルソナ
さとう ゆうか
佐藤 優香さん
性 別：
女性
年 齢：
24歳
職 業：
事務職
勤続年数：
入社３年目
年 収：
300万円
趣 味：
料理やカフェ巡り
家族構成：
4人家族、長女。
猫を飼っている。
現在は独身、実家暮らしでお金に少し余裕がある。
性 格：
優しくて、人付き合いが良い。少し流されやすい性格。可愛いものが好きでSNSをよくチェックしている。特にInstagramを見ることが好き。買い物はインターネットですることが多い。
情 報：
現在は友人に渡す手土産を探している。友人がお茶を飲むことが多いので和菓子をメインに探している。
デザインコンセプト詳細
ロゴは、お店の名前がある重要な部分なのでメインカラーの緑のアクセントになる赤色をベースにして作成しました。また、1番左上に置くことで色と配置の効果で見る人の視線を誘導させる工夫をしています。
ターゲット層は20代女性ですが、『老舗のお店』という特徴を残すためにヘッダーやフッターには老舗の高級感をイメージさせる深い暗めの緑を使用しました。
メインビジュアルはキャッチコピーに合った緑茶と和菓子が映っているもの、老舗和菓子店の落ち着いた雰囲気のある写真を選びました。ターゲット層に合わせた柔らかい雰囲気を追加したかった為、キャッチコピーに視線が行く場所にふんわりとした形のモチーフを配置しました。
キャッチコピーや各タイトルには和を印象づける繊細なフォントを使用しています。説明文などの細かい情報のテキストには、老舗の高級感と若い女性という２つの要素に1番親和性のあるフォントにするため、Noto Sans JPを使用しました。
サイト内の全体的な色味は20代女性に人気の彩度の低い淡いカラーを統一させています。背景には和をイメージした模様の画像を配置しました。
商品紹介のメニューには様々な情報のテキストが集まっている為ユーザーが特に気になる値段を少し大きめのフォントに設定したり、商品名は縦書きで独立させた場所に置いて情報が伝わりやすい様に工夫しました。
ボタンはすべてカーソルを合わせた際に動きが出るようにしています。ボタンにも薄くグラデーションをかけて柔らかな印象になるよう細かい部分にもこだわりました。
各タイトル部分にはキャッチコピーに配置したものと同じ形のモチーフを置いて、サイト全体の統一感を出しました。また、ふわふわとしたアニメーションの動きを加えて見ていて飽きないよう工夫をしています。
各タイトルの下や背景に、波がかった曲線を配置することで女性らしさを表すデザインにしました。
お店に来てもらう事をゴールとして考えたサイトであるため、どの様な雰囲気のお店か見ているユーザー側にわかりやすく伝えたかったので地図と住所に加え、実際の店舗を想定した写真を配置しました。
Googlemapに少しグレースケールかけて彩度を落とし、サイト全体の雰囲気に近づけました。
お問い合わせ部分は今後オンラインでの販売をしたりする事も見据えた場合、重要となってくる部分なので大きめにボタンを表示させました。
お知らせは既にいくつか記事があることを想定して、まとまり良く新着情報がトップページに３つ表示される形にしています。例えば若い女性が、移動中にスマホで軽くサイトを閲覧しにきたり、時間をかけてサイトを見る余裕がない時にも視覚からすぐに情報が伝わりやすくなるよう、画像をメインに置いて作成しました。
コメント
プログラミングスクールを受講していた際の課題として、老舗の和菓子屋「さむらい堂」のトップページをデザインしました。加えて実際にコーディングを組んで制作しました。ターゲット層は20代女性と決まっていたため、その中でも20大前半〜20代半ばをターゲットにしています。