百年をゆうに超えて続く、街の小売店のウェブサイトを作り直すことになった。元のサイトは、書いてある事実そのものは正確だったが、体裁がひと昔前のままで、携帯電話で開くと文字が小さく、横に滑らせないと端まで読めなかった。作り直しの相談としては、よくある形だ。ただ一つだけ、普通と違う条件があった。写真が、一枚もない。店の外観も、棚に並ぶ商品も、店主の顔も、使える画像が手元にない。撮影の段取りをつけるのは先の話で、それを待っていると何ヶ月も動かない。写真が届いてから作りはじめるか、写真がないまま作りきるか。私は後者を選んだ。
写真の代わりに、色と書体と余白で語る
画像がないぶん、質感は全部、書式の側で作るしかない。まず配色を三色に絞った。深い藍、金を帯びた茶、そして生成りの地。この三色だけで、老舗らしい落ち着きは出せると踏んだ。見出しには明朝体を当て、文字と文字のあいだを広くとった。字間を空けるのは、余白そのものを装飾として使う手だ。文字が少ないほど、空いた場所が効いてくる。背景には、ごく薄い斜めの縞を重ね、そこにぼかした大きな円を二つ置いた。目を凝らさないと分からない程度の濃さにしてある。近くで見れば単色だが、画面全体としては、のっぺりしない。写真のない画面が寒々しく見える原因はたいてい、面が均一すぎることにある。だから、気づかれない程度のむらを作った。
屋号の一文字を、印にする
店の顔になるものが何もないので、屋号の頭の一文字を、丸く抜いた印として使うことにした。藍で塗りつぶした円の中に、明朝の一文字を置く。これを画面の左上に据えると、それだけで「どこの店か」が立つ。商材ごとの区切りにも同じ手を使った。四つの取扱いのそれぞれに、丸い印と、その商売を表す漢字を一文字だけ置いた。写真を並べたときと同じ役目を、文字一つで果たさせている。もう一つ、特集の帯の背後には、屋号そのものを画面の高さいっぱいの大きさで、地の色にほとんど溶けるくらい薄く敷いた。遠目には模様に見えるが、これも文字だ。画像を一枚も読み込まずに、画面の密度だけが上がる。
明るい帯と暗い帯を、交互に敷く
写真のない画面が退屈になるもう一つの理由は、上から下まで同じ明るさで続くことだ。長い一枚を最後まで滑らせてもらうには、途中で景色が変わる必要がある。そこで、区画ごとに地の明るさを交互に入れ替えた。いちばん上の看板の区画は藍で暗く。その下のお知らせは、生成りをわずかに沈めた色で。取扱いの紹介は明るい生成りで。店の歩みを語る帯は、また藍に落として白い文字で。最後の店舗情報だけは真っ白にして、上端に金茶の細い線を一本引いた。指で滑らせていくと、明るい、暗い、明るい、と規則的に切り替わる。切り替わること自体が目印になり、暗い帯のところで一度、目が休まる。写真で作るはずだった緩急を、地の色の反転で代用した。
写真が入る場所を、先に空けておく
ここが一番気をつけたところだった。写真がない前提で設計すると、写真が届いた時に置き場所がなくて、作り直しになる。それでは意味がない。だから、将来ここに店の写真が入るという場所を、正方形の枠として先に確保した。今はその枠の中を、縦書きにした屋号と、淡いぼかしで埋めてある。写真が来たら、枠はそのままに、中身だけを差し替えればいい。まわりの配置も、文字の回り込みも、一切動かない。同じ考え方で、昔ある著名な選手が来店したという店の語り草についても、話題の枠だけを作って置いた。写真は待つが、場所は今のうちに用意しておく。
作りながら思ったのは、写真がないという制約は、実のところ設計を締めるということだ。写真は強い。一枚あるだけで画面がもってしまうから、配色も余白も曖昧なまま先に進める。それが無いと、色を何色使うか、余白をどれだけ取るか、書体をどこで切り替えるか、全部をこちらで決めきるしかない。決めきった画面は、あとから写真が入っても崩れない。写真を急いで集めなかったことが、結果としていちばん良い判断になった。