ブログ記事ページを「ターミナル／ラボ意匠」に作り替えた設計
今回やったこと
ZashStudioの記事ページを、一般的なブログ本文の見た目から、ターミナルとラボノートを思わせる意匠へ変更した。対象は記事本文の内容ではなく、記事を読む画面の構造である。記事の場所を示すプロンプト風の行、ツリー形式の目次、コードブロックの操作部、見出しの連番、読了進捗表示を組み合わせた。
この変更は一度にすべてを作ったものではない。まず記事ページに読みやすさのための基礎部品を追加し、その後にターミナル／ラボの表現を重ねた。実装記録として、段階ごとの変更履歴を参照できる。
先に読みやすさの基礎をそろえた
最初の変更では、記事ページのレイアウトを読み物として成立させる部品をまとめた。記事本文の最大幅、段落間隔、見出しの余白、リンク、リスト、引用、コードブロック、表の表示を pro-content というスタイル層に集約した。
記事ページ側では、本文のレンダリング結果から見出しを取得し、H2が2つ以上ある場合だけ目次を表示するようにした。見出しが少ない短い記事まで目次で囲まないための条件である。日付に加えて本文の文字数からおおよその読了時間を表示し、タグ、前後の記事、同じカテゴリを優先した関連記事も表示する。
実装の判断を表にすると、次のようになる。
| 部品 | 実装したこと | 目的 |
|---|---|---|
| 本文スタイル | 余白、見出し、リンク、表、コードの共通化 | 記事ごとの差を減らす |
| 目次 | H2が2本以上のときだけ生成 | 長い記事の移動を助ける |
| 読了時間 | 本文の文字数を基準に分単位で表示 | 読み始める前の目安を出す |
| 関連記事 | 同じカテゴリを優先して最大3件 | 次に読む記事を提示する |
この段階では、見た目を派手にすることより、情報の配置を決めることを優先した。先に基礎の構造を作っておくと、後から意匠を追加しても、目次や関連記事のロジックとCSSの調整を混ぜずに済む。
ターミナルの比喩を画面の部品に落とした
次の変更では、記事ページの冒頭に zash@studio:~/journal $ cat {slug}.md というプロンプト風の表示を追加した。これは記事を読むためのコマンドを実行するという意味ではなく、記事ページを「制作記録を開く場所」として見せるための視覚的な入口である。カーソル部分はCSSアニメーションで点滅させた。
目次の見出しは通常の番号付きリストから、$ tree ./sections とツリー記号を使う表示へ変えた。記事のセクション構造を、ファイルやディレクトリの一覧を見るように表現している。ターミナル風の表現は、本文の文章を置き換えるものではない。本文は従来どおりMarkdownの見出しを使い、表示側だけで表情を加えている。
H2にはCSSカウンターで連番を付けた。記事本文に番号を書き込まなくても、見出しの順番を画面に出せる方式である。関連記事の見出しは記事本文の見出し番号に含めないため、セレクターで除外している。このように、意匠上の連番と記事の構造を分離した。
コードブロックには、ウィンドウ上部の3色の丸、言語表示領域、コピー用ボタンを追加した。ボタンはブラウザのClipboard APIでコードをコピーし、成功時は一時的に ✓ copied と表示する。コピーに失敗した場合は failed と表示するため、操作結果を無言で済ませない。コード本文は横方向にスクロールできるようにし、狭い画面でページ全体が横に広がらないようにした。
読了進捗とレスポンシブ対応
ページ上端には読了進捗バーを固定表示した。スクロール可能な全体の高さから表示領域の高さを引き、現在のスクロール位置との比率を幅へ反映する。記事の長さに応じて「どこまで読んだか」を相対値で示すため、記事ごとに別の閾値を持たせていない。
画面幅が768px以下の場合は、本文の左右余白を狭め、前後記事のナビゲーションを縦並びにする。次の記事の右寄せも解除し、モバイル画面では同じ読み方向で表示する。デスクトップ向けの見た目をそのまま縮小するのではなく、横幅を必要とする要素を縦へ組み替える設計にした。
変更してわかったこと
意匠を先に決めると、画面に置く部品が増えやすい。今回も、目次、関連リンク、進捗バー、コピー操作をそれぞれ追加すると、記事ページは単なる本文表示からインタラクティブな機能を持つページへ変わった。そのため、表示ロジックと装飾を同じ判断として扱わないことが重要だった。
実装を分けると、判断基準も分けられる。見出しが2本未満なら目次を出さない、関連記事は最大3件に制限する、H2の連番から特定の見出しを除く、といった条件はUIの印象ではなくコードで確認できる。ターミナル風の色や丸の表現は後から調整できるが、情報の出し方は先に境界を決めておく方が保守しやすい。
今回の変更では、ブログの内容を変えずに、制作ログを読む体験だけを変えた。見た目のテーマを実装へ落とすときは、比喩をそのまま増やすのではなく、目次やコピーのような読者の操作に結び付く部品へ分解すると、装飾で終わらない設計になる。
更新履歴
- 2026-08-11: 初稿作成。実装変更の履歴をもとに構成。
訂正履歴
（訂正なし）