ひtoりgoと

自作 CMS で動くこの“ひ to り go と”¹。このたびリニューアルしました！

これまで頑なに採用を拒んでいたサイドバーがちゃっかり追加されているのはどういうこと？ 詳しく解説していこう。

アイコンが並んでいたけど

前回リニューアル（→ 2015.3.14）からもう 7 年にもなる。一番の特長だったページのトップに並ぶ複数のアイコンは記事の各カテゴリを表したもので、カラフルだからページ全体の印象もにぎやか。我ながらかわいくて気に入っていた。

細かい人が見るとわかると思うけど、一見同じようなページに見えても微妙にそれぞれアニメーションする箇所が違ったり、カテゴリにマウスポインタを乗せたときの名前表示 Y 位置がアイコンに合わせて変えてあったり、カテゴリの下に出てくるメニューの背景がカテゴリごとに用意してあったり...細かいこだわりを詰め込んで構成されている。

そんなわけで既存 CMS を使っては実現できない「当サイトの内容に最適化されたデザイン」になったのだが、あまりにも最適化した結果...気軽に変更できなくなってしまった。CSS が複雑すぎてレスポンシブデザインへの対応には苦労したし（→ 2017.12.3）、気軽にカテゴリを増やせないため Windows PC の記事ですら“Mac ハードウェア”のカテゴリに突っ込むように（2021.8.14）。

これは造り付け家具に似た問題かもしれない。作った当初は理想しか存在しない最高の環境が実現できるものの、生活スタイルが変化した瞬間なにもできなくなってしまう。当サイトの内容に最適化するためにエンジンを自作していたのにそこで内容を制限されるようになってしまっては本末転倒ではないだろうか。

複数カテゴリ

まずカテゴリの種類を倍以上に増やした。こうして見ると意外に当サイトも書く内容が広がっているのを感じる。もはや Windows の話を気兼ねなくできる。最近はせっかく DIY 作品が増えてきたことだし、それも独立したカテゴリ化だ。

それに加えて、今回から各記事は複数のカテゴリを持てるようになった！ これまでは「ゲームの話をしてるし分解の話もしている」みたいな状況で困っていたけど、普通に両方つければ解決できるのだ。時間をかけて過去記事のカテゴリも指定しなおしたよ。

数を増やしたとはいえできるだけ細かくしないような方針。それを組み合わせればいろんなものが表現できる。例えば Mac、iPad、iPhone みたいなものは「Apple 製ハードウェア」カテゴリを作らず「Apple」と「ハードウェア」を指定してある。

すべての記事が並ぶ

カテゴリを整理したのもそうだけど、どうやったら過去の記事の価値が下がらないようにできるかをいつも考えている。せっかくこのサイトに興味を持ってくれた読者をうまくほかの記事に誘導したい。

冒頭で触れたとおり今回の CMS ではついにサイドバーを導入している。ここに並ぶのは...すべての記事だ。読み込み時間とかブラウザの表示負荷を抑えるためにちょっとずつ表示することも考えたのだが、“ひ to り go と”は TechnoEdge やギズモードみたいに毎日いろんな記者の記事が投稿されるサイトではなく、一人の筆の遅い人間がちまちまと記事を書きひと月に一回投稿されるかどうかのペースでしか増えない。彼らと同じ考えでデザインしていては意味がないのである。

新デザインでは上から新しい記事が時系列で並び、表示中の記事が常にハイライトされているので前後の記事への移動も直感的にできるはず。

カテゴリでフィルタ

もちろんそんな全記事一覧をそのままスクロールするのはしんどい。そこでサイドバー最下部にあるカテゴリの一覧だ。ご想像通りここをクリックすると、上にある記事一覧がフィルタされそのカテゴリの記事のみが表示されるようになる。

重要なのはここから...これ複数選択できるよ！ 記事が複数カテゴリを持てるようになった意味が活きてくる｡「ソフトウェア＆人物｣｢ゲーム＆分解」など、細かい絞り込みが簡単だ。地味に画期的ではないだろうか。

キーボード操作と非同期な読み込み

ハードウェアキーボードはブラインドタッチできる人にとってはなくてはならないものだ。スクリーン上の対象から視線を逸らさずに思ったことを入力できるようになるとコンピュータとの一体感が増す²。

ハードウェアキーボードってそういうテキスト入力の快適さに注目しがちだけど、「常に存在する」ことがまた偉大で、むしろちょっとした UI 操作での恩恵が大きいのだ。キーボードショートカットはもちろんのこと、単に矢印キーだけを見ても読書中のページ送り、ビデオ視聴中の数十秒ジャンプなど、大した手間ではないけど何度も繰り返す動作をスクリーンに手を伸ばさずに楽な姿勢のままポチポチポチポチと実行できる。大きいスクリーンになるほどありがたい存在。

そのためデスクトップ App ではどのビューにフォーカスがあるのかを明示する工夫を盛り込むことが多い。フォーカスされているときだけ選択部分の彩度を高くしたり、フォーカスリングで囲んだり。

今回のリニューアルではそんなデスクトップ App 的思想で作り、そういう環境でも快適にブラウズできるよう意識した。ほとんどの操作を矢印キーで実行できるのだ。左右矢印を押せば前述のサイドバーと記事表示部のあいだでフォーカスを行き来できるし、記事リストで上下矢印を押すことで次々と記事の内容を閲覧できる。小さいスクリーンでサイドバーが隠れていたらそれも表示してくれるよ。

ただし Web サイトの場合はそういう操作系の副作用も無視できない。上下矢印キーを押すたびに記事全体のテキストやイメージを読み込んでいたらサーバとクライアントの両者ともに通信量や計算量がつらいことになる。そいういうときは読み込み開始を遅延（Debounce）させるものだけど、ここで一工夫。選択直後にはまず 1 行目だけ取得して内容を確認できるようにしたよ！ そのままじっとしていると全文を取得してくれる。これは数年前に作った記事エディタ（→ 2017.12.3）で取り入れて好評だった³ものを採用したのだ。

さらに、リスト項目をドラッグすると URL 文字列になったり、command キーとともにクリックすると新規タブで開くみたいな「Web ページとしてのお約束」もないがしろにしないよう心掛けた。こういうのを上書きしているサイトって多少なりともストレスを感じるよね。

触ってみてね

ここまで説明すれば今回のリニューアルに少しは価値を感じてもらえるはず。記念にビデオ撮影したし、実際にも触って試してほしい：