容器と部品をつなぐ幾何

外枠にパネルを収めたり、トラックに選択片を入れたりすると、精度は数ピクセルの隙間に現れる。角を回っても間隔が続くか、文字には独立した余白があるかを分けて測る。

まず容器の距離と曲線を整え、次に分割コントロール、継ぎ目、進捗トラックへと進む。考え方は共通でも、値はそれぞれの内容に合わせる。

この記事は元の文章を再編し、内容を加えたものだ。数値は各試料の条件を示し、あらゆる画面に共通する設定ではない。シリーズの背景とツールは総論。

包み込みと角

包み込む構造には2種類の 内側余白（padding） がある。外枠からパネルまでの狭い隙間と、パネルから内容までの余白だ。ここではそれぞれ8 pxと24 px。前者が継ぎ目の近さを決め、後者が見出しや情報行にゆとりを与える。

外側ringはレイアウトの領域を取らない。パネルは8 pxの内側余白に置かれたまま、0.5 pxのringが隙間へ外向きに描かれるため、直線部分に見える外枠は約7.5 pxになる。内容の24 pxはパネル表面の境界から測り、実体のあるborderをもう一度差し引くことはない。

等距離に内包したこの例の 入れ子の角丸（nested radii） はR24、内側余白8 px、R16だ。両表面の円弧は同心となり、隙間が角を回っても連続する。この引き算は、図の等距離で実体のborderがない幾何に限られ、すべての容器に当てはめる固定式ではない。

パネルが0.5 pxのringを外向きに描くと、描画外縁の半径はR16.5になる。表面自体はR16のままで、内容も元の表面境界から始まる。レイアウトの距離と描画の範囲では、どちらの縁を見ているかを分ける必要がある。

半径は角が占める大きさを決めるが、接点にはもうひとつ見ることがある。直線が曲線に入るとき、曲がり具合はどう変わるか。円弧は直線と 接線連続（tangent continuity） にでき、方向はつながる。ただし直線の曲率はゼロで、円弧に入ると一定の曲率に切り替わる。

曲率連続（curvature continuity） は、その変化も扱う。右の3次ベジェ曲線は接点で曲率をゼロにし、直線の曲がり具合につなげている。両側で外接寸法、塗り、線幅、32 pxの角領域を固定し、角の曲線だけを見る。

この32 pxは両側で意味が違う。左はR32の円弧、右は曲がり始める位置を示すだけで、単一の円心も固定半径もない。右はこの試作の簡略化したベジェモデルだ。入れ子の容器で使うなら内外の曲線間の隙間を確かめ直し、円の半径を差し引く関係をそのまま使わないようにしたい。

私は輪郭全体に戻して見る。右は連続して接続する一方、曲がりが集中するため、円弧より四角く見える。適切かどうかは、比率、余白、隣接する部品との組み合わせで判断する。ここでは接点を分解するために使い、最後のワークスペースは元の円弧の角丸を残した。

セグメントコントロール（segmented control） の溝は連続させ、白い選択面が独自のringと短い影で現在位置を示す。この試作の溝はごく淡い内影だけにし、白い面は表面の記事で説明した輪郭と2層の奥行きを使い、内縁の光は足していない。

溝はR14、内側余白4 px、選択面はR10。大きいパネルと同じく、4 pxはレイアウトの距離だ。0.5 pxのringが外へ描かれると、直線部分に見える灰色は約3.5 pxになる。部品を溝に収めた感じは好きだが、高く浮かせる必要はない。

共通の継ぎ目（shared seam） は日付と矢印をひとつの外形で包み、中に1 pxの区切り線を1本だけ置く。独立した2つの輪郭が接点で重なって濃くなるのを避ける。線は本体の上下から8 px退き、端を少し丸めた。操作領域を分ければよく、外枠まで届かせる必要はない。

浅い溝（recessed track） は同じ関係を小さくする。高さ6 px、R3の外溝に1 pxの内側余白を設け、高さ4 px、R2の塗りを入れる。75%は内側余白を引いた使用可能幅から計算し、端点の周りにも下地を残す。

ここでは溝の内側上縁だけに短い暗影を残し、塗りの上縁にごく弱い材質の明るさを留めた。数ピクセルの部品に限った役割であり、すべての実色パネルの白い内光には広げない。

容器と部品のなじみは、距離、曲率、内容の余白がそろって成立する。値を借りる前に見えている隙間を確かめ、文字、操作範囲、異なるサイズへと確認を広げたい。幾何学的な統一のために内容を窮屈にしない。