記事一覧

Tailwind CSSチームのデザイナー Steve Schoger が、「Claude Codeをメインのデザインツールにした」という1時間の解説動画を公開した。Figmaを使わず、Claude Codeだけで金融アプリのランディングページをゼロから構築する過程を全公開している。 Steve Schoger とは Steve Schoger は Tailwind Labs のデザイナーで、Adam Wathan と共に「Refactoring UI」の著者としても知られている。開発者向けにデザインスキルを体系的に教える活動で広く認知されており、X（Twitter）でのデザインTipsや YouTube でのUI改善動画でも人気が高い。 動画の内容 動画では、約50回の対話を通じて初期出力をプロ級の品質に仕上げていく過程が公開されている。 注目すべきは、Schoger 本人が「コマンドラインはディレクトリ移動と Claude 起動しかできない」と語っている点だ。プログラミングの深い知識がなくても、Claude Code との対話だけでプロ品質のLPを作り上げている。 ワークフロー 左画面: ブラウザ（localhost 表示） 右画面: Claude Code のターミナル これだけのシンプルな構成で、Figma は一切使っていない。 技術スタック Vite — ビルドツール Tailwind CSS — ユーティリティファーストCSS React — UIライブラリ デザイナーがCLIに移行する時代 「デザイナーがCLIに移行する」というのは、一見ありえない話に思える。しかし、この動画を見ると、AIコーディングツールがデザインワークフローを根本的に変えつつあることが実感できる。 従来のデザインワークフローでは、Figma などのビジュアルツールでモックアップを作成し、それをエンジニアが実装するという流れが一般的だった。しかし Claude Code を使えば、デザイナーが自然言語で指示を出すだけで、直接コードとして実装されたUIを確認・修正できる。 ui.sh — デザインスキルをAIに組み込むツール Schoger と Adam Wathan は ui.sh というツールも開発している。これは Claude Code や Cursor などのAIコーディングエージェントに、プロレベルのデザイン基準を適用させるスキルツールキットだ。ターミナルを「デザインエンジニア」に変えるというコンセプトで、AIが生成するUIの品質を大幅に向上させることを目指している。 ...

Claude Code が勝手に git push --force しかけた——そんな冷や汗体験から真剣にセキュリティ設定を見直したという実践的なまとめです。Anthropic の公式ドキュメントにも「セキュリティは自分で設定しろ」と明記されており、AIエージェントに人間と同じ権限を与えるリスクを理解した上で対策を講じる必要があります。 1. サンドボックスを有効にする（そして脱出口を塞ぐ） サンドボックスは Claude Code が実行する Bash コマンドを OS レベルで隔離する機能です。macOS では Seatbelt（macOS 標準のサンドボックス機構）、Linux では Bubble Wrap（軽量コンテナ隔離ツール）が使われます。 現在の状態は /sandbox コマンドで確認できます。設定ファイルで明示的に有効化するには: 1 2 3 4 5 6 { "sandbox": { "enabled": true, "allowUnsandboxedCommands": false } } ポイントは allowUnsandboxedCommands: false です。デフォルトでは allowUnsandboxedCommands: true になっており、サンドボックス制限でコマンドが失敗した場合、Claude がユーザーの許可を得た上で dangerouslyDisableSandbox パラメータ付きでリトライできる仕組みになっています。allowUnsandboxedCommands: false を設定して初めて、この脱出口が完全に塞がります。 ...

Anthropic が 2026年1月にリリースした「Claude Cowork」は、従来の AI チャットとは根本的に異なる「AI に仕事を丸投げできる仕組み」です。本記事では、Cowork の全機能・料金プラン・セットアップ手順・活用事例20選・セキュリティ対策までを網羅的にまとめます。 Claude Cowork とは — 「AI チャット」ではなく「AI の同僚」 通常の AI チャット（ブラウザ版 Claude）は「アドバイスをくれる相談相手」です。構成案は提案してくれますが、実際にファイルを作るのは自分です。一方 Cowork は、フォルダの中身を読み書きし、計画を立て、成果物を納品してくれる「隣の席の同僚」です。 5つのコア能力 ファイル直接操作 — PC 上のファイルを直接読み書き。手動アップロード不要 タスクの自動分解 — 複雑な作業をサブタスクに分解して並行実行 プロフェッショナル品質の出力 — 数式入り Excel、見栄えの良い PowerPoint を生成 長時間処理 — 通常チャットのタイムアウト制限なし マルチタスク — 複数タスクをキューに入れて同時処理 料金プラン（2026年3月時点） プラン 月額 特徴 Pro $20（約3,000円） 個人利用の標準プラン。週数回の利用なら十分 Max 5x $100（約15,000円） Pro の5倍の利用枠。毎日使うユーザー向け Max 20x $200（約30,000円） Pro の20倍。1日中フル稼働させたいヘビーユーザー向け Team $25〜/人 5名以上のチーム向け。管理機能付き Enterprise 個別見積もり SSO、監査ログ等の企業向け機能 注意: 2026年4月1日から日本の消費税10%が加算されます（Pro なら約3,300円/月）。 利用枠は「5時間のローリングウィンドウ」でリセット。Cowork は通常チャットよりはるかに多く消費するため、簡単な質問はチャットで、ファイル操作や自動化が必要なタスクだけ Cowork で、という使い分けが重要です。 ...

Claude Desktop の Preview 機能に、画面上の要素をクリックするだけで DOM 要素を直接指定できる機能が追加されました。「ヘッダー右のボタンの…」のような言葉での説明が不要になり、フロントエンド開発のワークフローが大きく変わります。 概要 Claude Code の開発者である Lydia Hallie 氏が X で紹介したこの機能では、Claude Desktop の Preview パネルで実行中のアプリをプレビューしながら、修正したい UI 要素をクリックで指定できます。 クリックすると Claude は以下の情報を自動的に取得します: HTML タグ名 CSS クラス 主要なスタイル 周辺の HTML 構造 クロップされたスクリーンショット React アプリの場合は以下の情報も取得されます: ソースファイルのパス コンポーネント名 Props の情報 使い方 Claude Desktop で Preview パネルを開く 修正したい部分をクリックする 「ここを青にして」のように指示する これだけで Claude が該当要素を特定し、コードを修正してくれます。 活用シーン デザイン修正の高速化: 色、サイズ、レイアウトの微調整をクリック＋自然言語で即座に反映 非エンジニアによる UI 変更: コードを読めなくても、画面を見ながら変更指示が可能 バグ箇所の特定: 表示がおかしい要素をクリックするだけで、該当コンポーネントとソースファイルを特定 技術的な仕組み Preview 機能の裏側では、.claude/launch.json で定義された開発サーバーが起動し、ヘッドレスブラウザと接続されます。Claude はスクリーンショット撮影、DOM 検査、クリックシミュレーション、ネットワーク監視などを直接実行できます。 ユーザーが要素をクリックすると、その要素のメタデータ（セレクタ、タグ、テキスト、ソース位置）が Claude Code のセッションコンテキストに自動的に注入される仕組みです。 ...

NotebookLM の「専門特化型ノート」を使って、テーマごとにノートブックを分けることで「20人の専門家チーム」を構築する方法を紹介します。元ネタは えーたん/AI×時短で仕事効率化(@ai_jitan) さんの投稿です。 なぜ NotebookLM が「専門家」になるのか NotebookLM の最大の強みは、ユーザーが入れた資料だけを根拠に回答すること。ネットの一般論ではなく、ストックした信頼できる情報源からのみ回答を生成します。さらに、すべての回答に引用元のリンクが付くため、根拠の確認も簡単です。 この仕組みを活かして、テーマごとにノートブックを分ける。たったこれだけで、各ノートブックが「その分野の専門家」として機能し始めます。 1つの AI に何でもかんでも聞くのと、20人の専門家に分けて聞くのでは、回答の精度がまったく違います。 専門家ノートの作り方（共通4ステップ） NotebookLM で新規ノートブックを作成する タイトルに「○○専門」と設定する（例：「マーケティング専門」） 「ソースを探す（Fast Research）」で、5つのプロンプトを順番に実行する 情報が集約されたら、あなたの課題を入力するだけ 20人の専門家一覧 1. 業務改善コンサルタント ムダを見つけて仕組みに変える専門家。属人化している作業、毎回ゼロから作っている資料、形骸化した会議などの「見えないコスト」を洗い出します。 Fast Research 用プロンプト例: 「業務プロセスの可視化と改善手法（BPR、リーン等）を具体例付きで解説した記事を収集」 「属人化の解消とナレッジマネジメントの実践方法を詳しく紹介した記事を収集」 「業務自動化（RPA・ノーコード等）の導入手順と成功事例を解説した記事を収集」 2. マーケティングコンサルタント 集客戦略、SNS運用、競合分析、KPI設計まで幅広くカバー。 Fast Research 用プロンプト例: 「デジタルマーケティングの最新手法と成功事例を詳しく解説した記事を収集」 「SNSマーケティングとコンテンツ戦略の具体的な手法を解説した記事を収集」 3. コピーライター メール、提案書、LP、SNS投稿など「伝わる言葉」を作る専門家。 Fast Research 用プロンプト例: 「売れるキャッチコピーの作り方と名作事例を詳しく解説した記事を収集」 「ランディングページのライティング手法とコンバージョン改善策を紹介した記事を収集」 4. データアナリスト データに基づいた判断ができるようになる右腕。売上予測、A/Bテストの設計、KPIの設定をサポート。 5. 営業コーチ 新規開拓の方法、クロージングの話法、断られたときの切り返し方まで。営業スキルを「型」として共有できます。 6. プロジェクトマネージャー タスクの優先順位の付け方、進捗の可視化方法、トラブル発生時の対応手順を体系的にアドバイス。 7. 広報・PRアドバイザー プレスリリースの書き方、メディアへのアプローチ方法、SNS公式アカウントの運用方針をカバー。 8. 心理学アドバイザー 部下のやる気を引き出す声かけ、顧客の購買意欲を高めるプレゼン手法、チームの信頼関係を築くコミュニケーション術。 9. カスタマーサクセスマネージャー 解約の兆候を早期に察知する方法、顧客オンボーディングの設計、アップセルの提案タイミングなど。 10. 人事コンサルタント 「面接で何を聞くべきか」「どう評価すべきか」「入社後にどう育てるか」まで体系的にサポート。 11. 交渉・ファシリテーションアドバイザー 会議を30分で終わらせる進行術、交渉で双方が納得する落としどころの見つけ方など。 12. 財務アドバイザー 財務諸表の読み方、投資の判断基準、キャッシュフロー管理をカバー。 ...

「資金調達の翌日にCTOが辞めて、コードが書けないCEOだけ残った」——こんな生々しい失敗談が5,700社以上も集められたデータベース Startups.RIP が話題になっている。 Startups.RIP とは Startups.RIP は、Y Combinator（YC）出身の失敗・買収されたスタートアップ1,737社以上について、研究レポート、再構築プラン、技術仕様をまとめたプラットフォームだ。「Dead YC Startups, Alive Ideas」をコンセプトに、2005年から現在までのYCスタートアップを網羅している。 作者の Oscar Hong 氏が、失敗したスタートアップを分析する中で「アイデアが悪かったのではなく、タイミング・市場・技術が準備できていなかっただけ」というパターンを発見し、このデータベースを構築した。 主な機能 失敗要因の詳細分析 単なる失敗リストではなく、各スタートアップについて以下の情報が整理されている: 失敗の要因分析: なぜ事業が停滞・終了したのか 何がうまくいっていたか: 失敗の中にも成功要素はある バッチ情報・創業者情報: YCのどのバッチ出身か、誰が創業したか 現代技術での再構築プラン 各スタートアップについて、2026年の技術スタックで再構築するならどうなるかという「ビルドプラン」が用意されている: 現在の市場分析: 当時と今で市場がどう変化したか コア機能の設計: 何を中心に据えるべきか Go-to-Market 戦略: 現代のチャネルでどう展開するか DBスキーマ・API設計: 技術的な実装の青写真 AIに実装させる場合のプロンプト: 生成AIを活用した開発アプローチ アイデアの進化の可視化 失敗したスタートアップと、その後成功した類似サービスの比較機能もある: Posterous → Substack Parse → Supabase こうした「アイデアの進化」を視覚的に追えるのは、起業を考えている人にとって非常に参考になる。 技術的な背景 Startups.RIP 自体は Next.js（TypeScript）+ Tailwind CSS で構築されている。興味深いのは、このデータベースの調査・分析に Claude Agent SDK が Deep Research エージェントとして使われている点だ。AIを活用して大量のスタートアップ情報を体系的に整理するという、まさにAI時代ならではのアプローチといえる。 活用方法 このデータベースは以下のような場面で役立つ: 起業準備: 似たようなサービスを考えているなら、過去の失敗から気をつけるべきポイントがわかる 技術選定の参考: 再構築プランに含まれる技術スタックやDB設計は、実際の開発の参考になる 市場調査: 特定の領域でどんなスタートアップが失敗し、なぜ失敗したかを俯瞰できる 読み物として: 純粋にスタートアップの栄枯盛衰を追うだけでも面白い まとめ 失敗したスタートアップのデータベースは Failory や CB Insights など他にもあるが、Startups.RIP の特徴は「再構築プラン」まで踏み込んでいる点だ。単に「なぜ失敗したか」だけでなく、「今ならどう作るか」まで提示することで、失敗を次の挑戦への具体的なヒントに変えている。 ...

X（旧 Twitter）で VIA(@Via00Via) 氏が投稿した、フリーランスの厳しい生存率と月収100万円の壁を超えるための「覚悟」についての記事が話題になっている。中小企業白書のデータを交えながら、その要点を整理する。 フリーランスの廃業率：数字が示す厳しい現実 日本のフリーランスの廃業率は以下のように報告されている： 1年以内: 約4割が廃業 3年以内: 約6割が廃業 10年後: わずか1割程度しか生き残れない 多くの人が「スキルさえあれば」と信じて参入するが、現実はもっとシビアだ。 月収100万以下のフリーランスに共通する行動パターン 月収100万円という壁を前に足踏みしている人には共通点がある。それは 無意識のうちに「今の延長線上」の努力に逃げていること だ。 低単価な案件を寝る間も惜しんで数でこなす。一見すると努力に見えるが、本質的には以下のリスクから目を背けている： 高単価な提案をして断られるリスク 責任範囲を広げる恐怖 今の作業を繰り返すだけで壁を越えようとするのは、正直やめたほうがいい。 「時給」の呪縛から抜け出す なぜあと一歩が届かないのか。それは 「時給」という概念に縛られ、自分の時間を切り売りすることに安心しているから だ。 1万円の作業を100回こなそうとする努力は一見尊い。しかしその実態は、100万円の価値を1回で提供するプレッシャーから逃げているだけ。今のままのやり方でどうにかしようとする甘えが一番のブレーキになっている。 壁を突破するために必要な行動変革 この壁を突破したいなら、今日から行動を180度変える必要がある： 自分の安売りを即座にやめる — 作業員としてではなく、クライアントの利益に直接貢献する「事業パートナー」として振る舞う 相手の売上に責任を持つ覚悟を決める — 100万円の価値を届けるために何が必要かを考え、泥臭く提案し続ける チームで成果を出す仕組みを作る — 時には自分より優秀な人を巻き込み、個人の限界を超える 報酬は「覚悟」に比例する フリーランスの報酬は「自分がどれだけの責任を背負うと決めたか」に比例する。100万円以下で停滞しているのは、心のどこかで「今のままでも生きていける」と自分を甘やかしている証拠かもしれない。 廃業率のデータに飲み込まれる側に回るのか、それとも突き抜ける側に回るのか。その差は、今この瞬間に 「退路を断つ覚悟」 を持てるかどうかにかかっている。 成功しているフリーランスは、例外なく「覚悟」を決めた日から人生のギアが変わっている。 参考 元ポスト — VIA(@Via00Via) フリーランスの廃業率は1年で30%以上？ — ITプロマガジン

Claude Code をインストールして「で、次どうすれば…？」となっていないだろうか。導入は単なる入口に過ぎない。フック、カスタムコマンド、サブエージェントの3つを使いこなすことで、Claude Code は「1人のAIアシスタント」から「自分専用の開発チーム」へと変わる。 この記事では、X で話題になった @wad0427 氏の記事「Claude Code、インストールしたけど「で、次どうすれば…？」ってなってない？」をベースに、それぞれの機能の概要と実践的な使い方を解説する。 フック（Hooks）— 自動化ルールを仕込む フックとは、「AIが〇〇したら、自動で△△を実行するルール」のことだ。 料理に例えると、「盛り付けたら、最後に必ずパセリを振る」と自分ルールを決めておく感じに近い。Claude Code では以下のような自動化が可能になる。 AIがファイルを保存したら → 自動でコードの見た目を整える（フォーマッター実行） AIがコードを書き換えたら → 自動でテスト（動作チェック）を走らせる AIの作業が終わったら → 自動で変更履歴を記録する（コミット） つまり、毎回「フォーマットして」「テストして」と指示しなくていい。フックを設定するには Claude Code のターミナルで /hooks と打つと設定画面が出る。選択肢を選んでいくだけなので、コードを書かなくても OK だ。 フックの設定例 プロジェクトルートの .claude/settings.json（またはユーザー設定の ~/.claude/settings.json）に以下のように定義する: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 { "hooks": { "PostToolUse": [ { "matcher": "Edit|Write", "hooks": [ { "type": "command", "command": "jq -r '.tool_input.file_path' | xargs npx prettier --write" } ] } ] } } この例では、AI がファイルを書き換えるたびに Prettier が自動実行され、コードスタイルが統一される。 ...

AI エージェントが iOS アプリ開発を丸ごと自動化するオープンソースツール「Blitz」が公開された。ビルドからテスト、App Store 提出まで、これまで手作業だった工程を AI に任せられる時代が到来しつつある。 Blitz とは Blitz は、AI エージェントに iOS 開発ライフサイクルの完全な制御を与えるネイティブ macOS アプリケーション。シミュレーター/iPhone の管理、データベース設定、App Store Connect への提出まで、開発に必要な一連の操作を AI エージェントが実行できる。 GitHub リポジトリ: blitzdotdev/blitz-mac（Apache-2.0 ライセンス） 主な特徴 MCP サーバーによる AI 連携 Blitz には MCP（Model Context Protocol）サーバーが組み込まれており、Claude Code をはじめとする MCP クライアントからアプリのビルド、テスト、App Store への提出が可能になる。 自動化される範囲 コード署名とビルド: Xcode プロジェクトのビルドを AI が実行 テスト実行: シミュレーターや実機でのテストを自動化 App Store メタデータ: アプリの説明やスクリーンショットの管理 App Store 提出: App Store Connect API を通じた申請処理 iPhone MCP 関連プロジェクトとして iPhone-mcp も公開されている。AI が実際の iPhone を操作してアプリをテストし、バグを発見できる仕組みだ。 セキュリティとプライバシー MCP サーバーは 127.0.0.1 にのみバインドされ、外部ネットワークには公開されない 連絡先、写真、位置情報などの個人データにはアクセスしない 画面キャプチャは iOS シミュレーターウィンドウに限定 ネットワーク通信は Apple の App Store Connect API と GitHub のリリース API（更新チェック用）のみ 技術スタック SwiftUI で構築されたシングルターゲットアプリ Swift Package Manager によるビルド CLAUDE.md ファイルによるアーキテクチャドキュメントが整備されている iOS 開発の未来 従来の iOS 開発では、Xcode での手動操作が多くの時間を占めていた。Blitz のようなツールが成熟すれば、開発者はアプリのロジックや UX 設計に集中し、ビルド・テスト・提出といった反復的な作業は AI に委ねるワークフローが一般的になるかもしれない。 ...

AI エージェントが外部ツールやデータソースに安全にアクセスするための標準プロトコル「MCP（Model Context Protocol）」が、OAuth 2.1 ベースの認証・認可フレームワークを導入し、エンタープライズ環境での採用が加速しています。本記事では、MCP の認可仕様の仕組みと、企業導入における設計ポイントを解説します。 MCP とは MCP（Model Context Protocol）は、AI アシスタントがツール、データソース、サービスといった外部リソースに接続するための標準プロトコルです。Anthropic が提唱し、オープンな仕様として公開されています。 MCP を使うことで、AI エージェントは以下のようなことが可能になります： 社内データベースへのクエリ実行 外部 API の呼び出し ファイルシステムの操作 各種 SaaS サービスとの連携 OAuth 2.0 から 2.1 へ：何が変わったのか OAuth 2.1 は OAuth 2.0 の後継仕様であり、これまで個別の RFC やベストプラクティスとして散在していたセキュリティ強化策を統合したものです。MCP がベースとする OAuth 2.1 では、以下の重要な変更が含まれています： 変更点 内容 PKCE 必須化 全クライアント（パブリック・コンフィデンシャル両方）で必須に Implicit フロー廃止 アクセストークンが URL フラグメントに露出するリスクを排除 リフレッシュトークンのローテーション パブリッククライアントでのトークン漏洩時の影響を軽減 リダイレクト URI の厳密一致 ワイルドカードによるオープンリダイレクト攻撃を防止 つまり、OAuth 2.1 は「新機能の追加」というより、OAuth 2.0 時代に発見された攻撃手法への対策を標準に組み込んだものです。 MCP の認可アーキテクチャ MCP の認可仕様では、OAuth 2.1 をベースに、AI エージェント特有の要件に対応した複数の仕組みを組み合わせています。 ...