架空の企業を想定した自主制作のコンセプトサイトです。受注案件ではなく、ここで紹介している企業は実在しません。
KOMOREBI
湯ノ丘の山あいにある焙煎所で、窓の外には天然炭酸泉の足湯がある。サイトには、一杯のコーヒーと過ごす午後をまるごと売ることが求められた。
KOMOREBI Shop & Cafeは自家焙煎の豆を扱い、米粉のカステラを焼き、テラスの横では天然炭酸泉の足湯を無料で開いている。「Kyoto Washi」と名づけたデザインシステムで、日本語専用・5ページのサイトを作った。罫線も角丸も使わず、写真はホバーするまでモノクロのままにし、余白もデザインの一部として扱う。Next.js 16で静的HTMLに書き出してCloudflare Pagesから配信し、React Compilerを有効にして、表示のアニメーションはFramer Motionが担う。
直面した
課題
この手の店はたいてい、カフェのように撮影され、観光パンフレットのように書かれ、暖色のフィルター、メニューのグリッド、最後に地図が並ぶ。その扱いでは、人が山を上ってくる本当の理由である焙煎と水が見えなくなる。
焙煎所と焼き菓子と無料の足湯を一つのサイトに収め、足湯がカフェのおまけに見えないようにする。
写真では匂わせることしかできない空気を伝え、サイトそのものがその部屋のように感じられるようにする。
店の前でスマホを見ている人にも読めるようにし、営業時間、住所、今日足湯が開いているかがすぐ分かるようにする。
前提と
制約
このビルドが答えようとしたことと、意図的に止めた場所。
- ブリーフ
- 架空の町にある架空の店のための自主制作。罫線も角丸も使わないというルールを、5ページすべてで、レイアウトをスクラップブックのように崩さずに守る必要があった。
- スコープ
- 日本語のみ、静的書き出しの5ページ。メニュー、お知らせ、レビューはコード内の配列なので、価格を変えるときは店から私たちに依頼してもらう。この規模なら妥当だが、毎週値段が変わる業態には合わない。
- 作らなかったもの
- 注文も予約もニュースレターもない。足湯は無料で先着順なので予約するものがなく、数十席のカフェは、足を運ぶ価値を示すのに決済を必要としない。
導いた
解決策
温かい紙のような背景に5ページを置き、「間」を軸に作った。セクションは線ではなく空間で分け、写真はカーソルが色を戻すまでモノクロのまま、ふだん罫線が担う構造の役目を文字組みが引き受ける。
Kyoto Washiは、温かい白の面（#FBF9F4）、見出しとボタンのブランドブラウン（#553722）、一色のゴールドのアクセントで構成し、角丸はどこにも使わない。ラベルとナビゲーションはManrope、読ませる文章はNoto Serifで組み、装飾の脇書きには日本語の縦組みを使う。影は硬くせず柔らかく広げ、何も貼り付けたように見えないようにした。
React Compilerを有効にしたNext.js 16 App Routerを静的HTMLに書き出し、Functionsを持たずにCloudflare Pagesから配信している。Framer MotionのuseInViewで、セクションが画面に入るたびに表示を始める。public/_headersのコンテンツセキュリティポリシーで、ページが読み込めるのは自分のオリジンとフォントホストだけに限っている。
サイト
ウォークスルー
コーヒーについて何か語る前に、焙煎機が画面を埋める。店の売りはその場で焙煎していることなので、ヒーローは機械に譲り、その下のコピーは三行で済ませた。
物語の入口にあたる部分だ。創業1978年、店舗は2014年からで、年表全体はリンクの先にある。ホームは信頼できるだけの年月を重ねていることを伝え、詳しい話は物語のページに任せる。
価格は二段組みで省略せずに載せ、飲み物の写真は使わない。焙煎所のメニューは豆と淹れ方のリストで、一杯ずつ写真を載せるとチェーン店のように見えてしまう。
炭酸泉の足湯について言えることを四つだけ挙げて、そこで止める。無料であることは人が山を上ってくる理由として最も強いので、効能の前に一度、後にもう一度書いている。
車、電車とバス、県都方面からの三通りの行き方を載せた。店は山の中にあり、地図だけでは足りないからだ。その下のFAQは、電話で聞かれそうなことに先に答えている。
得られた
成果
5ページは静的書き出しで、React Compilerを有効にし、サーバーでは何も動いていない。下の読み込み時間はそれを反映している。残る重さは全面写真12枚だ。写真がデザインそのものなので、これ以上速くするには写真を最適化するしかない。
、公開中のサイトを Lighthouse 13.0.3（各プリセット3回計測の中央値）で実測した値です。
最後の
考察
この案件で難しかったのは、飾らないことだった。罫線も角丸もないと区切りはすべて余白で作るしかなく、写真は額縁の助けなしに自分の居場所を正当化しなければならない。ホバーまでモノクロにする手法は、時期のばらばらな12枚を揃えるために始めたもので、結果的にサイトの見た目を決めることになった。足湯からも学ぶことがあった。無料で、わざわざ来る理由そのものなので予約システムを作りたくなったが、必要ない。サイトは、足湯があること、温かいこと、コーヒーが冷めるあいだに足を浸けられることを伝えれば十分だった。
こんなサイトを作りたい？
中小企業のためのウェブサイトを、日本語と英語で設計・制作しています。プロジェクトについてお聞かせください。24時間以内にご返信します。