CreavePlusの自社サイトを先日フルリニューアルした。
方針は一つだけ決めていた。見出しを写真やイラストに頼らず、フォントとコードだけで組む。
派手なキービジュアルの代わりに巨大な文字そのものを主役にするという作り方だ。
選んだ書体はImpact。
太くて詰まっていて、画面を殴るような迫力がある。
ところが、これで日本語まわりを組みはじめた瞬間から思ってもみなかった壊れ方を次々にした。全部で5回。
ふつう制作会社はうまくいった完成形しか見せない。
でも私たちはどこでつまずいて、どう直したかまで置いておきたかった。
というわけで、実際に踏んだ5つのバグを動くデモと一緒に並べていく。
文章を読み飛ばしても、触れば何が起きたか分かるようにしてあるので見てね。
行間を詰めたのに、隙間が消えない
まず最初のつまずき。
Impactという書体は、文字の上下に見えない余白を抱えている。だから行間をどれだけ詰めても字と字のあいだに謎のスペースが残ってしまう。
下のデモを触ってみてほしい。
赤い枠が文字の本体、黄色い帯が「余っている余白」だ。
スライダーを動かしても、この帯はしぶとく居座る。実際に測ってみたら、上下に15pxずつ残っていた。
直し方そのものは難しくない。
余った分をマイナスの余白で削ってやればいい。
ただし書体が変われば余白の量も変わるので毎回きちんと測ってから決めている。
日本語の見出しが、変なところで折れる
英語なら単語のすき間で改行される。でも日本語には「ここで切っていい」という区切りがない。
だからブラウザは、平気で言葉の途中でも折ってしまう。
「御社専用の」が「御社専用」で切れて、「の」だけ次の行にぽつんと残る。
読みにくいことこの上ない。
答えは、改行の判断をブラウザに任せないこと。意味のかたまりごとに区切って、読みやすい位置で折れるようにする。
文字数の都合で折れる。画面の幅が変わるたびに、切れる場所も変わってしまう。
言葉の意味のかたまりごとに折る。どんな幅で見ても、読みやすい位置で改行される。
巨大な文字を出したら、iPhoneだけ壊れた
大きな文字をSVGという仕組みで作って引き伸ばした。パソコンでは綺麗に出る。ところがiPhoneのSafariで見た瞬間、輪郭がギザギザに崩れた。
原因は、iPhoneが文字を一度画像に変換してから拡大していたこと。
大きくすればするほど、画像が粗くなる。文字をそのまま巨大化するやり方には、限界があった。
そこで、文字を「図形」に置きかえた。
輪郭をなぞって多角形にしてしまえばどれだけ拡大してもくっきりしたまま保たれる。
いまのトップページで画面を飲みこむ大きな「V」も、この方法で作っている。
黄色い帯が、上の文字に被さった
見出しの下に、アクセントの黄色い帯を敷いた。ところが帯が上の行の文字に重なってしまう。
前後の関係を指定しなおしても直らない。
要素の重なり順というのは見た目以上にややこしい。親と子で別々のルールが働いて、思っていないものが前に出てくる。
ここを一つずつ解きほぐした。
直したはずの色が、全部無視された
あとから書いた指定で色を変えたのにまったく効かない。
CSSには「どの指定が優先されるか」の力関係があってそこで負けていた。
おまけに、環境によっては要素を重ねる指定そのものが効かないことも分かった。
最終的には別のやり方に組みかえて、ようやく落ち着いた。
5つとも作りはじめる前は「ここは簡単だろう」と思っていた場所だった。
Impactで日本語を組むのはたぶん本来の使い方ではない。
それでも、フォントとコードだけで画をつくるという方針は最後まで曲げなかった。
壊れるたびに理由を突きとめて、直し方を一つずつ手元にためていった。
完成したサイトの裏側には、こういう小さな解決の積み重ねがある。
私たちが納品しているのは、その積み重ねのほうだ。