alignment

配置

このスキルは、実行中のページを確認し、位置ずれやバランスの崩れを検出します。レンダリングされた画素を測定し、拡大スクリーンショットで各指摘を確認して、番号付きのレポートを返します。

ピクセル単位で測定し、目視で判断

線、間隔、中心、半径は推測ではなく測定します。1〜4pxのずれでも指摘対象です。見た目に誤りと映る一方、16pxのインデントは意図的に見えるためです。視覚的な重みは数値化できないため、スクリーンショットで判断し、切り抜きを示します。

実行結果を開くのは verify の役割です。名前付きの参照と比較するのは match の役割です。ホバー、開いた状態、エラー状態を強制するのは lab の役割です。修正を共有コンポーネントに反映するのは reuse の役割です。すべての幅でレンダリングするのは viewports の役割です。

1. リリース版のレンダリングを開く

リリース時のビューポートで、デバイススケールファクターを2にしてページを開きます。各テーマと、ユーザーが指定した各状態を確認します。各要素がどこに配置されるべきかをCSSから推測するのは alignment-measure-the-render です。

2. 測定を実行する

まずプロジェクトのトークンからスペーシングスケールを読み取ります。ブラウザーの evaluate 呼び出しでスケールを window.__alignmentOptions = { scale } として渡し、ページ内で measure.js を実行します。

検出ルール、要素、測定値、矩形を含む指摘が返されます。手順3で確認するまでは、それぞれを候補として扱ってください。

3. 線を確認する

各候補を2倍のスクリーンショットから切り抜き、ピクセルを数えます。ピクセルで確認できない指摘は除外します。

列の先頭に来るテキスト、アイコン、コントロールは同じx座標に揃えます。タイトルが説明文より2px右にある場合は alignment-shared-edge です。

繰り返し並ぶ兄弟要素は、間隔を揃えます。8px、8px、12pxの間隔で並ぶリストは alignment-even-gaps です。意図的なグループ間の区切りは、少なくとも間隔の2倍にします。

すべてのパディング、ギャップ、マージンは、プロジェクトのスケール上の値にします。4pxスケールで6pxのパディングは alignment-on-scale です。

4. 中心を確認する

コントロール内のテキストは、行ボックスではなく、キャップハイトとベースラインを基準に中央揃えにします。ボタン内の文字が2px下に位置する場合は alignment-ink-centre です。text-box: trim-both cap alphabetic でボックスを詰めるか、パディングを調整します。

ラベルの横にあるアイコンは、ラベルのキャップハイトを基準に中央揃えにします。行ボックスを基準に中央揃えしたアイコンが1px下に位置する場合は alignment-icon-with-label です。

再生アイコン、矢印、三角形は、片側に重みがあります。ボックスを基準に中央揃えした再生アイコンが左にずれて見える場合は alignment-optical-glyph です。位置を微調整し、--play-nudge: 1px のように値に名前を付けます。

入れ子になったサーフェスの半径は、外側の半径からインセットを引いた値です。16pxのカード内に、インセット8pxで配置された半径16pxのパネルは alignment-concentric-radius であり、半径は8pxにします。

5. 重みを判断する

スクリーンショットを1倍で見て、最初に目が向くものを特定します。アイコンの線の太さをテキストの縦線の太さと比較し、塗りつぶしアイコンとアウトラインアイコンを並べて比較します。また、同じ大きさで描かれた円と四角形も比較します。

円や三角形は、四角形と同じ大きさに見せるために、およそ10％大きくする必要があります。1.5pxのテキストの縦線の横に2pxのアイコンの線がある場合は alignment-visual-weight です。

6. 証拠付きで報告する

report.html を .alignment/<page>/index.html にコピーします。ここは無視対象のフォルダーであり、ソースツリーには決して含めないでください。2倍のスクリーンショットをその隣に保存し、ヘッダーコメントの形式に従って report.js を記述してから開きます。

レポートは番号付きの輪郭線を描画し、そのスクリーンショットから各拡大切り抜きを作成するため、データのみを記述してください。独自のマークアップを含むレポートや、手作業で切り抜いたレポートは alignment-shipped-report です。測定値や矩形のない指摘は alignment-annotated-proof です。

7. 依頼された場合にのみ修正する

成果物はレポートです。ユーザーから修正を依頼された場合は、各指摘の背後にあるトークンまたはプリミティブを変更します。スクリプトとスクリーンショットを再実行し、解消された指摘を報告します。

ペア

各チェックはペアです。問題のある行の隣に、置き換える行を示します。

ルール	問題のある状態	置き換え後
alignment-measure-the-render	「フレックスコンテナーで中央揃えにしています」	実行中のページを2倍の倍率で測定
alignment-shared-edge	タイトルが説明文より2px内側にある	両方の開始位置を同じ文字の基準線に揃える
alignment-even-gaps	行間が8、8、12px	行間が8、8、8px
alignment-on-scale	4pxスケールでのpadding: 6px	padding: 8px
alignment-ink-centre	ボタン内のラベルの文字が2px下にある	text-box: trim-both cap alphabetic
alignment-icon-with-label	アイコンを行ボックスの中央に配置	アイコンをキャップハイトの中央に配置
alignment-optical-glyph	ボックスを基準に中央揃えした再生アイコン	再生アイコンを右に1pxずらし、その理由を明記
alignment-concentric-radius	8pxのインセット内で、16pxのカードに16pxのパネル	パネルの角丸半径を8pxにする
alignment-visual-weight	テキストのステムが1.5pxなのに、アイコンの線幅は2px	線幅をテキストのウェイトに合わせる
alignment-annotated-proof	「ボタンが少しずれて見えます」	検出結果3、1.8px下にずれています。切り抜き画像も添付
alignment-shipped-report	手作業で切り抜いた画像を使い、ゼロから作成したページ	report.htmlをコピーし、report.jsのみ作成

レポート

重大度。 HIGHは、見出しの列や主要なボタンなど、主要な領域で1倍の倍率でも見てわかるずれです。MEDIUMは、1～2pxのずれ、不均等な間隔、角丸半径の不一致、ウェイトの不均衡、または手作業で作成したレポートです。LOWは、スケールから外れた値でも、レンダリング結果が揃っているものです。

形式。 根本原因ごとに検出結果を1件記載し、オーバーレイと一致する番号を付けます。

1. file:line - [rule-id] what is wrong (measured values)

ソースの行が見つからない場合は、スクリプト内の要素を示します。続けて、Rule | Count | Severityの要約を記載します。HIGHが1件でも残っている場合はBlock、それ以外はApproveとします。キャンバス、画像、クロスオリジンのコンテンツにはNot verifiedと記載します。