WORKS — N°03

One Heart
Shelter Dog Site

WEB Design & Code Pair Work

保護犬と里親を繋ぐマッチングサイト「ONE HEART」。
ペアワークでデザインとコーディングを一貫して担当しました。

View Live Site
ONE HEART 保護犬マッチングサイトのPCデザイン
Desktop — Scroll to explore
ONE HEART 保護犬マッチングサイトのモバイルデザイン
Mobile

— 01

Overview概要

Role
Design & Code / Direction
Year
2025
Tools
Figma / VS Code
Team
Pair Work
Hours
Design 10h / Code 15h
Category
Matching Site

— 02

The Brief案件の要件

Target

動物保護やボランティアに関心のある層。共感をきっかけに、寄付・物資支援・里親希望などの行動に繋がりやすい人たち。

Goal

保護犬を迎える行動を、もっと身近で温かいものに感じてもらうこと。「悲しさ」よりも「出会いの喜び」を伝え、自然と"迎えたい"と思えるポジティブな体験設計に。

— 03

Design Approachデザイン方針

保護犬マッチングサイトのキービジュアル

他の里親サイトはかしこまった印象が多かったので、ONE HEARTでは悲壮感に寄らず、やさしくて前向き、「迎えたくなる気持ち」を大切にしました。

プロフィールはオレンジを基調にして目に留まりやすくデザイン。性格や得意なことなどの魅力を前向きな言葉でまとめ、親しみのあるPOPさを出しています。

応援は「寄付・物資・ボランティア」の3つに整理し、興味を持った瞬間にそのまま一歩を踏み出せる設計に。イラストやアイコンで視覚的にもやさしく案内しました。

— 04

Highlightsこだわりポイント

  • 01

    ディレクション / ヒアリング

    ペアの相手がクライアント役を担当。ヒアリングからデザイン設計まで一貫してディレクションしました。

  • 02

    サイト全体のデザイン

    温かみのある配色と親しみやすいタイポグラフィで全体設計。悲壮感ではなく、出会いの喜びを伝えるトーンに統一。

  • 03

    犬の写真を活かした構成

    トップとフッターにスライドショーを導入。プロフィール部分でも犬の写真を多く掲載できる構成にしました。

  • 04

    コーディング

    デザインの意図を損なわず実装。余白・アニメーション・レスポンシブを丁寧に調整しました。

— 05

Result成果

「保護だけでなく、寄付・物資・ボランティアといった支援にもつなげたい」というクライアントの要望を汲み取り、3つの入口を明確に設けた体験設計を実現しました。温かさと行動喚起の両立を目指したサイトです。

Live Site ONE HEART