AI業務大全運営 株式会社デイトラ

今日

毎朝のAIニュース
業務から探すお役立ち資料無料相談
  1. トップ
  2. ニュース
  3. Claude Codeが作った画面を、自分でブラウザで確かめる。スキル「senior-frontend」が話題

ニュース

Claude Codeが作った画面を、自分でブラウザで確かめる。スキル「senior-frontend」が話題

staff

AIが作った画面をAI自身が確かめる、と書かれたClaude Codeのスキルの記事のアイキャッチ

AIに画面を作らせると、見た目はできていても、読み込み中やエラーのときの表示、スマホでの崩れまでは確かめてくれないことがあります。そこで、Claude Codeが画面を作ったあと、実際のブラウザで表示を確かめるところまで進めるスキル「senior-frontend」がXで紹介され、話題になっています。

3行でわかる今回のニュース
  • Claude Codeに、画面を作る前にプロジェクトを読み、作ったあとはブラウザで確かめる手順を覚えさせるスキルが紹介された
  • 関係するのは、Claude CodeでWebの画面やサイトを作っている人と、その確認を受け持つ人
  • 今やることは、手元のプロジェクトにスキルを入れて、小さな画面の修正で試すこと

AIが作った画面を、AI自身がブラウザで確かめられるようになった

スキルは、Claude Codeに特定の作業の進め方を覚えさせる追加の手順書です。senior-frontendは、Claude Code向けの部品を集めた「claude-code-templates」で公開されているスキルで、配布ページでは3万回以上ダウンロードされています。ライセンスはMITです。

スキルの中身には、「ブラウザで実際に動くのを見るまでは、画面は完成していない」という考え方が書かれています。React、Next.js、Vue、Svelte、Astro、HTMLとCSSなどで画面を作る・直す・見直すときに使う前提です。

プロジェクトを読む、状態を洗い出す、画面を作る、ブラウザで確認の4つのステップの図
作る前に読み、作ったあとにブラウザで確かめる

しくみ：4つの手順で画面を作る

  1. プロジェクトを読む：使っている部品や色・余白の決まりを先に確かめ、すでにある部品を使い回す。新しい道具を足すときは、先に人に確認する
  2. 状態を洗い出す：読み込み中、データが0件、エラー、とても長い名前が入ったときなど、うまくいかない場合の表示も先に書き出す
  3. 画面を作る：キーボードだけでも操作でき、読み上げ機能でも内容が伝わる作りにする。スマホの幅（375px）から先に設計する
  4. ブラウザで確認：付属の確認用の仕組みがPlaywright（ブラウザを自動で動かす道具）でページを開き、スマホとパソコンの幅で、エラーや横にはみ出す表示、名前のないボタンなどを調べる

投稿者によると、最後に何を確かめて、何を確かめられなかったかを報告するところまで進めます。

基本情報

話題になった日

2026年11月11日（Xでの紹介投稿）

できること

Claude Codeが画面を作るとき、プロジェクトの確認からブラウザでの表示の確認までを手順どおりに進める

入れ方

npx claude-code-templates@latest --skill development/senior-frontend（プロジェクトの .claude/skills/senior-frontend/ に6つのファイルが入る）

料金・ライセンス

無料・MITライセンス（Claude Code自体の利用料は別）

一次情報

配布ページ（英語） / GitHub（英語）

業務でどう使える？どう変わる？

変わるのは、AIが作った画面を人が開いて、細かい確認漏れを見つける手間です。投稿者がSonnet 5.5で試したところ、ブラウザでの確認はスキルなしでは8項目中0、スキルありでは10項目中10になったそうです。一方で、作業にかかる時間はおよそ3倍になったとも書いています。

確認漏れを防ぐ場面の例。エンジニア、デザイナー、PM
画面の確認漏れを、作る段階で減らせる

職種別の活用アイデア

  • エンジニア：管理画面のフォームや一覧の修正をClaude Codeに任せ、エラーや0件のときの表示まで作らせてからレビューする
  • デザイナー：デザインを元に画面を組ませるとき、スマホの幅で崩れていないかをAIに先に確かめさせ、見る量を減らす
  • PM：AIが出す「確かめたこと・確かめられなかったこと」の報告を見て、人が確認すべき所を決める
注意点
  • 投稿者によると、作業の時間はおよそ3倍かかります。急ぎの小さな修正では、時間と使う量が増える点に気をつけましょう
  • ブラウザでの確認には、Playwrightがプロジェクトか手元のパソコンに入っている必要があります
  • 「8項目中0から10項目中10」は投稿者自身の試験の結果です。自分のプロジェクトでも同じ効果が出るとは限りません
  • 投稿者のDaniel Sanさんは、claude-code-templatesの作者です。入れる前に、配布ページやGitHubでスキルの中身を確認しておくと安心です

よくある質問

どんな画面づくりで使えますか？

スキルの説明では、React、Next.js、Vue、Svelte、Astro、HTMLとCSS（Tailwindを含む）で、ページ・部品・フォーム・一覧・表などを作る・直す・見直すときに使うとされています。

無料で使えますか？

スキル自体はMITライセンスで無料です。Claude Codeの利用料は別にかかります。

ブラウザでは何を確かめますか？

配布ページによると、スマホとパソコンの幅でページを開き、エラーの表示、横にはみ出す表示、名前のないボタンや入力欄、大きさや説明のない画像を調べ、Tabキーで移動する順番も確かめます。

プログラミングをしない人にも関係ありますか？

Claude Codeで社内ツールやサイトを作ってもらう人は、AIが「何を確かめて、何を確かめられなかったか」を報告してくれるので、確認の手間を減らす助けになります。

まとめ：小さな画面の修正で、確認の報告を見てみる

senior-frontendを入れると、Claude Codeが画面を作るだけでなく、うまくいかない場合の表示やスマホでの見え方まで、ブラウザで確かめてから報告するようになります。時間は増えるので、まず小さな画面の修正で試し、報告の中身が役に立つかを確かめるのがおすすめです。

今回話題のきっかけになったのは、@dani_avila7さんの投稿です。スキルがやることと、スキルのあり・なしで試した結果、入れ方のコマンドまで1つの投稿にまとまっていて、すぐ試せます。

「まず自分がAIを業務で使える側になりたい」という方には、デイトラのAI業務活用コースで、基本から体系的に学べます。

AI活用の導入支援・研修のご相談はデイトラへ

株式会社デイトラでは、企業向けのAI研修・AI業務効率化の導入支援を行っています。「何から手を付けるべきか」「自社ならどのツールを選ぶべきか」といった相談段階からお気軽にどうぞ。

無料で相談する

お役立ち資料のダウンロードはこちら

あわせて読む