写真の縁は均一ではない。明るい部分は背景に溶け、暗い部分は強い境界になる。アバターを重ねると、画像同士の境界も生まれる。
私は一枚の画像の縁を整えてから、グループの幅、分離、操作の入口を決める。外側のリングと内側の輪郭には別々の役割がある。
この記事は元の文章を再編し、内容を加えたものだ。数値は各試料の条件を示し、あらゆる画面に共通する設定ではない。シリーズの背景とツールは 総論。
画像と境界
画像の内側に淡い輪郭を重ねる
画像の外縁付近は、片方が白に近く、もう片方は深く暗いこともある。パネルに置くと明部は下地と溶け、暗部は自ら強い縁になる。こうした重みの異なる端を、淡い 内側輪郭（inset outline） で少し収めるのが好みだ。
ここでは幅1 px、不透明度10%の純黒輪郭を画像の内側に重ね、寸法、切り抜き、角丸は変えない。輪郭は元の画素と合成され、明部のほうが変化を見取りやすい。これは画像の端を整える処理で、外側の容器は別に設けられる。
暗い容器では同じ幅と不透明度の純白に変え、縁に近い暗部に薄い境界を作る。2枚とも同じオリジナル画像を使い、注目する場所を縁に絞った。
画像はR12で、周囲8 pxの下地をR20の容器が包む。内側輪郭はすでに切り抜かれた画像内に描かれ、追加の場所を取らない。外部容器の間隔は元のレイアウトで計算する。写真、スクリーンショット、矩形の境界がある図に向いた処理だ。透過ロゴや不規則なイラストなら、元の輪郭の周りに余裕を残す選択もある。
アバターと入口
アバターを重ねるなら、まず幅の節約を見る
複数の参加者は、間隔を空けても、一部を重ねても並べられる。アバターグループ（avatar group） は参加者を伝え、アバタースタック（avatar stack） は重ねて全体の幅を短くする。私は密な情報行でスタックを使いたい。顔を一人ずつ確認する場面なら、離れた写真と名前に広めの領域を与えられる。
この比較はオリジナルの架空人物画像3枚を使う。円形の本体はすべて32 pxで、左は隣との間隔6 px、右は重なり8 px。写真、切り抜き、内縁、2 pxの外側分離リングは固定し、同じ表示枠内で始点と垂直中心も揃えた。
3つのレイアウト幅は108 pxから80 pxに縮まる。外側の分離リングはレイアウトには含まれないが、両端に各2 pxを描き足すため、描画幅は112 pxと84 pxになる。この値は図の同じ大きさの円3つと、実体のborderがない配置に限る。容器に置く際は、外周が切れないかも見たい。
暗い版は配置を維持し、縁を下地の面に合わせる。これは配置を分解するための概念的な対照だ。最後のワークスペースは元からスタックを使っており、22 pxのアバターと5 pxの重なりを維持した。実演のために情報行を大きくしたわけではない。
外周の分離と画像の内縁は別の仕事
写真が重なると、境目で一体に見えやすい。外側の 分離リング（separation ring） は下地と同じ不透明色で重なる部分を隠し、見分けられる隙間を残す。アバターを浮かせるための輪郭ではない。隙間は下地に戻り、重なりにはそれぞれの円弧が見えるようにしたい。
そのため、分離リングは状態に追従する必要がある。白いカード、選択中のデータ行、暗い面は下地が違う。暗い面に白の固定リングを置けば、背景とは関係のない明るい縁になる。透明や模様のある背景では単色で下の内容を再現できないため、マスクで実際に抜くか、重ねない配置にする。この操作試作では模様のある下地で間隔を空ける方を選んだ。
写真の内側は先ほどの内側輪郭を引き継ぎ、画像内縁線（image inner stroke） で写真自体を整える。以下はスタックと外周を固定し、明るい面で幅1 px、不透明度10%の純黒の内縁があるかどうかだけを比べる。線は切り抜き済み写真の上に重なり、画像を小さくせず、外周も太くしない。
暗い面の内縁比較では、幅1 px、不透明度8%の白を使う。円形容器の装飾レイヤーを写真の前面に置いているため、不透明な画像の背後へそのまま内影を付けても同じようには見えない場合がある。線に気づくのは縁の近くに限り、中央の顔や切り抜きはそのまま残したい。
人数が増えたら、使える入口を残す
見せるアバターと実際の人数は分けて扱う。この原型は4枠を確保し、7人なら3枚と +4、4人なら4枚を表示する。写真の読み込みに失敗しても、イニシャルや代替図形が同じ寸法を占める。数字でも写真でも、円が急に大きくならないようにする。
全員の一覧が必要なら、グループ全体から参加者リストを開き、名前を読める広さを別に確保したい。重なった小円それぞれの操作領域を広げると、互いを覆いやすい。一覧内に独立した操作行を設けるほうが、キーボードでの開閉やフォーカス復帰も明確になる。操作試作では面、配置、人数、画像失敗を切り替え、外周と内縁の仕事を別々に観察できる。
画像の内縁は写真を整え、外周は隣同士を分け、人数超過の入口は全員の一覧へつなぐ。この三つを分けて確かめれば、人数や背景が変わっても、識別と操作に必要な空間を守りやすい。