パネルの縁が重く見えるとき、まずその暗さが輪郭なのか、接触を示す影なのか、表面全体の明度なのかを分けて見る。一緒に調整すると、影を弱めたつもりで形まで分かりにくくなることがある。
私は輪郭を定めてから距離と素材を考える。同じ ring の幅から始め、奥行き、表面、透け方へと進み、比較したい関係だけを変えていく。
この記事は元の文章を再編し、内容を加えたものだ。数値は各試料の条件を示し、あらゆる画面に共通する設定ではない。シリーズの背景とツールは 総論。
輪郭と奥行き
同じ輪郭を細くする
パネルの始まりはひと目で分かり、縁は硬い枠に見えないようにしたい。この試作ではぼかしのない外側の影で ring を描き、奥行きには別の影を使う。ringの幅と不透明度は独立して調整でき、レイアウトの領域を取らずに明快な外形を残せる。
まず幅だけを変え、細くなった輪郭の重みを見る。最初の図はspreadを1 pxから0.5 pxへ減らし、暗色、不透明度12%、下地、寸法は固定した。奥行きの影も加えない。ここでの hairline は同じringを細くする意味で、別の線を足してはいない。
細くしてから、明瞭さを決める
細くした輪郭が見分けにくければ、次に不透明度を調整する。2枚目は0.5 pxに固定し、12%と18%だけを比べる。形、塗り、影は同じだ。右は同じ幅のまま、輪郭が明瞭になる。
この実色表面は、引き続き 0.5 px、不透明度12%の中性的な暗色ring を出発点とする。18%は補い方を見るための試作だ。大きなパネル、白い選択面、ガラスは背景が異なるため、それぞれの境界の強さを判断する。幅を半分にしても、不透明度に一定の倍率を掛けるとは限らない。
0.5 pxも、どこに使うかで結果が変わる。border-widthはデバイスピクセルに合わせられる一方、box-shadowの小数spreadはピクセルの部分的な被覆として描かれることがあり、同じ描画方法として扱えない。この試作のWebKit 1×検査では、0.25 pxのringは直線部分に識別できる縁を描かず、0.5 pxも左右の重みが揃わない場合があった。細くしたあとも、原寸、ピクセル密度、拡大率を合わせて見る必要がある。
輪郭に沿って明暗を配分する
輪郭の重みは、形に沿って変えることもできる。前のringは一周が同じ濃さだった。ここでは 縁のコントラスト（edge contrast） を輪郭に沿って配分し、一部は後ろへ退かせ、別の部分は明確に収める。この変化は細い縁の中に留め、中央の面は静かなままにしたい。
幅は両方とも0.5 px。左は一周を不透明度12%にし、右は6%から18%の間で配分する。表面の塗り、寸法、背後の図形は同じ。明るい試作は暗い輪郭を使い、左上を淡く、右下を少し濃くして、直線も角も連続して変える。
ここでは マスク合成（mask compositing） で中央を抜き、外側の細い環だけを残して、その範囲にグラデーションを描く。ringが担った外形の確定を引き継ぎ、明暗の配分をグラデーションに任せる。背後の斜めの灰色帯は同じように透けており、縁の処理に合わせてカード全体を暗くしてはいない。
暗い試作では明るい輪郭に変え、明暗の配分も反転させる。左上を少し明るく、右下へ向かって薄くして、同じ光の方向を示す。下地と一緒に見て、形を伝える分だけ残し、一周に同じ重さの明線を重ねないようにしている。
固定された内容面なら、均一で淡いringでも外形は安定する。方向性のある変化は、材質の手がかりが必要な一部の浮いた面に向く。すべてのカードで同じ角を強調すると、縁が内容より目立ってしまう。
輪郭で形を、柔らかい影で距離を示す
ringで外形が定まれば、奥行きの影（depth shadow） は少し後ろへ下がれる。この試作では別に2層を加える。近い影は1 pxずらし、2 pxぼかし、spread −1 pxで狭める。遠い影は3 pxずらし、8 pxぼかし、spread −3 pxで範囲を抑える。不透明度はそれぞれ4%と2%だ。
近い影は接点を伝え、遠い影は暗さを柔らかく下地へ戻す。この 減衰（falloff） はringと一緒に見る。下縁に濃い線が積もるなら、近い影の重みや範囲を調整する。周囲全体が灰色に曇るなら、遠い影が広がりすぎていないかを確かめる。表面は落ち着いて見え、その縁の外はすぐにすっきり戻るのが好みだ。
実色の面には、内縁の光（inner light） を標準では付けない。白に近いパネルはすでに明るく、少し暗い溝に白光を重ねると硬く光る縁になりやすい。まず輪郭、下地、影で層を作り、明るい縁は材質を説明する役割がある局所に残す。
暗い面は、まず明度で前に出す
暗い配色では、上の表面を少し明るくするところから始める。図の下地は#171717、カードは#242424。そこに0.5 px、不透明度12%の白ringを加え、黒い奥行きの影は下側に独立して置く。カードの存在は表面の差で伝え、細線が輪郭を補う。
表面と素材
近い白にも、役割を分ける
表面の階層（surface hierarchy） は明度で分けるところから作れる。この明るい試作はキャンバスが#F7F7F7、ほぼ無彩色の外枠が#F1F1F2、内容面が#FCFCFCで、白は一部の操作面に残している。色味はごく弱く、見える面積と一緒に差を判断する。細く露出した灰色と大きな灰色の背景では、同じ色でも重みが違う。
文字には明確な主従を残す。名前、数字、現在の選択肢は濃い色で安定させ、説明は一段下げる。面は静かであってほしいが、情報まで探しにくくしたくない。
グラデーションをゆっくり平面へ戻す
表面に少し明暗が欲しいときは、グラデーションがどう始まり、どう下地に戻るかを見る。緩急のあるグラデーション（eased gradient） が調整するのは、空間内での変化の速度だ。平面の近くではゆっくり、中ほどでは速くして、始点と終点を気づきにくくする。画面そのものは静止している。
この対照は同じ中性色、最大不透明度16%、パネルの20%から80%までの変化範囲を使う。左は一定速度でゼロまで薄くなり、右は緩急のある分布を使う。どちらも色ストップは33個で、不透明度の積分も同じ。差は明暗の配分にあり、総量まで減らしてはいない。
図の線形グラデーションは平面に着くと変化速度が突然ゼロになる。緩急のある分布はその近くで徐々に遅くなる。暗い対照も同じ関係を使い、微かな明るさを濃い灰色へゆっくり戻す。
ここでは中間の色ストップで滑らかな関数を近似しており、実際のCSSは隣接するストップ間を線形補間する。16%は差を観察しやすくするための試作値だ。白く抑えた画面に戻すなら、面積に合わせて重みを下げ、小さなマスクの減衰や材質の移り変わりに留めたい。この比較は減衰の接点を説明するもので、色ストップ数をあらゆるバンディングの解決策とはしていない。
ガラスに具体的な置き場所を与える
少量のガラス感は浮いたツールに残す。不透明度72%の白に近い塗り、10 pxの 背景ぼかし（backdrop blur）、明瞭な前景の文字とアイコンだ。ツールバーが容器の下縁をまたぐことで、下の明暗が透ける。主なデータ行を避けた位置に置き、材質にも実際にまたぐ境界を持たせた。
ガラスの輪郭は0.5 px、不透明度6%の中性的な暗色ringで収め、内側には柔らかい微光だけを残す。下の3層の淡影が接点から24 pxぼかしの外周へつながり、浮遊感を外へ広げる。このringは実色部品より淡い。透明な面はすでに背景の明暗を借りるため、さらに濃い枠を加える必要はない。
実際にまたぐ背景で確かめたい。真っ白な下地では輪郭しか残らないこともあり、下が複雑すぎれば文字を邪魔する。この試作は透けとぼかしだけを示し、本当の屈折を再現してはいない。
実際の画面では、輪郭を見分けられるか、影が距離を示しているか、材質が内容を妨げていないかの順に見る。調整の対象がはっきりすれば、細くする理由も定まる。半ピクセルや不透明度の値は、背景ごとに見直す出発点である。