WUZIQI — 五目並べ
美しさ、それ自体が理由
← ブログへ戻る

デザイン・格子線

碁盤の線は、なぜ石より目立ってはいけないのか

碁盤の格子線の役割は、交点を示すことです。線が強すぎると盤面は表のように見え、肝心の石の並びが目に入りにくくなります。

木の表面に引かれた細い線。交点は分かりやすく、木目も生きています。
木の表面に引かれた細い線。交点は分かりやすく、木目も生きています。

盤上にいくつか石があり、斜めの列に沿って空点を数えているとします。格子線が石より目立つと、視線はまず四角いマスの列に引っかかり、それから石同士のつながりを探すことになります。線がはっきり見えるからといって、局面も読みやすくなるとは限りません。

線はどこへ視線を導くか

表の線はセルを区切り、こちらとあちらが別の枠だと示します。碁盤の線は違います。座標系をつくり、視線を交点へ導きます。石を置くのは線が交わる場所で、四角いマスは線に囲まれた余白です。

五目並べでは、交点が225か所ある15路盤がよく使われ、石も交点に置きます。17路盤や19路盤を使うこともあります。路数によって打てる場所の数は変わっても、線の役割は変わりません。場所を見つけやすくするのであって、盤面を四角い容器に分けるためではありません。ウィキペディアの「五目並べ」にも、こうした盤の使い方が載っています。

座標も交点を指します。15路盤では縦の路をAからO、横の路を1から15で表し、中央の星「天元」はH8です。盤上には星が5つあります。詳しくは台湾連珠協会の五目並べ用語集を参照してください。H8と言えば、2本の路が交わる着点のことであり、H列にある四角いマスのことではありません。

四角いマスが目立ちすぎると

横一列に黒石が3つあり、1つ空点を挟んで右側にもう1つある場面を想像してください。同じ路に沿って目を動かし、空点の両側がつながるかを判断する必要があります。ところが、どのマスも濃い線で囲まれていると、視線は空いたマスの輪郭に止まりやすくなります。その一瞬の停滞は、石の伸びる方向を探すたびに繰り返されます。 格子線を太くしても、交点が分かりやすくなるとは限りません。太い線に囲まれた白い部分が独立したマスのように見え、石はその角に置かれた印のようになります。着点は判別できても、石の並びを読む前に、毎回マス目の存在を意識することになります。

五目並べの形は縦・横・斜めに伸びます。石が隣り合っているか、間が空いているか、両端に空点があるかによって、次の一手の判断も変わります。線は方向を示せますが、先に視線を奪ってしまうと、変化しつつある石の形が後景に退きます。盤面を確かめるなら、空の盤だけでなく、空点を含む局面をいくつか並べてみてください。

木の表面に引かれた細い線

実物の碁盤には、画面とは違う見え方があります。日本の碁盤には太刀盛り(たちもり)という技法があります。職人が定規に沿って日本刀の切っ先を木の表面に引き、細い線をつける方法です。黒木碁石店も、この技法が木材の木目や色合いを引き立てると紹介しています。線は木の表面になじみ、木を表のように覆い隠しません。

効いているのは線の細さだけではありません。木目は格子線の間にも続き、色にもわずかな揺らぎがあります。盤面の構造を黒い線だけで表しているわけではないのです。路をたどりながら、石を支える木の表面も見えます。どちらか一方だけが模様として主張することはありません。

画面で刀の跡や木目をそのまま再現することはできませんし、盤の下に木材の写真を敷く必要もありません。参考になるのは役割分担です。線には交点へ導けるだけの存在感を持たせ、盤の地にも少し表情を残します。盤全体の構造を線だけに背負わせなくてよいのです。装飾が石を読む妨げになるなら、控えるべきです。

線は場所を示し、石は局面を示します

単色の画面で起こりやすいこと

ウェブ上の碁盤は、単色の地に等間隔の線を重ねてつくることがよくあります。空の盤は整って見えますが、地に目を留めるような質感がないため、線が画面で最も密集した構造になります。空の盤でも路を見やすくしようとして、線の色をさらに濃くしがちです。

問題は、石を置いてから現れることが少なくありません。本来、黒石と白石は局面で最も目を引く変化です。ところが濃い格子線は石と石の間を通り、細かな黒い断片を盤全体に散らします。1つの石から次の石へ目を移すたびに、その断片が視界に入ります。

ですから、線の色を空の盤だけで決めないでください。あと1手で五目になる直線と、間隔を空けて斜めに並ぶ石を置き、石に沿って一目で路をたどれるか確かめます。未完成の石の形より線が先に目に入るなら、線を少し後景に下げる余地があります。

同じ石の配置を濃い格子線と薄い格子線で比較した図。薄い線でも交点は判別でき、石の並びが際立つ
石の位置をそろえて比べると、線の色によって石の形の読み取り方がどう変わるか分かります。

1ピクセルは実際にどれくらいの幅か

CSSで1pxと指定しても、どの画面でも同じ見え方の線になるとは限りません。デバイスピクセル比DPRが2なら、この幅は物理ピクセル2個分です。DPRが1.25や1.5の画面では、整数個の物理ピクセルには収まりません。線の位置やブラウザーの描画方法によっても、縁の描かれ方は変わります。 そのため、同じスタイルでもスマートフォンでは輪郭がくっきりし、ノートパソコンでは少し幅のある灰色の帯に見えることがあります。アンチエイリアスは隣接するピクセルで縁をなじませるため、特に薄い線はぼやけて見えがちです。かといって色を濃くするだけでは、また石より目立ってしまうかもしれません。幅と明るさは、実際の端末で一緒に確かめてください。

テストでは、縦横の線と斜めにたどる交点が同じように見つけやすいか、表示を拡大・縮小したときに路ごとの濃淡がばらつかないかを見ます。スクリーンショットは並べて比較するのに便利ですが、対象の表示サイズで一局を見てみるのが一番です。ピクセル単位で調整した結果も、最後は目で安定して着点を読めるかどうかで判断します。

最も強いコントラストは石に

盤面には明度の階層が必要です。石を最も際立たせ、次に格子線、星はさらに控えめにします。石は一手ごとに変わる情報なので、地や線からはっきり浮かび上がらなければなりません。格子線はたどれる程度で十分です。星は方位を知る助けになりますが、新たに置かれた石のように目立つ必要はありません。

ただし、格子線をひたすら薄くすればよいわけではありません。画面に顔を近づけないと交点が分からないなら、線を控えめにしすぎています。逆に、離れたところから網目全体が先に見えるなら、線が強すぎるかもしれません。調整するときは、まず石の見た目を決めてから、線と地の差を少しずつ変えていくとよいでしょう。

識別しやすさには、参考にできる明確な基準もあります。W3C WAIによるWCAG 2.1の非テキストのコントラストに関する解説では、必要な図形情報を担う部分と隣接する色との間に、少なくとも3:1のコントラスト比を求めています。これは情報を識別するための要件であり、すべての線を同じ印象に仕上げるための処方箋ではありません。石の見やすさも、格子線を弱めるだけで済ませず、別に確認する必要があります。

調整の順序:まず石のある局面で石がはっきり見えることを確かめ、次に格子線を調整し、最後に星を確認します。変更するたびに、同じ縦横・斜めの並びや、間隔を空けた石の配置に戻って比べてください。空の盤だけで決めないことが大切です。

一局を通して確かめる

序盤は石が少なく、中心やその周辺の交点を頻繁に探します。中盤以降は、すでにある石に沿って伸びる方向を見る機会が増えます。同じ碁盤で、その両方を見やすくする必要があります。序盤に線が十分見えるかだけを確かめていると、中盤で網目が石の形を読む妨げになることを見落としがちです。 確認する順序を決めておくと簡単です。まず次の一手を置けそうな場所を探し、次にまだつながっていない斜めの並びをたどり、最後に盤全体を見渡します。最初の段階でいつも交点を探し当てる必要があるなら、線をもう少し見やすくします。斜めの並びがマス目に遮られて見えるなら、線の存在感を弱めます。決まった線幅を目指すのではなく、実際に起きた問題に合わせて調整してください。

使いやすい碁盤は、空のときには場所を示し、石を置いたあとは視線を石に譲ります。最後に印象に残るべきなのは、格子線の整い方ではありません。石がどうつながり、どこに空点が残っているかです。線が道案内を終えたら、意識は次の一手に戻せます。

着点が見えたら、視線を石の形に戻します

読み終えたら、WUZIQI で一局どうぞ。