ブログをリニューアルしました。20年ぶんの文章に、新しい入口を。

久しぶりに、このブログを大きくリニューアルしました。

前回のリニューアルについて書いた記事が2020年なので、あれからもう6年。……6年？ そんなに経ちましたか。

今回は見た目だけでなく、文章の読みやすさや記事の探し方、画像の見せ方、表示の軽さまで、ひと通り見直しています。

このブログは2004年から続いているので、気がつけば20年以上ぶんの記事があるんですよね。せっかく残っているなら、新しい記事だけでなく昔の記事も、もう少し読んでもらえる場所にしたい。

ということで、今回やったことと、地味にこだわったところをまとめておきます。

CSSから、自分のブログに合わせて組み直す

今回は、WordPressの「Cocoon」というテーマを土台に、子テーマのCSSやテンプレートに手を入れ、トップページから記事一覧、本文まわりまで、自分のブログに合わせて組み直しました。

CSSで文字の大きさや太さ、行間、余白、画像の収まり方を決め、テンプレート側で新着や人気記事、テーマ別の入口を配置する。見た目と構造の両方を調整しています。

例えば、新着記事と人気記事の並びにはCSS Grid、メニューやカードの中の配置にはFlexboxを使っています。要素をどう並べるか、どこに揃えるかを決める仕組みですね。細かいところですが、こういう積み重ねで、全体の見え方が変わってきます。

白をベースに、文字と画像、その間の余白で組み立てる。青は線やアイコン、リンクまわりのアクセントに使っています。以前から使っているロゴも引き継ぎました。

写真やデザインの仕事もしていますが、ここはそもそも僕が文章を書くブログなので、文章がちゃんと読めることを大事にしたい。かといって、文字がただ並んでいるだけでは少しさみしい。そのへんのバランスを探ったデザインです。

「日々、考え中。」という言葉も、いまの自分にはしっくりきています。考えたことを、そのときの言葉で残しておく。あとで読んで「いや、いまはそうは思わないな」となることも含めて。

独断と偏見、たまに再考。まぁ、そういうブログです。

明朝とゴシックを、役割で使い分ける

文字まわりでこだわったのが、明朝体とゴシック体の使い分けです。

記事タイトルや見出しには明朝体を。本文やメニュー、検索、日付などにはゴシック体を使っています。書体はNoto Serif JPとNoto Sans JPが軸です。

明朝には文章の表情をつくってもらい、本文や操作する部分はすっと読めるように。フォントを変えたら終わりというわけでもなく、太さ、文字の大きさ、行間、横幅もあわせて調整しました。

本文を太くしすぎると、全部の言葉が大事なことを主張しているみたいになるんですよね。ちゃんと強調したいところが強調になるように、普通の文章は普通に読める太さへ。

長い文章を読むときに、こういう地味なところが効いてくると思っています。

トップページは、新着記事から

トップページは、まず新着記事が目に入る構成にしました。

せっかく新しく書いたのに、サイトの説明や大きな飾りを延々とスクロールしないと記事が出てこない、というのも本末転倒なので。何を書いたか、いつ書いたか、どんな話かが、入口でわかるようにしています。

PCでは新着記事の横に、よく読まれている記事を配置。スマホでは縦に並べて、新着を読んだ流れで人気記事にも進めるようにしました。

この切り替えには、画面の幅に応じてCSSの指定を変える「メディアクエリ」を使っています。スマホでは検索欄を広く取り、カテゴリーはアイコンと文字を縦に組む。文字のサイズと一緒に、配置や余白も切り替えています。

増えていった20のカテゴリーを、5つの入口へ

カテゴリーも、今回あらためて整理しました。

長く書いていると、そのとき興味のあったものに合わせて分類が増えていくんですよね。以前は20のカテゴリーがあり、「舞台」「Theatre劇団子」のような活動の分類と、「レビュー」「映画」「観劇」のような記事の種類や題材が混ざっていました。

書く側はそのときの感覚で選べても、初めて来た人には「結局、どこから探せばいいの？」となってしまう。自分の引き出しの場所を知っているのは、自分だけだったりするので。

いまの入口は「日記・考えごと」「舞台活動」「映画・観劇」「IT・ガジェット・ゲーム」「写真・デザイン・Web」の5つです。20のカテゴリーをそのまま横に並べるより、まず大きな棚を選んで、その中を見てもらう形にしました。

作品名や団体名、機材名のように分野をまたぐものは、タグからも探せます。昔の記事を消して棚を空にするのではなく、中身を残したまま、探しやすい入口をつくる。今回の整理はそんなイメージです。

いろんなことを書いているので、興味のある話から入ってもらえれば十分です。ただ、舞台のお知らせや機材のレビューだけでなく、僕がどう考えたかを書いた文章も読んでもらいたいので、「日記・考えごと」は先頭に。テーマ別の紹介でも少し広く扱っています。

スマホでカテゴリーを探すときも迷いにくいように、アイコンには文字を添えました。絵だけで全部伝えるのは、なかなか難しいので。

「一覧」と「写真」で、同じ記事を違う見せ方に

記事一覧には、タイトルと抜粋から読める「一覧」と、画像から選べる「写真」の切り替えもつけました。

ここはJavaScriptで同じ記事群のCSSクラスを切り替える仕組みです。ページを読み込み直したり、記事を取り直したりせず、その場で並び方が変わります。同じブラウザでは前に選んだ表示も記憶するようにしました。

文章を探したい日もあれば、フライヤーや写真を眺めて選びたい日もあるので。そのときの気分で使い分けてもらえればと。

20年以上ぶんの記事に、入口を増やす

ブログって、新しい記事を書けば古い記事が下に流れていきます。当然なんですが、昔の記事が全部「もう用のないもの」になるわけでもないんですよね。

当時使っていた道具の話も、そのとき観た舞台や映画の感想も、あとから読むから面白いことがある。考えごとなんて、むしろ何年も前の文章のほうが、いまの自分に刺さったりもします。

なので今回は、新着以外から読む入口も整えました。

人気記事と、おすすめ記事は別の入口に

人気記事には「直近30日」と「全期間」の切り替えを用意しました。トップでは両方の集計結果を用意しておき、JavaScriptで表示する枠を切り替えるので、ページを移動せずに見比べられます。選択中の期間も、色と下線でわかるようにしています。

最近読まれているものと、長い間読まれているもの。どちらも見られると、ブログの違った面が出て面白いなと。ちなみに「全期間」は、保存されている集計データの範囲です。2004年からのアクセスが全部残っているという意味ではありません。

一方で、よく読まれる記事だけで僕の書いていることが全部伝わるかというと、それも少し違うので、「はじめての方へ」という入口もつくりました。

いま選んでいるのは「AIは納豆を食えるか？」「役者の10回目は、お客様の1回目」「演劇の紙チラシは、なぜまだ死なないのか」の3篇。身近な違和感から考えること、舞台に立つこと、つくって届けること。そのへんの視点が伝わる文章を選んでいます。

「ちょっと、寄り道。」もできます

テーマや年代から探すほかに、昔の記事を紹介する「ちょっと、寄り道。」という枠も用意しました。

欲しい情報を検索して、読んで、終わり。それはそれで便利なんですが、なんとなく開いた記事が意外に面白かった、というのも個人ブログの楽しさだと思うんですよね。

自分でも、昔の記事を開いて「こんなこと書いてたのか」となることがあるので。知らない人に読まれる前に自分がびっくりするという。

同じキーワードの記事を読んだり、記録を古い順にたどったりもできます。気になる話を掘るのもよし、全然違う時代へ飛ぶのもよし。20年以上ぶんの引き出しがあるので、好きなところを開けてみてください。

フライヤーは、切らずに見せたい

画像で特に直したかったのが、舞台のフライヤーや映画のポスターの扱いです。

写真と同じ横長の枠に入れると、縦長のフライヤーは上下が切れてしまいます。顔だけ見えるけど作品名がないとか、せっかくのデザインが途中で切れているとか。自分で宣伝美術をつくっていることもあって、これは気になっていました。

なので、縦長の画像は全体が見えるように。余計なグレーの背景や内側の余白も外し、一覧でもできるだけ大きく見せるようにしました。横長で文字が入っている画像も、文字を切らずに表示します。

CSSでは、画像の縦横比を保ったまま枠に収める「object-fit: contain」を使い、縦長・横長など画像の形に合わせて表示を調整しています。画像の大きさが違っても、本文との並びが上に寄ってちぐはぐにならないように、位置も調整しました。

記事を開いた先では、表裏のあるフライヤーは並べて見せて、必要なら大きな画像を開けるようにしています。

あ、ちなみに、この『Leo of hearT』のフライヤーは、僕がデザインも担当しています。

逆に、画像のない文章にまで無理に大きな「NO IMAGE」を置くのはやめました。文章だけで成立する記事もあるので、そういうものは文字を読んでもらえる見せ方にしています。

表示速度も、かなり変わりました

見た目と一緒に、大きく変わったのが表示速度です。

今回の見直しを始めた頃と比べると、かなり軽くなりました。デザインを組み直す前の初期改善から、画像や読み込み方をひとつずつ見直しています。

まずは、最初の改善前後を数字で

10月17日の記録に残っている、Googleの「PageSpeed Insights」でのトップページの比較がこちらです。パフォーマンスの点数は100点満点。LCPは、画面の中の大きな画像や文字など、主要な要素が表示されるまでの時間です。

2026年10月17日の改善記録より。トップページを同じPageSpeed Insightsの模擬環境で各1回ずつ測定した結果です。実ユーザー全体の平均や、完成後の現行サイトを測り直した値ではありません。当時の改善後レポート。

モバイルでは23.9秒から4.2秒へ。数字で見ても、最初の状態からはずいぶん変わりました。毎回この秒数になるわけではありませんが、最初に手を入れた効果は、ここにはっきり出ています。

大きかったのが画像です。小さなサムネイルを表示するために、1〜2MBもある元画像を読み込んでいたところがありました。見えているのは小さいのに、裏では大きな荷物を運んでいたわけですね。まず9点の画像を表示に合うサイズのWebPにし、重複していた広告の読み込みなども整理しました。

そこから今回のデザインに合わせて、画像、CSSやJavaScript、日本語フォントの読み込みをさらに調整しています。

画像には「srcset」と「sizes」を指定し、表示幅や画面の表示密度に合うサイズをブラウザが選べるようにしました。フライヤーは全体を見せつつ、一覧や本文では適切なサイズを読み込み、しっかり見たいときは大きな画像を開く。その役割を分けています。

明朝のフォントも、よく使う文字をまとめた軽いファイルを用意しました。文字の形や幅は保ち、そこに入っていない文字のための元のフォントも残しています。軽くするために文章の表情を捨てたくはないので。

その後も、公演記事のデータ量を約68％削減

初期改善に続き、10月24日には公演記事などの読み込みをさらに見直しました。こちらは、その追加改修だけの前後比較です。

2026年10月24日、テーマ1.7.4→1.8.2の比較。Lighthouse 12.8.2／Chrome 155、スマホ相当の同じ設定で各3回計測した中央値から3ページを抜粋。リニューアル全体の前後比較や、この記事公開時点の最新測定値ではありません。サーバーや外部通信の変動も含み、実機での体感速度とは区別しています。

公演記事では、読み込むデータを約68％減らせました。ただ、それで表示時間まで68％短くなったわけではありません。検索結果のように、この測定では遅くなったページもあります。

最初の大きな改善があって、その後も画像の多い記事などを個別に軽くしている、という流れです。ゴシック体の初回読み込みなど、まだ改善したい部分もありますが、出発点からどれだけ変わったかは、ちゃんと残しておきたいと思います。

見た目を整えたら読むまでが遅くなった、ではもったいないので。デザインと軽さは、セットで考えていきたいところです。

昔の文章は、そのときの文章として

古い記事を読みやすくするにあたって、過去の公演情報や道具の記事も少しずつ見直しています。

終了した公演は、当時の記録だとわかるように。いまも予約できるように見えてしまう案内は整理する。一方で、昔の記事を全部いまの自分の言葉に書き直してしまうのも、なんか違うなと。

そのとき何を見て、何を考えたかが残っていることに意味があるので。必要な案内は足しつつ、当時の文章は大切にしていきたいと思っています。

プロフィールにすぐ進める入口や、SNSへの案内も整理しました。最近の発信はXが多いですが、流れていく言葉とは別に、あとから読める場所としてこのブログを使っていければと。

書いて、読んで、また考える

今回いちばんやりたかったのは、いま書く文章と、昔書いた文章の両方が、ちゃんと読める場所にすることでした。

デザインをいじっていると、細かいところが延々と気になるんですが……まぁ、その時間で記事を書けよという話でもあります(笑)。でも、自分で気持ちよく使える場所にしておくのは、続けるうえで大事なんですよね。

書く内容はこれまでどおり、舞台や映画のこと、使ってみた道具のこと、日々の出来事や考えごと。気になったものを、自分の目で確かめて、言葉にしておく。

サイトのつくり方や更新の仕組みも今回かなり変えたんですが、その話は長くなるので、また別の記事で。

ひとまず新しくなったブログで、気になる記事をひとつでも見つけてもらえたらうれしいです。昔の記事への寄り道も、ぜひ。