チラシの版面を整えたい。掲示物を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
