概要

WordPRessブログのオリジナルテーマ化。愛犬「リタ」の成長や飼い主としての学びや成長を記録するブログ。近隣のお出かけ情報をも発信する。

解決したい課題

• 読者のほとんどがスマートフォンによる閲覧のため、スマートフォンでも見やすいデザインを実装したい。
• MVに動きのあるコンテンツを実装したい。
• Instagramのフィードを表示しSNSと連携した運用にしたい。

ターゲット

• 大型犬を飼っている夫婦
• これから飼いたいと考えている夫婦
• 経済的・時間的余裕がある40代以上

デザイン

元気でおてんばなイメージを表現するため、メインビジュアルのアニメーションは画面からはみ出すまで拡大。
人懐っこい性格から年齢を問わずたくさんの人から愛されるイメージを表現。
スマートフォンの縦長をベースに、PCではメニューを右側に追従させるデザイン。
カテゴリーはクリッカブルマップで直感的に選択できるようにした。

構成

MVのコマ送りアニメーションはJSでスクロールに連動するように実装。他のアニメーションはJS（IntersectionObserver）で実装。（GSAPも可）。
クリッカブルマップはSVGにaタグを埋め込み実装。記事一覧はタブ切り替えとし、クリッカブルマップの選択と連動して表示一覧を切り替える。
下層ページはWordPressでは標準的なテンプレートを使用。

制作期間

デザイン：1週間 / イラスト制作（外部）：2週間 / コーディング：1週間 / CMS実装：1週間
※イラストは「Bam（https://vnozomi.myportfolio.com/）」さんにお願いしました。