概要

家づくりと家具・インテリアをテーマにしたブログサイトで、最高月間PVは50,000を超える。PC/SPの比率ではSPが7割を超えるが回遊率が高いのはPCでの閲覧。SPに特化したデザインに変更した結果、ユーザー数は増えたがPVが大幅に減少した経緯あり。

解決したい課題

• SPに特化したデザインを廃止しPCでも見やすいデザインにしたい。
• 建築・インテリアらしく線を基調としたシンプルなデザインに変更したい。
• 記事を探しやすいように一覧表示を動的に切り替えられるようにしたい。
• 表示速度を改善するためSSGを採用する。

ターゲット

• 家づくりを検討している人
• 家具・インテリアを検討している人
• 家づくりの参考にしたい人

デザイン

• ブログのテーマである北欧家具を前面に出した。保有する椅子を一筆書きのイラストにしてタイル状に配置。線基調のデザインをMVでも表現した。
• 記事検索機能を重視し、カテゴリー・タグ・PVランキング・新着・全文検索といったわかりやすい切り口で記事を探せるようにした。
• デザイン面ではキーカラーのオレンジのみを使用し、記事のメインビジュアルが目立つようにデザイン。
• 操作できる部位が直感的にわかる方に、ボタン・アイコンのデザイン・ホバーアクションを統一。

構成

• 高速表示を実現するためAstro.jsとWordPress Rest APIを使い静的サイト化。動的な一覧更新や記事検索にはReact.jsを使用。
• 一覧で読み込む記事データはMV/カテゴリー/日付/抜粋/月間PV/年間PVに限定して全記事のデータを読み込み。検索や並び替えはクライアントサイドで行う。
• WordPress管理画面にデプロイボタンを設置し、Webhookを使用してGitアクションズ経由でサーバーにデプロイする。

制作期間

デザイン：2週間 / コーディング：2週間 / CMS実装：4週間