Figma on hdknr blog

Claude Codeをメインのデザインツールに：Tailwind CSSデザイナーSteve Schogerの1時間解説動画

Mon, 23 Mar 2026 00:00:00 +0000

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の品質を大幅に向上させることを目指している。

デザイナーのためのAI活用術5選 — 制作スピードを劇的に上げる実践テクニック

Wed, 18 Mar 2026 00:00:00 +0000

Claude Code × Figma 連携、AI モックアップ、AI 素材生成など、デザイナーの制作スピードを劇的に上げる AI 活用術5選を解説。

Figma プラグイン Image Translator：画像からテキストを抽出して多言語翻訳

Wed, 11 Mar 2026 00:00:00 +0000

海外サービスの UI を調査するとき、スクリーンショット内のテキストを手作業で翻訳するのは地味に手間がかかる。TSUMIKI INC. の鈴木慎吾氏（@shingo2000）が公開した Figma プラグイン Image Translator は、この作業を自動化してくれる。

Image Translator とは

Image Translator は、Figma 上で選択した画像からテキストを自動抽出（OCR）し、指定した言語に翻訳する Figma プラグインだ。

主な特徴：

画像からのテキスト自動抽出 — スクリーンショットや UI キャプチャからテキストを認識
多言語翻訳 — 英語、日本語、中国語、スペイン語、韓国語、ポルトガル語などに対応
2つの表示モード — Figma のアノテーション機能で表示するモードと、テキストレイヤーとして配置するモードを選択可能

使い方

Figma で翻訳したい画像を選択する
プラグインメニューから Image Translator を起動する
翻訳先の言語を選択する
抽出・翻訳されたテキストがアノテーションまたはテキストレイヤーとして表示される

活用シーン

海外サービスのデザイン調査

競合分析や UI リサーチで海外アプリのスクリーンショットを収集した際、画面内のテキストを素早く日本語で確認できる。翻訳結果がアノテーションとして画像に紐づくため、チームメンバーとの共有にも便利だ。

多言語対応の確認

自社サービスの多言語版スクリーンショットを取り込み、各言語のテキストが正しく表示されているか確認する用途にも使える。

まとめ

Image Translator は、デザイン調査における画像内テキストの翻訳という地味だが頻出する作業を自動化してくれるプラグインだ。海外サービスの UI を日常的に調査しているデザイナーにとって、ワークフローの効率化に役立つだろう。

Figma Community: Image Translator
作者: 鈴木慎吾 / TSUMIKI INC.

Figma Make を使いこなす実践テクニック

Mon, 09 Mar 2026 00:00:00 +0000

Figma が提供する AI デザイン機能「Figma Make」を実務で活用するための実践的なコツをまとめる。1000 回以上のプロンプト作成を通じて見つかった知見や、効率的なワークフローを紹介する。

Figma Make とは

Figma Make は、Figma に統合された AI 搭載のデザイン生成ツール。テキストプロンプトからUIデザインを自動生成でき、AutoLayout 付きの構造化されたデザインを高速に作成できる。

実践テクニック

1. Context 設計を明確にする

AI に指示を出す前に、以下を明確にしておくことが重要:

ユーザーペルソナ: 対象ユーザーの年齢層、IT リテラシーなど
実行アクション: 何をデザインするのか具体的に
制約条件: ブランドカラー、フォント指定、アニメーション仕様など

例: 「40代のITリテラシーが低いユーザー向けの、
シンプルで直感的なダッシュボード画面を作成してください。
フォントはNoto Sans JP、メインカラーは#2563EB」

2. 「大枠 → ピンポイント」の2段階アプローチ

一度に完璧を目指すのではなく、2段階で進める:

第1段階（大枠）: 初期プロンプトで全体構造を作る

対象画面の詳細説明
必要な機能リスト
デザインテイスト（既知のサービス名で参照すると有効）

第2段階（ピンポイント）: ファイル名やクラス名を指定して細部を修正

3. デザインシステムを活用する

既存のテンプレートやサンプルをインポートして効率化する:

既存のデザインをキャンバスに置いて「これっぽく作って」と指示
Guidelines.md にデザインシステムとコーディングルールを記載
「〇〇画面の△△表と同様の UI で」と既存 UI を参照指示

4. Figma Design との往復ワークフロー

Figma Make 単体で完結させるのではなく、通常の Figma Design と組み合わせる:

Figma Make でデザインを生成
コピーして Figma Design にペースト
Design で手動修正して期待通りに調整
修正版を再度 Figma Make に取り込んで再実行

このサイクルを回すことで、レイヤー構造が整理され、より高品質なコード生成が実現する。

Claude-Native Designer — デザイナーが「作る人」になるFigma MCP × Claude Codeワークフロー

Thu, 05 Mar 2026 00:00:00 +0000

Claude-Native Designer — デザイナーが「作る人」になる Figma MCP × Claude Code ワークフロー

@felixleezd（Felix Lee）氏のポストが注目を集めています。ADPList の共同創業者であり、1,500 人以上のデザイナーに Vibe Coding を教えてきた Felix Lee 氏が、4 ヶ月の実践から導いた「Claude-Native Designer」のワークフローを公開しました。

If you want to ship products you designed, stop using Figma only. Do it on Claude Code instead.

Autonomous AI = memory + planning + tools + safety + collaboration. It’s a system, not a prompt.

「デザインの未来はコードを学ぶことではない。ビルドすることを学ぶことだ」— この記事の核心は、デザイナーが抱えてきた「アイデアはあるが実装できない」という壁が、Claude Code によって構造的に消滅したという主張です。

デザイナーの天井 — 7 年間の経験が語る構造的問題

Felix Lee 氏は Gotrade（YC S19）と ADPList で 7 年間デザインに携わってきました。その間、デザイナーが直面する共通の天井を目撃しています。

「Figmaは100%不要」宣言の真意 --- Claude Codeが溶かすデザインとコードの境界

Wed, 04 Mar 2026 00:00:00 +0000

「Figma は 100% 不要」宣言の真意 — Claude Code が溶かすデザインとコードの境界

@kawai_design 氏が X で公開した記事が議論を呼んでいます。

Claude Code を使えば使うほど、Figma を開く理由が消えていく。これは私だけの感覚ではありません。今、世界中のデザイナーが同じ疑問を抱えています。私の結論は明確です。Figma は 100% 不要。

同時期に UX Collective に掲載された Michael Buckley 氏の記事「Figma はデザインツールではない。コードを避けるためのピタゴラスイッチだ」も世界のデザイナーを震撼させました。本記事では、この「Figma 不要論」の構造と、Figma 自身の対応、そして AI 時代のデザインワークフローの変化を技術的に整理します。

「ピタゴラスイッチ」批判 — 何が問題なのか

UX Collective の記事が突いた急所

Michael Buckley 氏の記事は、Figma でのデザイン作業を**ルーブ・ゴールドバーグ・マシン（ピタゴラスイッチ）**に例えました。

Figma でボタンを作る作業:
1. Auto Layout を設定する
2. パディングを調整する
3. ホバーステートを作る
4. インタラクションを設定する
5. プロトタイプモードで動作確認する
6. 開発者に引き渡す
7. 開発者がコードで再実装する
開発者が同じボタンを作る作業:
<button className="btn-primary">送信</button>
→ 5 分で完了。ホバー、アクセシビリティも含めて

「パンケーキを返すためにピタゴラスイッチを作るようなもの」— この比喩が刺さったのは、多くのデザイナーが無意識にこの非効率を受け入れていたからです。

本質的な問題: デザインとコードの「翻訳」

Figma の存在意義はデザインとコードの間の翻訳レイヤーにあります。

従来のワークフロー:
デザイナーの意図
→ Figma でビジュアル化（翻訳 1）
→ デザインスペック作成（翻訳 2）
→ 開発者がコードに変換（翻訳 3）
→ 実装結果をデザイナーがレビュー（逆翻訳）
翻訳のたびに情報が劣化する:
- ピクセルのズレ
- インタラクションの解釈違い
- レスポンシブ挙動の不一致
- アクセシビリティの抜け漏れ

AI がデザインの意図を理解し、直接コードを生成するようになれば、この翻訳プロセス自体が不要になります。@kawai_design 氏の「翻訳の元データである Figma ファイルも要りません」という指摘は、ここに根ざしています。

# Anthropic 社内チームの Claude Code 活用 — マーケから法務まで、全部門が「自分で自動化」する時代

Fri, 27 Feb 2026 00:00:00 +0000

Anthropic 社内チームの Claude Code 活用 — マーケから法務まで、全部門が「自分で自動化」する時代

Anthropic 公式記事: How Anthropic teams use Claude Code 再現記事: Claude Code で広告バナー200本を15分で作る手順紹介ポスト: commte

はじめに

Anthropic が「自社のチームが Claude Code をどう使っているか」を公式ブログで公開した。注目すべきは、エンジニアリングチームだけでなく、マーケティング、法務、データサイエンス、デザインといった非技術部門が、コードを1行も書かずに高度な自動化を実現している点。

特にマーケティングチームの事例は、ツイートでも「えぐい広告手法」として話題になり、実際に再現して15分で広告バナー200本を生成した記事も登場した。

マーケティングチーム — たった1人で10倍の成果

チーム構成

驚くべきことに、Anthropic のグロースマーケティングチームはエンジニアがゼロの1人チーム。担当の Austin Rau 氏は、元々ターミナルの開き方すら知らなかったという。

それが、非技術者向けガイドを見てから1週間で、Figma プラグインと広告コピー生成ワークフローの両方を構築した。

4つの自動化事例

1. Google Ads の広告コピー生成（2時間 → 15分）

数百件の既存広告 CSV を Claude Code に読み込ませ、パフォーマンスの低い広告を自動特定。改善案をサブエージェント方式で生成する。

サブエージェント設計のポイント:

エージェント	専門	制約
headline-writer	見出し生成	30文字以内
description-writer	説明文生成	90文字以内

1つのプロンプトで全部やらせるのではなく、タスクごとに専門エージェントを分けることで、文字数制約を守りつつ品質を維持する。

2. Figma プラグインでバナー一括生成（数時間 → 0.5秒）

Claude Code で自作した Figma プラグインが、テンプレートのテキストノードを CSV データで自動差し替え。最大100パターンのバナーを一括生成する。

業務フローの設計にPowerPointではなくBPMNを使うべき理由 — Claude Code時代の詳細設計

Mon, 16 Feb 2026 00:00:00 +0000

業務フローの設計にPowerPointではなくBPMNを使うべき理由 — Claude Code時代の詳細設計

はじめに

業務システムの設計でSwim Lane（スイムレーン）形式の業務フローを書くとき、多くの現場ではPowerPointやFigmaが使われています。見た目は整えやすく、関係者への説明資料としてはよくできています。

しかし、この「人間が読むための図」を設計の源泉にしてしまうと、あと工程で大きなコストが発生します。特に、Claude CodeのようなAIエージェントを開発に活用する場合、設計成果物のフォーマット選択が開発効率を決定的に左右します。

本記事では、実際にPowerPointのスライドからBPMN 2.0に変換した経験をもとに、BPMNを採用する利点を解説します。

PowerPointの業務フローが抱える問題

PowerPointのスライドに描かれた業務フローは、本質的に「画像」です。

PowerPoint (.pptx)
├── 図形の座標とスタイル情報
├── テキストボックスの文字列
└── グループ化とレイヤー

これは人間が見るには十分ですが、次のような問題があります。

構造情報がない: 「この矢印がどのタスクからどのタスクへ向かっているか」をプログラムが読み取れない
アクターの定義が曖昧: レーンの境界が図形の配置で表現されているだけで、意味的な紐付けがない
分岐条件が自然言語: ゲートウェイの条件が図中のテキストに埋め込まれ、機械的に検証できない
フロー間の接続が不明確: 複数スライドにまたがるフローの接続点（「次のフローへ」）が視覚的な慣習に依存

BPMN 2.0とは

BPMN（Business Process Model and Notation） は、業務プロセスを図式化するための国際標準記法です。OMG（Object Management Group）が策定し、ISO 19510として国際標準化されています。現行バージョンはBPMN 2.0.2です。

BPMNの最大の特徴は、人間が理解できるフロー図と機械が処理できるXMLが一つのファイルに同居している点です。プールとレーン（Swim Lane）でアクターを表現し、タスク・ゲートウェイ・イベントでプロセスの流れを記述します。

BPMN 2.0がもたらす構造化

BPMN 2.0はXML形式で、見た目と意味の両方を持つフォーマットです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<bpmn:process id="Process_1" isExecutable="false">
 <bpmn:laneSet id="LaneSet_1">
 <bpmn:lane id="Lane_reception" name="太平受付担当">
 <bpmn:flowNodeRef>r1</bpmn:flowNodeRef>
 <bpmn:flowNodeRef>r2</bpmn:flowNodeRef>
 </bpmn:lane>
 <bpmn:lane id="Lane_system" name="システム" />
 </bpmn:laneSet>

 <bpmn:task id="r1" name="修理内容の特定" />
 <bpmn:exclusiveGateway id="d2" name="保証範囲?" />
 <bpmn:sequenceFlow sourceRef="r1" targetRef="d2" />
</bpmn:process>

この構造から、以下がプログラム的に読み取れます。

Locofy

Wed, 04 Sep 2024 00:00:00 +0000

Locofy

Figmaで作ったデザインをLocofyで自動生成してみた

Figma

Tue, 20 Aug 2024 00:00:00 +0000

オートレイアウト

FigmaのREST APIで取得したJSONデータから、FrameがAuto Layoutかどうかを判断するには、以下のフィールドをチェックします：

layoutMode: このフィールドが存在し、値が "HORIZONTAL" または "VERTICAL" であれば、そのFrameはAuto Layoutが適用されています。

例えば、以下のようなJSON構造です：

1
2
3
4
5
6
7


{
 "id": "123",
 "name": "Frame 1",
 "type": "FRAME",
 "layoutMode": "HORIZONTAL",
 ...
}

この例では、layoutModeが "HORIZONTAL" なので、このFrameはAuto Layoutが適用されています。

ソース: Copilot との会話、 2024/9/19 (1) Figma オートレイアウトの使い方とうまくできないときの … - Designup. https://designup.jp/figma-auto-layout.html. (2) 【Figma】オートレイアウトの使い方完全ガイド（Auto Layout …. https://tagnote.net/figma/auto-layout/. (3) 【Figma】フレームの使い方マスター編〜グループとの違いや …. https://implist.dev/entries/figma-frame-and-auto-layout-group. (4) Working with Auto Layout in Figma - a Self-Guided Tutorial. https://www.figma.com/community/file/1207414800398401244/working-with-auto-layout-in-figma-a-self-guided-tutorial. (5) FrameNode | Plugin API - Figma. https://www.figma.com/plugin-docs/api/FrameNode/.

Gastby関連

Mon, 19 Aug 2024 00:00:00 +0000

Gatsby 関連

Figram

Locofy (Convert Figma to Gatsby: Get pixel perfect, high-quality code with Lightning)
[初心者向け]はじめての Next.js - Figma×Locofy でソースコードを生成して自分のプロジェクトに適用する

Figma to NOCODE:

Webflow, Frame (Figram プラグイン)