プログラミングなしで作る「AIあんの」（チャットボット版）｜せい
※この記事は生成AIの力を借りて編集しています。 こんにちは！「チームみらい」サポーターのせいと申します！ 普段は静岡県の沼津市でフルスタックエンジニアというシステム開発の何でも屋みたいなことをやっています。 「チームみらい」の参議院選挙に向けて「アクションボード」「AIあんの」の開発のお手伝いをさせてもらいました。 今回はその中で「AIあんの」の仕組みについての解説と、そのチャットボット版についての作り方をご紹介します。 わからないことがあればなんでも遠慮なくXで聞いてみてください！ 2025年参院選のAIあんのの最後の様子は以下で見ることができます。 はじめに - なぜ私がAIあんの開発に参加したのかきっかけは新党「チームみらい」の発表2025年の参議院選挙に向けて、昨年の東京都議選に出馬した安野たかひろ氏が率いる新党「チームみらい」が発表されました。 静岡県沼津市在住の私、去年の都議
🚀 Figma MCP × Cursorで加速するUI実装とその先の工夫
はじめに 近年、プロダクト開発の現場では「Design to Code」という概念が大きな注目を集めています。 これは、デザインツールで作成されたUIデザインを直接コードに変換する技術のことで、開発効率の大幅な向上が期待されています。 この流れの中で、Figma社は、Dev Mode（開発者向けの表示モード）やCode Connect（コードとデザインの同期機能）といった機能をリリースしてきました。 このような背景の中、つい最近では「Figma MCP」が話題となりました。 私たちのチームでは、このFigma MCPとAI搭載コードエディタ「Cursor」を組み合わせることで、実際のプロダクト開発に挑戦してみました！ 本記事では、その導入過程で得られた知見、そして実際の運用における工夫について紹介します。 🤖 Figma MCPとは Figma MCPについては、こちらの記事が非常にわか
【Cursor】FigmaにアクセスしてUIコードを自動生成！
「Figmaデータからコードの自動生成できたら良いのに！」 と思いますよね。 CursorではFigmaのスクショ画像からコード生成は可能でしたが、 細かなデザイン仕様を把握していないので結局一つ一つ修正する必要があることや、 スクショして貼り付けて説明してみたいなことが面倒に思っていました。 ただ最近、FigmaのMCP Serverなるものを知り、 使い方によってはかなり実装が楽にできたので共有します！ Figma MCP Serverについて MCPについては下記の記事がとても参考になったので詳しくは割愛しますが、 AIと特定の外部サービス（今回はFigmaのAPI）とのやり取りを行えるようになる仕組みのことです。 今回は下記のFigma MCP Serverを使用してFigmaのデザインデータを取得できるようにします🏃 【2025/6/12追記】 Figmaの公式MCPサーバーが
Cursor - The AI Code Editor
あなたを驚異的な生産性へと導くために作られました。 Cursor は AI を使ってコードを書くための最高の手段です。
Figma Makeで1日でポートフォリオサイト作れた｜鈴木健太 / suzkikenta
最近、FigmaがいろいろAI関連の新しいツールを出しているということで、ちょっと試しに色々使ってみようとこの週末触っていました。 そもそもの話僕自身、映像を作り始めて20年（この間数えたらほんとうにそうだった）やっているのですが、何度もポートフォリオサイトは作っては「違うな〜」となって辞めて・・・を繰り返していました。一番最初はAppleの「iWeb」、それからはAdobe「Muse」を使ってみたり、「Squarespace」の時期もあったり。notionからサイトが作れる「SUPER」もちょっと面白かったので使っていました。「STUDIO」は残念ながら体に合いませんでした・・・なぜ・・・。 iWeb懐かしすぎてやばい それで、もう全てが面倒くさくなり、この5年くらいはInstagramのみでポートフォリオを載せていました。結論、全然インスタで十分。全く不自由無し。 あと、ポートフォリオ
v0で作ったUIをLayermateを使ってFigmaで編集する方法｜TORAJIRO
こんにちは、GaudiyデザイナーのTORAJIRO（@jirosh1998）です。 最近v0.devやFigmaMake、Lovableなどの自然言語でUIを生成できるAIツールが増えてきて、1年前に比べるとかなり精度も上がり実践導入が進んだ感じがしますね。実際Gaudiy社内でもデザイナー以外の職種も積極的に使っていて、かなり浸透してきてます。 そんな中で、v0等を使ってプロトタイピングしていると、6-7割くらいの完成度から詳細を作っていくプロセスでディティールの修正をプロンプトするのはどうも面倒で、自分でパパッと直したいのに「Figmaで調整できない」のがどうしてもネックになります。とはいえ、せっかくAIが作ったUIをFigmaで作り直すのも二度手間でコスパが悪い。 ということで、v0の生成結果をFigmaに変換する方法を紹介します。「Figmaに持っていけないじゃん〜〜」とお困りの
Figma Makeで“AI縛りLP”を作ってみた｜78回のやりとりで完成｜IKYU DESIGN
AIだけでLPができる時代が来た一休デザイナーの河村です。 LP制作で、Figmaもコードも「自分で書かない」時代が、本当に来てしまったかもしれません。 今回は「Figma Make」というFigma公式が2024年にリリースした自然言語でUIを作成・編集できる生成AIツールを使って、デザインからアニメーション、レスポンシブ対応のコード生成まで、すべてAI任せでLPを完成させてみました。その工程と、使ってみての気づきをレポートします。 実際に出来上がったLP ※ Figma Make上で、デザインからHTML/CSSファイルの生成まで完結。最終的なプロダクト反映（ファイルの保存）のみ手作業で対応しています。 なぜ“AI縛り”で作ってみようと思ったか一休では現在、CTOの伊藤直也さんを中心に、全社的にAI活用・開発を加速させています。エンジニアチームでは「まだ手で書いた方が早い」と言いつつも
作りたいサービスアイデアがあるならAIと一緒に秒でプロトタイプを作ってささっと次に進もう｜akinatada
はじめに、プロトタイプとは何か。 簡単に言うと、製品開発の成功確率を高めるための試作品のことだ。紙に絵を描いたり、簡単なプログラムを作ったり、様々な方法で機能やデザインを検証する。 プロトタイプとは？ちゃんとAIに確認しましたAI時代に突入し、世の中のスピードは加速している。AIのおかげで新しいアイデアを素早く形にできるようになり、次々と新しいサービスが市場に生まれている。 私自身、「こんなプロダクトがあったらいいのに」とさまざまなアイデアを思いつくタイプだ。そしてFigmaなどのデザインツール、STUDIOやBubbleなどのノーコード開発ツールも使えるし、簡単なコードも書けるので、プロトタイプ化は比較的早く、そしていつでもできるほうだと思っていた。 しかし、ビジネス経験やプロダクト開発経験が長くなるにつれ、「デザインフロー/プロダクト開発フローはこうあらねばならない（ありたい）」という
Claude Codeの「すぐルール忘れる問題」を解決する超効果的な方法を見つけた気がする
どうもこんにちは Claude Codeを使っている人ならみんな感じてると思いますが、CLAUDE.mdでどれだけ緻密なルールを組んでも3ラリーくらいするとすっかり忘れてどんどん適当に動き出すというどうしようもない現象があります そのたびに「ルールを守ってください」と500000000回は打ち込みましたし、指摘し疲れて「/a」で「ルールを再確認してください」というカスタムコマンドまで組んで対処しているような状況でした この問題で難しいのが、「語尾を◯◯にして」だったりそういうしょうもないロールプレイはずっと守るわりに、「事前に確認を取って」とか「このルールで報告して」とかそういう挙動系のルールをすぐ忘れるという点です これをどうにか解決できないかなーと考えていたのですが、そもそもなぜ語尾ルールは守れるのか？という部分から答えを見つけるべきだと思い調査を開始しました なぜ語尾ルールだけは守ら
【Figma × Cursor】AI連携でデザインレビューを自動化する全手順【動画連動解説】｜梅本 周作 / ajike
Figmaの新機能「DevMode MCP」と、FigmaのMCPのひとつAIツール「Talk to Figma」を組み合わせて、デザインレビューの自動化と効率化を試しました。 ※この記事はYoutubeでも解説しています 「Figmaのデザインレビュー、もっと効率的にできないかな…」 「客観的な視点でフィードバックが欲しいけど、人に見せるのは少し気が引ける…」 デザイナーなら誰しも一度はこんな悩みを抱えたことがあるのではないでしょうか。 先日、私がX（旧Twitter）に投稿した「AIでFigmaのデザインレビューが捗る方法」が、ありがたいことに多くの方から反響をいただきました。 Figma MCPのアップデートで、アノテーション（注釈）をAIに渡せるようになったので、次のようなことを試してみました。 Figmaでデザインを作成→AIと一緒にフィードバック→それを注釈としてFigmaに自
Figma AI全部使ってみた｜Akane Inoguchi
「Figma AI」は、Figmaが提供するAI機能の総称で、デザイン作業をより効率的に・直感的に行うためのサポートツールです。 とはいえ私自身、一体どんなことができるのかあまりよくわからず活用できていない状態でした。今回はそんな「Figma AI」を使って架空のLPを作ることに挑戦してみました。また、各種機能を使用してみました。 First Draft画面下にあるツールバーのキラキラしたマークを押すと以下のような機能一覧が出てきます。 Figma AIの場所このFirst Draftというツールをクリックすると4つの選択肢が表示されます。 First Draft選択後の画面Basic app：モバイルサイズのデザインが生成されるツール App wireframe：モバイルサイズのワイヤーフレームが生成されるツール Basic site：デスクトップサイズのデザインが生成されるツール Si
Google I/O の発表まとめ
tl;dr Google I/O 2025 でたくさんのサービスや機能が発表されたよ イベントに合わせて公開されたものはすべてひと通りまとめたよ 発表だけでまだ使うことのできないサービスも多いよ（アメリカ限定も多い） しばらく追記していくよ これはなに？ Google I/O 2025 の発表をまとめたもの。開発者向けに限らず、よくばって発表内容をおおよそ網羅した（書きかけのため予定）ので、気になるところだけ読んでください。発表内容が豪勢で、悲しいかな、徹夜をしてしまったので、せっかくなのでみなさんの時短になれば＆自分の覚え書きとしてまとめています。少しでも参考になれば幸いです。 こちらに今回の発表に関わる全 27 記事が一覧になっており、それらの中から押さえておくべき記事をかいつまんで簡潔にまとめます。 発表動画（Keynote）について 計約三時間の実況中継。場所はマウンテンビューの
Gamma AIとは？使い方やメリットとデメリットをわかりやすく解説 - AIポータルメディアAIsmiley
Proプランの登録の手順 1.Workspaces左上のチェックボックスをタップします。 2.次に、下記のボックスが出現するので「Settings & members」をタップします。 3.最後に「Upgrade」を押し下記料金形態から、カスタムして登録が完了です。 Gamma AIのクレジットとは？ Gamma AIのクレジットは、AIとの対話を行うための「通貨」のようなものです。 Gamma AIでAIと対話するためには一定のクレジットが必要で、そのクレジットを消費することでAIの機能を利用することができます。 試しに、「ビッグバン」についてのプレゼンテーション資料をAIに作らせると40クレジット消費しました。 実際に、1分で自動生成された資料はこちらです。 （参考：https://gamma.app/docs/-er7hhp71zumx6d6） クレジットを得る方法は、主に以下の2つ
Gemma3を自分のPCにテイムする｜ごろう
Ollamaと言うツールを使うと色々なAIが簡単に使えるんですよね。 自分のPCは、スペックも低いのでサイズの大きなAIを動かすことは、 難しいのですが小さなサイズのものは、結構動作はします。 しかし、今までのAIでは実用には性能的に難しかったんですよね。 それが最近出たGemma3:4bと言うのがあって、 これを使うと簡単な用途なら十分に使えるようになってました。 サイズも３．３GBとかなり小さい。 なので、もうご存じの方もたくさんいるとは思いますが 使わないのはもったいないので 自分のPCにインストールして使用する方法をご紹介します。 Windows環境を前提に説明します。 Ollamaのダウンロード最初にOllamaをインストールします。 これは、Gemma3に限らず色々なAIをダウンロードして チャットが出来る様になるツールです。 APIとしても使えるようになります。 そして、チャ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Layermate - AI-powered design assistant for Figma
v0 by Vercel
https://x.com/seootaku/status/1929361112476344416
https://x.com/Mieruca_kun/status/1928114281318601080
Visual Electric
Home - Anthropic
