ウェブサービス ／ ペット可賃貸検索
Animaly
その子と暮らせるかを、
数字で確かめる。
架空の不動産会社を題材にした、ペットと暮らせる賃貸だけを扱う検索サイトです。うちの子の種別・頭数・体重・体高を入れると、物件ごとに「暮らせます」「暮らせません」を判定し、あと何キロ、あと何センチかを示します。問い合わせから内見・申込までを営業担当が追う画面まで一続きにしました。
作品を開く架空の不動産会社を題材にした自主制作です。免許番号を含む表示は架空で、問い合わせと通知は模擬です。
同じ「ペット可」に、
まとめない。
ペット可・ペット相談可・ペット共生型を1つの条件にまとめず、3つの区分として分けて示しました。区分は色と形の印（丸・三角・菱形）でも見分けられ、頭数や体重の制限も物件の詳細まで降りずに一覧で読めます。
トップの入口は「うちの子」です。犬・猫・うさぎ・その他から選んで頭数と体重・体高を入れると、その情報は端末に残り、検索結果と物件の詳細で判定に使われます。上限が「未確認」の項目は、合格とは見なしません。
屋根の稜線と、
ミントの散歩マップ。
ミントの地に森の緑を主色に置き、ヘッダーの上端は切妻屋根の稜線にして、破風の位置にロゴを入れました。見出しは丸みのある書体で、犬や猫の写真は物件の写真とは別の枠で使い、空室の写真にペットを合成することはしていません。
トップは左にコピーと「うちの子」の入力、右に地図を置いた2分割です。おおよその位置しか出さない物件は、実線のピンではなく点線の丸で描き、位置が正確でないことを見た目でも伝えています。
地図と一覧を連動させ、
判定と差を出す。
検索結果は左に物件のカード、右に地図を置き、件数入りのピンはズームに合わせて分かれたりまとまったりします。各カードには頭数・体重・体高の上限を並べ、うちの子を入れていれば、体重と体高のゲージに上限との差が出ます。
物件の詳細は、暮らせるかの判定を最上部に大きく置きます。体重6kg・体高30cmの犬なら「この子と暮らせます」とあと4kg・あと10cm、超える物件なら「1.5kg超え」と赤で示します。会員登録なしで問い合わせでき、営業担当や運営管理者に切り替えると、反響から内見・申込までの一覧を扱えます。メールの送信と外部の物件データ連携は模擬です。
小さな画面では、
入口を縦に積む。
スマートフォンではヘッダーの屋根とロゴを残し、メニューは左上の1つにまとめました。コピー、うちの子の入力、地図の順に縦へ積み、「この条件で探す」の幅いっぱいのボタンを入力欄の直下に置いています。
制作情報
- 種別
- 自主制作・架空サービス
- 制作範囲
- 企画・設計・デザイン・実装
- 使用技術
- TypeScript / Vite
Leaflet / Node.js / SQLite - 対応画面
- PC・タブレット・スマートフォン
