【完全自作】6年越しにサイトを完全フルリニューアルしました【Nagi Rhythm】

こんにちは。Nagiです。

当サイト(Nagi Rhythm)は気づけば2,000記事を超える記事が積み上がっていました。本日はタイトル通り、2000記事を超えたこともありますし、過去記事を振り返るのが大変ということもありサイトを完全フルリニューアル（完全手作り） したことをご報告します。

「綺麗になった！」「おしゃれ！」という報告はよくありますが、その裏側は泥臭いトラブルの連続でした。専門的な話になると脱WordPressをするために最新のWEB技術であるAstroを使おうとしたのですが結局ダメになりました。

今回は「なぜAstroを諦めたのか」という技術的な話に加え、「なぜここまで要素を削ぎ落としたのか」というUIデザインのこだわりについても、記録として残します。

CONTENTS

リニューアルの理由は「ダサすぎた」から

結論から言うと、「前のサイトがシンプルにダサすぎた」というのが1番ずっと心残りでした。

「服を10着程度にする」と宣言してるくらいのミニマリストが、継ぎ足しだらけの肥大化したWordPressテーマを使っているというのは自分の美学に反する感じだったのでずっと嫌気を刺していました。

サイト自体も広告まみれでしたし、なによりもスピードもクソほど遅かったです。

ちなみにリニューアルしたい気持ちはずっと10%程度だったのですが、いざリニューアルしようとなったのは実はここ10日くらいです。実は10日くらいでゼロから全てを作り直しました。

当初は、静的サイト生成（SSG）で爆速表示を実現できる Astro への移行を進めていました。

しかし、「2,000記事ある」という規模感が壁になりました。ビルドも完了して公開直前でCloudflareへのデプロイ時に20分までしか無理とのことだったのでなくなく諦めることに。

どうしようかなぁと嘆いているときに「WordPressで死ぬほど軽量化したらどれくらいできるかやってみよう」ということで結局、一周回ってWordPressに戻ってきました。まぁ使い慣れてるし。。。

Xserverの推奨環境であるPHP 8.3系で動く、余計な機能を削ぎ落としたフルスクラッチの自作テーマはかなり自信作。function.phpなど設計から全部一からコーディングしました。

今回のリニューアルで最も時間をかけたのが、このUI（ユーザーインターフェース）設計です。目指したのは、海外のミニマルな雑誌のような「余白」と「タイポグラフィ」だけの世界観です。

英数字のフォントには、力強く、かつ縦長でスタイリッシュな 「Oswald」 を採用しました。私の好きなブランドであるJULIUSや、モードなファッション写真に負けない「強さ」が欲しかったからです。

日本語フォントとのバランスを1px単位で調整し、文字だけで画になるデザインを目指しました。プロフィール画像は私が所持している砂糖薬さんのNFTにしました。

徹底的にこだわったのがスマホでの体験です。これまでのブログには「人気記事」や「カテゴリー」が並ぶサイドバーがありましたが、スマホで記事を読む時、それらは邪魔なノイズでしかありません。

「読者は記事を読みに来ているのであって、サイト内を迷路のように彷徨いたいわけではない」そう割り切り、スマホ表示ではサイドバーを全撤廃しました。結果、記事への没入感が格段に向上したと自負しています。

前後のボタン一つにも結構拘ってCSS GridとFlexboxを駆使して設計しました。指で押しやすいサイズ感（44px以上）を確保しつつ、主張しすぎないスタイリッシュさもある細いボーダーラインで仕上げました。

デザインだけでなく、中身もかなり断捨離しました。

既存の有料テーマでは標準搭載されているものばかりですが、ミニマリストである私からすると当サイトであるNagi Rhythmには不要な機能を徹底的に排除しました。

具体的に削ったのは以下の3点です。

jQueryの完全排除
- 現代のWeb標準において、私のサイト規模でjQueryが必要な場面はほぼありません。すべてVanilla JS（素のJavaScript）で書き直しました。
ブロックエディタ（Gutenberg）用CSSの削除
- 私はMarkdownライクに書きたい派なので、WordPressが勝手に読み込む大量のブロック用CSS（wp-block-library）を dequeue_style で無効化しました。
絵文字スクリプト・Embed機能の無効化
- 勝手に読み込まれる wp-emoji-release.min.js や oEmbed 関連も削除。