matsutomo.dev
商品FDEログイン相談する
← 記事一覧へ戻る
2026年6月22日無料X でシェア

「彩 SAI」をつくった話 ― 1枚のHTMLで動く、自分のためのデザインキャンバス

チラシの版面を整えたい。掲示物を1枚きれいに仕上げたい。SNSのサムネをさっと作りたい。そのたびに重いソフトを立ち上げるのが、どうにも億劫だった。やりたいことは決まっているのに、起動とログインとアップデートの確認で、最初のひと筆まで遠い。

チラシの版面を整えたい。掲示物を1枚きれいに仕上げたい。SNSのサムネをさっと作りたい。そのたびに重いソフトを立ち上げるのが、どうにも億劫だった。やりたいことは決まっているのに、起動とログインとアップデートの確認で、最初のひと筆まで遠い。

だから自分用に、小さなデザインツールをつくった。名前は 彩(SAI)。図形やテキスト、画像を置いて、整列して、PNGやPDFに書き出す——IllustratorやFigmaでやっていることの“ちょうど必要な分だけ”を入れた、ひとつのHTMLファイルだ。

「自分の道具を自分で作る」ということ

既製のソフトは強力だ。けれど多機能ゆえに、自分の小さな作業に対しては、いつもどこか“大きすぎる”。使うのは全体の数パーセントで、残りはメニューの奥に眠っている。

ならば、自分の手の形に合った道具を自分で削り出せばいい。そう思って作り始めた。仕事柄(普段はチラシや現場の掲示物をよく作る)、A判の紙面をmm基準で詰めて、最後はPDFで出す——そのワークフローに過不足なく寄り添うことを、最初のゴールにした。

「1枚のHTML」という縛り

彩 SAI には、自分で決めた縛りがある。フレームワークを使わず、すべてを1つのHTMLファイルに収めること。

ビルドもインストールもいらない。ファイルをダブルクリックすれば、オフラインでも動く。USBに入れて別のPCへ持っていっても、ブラウザさえあれば同じように開く。作ったデータはブラウザの中(localStorage と IndexedDB)に保存されるので、サーバーも要らない。

一見不便なこの縛りは、使ってみると安心感に変わる。壊れにくく、どこでも動き、何年後でも開ける。流行りの仕組みは数年で陳腐化するけれど、素のHTMLとJavaScriptはなかなか裏切らない。自分の道具を、自分の手の届く範囲に置いておける——その感覚が、何より気に入っている。

機能は「必要になった順」に増えた

最初はただのキャンバスだった。図形を描いて、スマートガイドで揃えて、レイヤーで重ね順を変えて、書き出す。それだけ。

そこから、使っていて「足りない」と思うたびに、機能が増えていった。

  • ローカルフォント対応。手元のフォントをそのまま選べて、しかも書き出した画像やSVGにフォント自体を埋め込む。だから別のPCで開いても、フォントが入っていない環境でも、同じ見た目で再現できる。チラシでは書体が命なので、ここは外せなかった。
  • 長体・平体。文字を縦横に伸び縮みさせて、決まった幅にぴたりと収める。紙ものをやる人にはおなじみの、あの微調整だ。ついでにサイズを1ptずつ整える上下ボタンや、Altを押しながら端をドラッグすると“文字は伸ばさずに折り返し幅だけ”変えられる操作も足した。
  • 作品ライブラリ。当初は1作品しか持てなかった。これをサムネイル付きで何枚でも保存・呼び出しできるようにした。1作品ごとに画像もフォントも丸ごと自己完結で保存しているので、別の作品を開いても干渉しない。
  • px連動モード。印刷はmmだけれど、Webサムネはpxで考えたい。そこで、pxのサイズを選ぶと定規も座標もpx表示に切り替わり、PNGが指定ピクセルちょうど(1:1)で書き出されるようにした。OGPやnote(1280×670)、X記事(5:2=1500×600)のサイズもプリセットにしてある。

派手な新機能というより、自分が次に困ったことを、その場で潰していった記録のようなものだ。並べてみると、作業の悩みがそのまま機能の地層になっている。

つまずいた、小さな話

裏側は、地味なつまずきの連続だった。

たとえばテキスト編集。入力欄にフォーカスを当てたいのに、ブラウザの挙動に一瞬奪われてカーソルが入らない。結局、フォーカスを“ひと呼吸ずらして”当てることで、ようやく素直に動くようになった。こういう1行が、使い心地を静かに左右する。

保存まわりも悩んだ。編集のたびに保存すると重いので、入力が落ち着いてから書き込むようにした。一方で「保存した直後なのに“未保存”ランプが点いたまま」という小さなバグも踏んだ。保存処理が、最後にまた“変更あり”の印をつけてしまっていたのだ。順番を入れ替えるだけの修正だけれど、原因にたどり着くまでが長い。バグの9割は、たいていこういう“順番”の話だったりする。

mmとpxの単位系を、ひとつの内部座標で両立させるのも、地味に頭を使った。あれこれ悩んだ末、中身はずっとpxで持ちつつ、表示と入力のときだけ単位を“着せ替える”——そう割り切ったら、すっと通った。X記事のサイズを調べたら「5:2」という珍しい比率が推奨で、割り切れて文字がにじまない数字を探して1500×600に落ち着いた、なんていう寄り道もあった。

それぞれは小さな話だ。でも、こういう小さな引っかかりを一つずつ取り除いていく時間こそが、道具づくりのいちばん面白いところだと思う。

道具は、使いながら育てる

彩 SAI は完成版というより、いまも育っている途中の道具だ。

「自分のこの作業のため」にあつらえた道具には、既製品とは別の心地よさがある。困りごとを自分で直せること、欲しい機能を自分で足せること。完璧でなくても、自分の手に馴染んでいく。その手触りが、つくる時間そのものを楽しくしてくれる。

次は何に困るだろう。そのとき、また1行ずつ、直していく。たぶんこの道具は、これからもそうやって、少しずつ私の作業に似ていく。

—— 江口松友 / Matsutomo Eguchi

この記事をシェアX でシェア

実装を相談したい人へ。30 分の相談から、課題の解き方を一緒に見つけます。

FDE に相談する →
商品FDE有料相談を予約ログイン特定商取引法プライバシー利用規約返金
SYSTEM OPERATIONAL — TOKYO / REMOTE

© matsutomo.dev

「彩 SAI」をつくった話 ― 1枚のHTMLで動く、自分のためのデザインキャンバス — matsutomo.dev | matsutomo.dev