Rage v2へのリニューアルに関する備忘録。

v1時点での課題

まずは旧デザインがどんな見た目だったかというところから。

課題はいくつかありまして、ざっくりまとめると以下のような感じです。

まず「導線が少なすぎた」という点。先のコンテンツ整理時に全記事表示ページを削除したことで、過去記事にたどり着くまでの経路が乏しくなってしまいました。というログ的サイトなのに致命的な話。

次に「アーカイブページの挙動」。ページ番号をクリックするたびにページ遷移が入るのが、体験としてなかなかに煩わしかったんですよね。閲覧している側もそう感じていたんじゃないかと思います。

更に「テーブル内でのテキスト折り返し」。数値とかが変なところで折れてしまって、視線が動きまくって気持ち悪いなとずっと思ってました。

そして「トンマナの曖昧さ」。アラートが白かったり黒かったりと、統一感がなかったんですよね。（気づいてはいましたが後回しにし続けた結果です・・・）

あとはシンプルにデザインにあｋ。 気づけば同じデザインで5年経過してたっていう。

今回の改善点

で。不満点が分かっていれば改善点も自ずと決まってくるわけで。今回やったことをまとめます。

導線については、取り扱っているコンテンツごとに裾広がりになるような設計にしました。入り口から関連するものへ自然につながっていくようなイメージです。中の人的には目的の記事まで辿り着きやすくなったと思います。

サイドバーは一定幅以上の場合は固定されるように。いつでもすぐメニューにアクセスできるようになったので、別コンテンツへの移動も楽になりました。

記事カードの表示数についてはAjaxで増やせるように実装しました。ページ遷移せずにその場でどんどん読み込めるのはやっぱり快適です。

アーカイブページの問題についてもPjaxでの滑らかなページ遷移を実装しました。なんということでしょう。ページ番号を押すたびにフルリロードが走っていた頃とは雲泥の差です。

テーブルの折り返し問題は自動伸縮に変えることで極力折り返しが起きないよう改善しました。右端のラインが揃わなくなってしまいましたが・・・「実際のノートだってそんなもんでしょ」ということで無理矢理納得します。

アラートはアイコンだけで差異を出すシンプルな表現に統一しました。白黒問題もこれで解決しつつスッキリです。

個人的にやりたかったコト

改善とは別に、v2では「現時点で自分ができること・やりたいこと」を設計・実装ともにフルで突っ込みました。
でもcss設計は甘かったと思う。終盤はてんやわんやで

「やりたいこと」というのは「AIを活用した共同開発」で、実装したい内容を伝えて、サンプル的に出してもらったコードをレビューしつつ改善を進めていくスタイルです。予想通り進捗は爆速でした。Gemini最高。

Rageは「私的攻略メモ」というサブタイトルのサイトなんですが、それなのに全然「メモ感」がなかったんですよね。なので今回はメモやノートをモチーフにしたデザインでリニューアルしました。サブタイトルとサイトの雰囲気が、ようやく一致したように思います。

そして（一定幅以上では）そのノートからコンテンツが飛び出すようなイメージのアニメーションをつけてみました。っていうかこれをやりたいがためだけにリニューアルしたまであります。

もう一つは四季を表現するエフェクトの実装。ゲーム系のコンテンツ以外はサイドバーが寂しい感じになるので、季節感が出るような演出を入れてみました。

ちょっと重いのは自覚してます。

── そう。自己満足です。

今後について

ひとまず公開できる程度までは作り込めたのでリリースしましたが、まだ実装しきれていない案もあるのでぼちぼち整えていく予定です。

やるやる詐欺なアプリっぽいものも色々やりたいし、まだまだ遊べそうです。

後記

ということで、つらつらと今回のリニューアルについて書き出してみました。しばらくこれで走りつつ、また数年後とかのv3に向けてスキルを磨きたいと思います。

Webサイトの話ではありませんが、休止理由だったリアルの諸事情も落ち着いたのでFFXIVへの復帰も考えてます。

各記事のタイトルに記載している通り、パッチ7.2の頃の情報のままなのに色んな方が見てくれてるようで、なんとなく申し訳なく思いつつ、そろそろ更新したいですよね。

それではいずれまた。