動物保護施設

First View Screenshot

デスクトップ
PCサイズのスクリーンショット
タブレット
タブレットサイズのスクリーンショット
モバイル
スマホサイズのスクリーンショット

制作概要

業種
動物保護施設
種類
動物関連サービス業(?)
制作範囲
デザイン・コーディング・WP実装
使用技術
HTML/CSS/JS/PHP
制作期間
約1カ月(リニューアル)

実装内容

  • ワイヤーフレーム・デザイン(figma)
  • コーディング(VSCode)
  • PC/タブレット/スマホサイズ対応
  • 軽微なアニメーション
  • WordPressオリジナルテーマ
  • フォーム(Fluent Forms)
  • カスタム投稿(ACF)
  • カスタムフィールド(ACF)
  • 構造化データ(トップページのみ)

公開URL

GitHub

制作意図と実装の方針

・WordPress学習初期に制作したサイトをレイアウトはほぼ変えずに、マークアップやJSコード、サイト構成を修正したものです。
・大事な情報へスムーズに到達できるよう、構成から見直しサイト設計しました。
・里親希望者が知りたい情報(保護犬の紹介、譲渡までの流れ、譲渡の条件)へ迷わずアクセスできる導線にしました。
・ACF(Advanced Custom Fields)を活用し、管理者が専門知識なしでも保護犬情報を入力・更新しやすいように工夫しました。
・継続的な情報発信によって、施設の活動や保護犬たちの状況を伝えられるよう、ブログ機能も追加しました。
・情報をしっかり読んでもらうことを優先し、過度なアニメーションは使用せず、ボタンホバーなど必要最低限に抑えました。
・構造化データ(JSON-LD)は、トップページのみ手動で実装しました。ご予算やご要望(プラグイン使用等)に応じて、下層ページにも実装します。
・掲載画像はO-DANで提供されている素材を使用し、画像容量の大きいものは表示の高速化を考慮してWebP形式へ変換しています。