カフェのサイト モックアップ

カフェのサイト

https://iinoyuko.com/works/fuchur
分類 自主制作
担当範囲 デザイン・コーディング
使用ツール Illustrator / Photoshop / HTML / CSS / jQuery
制作時期 2023年8月
制作期間 デザイン1週間・コーディング1週間
ページ数 TOP・初めての方へ・こんな使い方・メニュー・アクセス(全5P)

制作背景・課題

「BARのようにくつろげるカフェ」をコンセプトにした銀座の老舗カフェを想定した自主制作。開業したばかりでPR不足という課題に対し、Webサイトで認知度向上と予約導線の整備を目的として制作。ターゲットは40〜50代の中高年層。

デザインの意図

お店の雰囲気を伝えるためトップページに店内画像を全面配置。珈琲をイメージしたダークブラウン系の配色、游明朝体(サブフォントにヒラギノ明朝体)を採用。「こんな使い方」ページでコンセプトを紹介し、競合店との差別化を図った。マップアプリに不慣れな層を考慮し、地図の印刷・URLコピー機能も実装。

コーディングの詳細

HTML/CSS(BEM記法)で制作。トップページのスライダーとエフェクトはjQueryを使用。PC・タブレット・モバイルの3段階レスポンシブ対応。

次のデザインへ