静謐なレイアウトの個人Webサイトが欲しくなったので、AstroとDjotでサイトを構築しました。静的コンテンツをCloudFlareから配信するというシンプルな設計です。
1.版面設計
1.1レイアウト
まず、メインコンテンツとなる記事ページのレイアウトを検討します。文字サイズはブラウザデフォルトをそのまま使うことにしたので、寸法はrem基準になります。この条件では、スマートフォンのような小さな画面では文字をそのまま並べる以外の選択肢はほとんどなくなってしまいますが、デスクトップは画面が広いぶんレイアウトで遊ぶ余地があります。
今回は、左に目次、右に傍注を載せる3カラムレイアウトとしました。多少凝ったCSS処理をしてでも傍注1を採用したのは、注はなるべく参照箇所の近くにおくべきだと考えているためです。ページ数や組版の制約から紙の本では章末・巻末注が採用されることが多いようですが、デジタルメディアでものを書くからにはそうした制限からは自由でありたいものです。
画像は、現時点で枠つきと枠なしの2種類を用意しています。説明的な画像や図の類は枠つき、写真は枠なしとしています。枠なしの画像はスマートフォンではページ幅いっぱいに表示されます。
1.2タイポグラフィ
目次や章番号、日付のように縦に並ぶ数字は等幅数字（tnum）にしたかったため、フォントにはこれに対応しているInterを指定しました。AI時代になってとかく濫用されがちなInterですが、上が平らな3や開いた4を alternative figures (ss01) で指定することで多少なりとも他と異なる雰囲気を出そうとしています。また、しばらくは日本語をメインで書く予定なので、行送りは文字高さの1.8倍としました。
1.3色と罫線
文字サイズをほぼ統一したので、色や罫線のスタイルも禁欲的に絞りました。色は黒と背景の薄いグレーのみとし、罫線や下線類は1px solidのみとしました。リンクの下線はほとんどのケースで常時表示です。目次は黒みをおさえたいので、ここだけは下線をホバー時のみ表示としています。色を使う自由は残しておきたいのでCSSでの画像の黒白化まではしていませんが、今のところこのサイトにあるすべての画像は黒白です。
2.技術要素
2.1Djot
DjotはMarkdownに非常によく似た軽量マークアップ言語です。CommonMarkの曖昧さを排除するとともに、機能と拡張性が追加されています。分かち書きを前提としない構文なので、東アジア言語との相性が良いのも魅力です。ブログテンプレート等ではMarkdownが主流ですが、LLMの普及により自分専用のビルド機構を開発・維持するコストがほぼゼロになったので記事のフォーマットとして採用しました。
Djotは見出しやリンクなどのMarkdown同様の記法に加えてPandocからAttribute記法を引き継いでおり、これによりかゆいところに手が届く柔軟性を獲得しています。たとえば、見出しを ## [1.]{.sec}Headings のように書くことで節番号が <span class="sec">1.</span> のようにフォーマットされ、個別にスタイリングできるようになります。本サイトでは、これを節番号の幅を揃えるのに使っています。
2.2Astro
本サイトでは、Astroを静的サイトジェネレータとして使っています。現時点では記事の検索やタグ機能などは付ける予定もないため、ビルドした静的サイトをそのままCloudFlare Pagesにデプロイする構成としました。ビルド時にはDjotをHTMLに変換するほか、Sharpで画像からExif情報を削除しています。