← 作品一覧へ戻る

Webサイト・会員ポータル / 2026

猫刻(ねこどき)

架空の古民家猫カフェを題材に、公開サイトから会員・招待制エリアまでを制作。猫の暮らしと静かな時間を大切にする世界観を、画面と導線で表現しました。

猫刻の公開トップ。「主人はねこ」の見出しと、霧の山に囲まれた古民家の写真
公開トップ:古民家と猫の暮らしを伝える入口。

OVERVIEW

概要と目的

公開サイトと会員ポータルをひとつの作品として制作し、店舗の世界観から会員向けの利用案内まで、一続きの体験を表現しました。架空の店舗であり、認証・送信・保存・予約確定を行わない操作モックです。画面内の会員情報は固定のデモ値です。

CONCEPT

コンセプト

猫に合わせて、人の歩幅をゆるめる。

「猫刻(ねこどき)」は、長野の山あいに佇む架空の古民家猫カフェを題材にしたWebサイトです。「主人はねこ」を軸に、猫を人が楽しむための存在ではなく、その家で暮らす「当主」として描きました。人が猫の領域を訪れ、予定や通知から少し離れて、猫のペースで過ごす体験を表現しています。

デザインには、古い木や土壁を思わせる茶色、生成り、落ち着いた橙色を採用。明朝体とゆったりした余白、山道や古民家の写真を組み合わせ、静けさと温もりを伝えています。章立てで世界観をたどる構成に、猫の紹介や日々の便りを添え、訪れる前からその暮らしに触れられるようにしました。

世界観への没入と、利用時のわかりやすさの両立も重視しています。利用条件や予約の流れを整理し、猫への配慮を自然に理解したうえで予約申請へ進める導線を設計しました。

※本作品はポートフォリオ用のデモサイトです。実際の予約受付・認証・外部送信は行いません。

ROLE & TECHNOLOGY

担当範囲と使用技術

  • AIを活用して制作した自主制作
  • 公開サイト・会員ポータル・招待制エリアの画面と導線を制作
HTMLCSSJavaScriptReactTypeScriptVite

PROCESS

制作の工夫

  • 古民家の写真や落ち着いた色、余白を使い、猫の暮らしと静かな時間を大切にする世界観を表現しました。
  • スマートフォンでも閲覧できるように、画面幅に合わせてレイアウトとナビゲーションを調整しました。
  • 通常会員・招待受取済み・招待承諾済みの状態に応じて、案内や利用できる画面が変わる構成にしました。
スマートフォン幅で表示した猫刻の公開トップ
モバイル表示:小さな画面に合わせた写真・文字・ナビゲーションの配置。
通常会員のホーム。会員情報と来店・宿泊の案内を表示
通常会員ホーム:会員情報と利用メニューをまとめ、招待制エリアの案内は表示しない構成。
招待を受け取った会員に表示される猫刻 宵の案内ダイアログ
招待案内:招待を受け取った状態で案内を表示し、受け取り後の限定エリアへつなぐ。
招待を承諾した会員向けの猫刻 宵トップ
猫刻 宵:招待を承諾した会員向けに、静かな別邸の世界観を伝える画面。

ほかの作品

← この作品の展示へ戻る