架空の企業を想定した自主制作のコンセプトサイトです。受注案件ではなく、ここで紹介している企業は実在しません。
NAGIPET
神奈川の海沿いに建つ「小さな青い家」は、海水魚、レイアウト水槽、インコを扱い、奥では小動物を預かる。サイトには、三軒の店に見えないように三つすべてを収める必要があった。
NAGIPET（なぎぺっと）は「小さな青い家」と呼ばれる、神奈川県青波町のアクアリウムとインコの専門店で、奥には小動物のホテルとケアルームがある。日本語専用で5ページのサイトを作った。三つの専門を紹介するホーム、アクアリウム、インコ・小動物、ホテル・ケアのそれぞれのページ、そして店舗情報、アクセス、問い合わせフォームをまとめたページだ。Next.js 15で静的HTMLに書き出してCloudflare Pagesから配信し、サーバー側のコードはフォームを受けるPages Functionだけにした。デザインの考え方は「静かなる専門性」で、生成りの紙、深い藍、二つの日本語書体に集約される。
直面した
課題
こうした専門店は、三軒分の情報を一つのブログに詰め込むか、サンゴ水槽とうさぎの爪切りを同じ商品グリッドに並べるテンプレートに収まってしまいがちだ。しかも予定表を埋めるホテルとケアは、一頭ずつ電話で予約が入る。
海水魚と水草レイアウト、インコ、ホテル・ケアという関連のない三つの専門を、三つの事業をつなぎ合わせたように見えない一つのサイトに収める。
自前配信の2書体、和色で名づけたパレット、paltの字詰めと行頭字下げで日本語の組版を優先しながら、電車の中のスマホでも開けるページの重さに収める。
予約は店が実際に受けている電話へ案内しつつ、それ以外の問い合わせにはフォームがきちんと役立つようにする。
前提と
制約
このビルドが答えようとしたことと、意図的に止めた場所。
- ブリーフ
- 架空の町にある架空の店のための自主制作。オーナー以外に共通点のない三つの専門が一つの住所に同居する、という前提を置いた。
- スコープ
- 日本語のみ、静的書き出しの5ページで、CMSは持たない。店は入荷をInstagramで更新するので、来店の合間に古くなるページを持つ代わりに、そちらへリンクしている。
- ここだけは繋いだ
- バックエンドを持つのは問い合わせフォームだけだ。客が返事を必要とするのはそこだけだからだ。予約を電話に寄せたのは、店が一頭ずつしか預からず、予約ウィジェットでは存在しない受け入れ枠を約束してしまうからだ。
導いた
解決策
生成りの背景に、静的書き出しの5ページ。専門ごとに独立したページを持ちつつカードの仕組みを共有しているので、店は三つの部屋がある一軒として感じられる。色が役割を分けていて、水は深い藍、鳥と暮らしは鳶の茶、水景には苔をごく控えめに使う。
デザインの考え方は「静かなる専門性」だ。生成り（#faf7f2）の紙の上に深い藍（#0b2236）と土の茶を置き、色のトークンはすべて和色の名前で呼ぶ。見出しはしっぽり明朝B1、本文はZen Kaku Gothic Antiqueで、本文にはpaltの字詰めと行頭の一字下げを使う。角の丸いカードと紺を含んだ柔らかい影で、専門店が無機質に見えないようにした。
Next.js 15 App Routerを output: "export" で書き出し、静的HTMLとしてCloudflare Pagesから配信するので、落ちるオリジンサーバーがない。動的なのは /api/contact のPages Functionだけで、オリジンを確認し、zodで検証し、ハニーポットでボットを弾き、IP単位で送信を制限したうえで、Reply-Toを送信者にしてResendで送る。
サイト
ウォークスルー
ページは売り込む前に店そのものを見せる。ほぼ全画面の青い家の写真、店の説明が一行、そして問い合わせと電話の二つのボタン。その下の帯には、客が最初に確かめる四つのこと、つまりADA正規取扱店であること、動物取扱業の登録、駐車場3台、11:00-20:00で火曜と水曜が定休であることが並ぶ。
アクアリウム、インコ・小動物、ホテル・ケアにカードを一枚ずつ。三つが並ぶのはここだけなので店の全体像が一目で分かり、各カードは写真から始まって、文字より先に空気を伝える。
店に実際に置いている生体（海水魚、サンゴ、熱帯魚、水草、めだか）を並べ、入荷は変わるので最新はInstagramで確認してほしいと添えた。その上にADA正規取扱店の節を置いている。水草をやる人にとっては、それがわざわざ足を運ぶ理由だからだ。
インコの生体販売は、価格表を載せずに「お迎えの前にまず相談を」という誘いとして書いた。今週いる子はInstagramに任せ、ページが古びないようにリンクしている。
お預かりは完全予約制で電話から受けるので、節の先頭に電話番号を置いた。その下には、預け入れの当日に気まずく出てきがちな条件を先に書いている。鳥さんはケージの持ち込みを推奨、小動物さんは店のケージを使い、貸出ケージは¥1,500と¥1,200、そして持ち物だ。
営業時間、住所、駐車場、アクセス、動物取扱業の登録情報を1ページにまとめ、その末尾にフォームを置いた。予約は引き続き電話で受ける。フォームはそれ以外を受け付け、2〜3営業日以内の返信を約束し、送信前に個人情報の取り扱いへの同意を求める。
得られた
成果
アクセシビリティ、ベストプラクティス、SEOは両プリセットで100、レイアウトシフトはゼロだ。弱いのはパフォーマンスで、スロットリングしたモバイルでは3回の計測でLCPが記録されず、Lighthouseがスコアを出せなかった。初回描画にも数秒かかる。原因はデザインではなくビルドにある。静的書き出しのため写真はデスクトップ解像度のまま配信され、自前配信の日本語2書体はunicode-rangeごとに1ルールを持つレンダリングブロッキングのCSSを読み込ませる。次に行う変更は、サイズ違いの画像を事前に用意することと、フォントウェイトを一つ減らすことだ。
、公開中のサイトを Lighthouse 13.0.3（各プリセット3回計測の中央値）で実測した値です。
最後の
考察
このビルドを形づくったのは二つの判断だった。一つ目は、サイトに予約を取らせなかったことだ。店は一頭ずつ電話で預かるので、予約ウィジェットは存在しない受け入れ枠を約束してしまう。そこでサイトの役目は、問い合わせを正しい窓口に振り分けることになった。予約は電話、それ以外はフォーム、新しく入った生体はInstagramだ。どのページもその順路に沿って組んである。二つ目は、ページの重さを日本語の書体に使ったことだ。しっぽり明朝とZen Kaku Gothicがこのデザインそのもので、外せば写真の載ったテンプレートになる。その判断はスロットリングされたスマホで時間として表れ、上の数値がそれを示している。同じ判断をもう一度するが、画像のサイズは事前に用意する。実際に間違えたのはそこだった。
こんなサイトを作りたい？
中小企業のためのウェブサイトを、日本語と英語で設計・制作しています。プロジェクトについてお聞かせください。24時間以内にご返信します。