【気が付けば2000記事超えは草ｗ】Nagi Rhythmを再リニューアルして過去記事を探しやすくしました
こんにちは。Nagiです。
今年2月にもサイトをリニューアルしたのですが、ミニマルデザインに重きを置き過ぎて新着記事以外の記事がどうしても埋もれてしまうサイト設計のため改修しました。
何を隠そう、当サイトは「2100記事」以上もあり、個人メディア・ブログとしては相当な記事数。私の崇拝する「manablog」のマナブさんと同レベル。
今回は、トップページから過去記事を探す入口を増やし、スマホでの文字や見出し、メニューの表示も見直しました。
何を変えたのかと、なぜまたリニューアルしたのかを備忘録も兼ねて記事にしておきます。
目次
2,000記事を超えたので過去記事を探しやすくしたい
前回のデザインは、シンプルでスタイリッシュな見た目をかなり意識していました。
ただ、あまりにシンプルすぎても新着記事だけ見られて過去記事が一切閲覧されない状況＋埋もれてしまうのであれば意味がありません。
7年続けて気が付いたら公開記事は2,151本へ
これだけ大規模なサイトになると管理も大変です。今回は記事一覧やカテゴリーへの入口を分かりやすくしてアーカイブ記事にも回遊しやすく設計しました。
これまでカテゴリーだけでも、
- ファッション
- 家電などガジェット系
- 美容
- 一人旅
- ランニングや筋トレ
- 映画や小説
- 生活費内訳系
- ミニマリストっぽい雑記
など我ながらコツコツと色々書いてきました。
例えば、同じ道具でも購入直後のレビューと数年使ってからの感想では書くことが変わります。
「CLAUSTRUMのAppleWatchケース」なんてたかがケースなのに本体くらいクソ高い値段で買って大絶賛していたのに、数年経過してから見事に手放している自分もいたりします。
過去の記事にも今の買い物に役立つ話があるので、新着記事以外も見つけてもらいたいと思い、色々と改修してみた次第です。
トップページは「記事を探す→新着記事→特集」の順番に
まず、トップページの入口を次の9テーマにまとめました。
- ミニマリスト
- 服・靴
- 家電・ガジェット
- 美容
- ランニング
- 一人旅
- 仕事・お金
- 映画・読書
- 雑記
それぞれ記事数も表示しています。「服を見たい」「旅行の記事を読みたい」というときは、ここから一覧へ進めます。商品名や地名が分かっている場合は、検索も使えます。
スマホでは、記事を探す入口のすぐ下に新着記事を置きました。いつも読んでくださる方が、最新の記事まで何度もスクロールしなくて済むようにしたかったという思いからこの設計にしました。
すべての記事の一覧では、テーマや公開年、記事タイトルで絞り込めます。「昔読んだ記事をもう一度見たい」というときにも使ってもらえたらと思います。
記事一覧へのリンクデザインもこだわりました
「ミニマリズム」を追求しすぎて、あまりにシンプルにしすぎてリンクまで目立たなくなるのはさすがに困る。
ボタン感をできるだけ出すデザインにして、だいぶクリック（タップ）しやすいように工夫しました。
長く使った道具や一人旅を特集からまとめて読めるようにしました
今回、既存の記事をまとめて読めるように、次の3つの特集を用意しました。
- 長く使った道具：MOFTの傷みと買い替え、Apple WatchやAirPodsを使い続けた感想など
- 服・靴の経年変化：デニム、ライダース、ブーツの変化と修理の記録など
- 一人旅の記録：大阪からの日帰り旅、奄美大島、ヨーロッパ、ケアンズの体験記など
例えばMOFTなら、約4年使ってボロボロになった記事と、その後に別モデルへ買い替えた記事を続けて読めます。使い続けてから分かったことも確認できるようにしました。
一人旅も行き先によって感想が全然違います。満足した旅もあれば寂しさを感じた旅もあるので、そのあたりも含めて読んでもらえたら嬉しいです。
また、関連記事への入口も増やしてみたので、今読んでいる商品の別のレビューや、似たテーマの記事へ進みやすくするためユーザー体験の向上を試みました。
スマホでの文字や目次、商品紹介も調整しました
このブログはスマホからの閲覧が7割ほどなので、記事ページの表示も気になる部分を修正しました。
- 長いタイトルの文字サイズや余白
- 目次の番号と、折り返した文章の位置
- 大見出し・小見出しの見分けやすさ
- 商品紹介の画像とタイトルの間隔
- メニューや記事一覧のリンクの押しやすさ
タイトルが大きすぎたり、商品画像と文字が微妙にかぶったりすると内容を読む前にそっちが気になります。細かいですが、こういう部分も調整しています。
メニューを開いたときの表示にも動き（transition）を付けてみました。スタイリッシュに実装してみたのでよかったらタップしてみてください。
また、記事に「あとで読む」を付けています。気になる記事を保存して、メニューの「保存した記事」から読み返せます。ログインは不要で保存は同じブラウザー内で利用する仕組みですので、ぜひ使ってみてください。
アドセンス広告も大量にカットしました
ブログの収益も増えてほしいです。ただし、どうしても過去のサイトは広告まみれすぎて読みづらいなんてレベルじゃなかった。全画面広告など致命的すぎる。
ということから広告を大量にカットしました。これからはa8やamazonアソシエイトなどレビュー記事からの収益で頑張ろうかなと思います。
今回のリニューアルで回遊率や売り上げが上がったかどうかは相当ギャンブルになりますが、ユーザー目線において少なくとも前回よりか絶対に良くなったと思います。
記事一覧や関連記事がどれくらい使われるか、商品紹介から購入につながるかを、これから確認していきます。とりあえず、自分ではかなり好きなサイトになりました。改修を続けると終わりがないので、一旦この状態で運用してみます。
新しくなったトップページから、気になる記事を探してもらえたら嬉しいです。読みづらいところや使いにくいところがあれば、お問い合わせ・記事の感想から教えてください！
記事の感想や質問はこちらから。
感想・お問い合わせ →