Works

制作物

website

Cércle(セルクル)様

  • 担当内容
  • ディレクション・企画・デザイン・コーディング
  • 制作期間
  • 1ヶ月半(企画2週間/デザイン2週間/コーディング2週間)
  • 使用ツール
  • Figma/ Photoshop/Illustrator/VScode
  • 01 | クライアント情報
  • 京都にある、小さなカフェ。オーナー様が全て手作りのお菓子とこだわりドリンクが楽しめます。
    店内からお庭を眺めることができ、四季折々の自然を感じながら、静かで穏やかな、ここでしか味わえない空間となっています。
    今まではインスタグラムで集客をしており、日替わりメニューや営業日などもインスタグラムで発信しています。
  • 02 | コンセプト
  • 静かな時間を楽しみ、ひとと共有できるカフェ
    →Cercleの環境を本当に必要としている人に足を運んでもらうことを目標とします。
  • 03 | 現状課題
  • 集客の中心がインスタグラムとなっていて、インスタグラムでタグ付けされたり拡散するものはほとんど’映え’が中心になっていました。そのため静かな空間やひとりで穏やかな時間を過ごしたい本来の客層が求める価値、空間とのギャップが出てきてしまっていました。
    また、住宅街の中のカフェであるため、近隣の住民への配慮が必要不可欠で、来客者に対する注意やお願いが多いが、インスタグラムではなかなか周知しきれないことがあげられます。
  • 04 | ターゲット・ペルソナ像
  • 子育てに仕事に奮闘する、近所に住む30代女性。ひとりでゆっくり読書をすることが好きだが、最近は家庭第一の生活の中で、なかなか時間が取れないのが悩み。日常から少し離れて、ひとりでゆっくりと自分時間を取りたいと思っている方。
  • 05 | 競合分析
  • ・カフェ=映えのイメージが強く、映える写真を扱うサイトが多くあります。当サイトでは、視覚的な幸福感をしっかりと伝えつつ、映えに頼りすぎず、お店の雰囲気を忠実に感じてもらえるようなサイトを構成しました。
    ・おひとりさまのみ来店可能、または店内私語厳禁など、注意喚起を入れたり禁止事項が入ると、どうしても圧迫感が出てしまうサイトが多く見受けられました。当サイトでは、お店の雰囲気をまずしっかり伝えることで、注意やお願いを理解し、守ってもらえるような構成にしました。
  • 06 | デザインコンセプト
  • “まるで店内にいるかのようなサイト”を目指しました。カラーは店内のトーンと合わせ、極力シンプルに。その代わりフォントや、写真やテキストの配置にこだわり、見飽きずに心地よいデザインにしました。

07 | 完成デザイン

  • loading画面
    店内のゆったりとした雰囲気を表すため、ローディング画面もあえてゆっくり表示させました。
    フォントは依頼者様の好みでもあったタイプライター風のものを使い、ゆったりと文字が打たれるアニメーションをつけ、落ち着いた印象にしています。
  • top画面
    ・トップ画面
    ”静を愉しみ窓辺に癒される”というメッセージの背景には店内の写真を置き、かつ、ゆっくりと右側に写真が流れていきます。ゆったりとした空気感を店内の写真と共に伝えています。
    重要なインフォメーションをトップ画面に置き、クリック率を上げ、またインスタグラムでの営業日時や日替わりメニューのお知らせも行なっているので、インスタグラムへの移行がスムーズにできるよう、常に画面右下に固定してインスタグラムのリンクを入れています。
  • ・story
    ポエム調にお店のコンセプトや雰囲気を伝えています。写真やテキスト内容だけでなく、余白を含めた全体的なバランスから、店内の空気感を再現しています。
    • さらっと流し読みしていただいても、しっかりと伝わる内容にはなっていますが、テキストの中にはinfoページで伝えている注意事項をさりげなく散りばめて入れており、圧迫感なく間接的にお願いを伝えています。
    • このページに関わらず、すべての写真は店内の雰囲気にできるだけ近しいものになるよう、丁寧に加工しています。特に窓辺から入り込む自然光が美しいので、サイト内でもその美しさが伝わるようにこだわっています。
  • ・menu
    ケーキなど、日替わりのものが多いので、ここでは写真をギャラリー風に配置し、視覚的に楽しんでいただけるようにしています。また、このセクション以下から、背景を店内の床の色味と徐々に合わせることで、さらにお店の雰囲気を忠実に表しています。
  • ・info
    来店前に必ず読んでいただきたいお知らせについては、シンプルに伝え、お知らせページに移行してもらえるようにしています。
  • ・access
    ページ全体のトーンに合わせて、Googleマップもモノクロにしています。
  • footer 各ページ共通のフッターです。
    インスタグラムの最新のおすすめ投稿を2枚掲載しています。
    ここではアクセントカラーとして、京都らしい抹茶色を入れています。
  • 下層ページ①
    ・menuページ
    このページもシンプルにグランドメニューを載せつつ、ギャラリー風のデザインにしています。
    • 季節によって写真も変えていて、季節感を大切にするオーナーのこだわりも伝えています。
  • 下層ページ②
    ・infoページ
    分量が膨らんでいたので、しっかりと行間を開け、また、1つ1つの文章もできるだけ、短くして読みやすくしました。ちょっとしたイラストやアニメーションも入れて遊び心入れつつ、きちんとテキストを読んでもらえるようなバランスにしています。