Chrome新機能「Skills」でAIプロンプトをワンクリックツール化、DevToolsもAI強化へ
Google Chromeに、よく使うAIプロンプトを「スキル」として保存し、ワンクリックで呼び出せる新機能が追加されました。あわせてChrome 147ではDevToolsのAI支援が強化され、ブラウザ全体がAIワークフローの起点として進化しています。Webディレクターにとっては、日常のリサーチや確認作業を効率化する実用的なアップデートです。
Chrome Skillsとは何か
Chrome Skillsは、ブラウザ上で繰り返し使うAIプロンプトを「スキル」として保存し、ワンクリックで実行できるようにする機能です。たとえば「このページを要約して」「競合サイトの特徴を抽出して」といったプロンプトを事前に登録しておけば、毎回入力し直す必要がなくなります。
これまでもChromeにはGeminiベースのAI機能が搭載されていましたが、毎回プロンプトを手入力する必要がありました。Skillsでは、自分がよく使うプロンプトをテンプレート化して保存できるため、プロンプト設計に慣れていないチームメンバーでも、用意されたスキルをクリックするだけで同じ品質のAI出力を得られることが期待されます。
Webディレクターの実務で考えると、以下のような活用が想定できます。
- 競合調査: 競合サイトを開いた状態で「構成要素と特徴を抽出」するスキルを実行
- 原稿チェック: 公開前のページで「誤字脱字・表現の統一性を確認」するスキルを実行
- クライアント報告: アクセス解析画面で「主要KPIの変動を要約」するスキルを実行
個人のノウハウとして蓄積したプロンプトを、チーム内で共有可能なツールに変換できる点が大きなポイントです。
Chrome 147のCSS新機能
Chrome 147では、フロントエンド開発に関わるCSS機能も複数追加されています。
Element-scoped View Transitionsは、ビュートランジション（View Transitions）の適用範囲を特定の要素に限定できる機能です。ページ全体ではなく、カード要素やモーダルなど個別のUI部品にアニメーション効果を適用できるようになり、複数のトランジションを同時に実行したり、ネストしたりすることも可能です。
CSS contrast-color() は、背景色に対して最もコントラストの高い色として「黒」または「白」を返す関数です。アクセシビリティ対応で色のコントラスト比に悩むケースは多いですが、この関数を使えばブラウザが自動で適切な色を選択します。
border-shape プロパティは、ボーダーの形状をより柔軟に制御するための新しいプロパティです。clip-pathと同じシェイプを受け付けますが、ボーダーの形状を定義し装飾を施す点で根本的に異なります。角丸以外の装飾的なボーダー形状を、CSSだけで表現できる幅が広がります。
DevToolsのAI支援が本格化
Chrome 147のDevToolsでは、AI支援機能が実用段階に入っています。
自動コンテキスト選択が導入され、DevToolsのAIアシスタントが事前にコンテキストを選択しなくても、より自由な質問ができるようになりました。また、チャットが空の状態ではユーザーの操作に応じてコンテキストを自動的に切り替え、会話が始まった後は手動での選択を尊重する仕組みになっています。
エージェント向けDevToolsのアップデートも注目点です。Chrome DevTools MCPサーバーとCLIがバージョン0.21.0に更新され、マルチエージェントワークフローのサポート、Lighthouseを通じた監査機能、メモリリーク検出スキルなどが追加されています。
さらに、ConsoleパネルとSourcesパネルでのコード生成機能が追加されました。Chrome 142で導入されたコードサジェスション機能がアップグレードされ、自然言語のコメントを入力してCmd+i（Mac）またはCtrl+i（Windows/Linux）を押すとコードを生成できるようになっています。エンジニアと協業するディレクターにとっても、DevToolsでの確認作業がAIのサポートで効率化される流れは把握しておく価値があります。
DevTools AI支援の動作イメージ
まとめ
Chrome Skillsによるプロンプトのツール化は、個人のAI活用ノウハウをチームの資産に変える仕組みとして注目です。DevToolsのAI強化やCSS新機能とあわせて、Chromeはブラウザとしての基本機能を超え、Web制作のワークフロー全体を支援するプラットフォームに進化しつつあります。まずはSkills機能で、自分が繰り返し使っているプロンプトを1つスキルとして登録してみるところから始めてみてください。