このサイトをつくりながら決めた規則

このサイトはデザインからコードまで、ひとりでつくった。つまり規則を破っても、小言を言う人がいない。以下は、つくりながら決めた五つの規則だ — 画面をきれいにする話ではなく、明日の自分がその規則を破れないようにする話。

1. コンテンツとコードを分ける

文章と作品は content/ に、サイトは src/ に住む。スタックを入れ替えても原本は残るということだ。実際に一度入れ替えたが、動いたのはコードだけだった。

2. プロジェクトひとつ ＝ フォルダひとつ

作品ひとつはフォルダひとつ。テキストも画像も同じ中に住む。画像を共用のフォルダに集める方式は楽に見えるが、プロジェクトを消すとき、どの画像が一緒に出ていくべきか誰も分からなくなる。いまはフォルダの中で /media/blog/making-this-site/… と書けば、サイトが URL に変えてくれる。プロジェクトを消すことが、フォルダをひとつ消すことになった。

3. 画面ごとに自分の文をもたせる

同じプロジェクトでも、一覧カードの見出しと詳細ページの見出しは違っていい。最初はひとつの見出しを全画面で共有していたが、一覧に合わせれば詳細が物足りず、詳細に合わせれば一覧があふれた。いまは面ごとに見出しと要約を別に持つ。同じ文を何度も書くかわりに、ひとつの画面を直して別の画面が壊れることがなくなった。

4. 値ではなく規則を直す

余白と文字サイズは画面で決めず、トークンで決める。なぜ重要かを示す出来事があった。About ページの見出しが四行に割れつづけたのだが、原因は見出しの大きさではなく、本文用の可読幅（34rem）を見出しにまでかけていたことだった。その幅を本文だけに残すと、見出しは二行になった。直したのは値ひとつではなく、「この幅は誰のための幅か」という規則だった。

5. 目で見たものを信じない

ブラウザで大丈夫に見えることと、実際に大丈夫であることは違う。だから画面を直すたびに数える。見出しが何行か、カラムが何ピクセルか、スクロールで戻ったときカウンターがまた回るか。テストはその数字を留めておく装置だ。次に自分がうっかり破ったとき、代わりに声を上げてくれる。

ひとりでつくるサイトで最も危ないのは締め切りではなく、一貫性だ。昨日の自分と今日の自分が別の規則で動けば、サイトはひとりがつくったようには見えない。五つの規則は、結局ひとつのことを言っている。

好みは引き継げないが、規則は引き継げる。受け取るのが明日の自分でも同じだ。