D etail
詳細情報

カフェのサイト

https://iinoyuko.com/works/fuchur

分類:自主制作

内容:デザイン 、コーディング

ページ数:TOP、初めての方へ、こんな使い方、メニュー、アクセス

制作時期:2023年8月

制作期間:デザイン (1週間)コーディング(1週間)

使用ツール:Illustrator/Photoshop/Adobe XD

使用言語:html/css/jQuery

職種:飲食サービス業(カフェ)

特色:お店のコンセプトは「BARのようにくつろげるカフェ」。
40代〜50代の中高年層をターゲットとし、空間デザインに重点を置いている。
また、良質な豆を使用した伝統的な珈琲を提供している。

お店の強み:立地が良く(銀座駅近く)、ベテランのバリスタが運営している お店の弱み:開業したばかりで、PR不足である

現状の予約導線:口コミサイト・電話予約・店頭受付

現状の課題:PR不足→Webサイトやパンフレット、ショップカードなどを作成し、一括ブランディングを行う

デザイン

ターゲット: お店の雰囲気を知ってもらうため、トップページに店内の画像を全面配置しました。
また「こんな使い方」というページを作成し、お店のコンセプトを紹介。競合店との差別化を図りました。
珈琲をイメージしたダークブラウン系の配色、游明朝体(サブフォントにヒラギノ明朝体)を採用し、あらゆるデバイスから違和感なく可読できるよう配慮しました。
マップアプリを使い慣れていない方のために、地図の印刷やURLをコピーできるボタンを配置しました。

コーディング

htmlとcss(BEM記法)で作成しました。
トップページのスライダー、その他の画面エフェクトはjQueryを使用しています。
レスポンシブはPC用・タブレット用・モバイル用と三種類設定しています。
カフェのサイト

デザイン | コーディング

コーポレートサイト

デザイン

ヘッドフォンのLPサイト

デザイン

絵師の作品サイト

デザイン | コーディング

ゲームの公式サイト

デザイン | コーディング