Case Study 02 homi bake,coffee ─ 京都の焼き菓子とコーヒーの店の、 公式サイトを制作した。

最初から全部をそろえてもらわず、
まず見える形にしました。

原稿や素材、要件整理を最初から大量にお願いしなくて済むよう、実物を見てもらってから必要なものだけを詰める進め方をとりました。

• 01

  調べて、仮説にする公開情報・SNSを調べ、お店の雰囲気・必要な情報・サイトの役割を仮説にしました。

• 02

  初期版を形にする仮説をもとに、初期版のサイトを形にしました。

• 03

  見てもらい、必要なものだけ受け取る初期版を店舗に見てもらい、必要な写真・情報だけを追加でいただきました。

• 04

  日英・CMSを整える日本語・英語の2ページと、更新の仕組み（CMS）を整えました。

• 05

  公開し、更新を続けられる状態へ公開し、店舗の方が更新を続けられる状態まで仕上げました。

店舗側にお願いしたのは、初期版を見ての修正したい点のフィードバック、追加で必要になった写真の提供、店舗情報・掲載内容の確認です。最初から原稿一式や要件をまとめて用意してもらう進め方にはしていません。

来る前に知りたいことを、
先に分かる形で。

公開中のサイトで確認できる設計を、5つに絞って紹介します。

• 01

  行き方と営業情報を最初にまとめるトップに営業時間とGoogleマップ・Instagramへのボタンを置き、「営業のご案内」に住所、アクセス、お席、ご利用、お支払い、問い合わせ方法を並べています。

• 02

  日々変わる情報は、Instagramを正本にする営業日は月ごとに変わり、売り切れや臨時休業もあるため、サイトに書き込まずInstagramで知らせる設計にしました。サイトからはボタンでたどれます。

• 03

  お店の特徴を、順番に伝える「homiのこと」「お店のこと」「焼き菓子」「コーヒー」の順で、お店の考え方、席、焼き菓子、豆の選び方を紹介します。いちばんのおすすめ「キャロットケーキ＋コーヒー」は「お店の推し」として大きく見せています。

• 04

  日本語と英語の2ページ英語版は日本語版と同じ構成・同じ事実で、言語の切り替えをヘッダーに置いています。

• 05

  検索と共有に必要な設定を整える検索結果やSNSで共有されたときに正しく表示されるよう、必要な設定を済ませています。

公開して、
実際の表示で確かめました。

公開

2026年10月3日

言語

2ページ日本語・英語

CMSで更新できる内容

3種類焼き菓子・コーヒーの写真と説明

• 01

  スマートフォンとPCの表示を確認画面の幅を変えて（360〜1440px）、表示の崩れがないことを確かめています。

• 02

  アクセシビリティの自動チェックで違反0公開前の自動チェックで、違反は0件でした。動きを減らす設定にも対応しています。

• 03

  公開後も、本番のURLで確認日本語版・英語版とも、公開後に実際のURLで表示とエラーの有無を確認しています。

売上、来店数、検索順位などの数値成果や、お店からの評価は、確認できていないため掲載していません。