なるほど、いろんなスキルを組み合わせる。しかし、すでにもう一旦作ってしまっているので、ClaudeCodeでWebサイトのフォルダを開き、ブランチを作って次の二つのスキルだけ適用してみます。 /frontend-design /baseline-ui インストール方法は、上記のリンクを参考にしてください。 どう変わったか方法は、作業ディレクトリで `frontend-design` と `baseline-ui` を実行しただけです。 結果として、かなり良い仕上がりになりました。 当初は「WordPressの標準テンプレートに文字を載せただけ」のような印象でしたが、適用後は強調したい部分が際立ち、適度に色が加わるなど、しっかりと「デザインされた」感じが伝わってきます。 最初から紹介されているスキルをフルに組み合わせればもっと変わったはずですが、今回の簡単な実験でも既存のベースを活かした「良
こんにちは、データマネジメント部でデータエンジニアをしています。山城です。 Claude Codeがリリースされて早くも一年ちょっとが経ちました。恥ずかしながら今まで碌に使っていなかったので、ここ二か月ほどCodexをメインに使いながら設定を行っています。 公式からリリースされた機能についてまとめた記事などは色々確認できるのですが、具体的な設定やファイルの中身などはあまり見かけないので、整理がてら記事にしていこうと思います。 今回は設定したものの中でも、ある程度放置でも長時間実行できる環境にするための環境整備について書きます。理由はとても単純で、使っていくと投げたいタスクの粒度がだんだん大きくなり、権限もデフォルト権限で動かしていたこともあり承認を求められることも増えてきて面倒になったからです。多分リリースから使っていた人たちも同じような流れを辿ったんだろうな…と感じています。 設定前の知
1週間の気になる生成AI技術・研究をいくつかピックアップして解説する連載「生成AIウィークリー」から、特に興味深いAI技術や研究にスポットライトを当てる生成AIクローズアップ。 今回は、サイトに訪問するだけで自分のPCでどのAIモデルがローカル動作するかを判定してくれるサイト「CanIRun.ai」（Can your machine run AI models?）を取り上げます。 ▲Apple M5 Pro 24GBでのcanirun.aiトップ画面 ▲さまざまなデバイスで試せるため、デバイス購入前に確認することもできる 開発者midudev氏が、手元のマシンでどのAIモデルが実際に動かせるのかを一瞬で判定できるWebサービス「CanIRun.ai」を公開しました。インストールや登録は一切不要、サイトにアクセスするだけでGPUやメモリを自動検出して、各モデルに対する動作判定を6段階で色分け
はじめにこんにちは、ニュースメディア開発部の杉野です。4月にメディア研究開発センター（M研）から異動となり、新しい環境で奮闘しているところです。 最近、NHK大河ドラマ「豊臣兄弟！」にハマっています。毎週、豊臣秀吉と弟の秀長が知恵と義理で戦国の世を渡っていく様子をワクワクしながら見ています。 しかしいかんせん日本史の知識が乏しく、歴史上の有名人が登場するたびに「この人は何者？」「この人は敵？味方？」「この後どれだけの城を攻略するの？」と史実が気になってきました。 そこでふと考えたのが 「この複雑な人間関係、グラフデータベース（DB）で整理したら理解しやすそう」 「天下統一の道のりを日本地図でアニメーションにしたら、物語の流れも追いやすそう」 ということです。 というわけで本記事では、Wikipediaから取得したオープンな歴史テキストを題材に「グラフDB構築 → 可視化 → グラフRAG
概要 こんにちは、booostのバックエンドエンジニアのma_meです。 今回はこちらの記事から着想を得て、個人開発で AI、DevTools Recorder、playwright-cli の３ツールを組み合わせてe2eテストを書いてみたところ、作成とメンテナンスが楽になる手応えを感じましたので、その方法を紹介します。 全体の流れ ① ブラウザで操作を録画（Chrome DevTools Recorder） ↓ ② 録画JSONをCodexないしClaude Codeに渡す ↓ ③ AIがJSONを読み取り、Playwrightテストコードに変換 ↓ ④ 必要に応じてplaywright-cliで画面のスナップショットを取り、セレクタを補正させる ↓ ⑤ テストファイルが完成 では実際にやっていきましょう。 Step 1: ブラウザ操作を録画する Chrome DevToolsの「Rec
jp-ui-contracts を公開しましたAIでUIを作る流れが強くなるほど、逆に目立ってくるものがあります。 それは、日本語の詰めの甘さです。 色はそれらしく見える。 余白もそれっぽく整う。 カードやボタンの形も、かなり上手に出てくる。 でも最後に崩れるのが、日本語です。 見出しの折り返しが苦しい。 本文の行間が浅い。 英語のサービス名が混ざると急に浮く。 フォームだけ窮屈になる。 表の密度が本文のルールを引きずって読みにくくなる。 この違和感は、単に「AIの精度が足りない」から起きているわけではありません。 もっと手前の問題です。 日本語UIの設計契約が、まだ十分に書かれていない。 そこで作ったのが、jp-ui-contracts です。 また、以下の記事が “DESIGN.md とは何か” を定義する総論で、今回の記事は “それを日本語UIでどう実装資産にするか” を示す各論です
CLAUDE.mdは長いほど効くわけではありません。むしろ長いほどClaude Codeは従いにくくなります。 100行書いたCLAUDE.mdと、35行に削って残りを.claude/rules/に分離したCLAUDE.md。同じ指示を出しても、後者の方がClaudeの出力品質が明らかに高いのです。 この記事では、なぜそうなるのかを公式仕様に基づいて解説し、「どの行を残し、どの行を移し、どの行を消すか」を1行単位で設計する方法論を紹介します。 CLAUDE.mdの注入メカニズム — なぜ「埋もれる」のか User Messageとして注入される事実 公式ドキュメントにはこう書かれています。 CLAUDE.md adds the contents as a user message following Claude Code's default system prompt. — Claude
sponsored 半年以内の事業化に向けPoC中、データ事業売上「1.1兆円」を目指す 三菱電機×燈が“爆速”で挑むフィジカルAI 工場無人化に向けた“ラストピース”を埋める sponsored 人気開発スタジオHypolygonに聞く、新世代のゲーム開発とは マンションの1室から世界へ、大流行中の「Roblox」で開発する要注目ゲーム「Bugmon」はゲーミングPC1台で作られた!? sponsored AMD Ryzen™ AI Max+ 392搭載、薄型軽量なのにゲームでも優秀 内蔵GPUでデスクトップ並みってあり得るの？ ASUS TUF Gaming A14 FA401EAをレビュー sponsored HP Wolf Connect スマホの「探す」機能、なぜ会社のPCにはないの？ 電源オフでも追跡・データ消去できる新たな解決策を知る sponsored 「arrows Al
agency-agentsとは何か agency-agentsは、144個のAIエージェント定義をMarkdownファイルで提供するOSSです。Claude Code、Copilot、Cursor、Gemini CLIなど10以上のツールに対応しています。 「開発者として機能して」のような汎用プロンプトとの違いは、専門領域ごとの知識体系が構造化されている点です。Frontend Developerエージェントなら、Core Web Vitalsの最適化手法やアクセシビリティ基準まで含みます。汎用プロンプトでは抜け落ちがちな観点を補完します。 2025年10月にリポジトリが作成されました。2026年3月14日時点でスター数40,889、フォーク数6,172です。コントリビューターは36名以上に成長しています。 インストール 基本手順 リポジトリをクローンし、インストールスクリプトを実行します
Claude Codeが目まぐるしいですね…！ 今回はClaude Code to Figmaによるデザイン制作をしてみての感想や今後のUI/UXデザイナーの役割を考えてみたいと思います。 Claude Code to Figmaでやったこと今回試したフローはざっくりこんな感じです。 セットアップ：Claude CodeにFigma MCPを接続する デザインシステムの用意：GoodpatchのSparkleをFigmaライブラリとして使用 Claudeで作成：要件を渡してReactコードを生成、Figmaに書き出し それぞれ詳しく書いていきます。 実際の手順セットアップセットアップはkenさんの以下のポストを参考にしました。非エンジニアにも丁寧に解説されているのでおすすめです。 大まかな流れはこうです。 Claude Codeデスクトップアプリをインストール ターミナルでClaude C
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? みなさん、ClaudeCodeを使っていますか？ (「バチバチ使いこなしているぜ！」という方は読んでも意味ないので、この記事は閉じてください！) 私はClaudeCodeが好きで、業務はもちろん日常生活でもほぼ毎日使っています。なるべくClaudeCodeに仕事をさせるように、設定やSkillを日々いじくり回しています。 ただ、ClaudeCodeは便利な反面、難しいツールでもあります。難しい理由は「機能の豊富さ」と「爆発的なアップデート速度および頻度」から来ていると思っています。気を抜くとすぐに自分の知らない機能が増えています。私もな
社内のチームメンバー(クラウド事業本部コンサルティング部)向けに 「 Claude Code Skills (Agent Skills) 勉強会 」を開催しました。 DevelopersIO向けに調整したスライドを掲載します。 スライドの内容:テキスト情報を以降に記載します。参考になれば幸いです。 勉強会の目的 勉強会の背景やゴール、アジェンダを連携します。 背景 Skills がアツいです🔥 Claude Code (AIエージェント)の動きを 自分好みにカスタマイズ できる拡張機能 手軽に作れて、手軽に共有できます この勉強会のゴール 参加者全員が Skills をセットアップ して、基本的な使い方を理解する 普段の業務での活用方法を参加者全員で探索 する 参加者の知見やアウトプットを引き出す 期待する成果 この時間: Skills のセットアップ完了 + 基本的な使い方の理解 今後
この4ドキュメントを使うと、品質を落とさずに速く仕事を進められるようになります。 PLAN.mdで「音声入力」が最重要な理由 この中で特に大事なのが、最初のPLAN.mdで自分の考えを全部ダンプすることです。そしてそのために音声入力が欠かせません。 LLMにドキュメンテーション系の仕事（資料作成、記事執筆、提案書など）をやらせるとき、少ない情報で動かしてしまうと、人間が思ってもいないことをどんどん生成してしまいます。これが「AIが書いた感」の正体です。 逆に、自分が思っていることを全部ダンプした上で「詳細の整理と日本語の微調整をやって」と頼むと、クリエイティブな仕事であっても「AIが勝手に生成した」という感じになりにくい。あくまで自分の考えの細部をClaudeに整えてもらった、という仕上がりになるので、100%手書きしたときと比べてアウトプットの品質が落ちにくいです。 ただ、この「全部ダン
GitHub Copilot のエージェントモードで複数タスクを並列に進めたい。でも、セッションの切り替えが面倒だったり、今どのタスクが何の状態なのか把握しづらかったりして、結局１つずつ片付けていた。 2026年1月の VS Code アップデート (v1.109) で追加されたエージェントセッション管理UIが、この問題をかなり解決してくれた。この記事では、実際の利用画面とともにこの機能について紹介する。 参考：VS Code v1.109 Release Notes - Agent Session Management 目次 何が変わったのか：エージェントセッション管理UIの全貌 並列タスクの実践ワークフロー 並列開発をうまく回すコツ 現時点での制約：マルチルートワークスペース VS Code + GitHub Copilot で並列開発は十分できる まとめ 1. 何が変わったのか：エー
AIを使ったスライド作成は以前から可能でしたが、作った後に編集できないという課題がついて回りました。例えばNotebookLMでは、多彩なデザインのスライドをpptxファイルとして出力できるものの、各ページが1枚の画像として埋め込まれるため、文字や図表を後から修正するのが困難です。 その点、Claudeで作成したスライドはパーツごとに分かれたpptxファイルとしてダウンロードできるため、PowerPoint上でそのまま編集できるのが大きな強みです。さらに、専用のスキルを活用すれば、洗練されたデザインのスライドを安定して繰り返し生成できます。 本記事では、このパワポスライド作成用スキルの作り方と使い方を解説します。今回作成したスキルも公開しますので、ぜひご活用ください。 １．パワポスライド作成用スキルの作り方(1) 参考にするスライドの準備最初に、参考にするスライドやスライド作成のためのプロ
【AI駆動開発】100ページ超のPDFをMarkdownに変換してAIに読ませる方法 はじめに 最近、大規模システムの引き継ぎ案件を受けました。 その案件はAI駆動の進め方が許可されていたので早速AIを利用して、引き継ぎどんどん進めていくぞ！ と思ったのですが、いくつか困ったことがありました。 そう、資料のほとんどがエクセルで構成されているのと、外部API仕様書のほとんどが100P以上あるPDFデータになっていました。 AIを利用する上で、エクセルなどはもちろんのこと、重厚長大なPDF資料を読み取ることも苦手でございます。 なので、各種ファイルをAIが読みやすい資料にするべく、マークダウンの形式に書き換えていく必要があります。 今回はその中でもPDFをマークダウンに変換する処理についてを紹介できればと思います。 この記事の最後に「ワークフロー」と「Pythonスクリプト」を載せています。
杉田（@ane45）です。今月の「Python Monthly Topics」では、CrewAIを紹介します。 従来のLLM（大規模言語モデル）の活用は、単一のモデルに1つのプロンプトを投げて完結させる使い方が中心でした。しかし、複雑なタスクになると「調査→分析→執筆」のように役割を分けた方が効率的です。人間のチームと同じように、AIも役割分担することで品質が向上します。CrewAIは、このような「AIチーム」を簡単に構築できる軽量で高速なPythonフレームワークです。 CrewAIとは CrewAIは、複数のAIエージェントを役割ごとに編成し「チーム」として協力させ、複雑なタスクを自律的に実行させることができます。 公式ドキュメント（CrewAI Documentation） URL：https://docs.crewai.com CrewsとFlows CrewAIには中核となる2つ
各Skillの詳細解説 1. Playwright Browser Automation 概要 ClaudeがPlaywrightを使用してブラウザ自動化を実行するSkill。事前に用意されたスクリプトに制限されず、ユーザーの要求に応じてカスタムのPlaywrightコードをその場で記述・実行できる。 こんなときに使う Webサイトのテストを行いたいとき ブラウザ操作を自動化したいとき フロントエンドのUIテストやデバッグが必要なとき 具体的なユースケース ログインフローのテスト フォーム入力・送信の自動化 レスポンシブデザインの検証（複数ビューポートでのスクリーンショット取得） リンク切れのチェック E2Eテストの実行 使用例 2. prompt-engineering 概要 LLMのパフォーマンス、信頼性、制御性を最大化するための高度なプロンプトエンジニアリング技術を提供するSkill
はじめに こんにちは、和田です。いえらぶGROUPで開発部の執行役員を務めています。 弊社も例に漏れず、今年はAI活用に非常に注力してきました。Cursorを全エンジニアに導入し、テックリードにはClaude Codeを配布、業務効率化・実装スピード強化・精度向上を進めてきました。 そんな会社で、私はある新人エンジニアに対して「AIの使用を禁止する」という判断を下しました。 先日ちょっと話題になってましたね、こちらの彼の話です。 社内でも圧倒的なAI推進派の私がなぜそのような判断をしたのか。そして3ヶ月後、その新人はどう変わったのか。この記事では、私の目線からのある種答え合わせ的なつもりで経緯と結果をまとめてみました。 最初は「AIをどんどん使わせていた」 新人が入社した当初、私は彼にもCursorを使わせていました。なんならClaude Codeも使わせていました。理由はシンプルです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
