ブログを新しくしました

しばらく前から、ブログを開くたびに少しだけ気になるところがあった。記事は増えているのに、トップページは数年前のまま。つくったものと書いたものが同じ場所にある理由も、あまり伝わっていなかった。

中央の小さなキャラクターをつくった理由も同じだった。Hollow Knightを遊んだときに感じた、静かではっきりしたシルエットがずっと印象に残っていた。ただし、その姿をなぞりたかったわけではない。このサイトを開いたときだけに見える、小さくても表情のある始まりがほしかった。Grok Imagineで目や耳、余白が異なるいくつもの方向を試し、その中でいちばんシンプルに感じる案を選んだ。最後にQuiverAIのarrow-1.1モデルでSVGに整えた。小さなファビコンから最初の画面のマークまで、同じ形がくっきり残るようにするためだった。

今回は機能を増やすのではなく、サイト全体を見直すことにした。余白、文字の大きさ、ページからページへ移るときの流れを整えた。結果として、少し静かで、長く見ていても疲れにくいサイトになったと思う。

最初の印象をシンプルに

ホームには「何をしている人か」と「どこへ行けばいいか」だけを残した。中央に小さなアイコンを置き、短い紹介文とリンクを続けている。黒と白を基本にして、装飾は控えめにした。

最初は、空いている場所に何かを足したくなった。でもいくつか要素を取り除くと、名前と文章のほうがよく見えるようになった。今はこの余白も画面の一部だと感じている。

読むための場所に

ブログ一覧は、年・タイトル・日付がすぐに分かるように並べ直した。検索は必要な分だけ残し、記事のページではタイトルから本文までの間に少し余裕を持たせた。記事を見つける瞬間より、読み始めてからのリズムを大事にしたかった。

スマートフォンでも同じ雰囲気になるようにした。画面が狭くなったときは、すべてを小さくするのではなく自然に縦へ並べている。長いタイトルも途中で不自然に切れず、日付やリンクが本文を押し出さないようにした。

サイト全体に同じ空気を

ShowcaseとResumeも、ブログとは別のテンプレートに見えないように調整した。ナビゲーション、文字の大きさ、コンテンツの始まる位置を揃えつつ、それぞれのページらしさは内容で表している。

Showcaseは、小さな実験をゆっくり眺められる一覧にした。Resumeはまだ作業中なので、無理に内容を埋めず、今の余白をそのまま残している。

画面が切り替わる瞬間まで

完成した画面を整えたあと、画面が切り替わるまでの短い時間も気になるようになった。ブログ一覧、記事詳細、Showcase、Resumeのローディング表示をそれぞれ作り直した。ページが遅れて開くときに、まったく別の灰色の箱が出てくると、ほんの一瞬でもサイトが二つに分かれて見えてしまうからだ。

記事詳細のスケルトンには、戻る場所、二行のタイトル、日付、見出しと本文のリズムを、実際の記事と同じ順番で置いた。

スマートフォンでは長いタイトルが画面の端近くまで自然に伸びるよう、幅も別に調整している。ブログ一覧は年ごとに四つのまとまりと各三件を先に見せることで、読み込み後にページの高さが急に増える感覚を減らした。ShowcaseとResumeも、タイトルとリストが始まる位置を完成画面に揃えている。

実際の画面に重ねて確かめたスケルトン

見た目で合わせただけでは終わらせなかった。同じ記事の完成画面とローディング画面を同一のビューポートで重ね、タイトル、日付、本文が始まる位置を比べた。下はそのときのデスクトップとモバイルのオーバーレイだ。暗いバーがスケルトンで、その下に実際の記事のリズムが重なっている。

デスクトップ

タブレット・モバイルでも確認した

タブレット

モバイル

調整の過程も残した

記事詳細の余白と戻るリンクを短くしていった過程、そして実際のデザインを戻してから再び比べた画面も残している。一枚だけなら近く見えても、同じ画面を何度も重ねると、どの変更が本来のリズムを取り戻したのかがよく分かる。

残りの調整過程を見る

すべてのローディング状態を一度に見る

一つのページだけで終わらせず、四つのページのローディング状態を画面サイズごとに一枚へまとめた。小さな画面でも見出しとリストの始まる位置が想定どおりかを確かめやすくなった。

タブレット・モバイルのコラージュも見る

読み込み中だからといって、サイトの第一印象が一度消える必要はない。すぐに使える猫のマークは灰色の四角ではなく最初から表示し、スクリーンリーダーにもページがまだ準備中であることを伝える。動きを減らす設定ではパルスも止まる。短い途中の状態まで、このサイトの空気に残っていてほしい。

最後の6ピクセル

最後に、猫のマークが本当にすべてのページで同じ位置から始まっているかを確認した。一見ほとんど同じに見えたけれど、HomeだけがBlog、Resume、Showcaseより6ピクセル下にあった。同じサイズの最初の画面を撮り、半透明で重ねてみた。左が調整前、右が調整後。

修正はHomeの上余白を6ピクセル動かしただけだ。これでマークを使うページはすべて同じ座標から始まる。ほとんどの人は意識して気づかない細部かもしれないけれど、ページを行き来したときの感触には確かに残る。

選択した場所が消えないように

読むときの反応も少し整えた。ダークモードでは問題なかったけれど、ライトモードでは文字を選択してもどこまで選んだのかほとんど分からなかった。明るいテーマには落ち着いたグレーの選択色を入れ、ダークテーマではこれまでのコントラストをそのまま使っている。長い記事から一文をコピーするときに、小さいけれど確かな違いになる。

タブのアイコンもテーマに合わせる

猫のマークは暗い背景では白に近い色へゆっくり切り替わり、ブラウザタブのファビコンも同じマークをテーマに合わせて切り替える。ページの中だけでなく、マウスで文字を選ぶときやタブを並べて見ているときまで、同じ印象が続いてほしかった。

まだ途中だけど

今回の作業で、デザインは新しいものを足すより、何を残すかを決めることに近いと感じた。すべてのページが同じ見た目である必要はないけれど、同じ場所にあるという感覚は共有したい。

まだ調整したいところはある。記事が増えたときの一覧の密度や、実機で見たときのダークモードもこれから確認していく予定だ。それでも今は、最近つくっているものを誰かに見せたいときに、気軽に案内できる状態になったと思う。