webサイト|珈琲朝一番 さま

OVERVIEW

隠れ家的珈琲専門店 珈琲朝一番さまのwebサイト

YEAR 2022

2022/5/29

【担当工程】すべて(撮影含む)※「かき氷」「焼き芋」の写真は提供

【制作期間】14日(撮影・ヒアリング含む)


【サイトの目的】

・来店

【ターゲット】

・30-60代の「本格珈琲」志向の男女。

・本格的な珈琲を通して少し豊かで格上げされた気分を味わいたい方。

・特別な喫茶空間を通して、非日常な豊かな時間を味わいたい方。



【制作背景】

・webクリエイター科3ヶ月の卒業制作として制作。

・webページをお持ちでないクライアントを探し、「珈琲朝一番」さまに交渉し制作しました。


【デザイン意図】

・「本格珈琲」志向をターゲットにこげ茶色と深みのあるブロンズ色を用い渋みのある高級感を演出しました。

・明朝体と縦書きで「商品の品質への自信」を表現しました。

・メインビジュアルに焙煎機が回転している動画を埋め込み、ページ導入の没入感を高めました。

・スクロールしていくと入る斜めの線は、店内に射し込む庭の光をイメージしました。

・トップページ全体をひとつの流れとして捉え、最後に目的である来店を促す「行きかた」コンテンツを配置しました。

・下部の4コマ画像の裏モチーフは「新聞の四コマ漫画」。メイン情報の最後に親しみをプラスする狙いです。読む方向を示すために画像に丸みをつけました。

・ネットに親しみのない世代(60代のターゲットの中で想定)にも読みやすいように、トップ全体の文章量をしぼり、コンテンツ量を抑えました。その分、文字のポイント数を18ポイントと大きめに設し、文字間・行間をひろくとりました。

・またフッターに地図を配置し、トップページしか見ない方にも基本情報が足りるよう完結させました。

・赤道以南で栽培される珈琲豆の産地、エチオピアなどの国旗をイメージした赤と深緑をポイント色に使用しました。


【技術】

・メンテナンスが楽になるように、矢印や画像の丸みなど、なるべくCSSで書きました。

・TOPに動画がある分、少しでも軽くなるよう、下層ページのスライドショーはjQueryを使わずCSSで作成しました。