一般社団法人 日本ペット防災協会様
一般社団法人 日本ペット防災協会様の公式サイトにて、HTML / CSS / WordPressコーディングを担当しました。
一般社団法人 日本ペット防災協会様の公式サイトにて、HTML / CSS / WordPressコーディングを担当しました。
「人とペットが共に安心して暮らせる社会の実現」という協会の想いが伝わるよう、やさしく親しみやすいデザインの印象を忠実に再現しながら、PC・スマートフォンの両環境で快適に閲覧できるレスポンシブ実装を行っています。
イラストを大きく活かしたファーストビューや、協会の活動内容・お知らせ・コラム・メディア掲載情報など、情報量の多いコンテンツをわかりやすく整理。
訪問者が協会の取り組みを自然に理解できるよう、読みやすさ・操作性・更新性を意識したコーディングを行いました。

| Project | 一般社団法人 日本ペット防災協会/ サイト制作 |
|---|---|
| Creative Director | STAND : 上田 崇史(https://standgraph.com/) |
| Coding | FUTSU |
| Skill | HTML・CSS・WordPress |
| Link | https://animo-japan.org/ |
制作のこだわり(POINT)
01. やさしく親しみやすい世界観を忠実に再現
ペット防災という社会性の高いテーマを、堅くなりすぎず親しみやすく伝えられるよう、デザインの世界観を損なわないコーディングを意識しました。
柔らかな配色、イラストの見せ方、余白の取り方、文字サイズのバランスなどを細かく調整し、サイト全体から安心感や温かみが伝わるよう実装しています。
特にファーストビューでは、協会のコンセプトを象徴するイラストが印象的に見えるよう、PC・スマートフォンそれぞれで表示バランスを丁寧に調整しました。
02. 多様なコンテンツを見やすく整理するレスポンシブ設計
本サイトでは、お知らせ、協会案内、活動内容、コラム、全国のパウステーション、アニモバ、メディア掲載情報など、協会の取り組みを伝える多くの情報が掲載されています。
情報量が多い中でも、訪問者が迷わず目的のコンテンツにたどり着けるよう、見出し・カードレイアウト・リンク導線・余白の設計を意識してHTML / CSSを構築しました。
スマートフォン表示では、縦に長く続くコンテンツでも読み進めやすくなるよう、画像・テキスト・ボタンの間隔や表示順を調整し、快適に閲覧できるレイアウトにしています。
03. WordPressでの更新運用を考慮した構築
お知らせやコラム、メディア掲載情報など、公開後も継続的に更新されるコンテンツを想定し、管理しやすい構成を意識して実装しました。
管理者が情報を追加・更新しやすいよう、投稿コンテンツの見え方や一覧表示の整え方にも配慮し、運用面での負担を抑えられるサイト構築を目指しています。
見た目の再現だけでなく、公開後の使いやすさまで考慮したコーディングを行いました。
04. 公益性の高い情報をわかりやすく届けるUI調整
ペット防災に関する情報は、飼い主の方、自治体・企業関係者、支援活動に関心のある方など、幅広いユーザーが閲覧することを想定しています。
そのため、装飾性だけでなく、読みやすさ・視認性・クリックしやすさを重視し、ボタンやリンク、見出しの見え方を細部まで調整しました。
協会の活動内容や社会的な意義が伝わりやすくなるよう、情報の優先順位を保ちながら、安心して読み進められる実装を心がけています。

