公式ブランド色と区別してページの色を抽出する方法。
実際に表示されたスタイルから色を取り、用途を示してください。目立つアクセント色が、承認済みブランドカラーのすべてとは限りません。
作業手順をタスクに合わせましょう。
選んだ要素を調べ、文字、枠線、背景など見える用途とともに色を記録します。計算済みの CSS 値と画像から抽出した色を分けてください。要素への参照を残し、調べたページ状態やテーマも明示します。
- 用意するもの
- 選択したページで見えるスタイル。
- 得られるもの
- 用途と元の要素を添えた使用色。
入力と結果を確認しましょう。
説明用の入力と出力 · 実際の WebAct 実行ではない学習用サンプル
入力項目サンプル個
Supplied style inspection: .card background #ffffff; button.primary background #d97736. These are inspected values, not official brand guidelines.
完成例
.card — role: card background — color: #ffffff button.primary — role: primary-button background — color: #d97736 Scope: two supplied element styles. Hover states, theme variants and brand approval are not established by this sample.
この入力をプロンプトに読み込み、WebAct にコピーして試してください。結果は掲載例と異なる場合があります。
判断のポイントとトラブル対処。
一ページから取った色は公式のブランドパレットですか？
調べたページを説明する色です。ブランド規定、アクセシビリティを満たす組み合わせ、承認済みの別案は別の資料で確認する必要があります。
ボタンにポインターを合わせると色が変わるのはなぜですか？
操作中の状態は通常のスタイルを上書きできます。使える配色一覧を作るには値と状態を一緒に記録してください。
自分の資料で試しましょう。
タスクのプロンプト内の例を自分の資料に置き換えてください。必要な要件を残し、タスクを WebAct にコピーします。
タスクを調整してコピー ↑