「いつもの日がちょっとよくなるコーヒータイム」を提案するヤマとカワ珈琲店様のWebサイトを制作しました。「日常の中のコーヒータイム」を強く印象づけるために写真を大きくふんだんに使い、飾らない、角を取った素朴なデザインに仕上げました。
また、知りたい情報にアクセスしやすく、買いやすいサイトであることを重視し、既存のECサイトとの連携して商品ページからの購入もスムーズに行えるようにしました。
「日常の中のコーヒータイム」 等身大で飾らない、 素朴さと温かみを
ヤマとカワ珈琲店
ブランディングサイト ECサイト 更新システム(CMS)


Outline
Planning
<課題>
・ECへの導線や購入ボタンの場所がわかりづらく、購入までにストレスを感じる
・公式とECが分離しており、行き来が面倒
・デザインにテンプレート感があり、ヤマとカワ珈琲店らしさが伝えきれていない
<リニューアル方針>
・購入ユーザーが商品を買いやすいように、UIを改善する
・ヤマとカワ珈琲店らしさを視覚的に表現する
・業務用、卸売り販売用のコンテンツを作成し、新しい顧客を獲得する
・はじめて訪れた人にはしっかりと説明をする
<コンセプト>
・訪れた人に気持ちよく接客できるWebサイトに(購買・各種サービス)
・「いつもの日が、ちょっとよくなるコーヒー」を表現する
・ECへの導線や購入ボタンの場所がわかりづらく、購入までにストレスを感じる
・公式とECが分離しており、行き来が面倒
・デザインにテンプレート感があり、ヤマとカワ珈琲店らしさが伝えきれていない
<リニューアル方針>
・購入ユーザーが商品を買いやすいように、UIを改善する
・ヤマとカワ珈琲店らしさを視覚的に表現する
・業務用、卸売り販売用のコンテンツを作成し、新しい顧客を獲得する
・はじめて訪れた人にはしっかりと説明をする
<コンセプト>
・訪れた人に気持ちよく接客できるWebサイトに(購買・各種サービス)
・「いつもの日が、ちょっとよくなるコーヒー」を表現する


Design
「いつもの日がちょっとよくなるコーヒータイムを。」というコピーと、その言葉を表すような、日常のなかで丁寧にコーヒー豆を挽いている様子の写真をメインビジュアルに用いました。
白地にネイビーの落ち着いた配色と、余白感のあるシンプルなデザインで、訪れた人に心地よさを与えることを目指しました。
白地にネイビーの落ち着いた配色と、余白感のあるシンプルなデザインで、訪れた人に心地よさを与えることを目指しました。





Technology
商品詳細ページが充実しているので、カートシステムだとカートボタンを押すためにまた上までスクロールしなければならず使い勝手が悪いことが課題でした。
そこで、商品詳細ページはCoサイトで作成し、カートのみカラーミーを使用することに。商品詳細ページの自由度を高くすることで、これまでの使いづらさを解消しました。
そこで、商品詳細ページはCoサイトで作成し、カートのみカラーミーを使用することに。商品詳細ページの自由度を高くすることで、これまでの使いづらさを解消しました。
サイトのトップページ全体を上から下へスクロールする画面キャプチャの動画。日常のコーヒータイムを訴求するメインビジュアルに続き、オンラインショップへの案内、卸売など法人向けのサービス案内、店主のブログ、お客様インタビューといったコンテンツが続く。
Contents
自分好みのコーヒー豆をどのように選んだらよいか、わかりやすく伝えるコンテンツを作成しました。
選び方を伝えた後に商品詳細ページに遷移できるチャートも用意し、利便性を高めています。
選び方を伝えた後に商品詳細ページに遷移できるチャートも用意し、利便性を高めています。
Project Data
- Client
- ヤマとカワ珈琲店
- Place
- 長野県長野市
- Launch Date
- 2021.5
- Url
- https://yamatokawa.com/
- Industry
- 食品・飲料 暮らし
- Director
- 保科大輔
- Designer
- ハラヒロシ
- HTML Coder
- 小林宗太 [栗の木デザイン]
- Engineer
- 小林宗太 [栗の木デザイン]