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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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