フリーランスでWeb制作をしている矢野です。
今回は、ポートフォリオ作品「おうちで、わんこと。」の制作の裏側で、コードの話というより「デザインとコピーの矛盾に気づいて、ビジネスモデルごと作り直した」という意思決定の話を書きます。
最初は訪問型ペットシッティングのサイトだった
「おうちで、わんこと。」は、もともと訪問型のペットシッティングサービスという設定で作っていました。
Aboutのコピーも「慣れないペットホテルではなく、いつも過ごしているご自宅で」という、あえて施設に預けない安心感を打ち出す内容にしていました。
完成デザイン画像を見て気づいた矛盾
サイトを大幅リニューアルすることになり、先にデザインイメージを作ってから実装に入ることにしました。
ところが、できあがったデザイン画像を見ると、ロゴが「おうちで、わんこと。ペットホテル」になっていて、CTAボタンも「宿泊予約」、料金表記も「1泊あたり」になっていました。
つまりデザインは完全に施設型のペットホテルを前提に作られていて、既存のコピーが打ち出していた「訪問型」の世界観と真正面から矛盾していたのです。
見た目だけ合わせるか、世界観ごと作り直すか
ここで選択肢は2つありました。
1つは、デザインの見た目だけをそのまま実装して、コピーは訪問型のまま残すという方法です。
もう1つは、デザインが前提としている「施設型ペットホテル」という世界観に、ビジネスモデルそのものを合わせて作り直す方法です。
見た目だけ合わせると、「宿泊予約」ボタンがあるのに本文では「ホテルではありません」と言っている、支離滅裂なサイトになってしまいます。
ポートフォリオとして見せるものである以上、中途半端な矛盾を抱えたままにするより、コンセプトを統一したほうが説得力があると判断し、完全にピボットすることにしました。
header・footer・フロントページ・CSS・JSを全面リビルドした
ピボットを決めてからは、About・料金・FAQ・サービス構成まで、すべて施設型ペットホテルの世界観で書き直しました。
サービスは、ペットホテル・日帰りステイ・お散歩代行・シャンプー・見守りサービスの5本立てに整理しています。
<div class="service-item">
<span class="service-icon"><?php wanko_to_icon( 'hotel' ); ?></span>
<p class="service-name"><?php esc_html_e( 'ペットホテル', 'wanko-to' ); ?></p>
<p class="service-sub"><?php esc_html_e( 'お泊まり', 'wanko-to' ); ?></p>
</div>
<div class="service-item">
<span class="service-icon"><?php wanko_to_icon( 'sun' ); ?></span>
<p class="service-name"><?php esc_html_e( '日帰りステイ', 'wanko-to' ); ?></p>
<p class="service-sub"><?php esc_html_e( '一時預かり', 'wanko-to' ); ?></p>
</div>
<div class="service-item">
<span class="service-icon"><?php wanko_to_icon( 'leash' ); ?></span>
<p class="service-name"><?php esc_html_e( 'お散歩代行', 'wanko-to' ); ?></p>
<p class="service-sub"><?php esc_html_e( 'お散歩サービス', 'wanko-to' ); ?></p>
</div>
<div class="service-item">
<span class="service-icon"><?php wanko_to_icon( 'shampoo' ); ?></span>
<p class="service-name"><?php esc_html_e( 'シャンプー', 'wanko-to' ); ?></p>
<p class="service-sub"><?php esc_html_e( 'トリミング', 'wanko-to' ); ?></p>
</div>
<div class="service-item">
<span class="service-icon"><?php wanko_to_icon( 'camera' ); ?></span>
<p class="service-name"><?php esc_html_e( '見守りサービス', 'wanko-to' ); ?></p>
<p class="service-sub"><?php esc_html_e( '安心レポート', 'wanko-to' ); ?></p>
</div>見た目のCSSだけでなく、`header.php`・`footer.php`・`front-page.php`・`functions.php`・JSまで、テーマファイルをほぼ全面的に作り直す規模のリビルドになりました。
一部のコピーはあえて残した
ただし、すべてを作り替えたわけではありません。
BEFORE（訪問型時代のAboutコピー）
慣れないペットホテルではなく、いつも過ごしているご自宅でAFTER
「おうちで、わんこと。」は、清潔で落ち着いた施設で、いつものおうちにいるような安心感を大切にしたペットホテルです。「いつものおうちにいるような安心感」という核となるブランドの感覚は、施設型に変わっても大切にしたい部分だったので、コピーの中にあえて残しました。
ビジネスモデルは変わっても、ブランドが大事にしている感覚まで丸ごと捨てる必要はない、という判断です。
まとめ
今回は、デザイン画像と既存コピーの矛盾に気づいたことをきっかけに、ポートフォリオサイトのビジネスモデルそのものをピボットした話を書きました。
見た目のデザインだけを整えても、コピーとの整合性が取れていなければ、かえって説得力を失ってしまうという学びがありました。
デザインが「本来あるべき世界観」を先に示してくれたことで、事業コンセプトそのものを見直す良いきっかけになったと感じています。