先日、WeberNoteのデザインをまるっとリニューアルしました。やったことはWordPressのテーマを変えただけ……のはずだったのですが、ふたを開けてみればあれもこれもと手直しが発生して、思っていた何倍も時間を取られてしまいました。
長く運営していると、自分のサイトのデザインがだんだん野暮ったく見えてくるんですよね。「そろそろ新しくしたいな」という気持ちがじわじわ膨らんで、今回ついに手をつけた、というのが正直なところです。Web制作を25年やってきた人間でも、自分のサイトとなると客観的に見るのが意外と難しい。
この記事は、運営者である私がWeberNote自身のデザインを刷新して、なぜ変えたのか、何をやってよかったのか、そして公開してから見えてきた課題まで、リアルな体験としてつづったものです。リニューアルの「正しいやり方」を体系立てて解説する記事ではなく、あくまで一人の運営者が手を動かして感じたことの記録だと思って読んでもらえたらうれしいです。
とくに今回こだわったのは「読みやすさ」。デザインのカッコよさと、文章の読みやすさは、ときに両立しないことがあります。そのせめぎ合いの中で何を優先したのか、そして優先したからこそ生まれた新しい悩みについて、包み隠さず書いていきます。これからテーマ変更を考えている人にとって、「ああ、こういうところでつまずくのか」という生々しい参考になればと思います。
ちなみに以前のテーマも、サイト名の「ノート」にちなんだ日記帳風のデザインで、私はかなり気に入っていました。気に入っていたのに、なぜ手放したのか。まずはそこから話を始めさせてください。
気に入っていたデザインを、なぜ変えたのか
リニューアルにあたって、私の頭の中でずっとキーワードになっていたのが「視認性」でした。要するに、文章をストレスなく読んでもらえるかどうかです。
以前のテーマは、罫線の入ったノート風のデザインで、サイトの雰囲気にぴったり合っていました。見た目はおしゃれだし愛着もあった。ただ、長く使っているうちに、ひとつ気になることが出てきたんです。画面の中に要素が詰まりすぎていて、なんだか少しごちゃごちゃして見える。読みづらいとまでは言わないけれど、目が休まらない感じがありました。
WeberNoteは、わりと長めの文章を読んでもらうことが多いブログです。だからこそ、見た目の華やかさ以上に「最後まで疲れずに読めるか」が大事だと、運営しながら少しずつ実感していきました。文字の大きさ、行と行のすき間、余白の取り方。こういう地味な部分が、読み心地をじわじわ左右するんですよね。
記事を1本だけ読んでもらうなら、デザインの細かい読みやすさはそこまで気にしなくてもいいのかもしれません。でも、何度も足を運んでもらいたいサイトなら話は別です。私自身も読む側に回ったとき、シンプルで余白のあるサイトのほうが気持ちよく読み進められる。だったら自分のサイトもそうしよう、と素直に思いました。
とはいえ、シンプルなデザインには落とし穴もあります。すっきりさせればさせるほど、どこにでもありそうな「無難なサイト」に近づいてしまう。個性と読みやすさは、しばしば逆を向くんです。このバランスの取り方が本当に難しくて、今回いちばん頭を悩ませたところでもありました。
そんなことを考えていたある日、海外のWordPressテーマを紹介しているサイトで、ひと目で「これだ」と思えるテーマに出会いました。白を基調にした余白たっぷりのデザインで、それでいてどこか温度がある。これなら読みやすさと雰囲気を両立できそうだと感じて、リニューアルに踏み切ることになったわけです。
関連記事：ホームページリニューアルで失敗しないコツ。自己満足のデザインにしない方法
新テーマで「やってよかった」と思えたこと
新しいテーマは、白背景に黒文字というごくスタンダードな配色です。奇をてらったところは何もありません。でも、これが正解だったと今は思っています。
まず単純に、文章が読みやすくなりました。余白がしっかり取られているおかげで一行一行が呼吸していて、長い記事でも途中で目が疲れにくい。自分で過去記事を読み返したときに「あ、前より頭に入ってくるな」と感じられたのは、地味ですがうれしい変化でした。
もうひとつよかったのは、スマホで見たときの収まりです。今やサイトを訪れる人の多くがスマートフォンからアクセスしてきます。新しいテーマは画面サイズに合わせてレイアウトが自然に整うレスポンシブ対応がしっかりしていて、スマホでも文字がつぶれず、ボタンも押しやすい。パソコンで見たときの体裁ばかり気にしていた頃の自分に、「見られているのはスマホだぞ」と教えてやりたい気分です。
そして、テーマを変えたことで、自分のサイトを一度ぜんぶ見直すきっかけになったのも大きな収穫でした。長く運営していると、古い記事のレイアウト崩れや、もう使っていない設定が知らないうちにたまっていくものです。リニューアル作業のついでにそうした「お掃除」ができたのは、結果的にすごく意味のある時間でした。表示が崩れていた昔の記事を一本ずつ直していく作業は地味に骨が折れましたが、おかげでサイト全体の見た目に統一感が出たと思います。テーマ変更って、デザインを変える以上に「サイトと向き合い直す作業」なんだなと実感しています。
もちろん、いいことばかりではありませんでした。むしろ公開してから、新しい悩みのタネが顔を出してきたんです。
公開して気づいた、ページの「重さ」という課題
リニューアル後、いちばん気になっているのがページの重さ、つまり表示速度です。
新しいテーマ自体は画像をあまり使わないシンプルな作りなのですが、見た目を支えるためにJavaScriptなどのスクリプトをそれなりに読み込んでいます。その結果、ページ全体で読み込むファイルのサイズが以前より大きくなってしまいました。体感でも、表示が一拍もたつくようになった気がしています。
読みやすさを優先してテーマを選んだはずなのに、別のところで使い勝手を落としてしまった。これはちょっと皮肉な話です。というのも、表示の速さもまた立派な「使いやすさ」の一部だからです。
実際、ページの表示速度はユーザー体験を測るうえで無視できない要素として知られています。Googleがサイトの体験を評価する指標「Core Web Vitals」でも、メインの大きな要素が表示されるまでの時間（LCP）が重視されていて、この時間が長くなるほど、読者は記事の中身にたどり着く前に離脱しやすくなると言われています。表示が2.5秒から3.5秒に遅くなるだけで離脱が大きく増える、という調査結果もあるそうです。せっかく読みやすいデザインにしても、表示される前に閉じられてしまっては元も子もありません。
見た目の読みやすさと、表示の速さ。この二つはどちらも「使いやすさ」なのに、片方を立てるともう片方が引っ込む、という綱引きの関係にあるんだと痛感しました。ここをどう折り合いつけていくかが、今のWeberNoteの最大の宿題です。
解決の方向性としては、使っていないスクリプトを減らしたり、画像の表示を後回しにする読み込みの工夫をしたりと、できることはいくつかあります。ただ、あれこれいじって表示を崩してしまっては本末転倒なので、少しずつテストしながら直していくつもりです。レイアウトについても同じで、一気に完成形を目指すより、運営しながら気になった箇所をこまめに手直ししていく方針でいます。
参考までに、表示速度とユーザー体験の関係については以下のページがわかりやすくまとまっていました。
コアウェブバイタル（Core Web Vitals）とは？LCP・INP・CLSの3指標と改善方法
Core Web Vitals（コアウェブバイタル）とSEOとページ表示速度の解説
関連記事：WordPress高速化の鍵！header.phpとLCP改善完全ガイド
まとめ：少しずつ育てていくサイトでありたい
今回のリニューアルで私が学んだのは、デザインの変更は「完成させる作業」ではなく「育て直すスタート地点」だということでした。読みやすさを取りにいったら表示の重さという別の課題が見えてきて、結局、サイト作りに「ここで終わり」はないんだなと実感しています。
正直、テーマを変えるだけならボタンひとつのはずでした。それがなぜこんなに大ごとになったかというと、変えたあとに「じゃあここも気になる」「ついでにあそこも」と、自分のサイトと真剣に向き合う時間が増えたからです。手間はかかりましたが、その時間こそが運営者として一番の収穫だったように思います。
これからテーマ変更を考えている人がいたら、ひとつだけ言えるのは、見た目を新しくして終わりではなく、公開してからが本番だということ。表示速度やスマホでの見え方は、実際に動かしてみないと気づけない部分が多いです。頭の中でいくら完璧に設計したつもりでも、公開して初めて見えてくる粗が必ず出てきます。だから完璧を目指して身構えるより、まず変えてみて、走りながら直していくくらいの気持ちのほうが、たぶんうまくいきます。私自身、まさにそうやって今もちまちま手を入れている最中です。
ちょっとだけ新しくなったWeberNote。これからも、読みやすさと心地よさを少しずつ磨きながら続けていきます。たまにのぞきに来てもらえたら、運営者としてこれ以上うれしいことはありません。これからもどうぞよろしくお願いします。
