カードもボタンもグラフも揃っているのに、よく見ると気が散る箇所が残っている。パネルの枠が重い、画像の端が突然背景に溶ける、数字が変わるたびに隣の文字が動く、メニューがひとつ前の操作をまだ再生している。ここで取り上げたい「AIっぽさ」は、こうした仕上がりきっていない関係にある。
私が好むのは、白を基調に抑制し、近づくと層が見えてくるインターフェースだ。輪郭は見分けられるだけ残し、影は表面の近くに置く。文字、アイコン、余白には共通のリズムがあり、操作の反応は手の動きについてくる。繊細さは、これらの選択が一緒に成立したところに生まれる。
以下ではオリジナルの図で、細部をひとつずつ分けて見る。灰白は今回の試作の配色で、数値もこの試作での選択を表す。寸法は元のCSSピクセルを基準とし、部分拡大には倍率を添えた。図は開いて全体の出力を見られるが、線や文字の重みを決めるときは実際の表示寸法に戻りたい。
境界と厚み
同じ輪郭を細くする
いちばん気になるのは、パネルがどこから始まるかは分かり、縁は硬い枠に見えないこと。この試作では外周を ring に任せている。ぼかしのない外側の影で表面に沿って一周を描き、奥行きは別の影で表す。輪郭自体は明快なまま、幅と不透明度を独立して調整でき、レイアウトの領域も使わない。
ここでいう hairline は、その同じringを細くする処理だ。最初の図は広がり量（spread）だけを1 pxから0.5 pxへ変えている。暗色、不透明度12%、下地、寸法は固定し、奥行きの影も加えていない。輪郭の幅が半分になると、残る重みも減る。
細くしてから、明瞭さを決める
線が細くなった分、不透明度を少し上げて見分けやすさを戻すこともできる。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%は差を観察しやすくするための試作値だ。白く抑えた画面に戻すなら、面積に合わせて重みを下げ、小さなマスクの減衰や材質の移り変わりに留めたい。この比較は減衰の接点を説明するもので、色ストップ数をあらゆるバンディングの解決策とはしていない。
狭い隙間と内容の余白を別に測る
包み込む構造には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の円弧、右は曲がり始める位置を示すだけで、単一の円心も固定半径もない。右はこの試作の簡略化したベジェモデルだ。入れ子の容器で使うなら内外の曲線間の隙間を確かめ直し、円の半径を差し引く関係をそのまま使わないようにしたい。
私は輪郭全体に戻して見る。右は連続して接続する一方、曲がりが集中するため、円弧より四角く見える。適切かどうかは、比率、余白、隣接する部品との組み合わせで判断する。ここでは接点を分解するために使い、最後のワークスペースは元の円弧の角丸を残した。
画像の内縁を整える
画像の内側に淡い輪郭を重ねる
画像の外縁付近は、片方が白に近く、もう片方は深く暗いこともある。パネルに置くと明部は下地と溶け、暗部は自ら強い縁になる。こうした重みの異なる端を、淡い 内側輪郭（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枚を表示する。写真の読み込みに失敗しても、イニシャルや代替図形が同じ寸法を占める。数字でも写真でも、円が急に大きくならないようにする。
全員の一覧が必要なら、グループ全体から参加者リストを開き、名前を読める広さを別に確保したい。重なった小円それぞれの操作領域を広げると、互いを覆いやすい。一覧内に独立した操作行を設けるほうが、キーボードでの開閉やフォーカス復帰も明確になる。操作試作では面、配置、人数、画像失敗を切り替え、外周と内縁の仕事を別々に観察できる。
文字、数字、光学的な整列
改行も構図の一部にする
見出しの最終行に短い単語だけが残ると、その下の余白が片側に偏りやすい。バランスを取る折り返し（balanced wrapping） は指定幅の中で文字を再配分し、行ごとの分量を近づける。この対照は行幅220 px、文言、文字サイズ、字間を固定し、折り返し方だけを変えた。
短い説明では少し事情が違う。行の自然な長短を残しつつ、最終行が孤立しすぎないかを見る。prettyによる折り返し（pretty wrapping） はブラウザーに改行位置を調整する余地を与え、極端に短い最終行を減らす。図でも文言と行幅はまったく同じだ。
この選択は実際の文言と一緒に見る必要がある。見出しには意味の切れ目があり、短文には読みやすい幅がある。英単語と繁体字中国語の句読点では改行条件が異なり、ブラウザーの結果も変わりうる。まず容器に適切な伸縮性を持たせ、狭い画面と長い翻訳を確かめてから、balancedやprettyを採るか決めたい。
数字が変わるとき、まず各桁を安定させる
タイマーが11:11から08:08に変わるとき、字形の幅が異なれば文字列全体の分量も変わる。等幅数字（tabular figures） は各桁を同じ幅にし、更新される値、カウンター、一覧する数値列に向く。
両側ともGeistで、文字サイズと内容も同じ。数値機能だけをプロポーショナルから等幅へ変えた。図内の小さな注記は別の等幅書体を使うが、主役の数字は同じ書体で比較している。
桁が増える分の場所も先に取る
等幅数字で各桁が安定しても、9から99、100へ増えれば文字数は変わる。図の両側で等幅数字を有効にし、右だけ3桁分の幅を確保して右揃えにすることで、後ろの説明の始点を保った。
3桁はこのカウンターで想定した範囲だ。桁区切り、負号、さらに大きな数が入るなら場所を取り直す。日付、カウントダウン、割合にもそれぞれ最長の形式がある。数値は確保した領域内で変え、その周りの文字や操作を安定させたい。
金額を小数点に沿って揃える
同じ列の金額を素早く比べるには、表示精度、数字幅、揃える方向を一緒に決める必要がある。この図は負数を加え、小数点以下2桁、等幅数字に固定し、金額の整列方向だけを変えた。右揃えにすると、小数点と一の位を同じ線に並べられる。
単位は独立した、少し控えめな列に置き、金額から一定の距離を取る。ここで小数点が揃うのは表示精度が同じだからだ。同じ列で小数桁数を混在させる必要があれば、整数部と小数部も分けて並べたい。負号は値の一部として残し、整列のために省かない。等幅数字は出発点であり、実際の書体のカーニングも配置に影響しうる。機能が有効かだけでなく、同じ正負の金額で確かめている。
中央に置いたあと、見える形を見る
光学的な中央揃え（optical centering） は見える形の重みを扱う。右向き三角形は左側に面積が寄るため、外接枠を中央にしても左寄りに見えることがある。ここではボタンを固定し、同じ図形だけを右に1 px動かした。この値は図の三角形に属し、別のアイコンなら見直しが必要だ。
文字枠を中央にしたあと、字面の高さを見る
文字のレイアウト範囲には書体が上下に確保する空間があり、見える字面はその一部だ。flexで中央に揃えても、ボタンの文字が少し上や下に見えることがある。図は同じSave、同じ書体、同じ行高で、左は文字枠を残し、右は大文字高とベースラインで上下を修整してから、同じ高さのボタンに置いた。
文字ボックスの修整（text-box trimming） は、この空間を書体の縁に基づいて扱う。細い角の印と中央線は差を見るためのものだ。実際にはアセンダー、ディセンダー、隣のアイコンも確かめる。繁体字中国語、かな、韓国語は各書体の字面で判断し直す必要があり、英語のcap／baselineの値だけですべての言語を光学的に中央へ置くことはできない。未対応環境では元の文字枠による配置を保つ。
アイコン側の余白を、見える分量で調整する
文字に矢印を添えると、矢印の周りの空間もまとまりの重みに加わる。ここでは文字、図形、間隔、上下の内側余白を固定し、アイコン側の水平内側余白だけを16 pxから14 pxにして、組み合わせを少し引き締めた。
2 pxはこの矢印と文字列の調整量だ。塗りつぶしアイコン、別の書体、文字より前のアイコンなら、まとまり全体を見直したい。アイコンが自分のキャンバス内ですでに偏っているなら、先に原稿を直すことで、ボタン側の補正をひとつ減らせる。
小さいアイコンは線幅を考え直す
線の太さ（stroke weight） も、図形全体と一緒に縮小すればよいとは限らない。この14 pxフォルダーでは、左は24 px原稿の1.5 px線を同比率で0.875 pxへ縮め、右は1.25 pxへ修整している。図形の寸法は変えず、最終的な線を調整した。
私は原寸で、線端、角、内部余白、隣の文字を一緒に見る。このアイコンに必要な重みが、もっと密な形にも合うとは限らない。
小ラベルには独自の字間を持たせる
英語の全大文字ラベルは数字や見出しの近くに置かれることが多い。文字が詰まりすぎると、小さい字が重い塊に見える。字間（tracking） を少し開けると、明瞭なリズムを保ちやすい。
この比較では10 px、ウェイト500、同じ全大文字ラベルを固定し、字間0と0.05 emだけを比べる。下の内容も、ラベルからの距離も変えていない。
文字サイズ、太さ、長さも一緒に判断する。この大文字ラベルは少し空気を入れるのが合う一方、繁体字中国語の小見出しや本文は字面の密度が異なる。役割ごとに重みを整え、文章全体の階層は単純に保ちたい。
間隔、部品、状態
共通の始点に情報を並べる
間隔のリズム（spacing rhythm） は関係の反復から生まれる。図の行高は64 px、アイコンと文字は12 px、パネルの内側余白は24 px。名前、説明、区切り線は文字の始点を共有し、アイコンには独自の領域を残す。表の見出しは内容のまとまりの始点に揃え、列の範囲を伝える。
グループ内は近く、グループ間には間を置く
共通の始点は整列を作り、近接性（proximity） は関係を伝える。2組のナビゲーションで文字、行高、グループ内8 pxは維持し、グループ間だけ8 pxから24 pxへ広げた。WorkspaceとPersonalのまとまりが読み取りやすくなる。
24 pxはこの内容の間であって、あらゆるナビゲーションに適用する必要はない。密なワークスペースでもグループは見分けられるようにしたい。線が必要なら、内容の始点に沿わせる。まず間隔に関係を担わせ、どこにもう1本線が必要かを決めている。
溝と選択面を一緒に成立させる
セグメントコントロール（segmented control） の溝は連続させ、白い選択面が独自のringと短い影で現在位置を示す。この試作の溝はごく淡い内影だけにし、白い面は先ほどの輪郭と2層の奥行きを使い、内縁の光は足していない。
溝はR14、内側余白4 px、選択面はR10。大きいパネルと同じく、4 pxはレイアウトの距離だ。0.5 pxのringが外へ描かれると、直線部分に見える灰色は約3.5 pxになる。部品を溝に収めた感じは好きだが、高く浮かせる必要はない。
ひとまとまりの操作には継ぎ目を1本だけ
共通の継ぎ目（shared seam） は日付と矢印をひとつの外形で包み、中に1 pxの区切り線を1本だけ置く。独立した2つの輪郭が接点で重なって濃くなるのを避ける。線は本体の上下から8 px退き、端を少し丸めた。操作領域を分ければよく、外枠まで届かせる必要はない。
押したとき、内容は跳ねさせない
続く選択状態と一時的な 押下状態（pressed state） は仕事が違う。選択は現在の位置を示し、押下はその瞬間の操作に応える。図の押下時は外側の奥行きを淡い内影へ替え、白を少し下げて#F5F5F5にした。ring、アイコン、文字、部品全体の寸法は変えない。
進捗の溝にも包み込む関係がある
浅い溝（recessed track） は同じ関係を小さくする。高さ6 px、R3の外溝に1 pxの内側余白を設け、高さ4 px、R2の塗りを入れる。75%は内側余白を引いた使用可能幅から計算し、端点の周りにも下地を残す。
ここでは溝の内側上縁だけに短い暗影を残し、塗りの上縁にごく弱い材質の明るさを留めた。数ピクセルの部品に限った役割であり、すべての実色パネルの白い内光には広げない。
小さいアイコンにも操作しやすい範囲を残す
見えるアイコンの大きさと 操作領域（hit area） は分けて作れる。図の閉じる記号は16 × 16 pxのまま、ボタン領域は44 × 44 pxとし、指にもポインターにも十分な落としどころを用意した。補助枠は図解だけに表示する。
44 pxはこの試作の選択だ。密なツールバーに置くなら、隣の操作との距離と操作領域も合わせて確かめ、互いに重ならないようにする。図形は小さくても、周囲には適切な操作空間を残したい。
静かな面でも、フォーカスは見えるようにする
キーボードフォーカス（keyboard focus） は今どの部品を操作しているかを示し、見分けられるだけの重みが要る。このボタンはring、塗り、寸法を維持し、右だけボタンから3 px離して2 pxの輪郭を足した。表面の細縁は形を伝え続け、フォーカスは位置を明確に示す。
面は控えめで、操作位置はひと目で分かるのが好きだ。フォーカスの輪郭は周囲の下地と一緒に確かめ、パネルの切り抜きや隣の部品にも気を配る。選択、押下、フォーカスは別の役割を持ち、同時に成立できる。
動きによるフィードバック
状態が変わるとき、アイコンを柔らかくつなぐ
保存から保存済みへの変化は、アイコンと文字の両方で結果を伝える。この クロスフェード（cross-fade） は同じ枠に置いた2つのアイコンの不透明度だけを変え、ボタン幅と文字位置を固定する。左は直接置き換え、右は150 msのease-outでつなぐ。どちらかのボタンを押すと、両方が同じ状態へ切り替わる。
こうした小さな動きは、たまに起こる状態変化に留めたい。頻繁に切り替えるタブや各行で繰り返す操作には、より直接的な反応が向く。現在の状態は文字やアイコンだけでも明確に伝わる必要がある。押下反応は前の表面明暗と影を使い、内容は元の位置に残す。
動きの途中でも、次の操作を受け止める
パネルが開ききる前に、もう閉じる操作をすることはある。中断できる遷移（interruptible transition） は現在位置から新しい状態へ向きを変え、連続操作をつながりのあるものにする。以下は距離、200 msの時間、イージングが同じ。左は毎回指定の始点から再生し直し、右はその時点の位置から新しい終点へ進む。
途中で素早く開閉を切り替え、パネルが急に移るかを観察できる。この試作はCSS transitionで状態に追従している。タイムライン型アニメーションも再生制御を加えれば中断に対応できる。大切なのは実際の操作が途切れず続くかだ。動きを無効にしても、状態の文字と静的な前後比較は残る。
登場と退出の動きを使う場面に合わせる
初回の表示は見出し、説明、操作をグループに分け、読む順序を少しずつ広げてもよい。退出では移動量と時間を控え、次の内容へ注意を渡す。こうしたリズムは立ち止まって見るのに適した場面に残し、普段の開閉や繰り返す操作は直接的にしたい。
動きを減らす設定では移動を抑え、状態は明確に残す。2つの対照はいずれも操作で始まり、初回表示では初期状態に止まる。いつ比べるかは読者が決められる。
材質の境界
ガラスに具体的な置き場所を与える
少量のガラス感は浮いたツールに残す。不透明度72%の白に近い塗り、10 pxの 背景ぼかし（backdrop blur）、明瞭な前景の文字とアイコンだ。ツールバーが容器の下縁をまたぐことで、下の明暗が透ける。主なデータ行を避けた位置に置き、材質にも実際にまたぐ境界を持たせた。
ガラスの輪郭は0.5 px、不透明度6%の中性的な暗色ringで収め、内側には柔らかい微光だけを残す。下の3層の淡影が接点から24 pxぼかしの外周へつながり、浮遊感を外へ広げる。このringは実色部品より淡い。透明な面はすでに背景の明暗を借りるため、さらに濃い枠を加える必要はない。
実際にまたぐ背景で確かめたい。真っ白な下地では輪郭しか残らないこともあり、下が複雑すぎれば文字を邪魔する。この試作は透けとぼかしだけを示し、本当の屈折を再現してはいない。
この作法をMaster Designにまとめる
ここまでのこだわりを、AI編集ツールにインストールできるデザイン用のskill、Master Designにまとめた。境界、幾何、画像、文字、間隔、状態、動き、材質をテーマ別に読み込み、見える問題、仕組み、使える条件、確かめ方を説明する。リポジトリにはオリジナル図解の制作原稿と操作できる例も残し、実際の効果と照らし合わせられるようにした。
標準ではプロジェクトのブランド、書体、フレームワーク、密度を維持する。この文章の白く抑えた扱いを使いたい場合は、Aron preferences を明示して選べる。半ピクセルの輪郭や影の値は試作例であり、実際の画面で判断する必要がある。
npx skills add master-co/design --skill master-designインストール後は「$master-designを使ってこの画面を磨き、既存のブランドと密度を保ち、影響する状態を実装して確かめて」と頼める。Skillは取捨選択と検証を作業に組み込むが、最終的な品質は実際の内容と操作で確かめたい。
完成したインターフェース
最後に、ひとつのワークスペースに戻る。私が求める繊細さは、細部が互いにつながり、全体がすっきりと落ち着いていることだ。
