読むだけのリファレンスでは、足りなかった

公開: 2026年09月05日制作ノート技術・デザイン

Webサイトを作っていると、同じところで手が止まります。この塊はボタンにするかリンクにするか、画像と説明はどのタグで組むか、横並びは flex か grid か。答えは知っているはずなのに、そのたびに検索し直していました。

制作の途中で引けるように、学んだことを自分の引き出しとして貯めていました。それをまとめたのが始まりです。考え方の出どころは、以前書いた美しさは設計できるにあります。

最初は、読むためのリファレンスだった

最初に作ったのは、読むためのリファレンスでした。開いて、確認して、実装に戻る。調べる場所にはなりました。

一度、厚く書いたことがあります。通して読む分には足りていても、制作の途中では引けませんでした。手が止まっている人が欲しいのは説明ではなく、「いま何をすればいいか」です。

だから、入口を「困り事」に変えました。文字が背景に沈んで読めない人に必要なのは、色の理論ではありません。明度差を広げること、彩度や色相をいじっても比率は上がらないこと、本文は4.5:1という基準。それをそのまま貼れる数行と一緒に置いて、説明はその先に送りました。

色はあそこで、Webフォントはここで、段組みはまた別のところで。それぞれに長所がありました。ただ、渡り歩いているうちに、いま作っているサイトの基準を忘れます。持ち帰った値を自分の土台に合わせて直す作業が、毎回ありました。

一箇所にあれば便利だな、と思いました。自分でも作ってみよう、と思ったのはそこからです。

つまみを動かしてプレビューを見て、コピーして実装する。その仕組みを載せるときに、いちばん気をつけたのはここでした。

見本を見本用に書き直すと、貼った瞬間に見本と違うものが出ます。そのずれが一度でも出れば、資料はもう信用されません。だから見本は、コピーするコードそのものを流し込んで表示しています。

同じ理由で、試せるように見えるだけの道具は捨てました。押すと標語を出すだけの生成ボタンは、動いているように見えても、持って帰れるものがありません。残したのは、つまみで値が変わり、その値がそのまま貼れるものだけです。

公開する前に、資料の中の数値を、資料の中の道具で検算しました。いくつか間違っていました。白地で7:1と書いていた灰色が、測ると届いていない。4.5:1を教えている資料の、図の中の文字が4.5:1を満たしていない。

恥ずかしいことですが、書いておきます。基準を教える資料ほど、自分の基準を自分に当てないと、静かに嘘をつきます。いまは、数値の根拠が資料の中にあり、同じ資料の道具でその場で測れる形にしています。

いま公開しているのが Webデザイン制作支援リファレンスです。困り事から引く逆引き、図、貼るコードそのものが見本になっているパターン、出発点のCSS、つまみのある素材。制作の途中で開いて、試して、持って帰れるようにしてあります。

完成はしていません。自分用に作ったので、偏りや癖も残っています。案件で引っかかったことを、そのつど足していきます。

一箇所で、判断から実装まで終わらせたかった。自分でも実装してみたかった。どうせ作るなら、一般公開することにしました。

リファレンスの良し悪しは、通して読めるかではなく、手が止まった場面から引けるかで決まる。作ってみて、そう思っています。