# Webサイト｜自主制作

Coffee shop「Cozy Chat」

架空のコーヒーショップのWebサイトを制作しました。学校の課題でデザインカンプまででしたが、コンセプトを見直して実装まで取り組みました。

Scroll

PURPOSE

制作目的

ターゲット層の集客向上を目的としています。
既存サイトでは店舗の雰囲気やコンセプトが十分に伝わっておらず、ターゲットである20代後半〜40代の女性に向けてデザインと構成を全面的に見直し、「ここに行ってみたい」と感じてもらえるサイトを目指しました。

ターゲット

20代後半〜40代女性／慌ただしい日常の中に、自分だけのやすらぎの時間を求めている方

コンセプト

あたたかさ＝陽だまりというイメージを軸に、心が休まる心地良さが体験できるサイト

ページを訪れたユーザーが「ここに行ってみたい」と感じられるよう、柔らかい陽だまりを感じさせる配色を選定しました。ベースカラーにサンドベージュ（#F9F7F2）を採用することで、穏やかな温かさとリラックス感を表現しています。

アクセントカラーにはテラコッタオレンジ（#C06C4C）とマスタード（#E1B80D）を組み合わせ、落ち着きの中に活気があるカフェらしい空気感を演出しています。フォントカラーはコントラストを押さえたグレー（#4A4A4A）とし、長時間見ていても疲れにくい設計を意識しました。

サンドベージュ

#F9F7F2

メイン / ベース

テラコッタオレンジ

#C06C4C

アクセント

マスタード

#E1B80D

アクセント

チャコールグレー

#4A4A4A

フォント

余白を多くとったシンプルな構成だからこそ、「動き」でカフェの雰囲気を表現することを意識しました。スクロールに応じたアニメーションを各セクションに実装し、ゆったりとした時間の流れを体感してもらえるよう工夫しています。

豊富なコンテンツを「店舗を知る(News/Concept)」「体験する(Menu/Workshop)」「繋がる(Blog/Access)」の3軸で整理し、必要な情報に迷わずたどり着ける設計を意識しました。

また、全ての情報を一度に表示させず「View More」ボタンを配置して情報の入り口を絞り込むことで、ページ全体の余白を保つようにしました。