Web担メモ
ログイン メモする
Web担メモ
  • HOME

Web担当者が、日々の業務の中で役立ったことをメモしています。


FigmaのデザインカンプからFigma for VS Codeを使ってコーディング

U3
2025/2/18
2025/2/18

編集にはカテゴリー認証が必要です ▼受付終了にする

https://www.tokyofreelance.jp/coding-ai-figmaforvscode/

コメント

コメントはまだありません。

関連する投稿

Google AI Studio
Google AI Studioは、GoogleのGeminiを使って、チャット、会話、メディア生成、開発ができるツール。https://aistudio.google.com/prompts/new_chat音声データを丸ごとアップロードしたら声を聞き分けて誰の発言かを把握した上で議事録を作成してくれる、だけでなく、会議中の感情まで把握してくれる。とか、例えばスクリーン上のExcelの操作画面を共有して、操作しながらここはどうしたらいいの、と音声対話で質問ができるとか、本当に進化がすさまじいです。マンツーマンパソコン講師は不要になります。が、パソコン講師を要するひとは最初にこのAIの使い方のレクチャーする人が必要かも参考動画【神回！】貴方の人生を変える無料AI達！全て無料で使えるGoogle AI Studioが凄すぎる！【スマホでもOK！どれもマジ最高！】

AI

  • 0
  • 14
  • 0
U3
Geminiで音楽生成AIモデル「Lyria 3」が利用可能に

AI

  • 0
  • 8
  • 0
U3
Yoom（ユーム）
Yoom（ユーム）は、700以上のアプリやSaaS（Slack, Salesforce, Gmailなど）をノーコードで連携し、AIを活用して業務フローをまるごと自動化する「ハイパーオートメーションツール」です。国産ツールで日本語に対応しており、定型業務からAIによる判断を伴う高度な作業まで「AI社員」として自動化できます。 主な特徴とできること「AI社員（AIワーカー）」機能: AIが依頼のニュアンスや文脈を理解し、自律的にメール作成やデータ入力、ドキュメント要約などを処理。ノーコード連携: プログラミング不要で「Aが起きたらBをする」という自動化フローを設定。国産SaaSに強み: 日本の業務現場で使われている主要SaaSやチャットツール（Slack, Chatwork, Teams）との連携が得意。主な自動化例: フォーム回答の自動Slack通知、顧客情報を検索してCRMへ自動入力、議事録の要約など。小規模チームから企業まで、業務自動化により人手不足解消や生産性向上を目指すツールです。

AI

  • 0
  • 4
  • 0
U3
ディープリサーチってなんだ
AIにおける「ディープリサーチ（Deep Research）」というのは、特定の1社が独占している名称ではなく、各社が提供し始めた「新しい検索スタイル」の一般的な呼び名になりつつあります。Google、OpenAI、Perplexityの3社が、それぞれ自社の機能にこの名前を使っています。なぜ「ディープリサーチ」という言葉が溢れているの？もともとは「自律型AIエージェントによる深い調査」というAI業界の技術トレンドがあり、2024年末から2025年にかけて、各社がこぞってこの名称を採用したためです。提供会社 サービス上の名称特徴GoogleGemini Deep ResearchGoogle検索の膨大なデータに加え、GmailやGoogleドライブ内の資料も横断して調査できる。OpenAIOpenAI Deep ResearchChatGPT（Pro以上）で利用可能。非常に長い時間をかけて100以上のサイトを巡回し、論文級のレポートを作る。PerplexityPerplexity Deep Research検索専用AIとしての強みを活かし、対話しながら高速かつ高精度に情報をまとめる。どう違うんだ調べるデータの種類によって選択できます。 Google (Gemini): Google Workspace内のメールや資料を含めて調べたい場合に適しています。OpenAI (ChatGPT): 公開ウェブ情報を深く、長く、網羅的に分析するのに適しています。Perplexity: 最新情報を、出典を明確にして、素早く調べたい場合に適しています。

AI

  • 0
  • 11
  • 0
U3
GPT-5 が発表されました（2025/8/7）
OpenAIからGPT-5でました。Copilotでも選択できるみたいです従来モデルの比較してハルシネーションが８割減。無料会員も使えるようです。https://openai.com/ja-JP/index/introducing-gpt-5/GPT‑5 はこれまでのモデルよりも同調性が低く、不要な絵文字の使用も少ないですが、きめの細かい、思慮に富んだフォローアップを行います。このため、「AI に話しかけている」というよりは、PhD レベルの知識を持つ親切な友人とチャットしているように感じられるはずです。同調性が低くなったChatGPT に「チャッピーの性格が変わってしまった」「元のチャッピーを返して」という声も聞かるようです。

AI

  • 0
  • 17
  • 0
U3
Webデザイナー＋コーダー＝Readdy
ReaddyとはAIを使ったWebデザインも、少し前までは、まだ微妙なものが多かった気がする。2025年現在、Readdyを使えばTailwindなどを使って割とセンス良く、もうそのまま使えそうな感じのサイトを作ってくれる。Readdy：https://readdy.ai/例えば現ホームページのURLと、こんな感じにしたいというページのURLを示して、「現在のホームページの内容はこれです。これをこのサイトのようなイメージでリニューアルして」と入力すると、デザインを作ってくれる。コードも出力してくれる。有料版ならFigmaのデザインモックも出力してくれる。しかも商用利用OKとのことです。コードが出力されるので、Cursorで読み込んで、CursorのAIを使って編集することも可能。Node.jsで出力されるので、サーバーにアップするにはbuildが必要だが、その辺よくわからない場合は、最初に設定すればHTMLで出力する形で作成するもできる。コードの修正ができるWebディレクターが１人いれば、デザイナーさんとコーダーさんの役目をReaddyが果たしてくれるという感じ。AIへの指示はデザイナー、コーダーさんに出すメール等と同じ感じで書けば十分対応してくれる。むしろ挨拶文とか不要だし、タメ語でも気を悪くしないし、文章を整えなくて良いからAIのほうが指示するの楽かもしれない。費用（2025年8月現在）月額19ドル（単月契約の場合）：1ドル160円換算で3000円ちょっと。価格：https://readdy.ai/pricing無料プランは毎月250クレジットが付与。AIにデザインを新規生成するたびに25クレジット、既存デザインをAIで編集するたびに10クレジットが消費されます。（一部の機能を除いて無料で試せるので、調子に載ってしょうもない文字の変更とかをバンバンお願いしていたらクレジットを使い果たして翌月まで使えなくなってしまった。下層ページを作ってもらったり動きをつけてもらったりに使えばよかった）250クレジットあれば下層ページ含めて1サイトのデザインを作ることは十分可能。AIに出力してもらったReaddyの説明ReaddyはAIを活用したウェブサイトビルダーです。概要Readdyは自然言語で要件を伝えるだけで、プロ仕様のウェブサイトを短時間でデザイン・構築できるプラットフォームです。チャット形式でビジネスのビジョンやセクション構成を伝えると、AIが瞬時に美しいレイアウトを生成します readdy.ai。主な特徴AIチャットによるデザイン生成テキストで「こんな感じのランディングページを作りたい」と伝えるだけで、AIが即座にUIを構築。ビジュアル編集機能色の変更や新しいセクションの追加も、同じくチャット操作で簡単に実行可能。ワンクリック公開＆コード／Figma出力満足できたらそのまま公開できるほか、クリーンなHTML/CSS/JSコードやFigmaファイルとしてエクスポートも可能 Product Hunt。ローンチ情報と評価2025年に正式ローンチProduct Hunt上で4.8／5.0（レビュー数52件）と高評価を獲得 Product Hunt小規模スタートアップからデザインリソースが限られた企業、エージェンシーまで幅広く活用されています。提供元企業：Readdyはシンガポール法人の INTERACTIVE LINK PTE. LTD.（UEN: 202244806R）によって開発・運営されています。主たる事業はゲームやサイバーセキュリティを除くソフトウェアおよびアプリケーションの開発・出版で、2022年12月16日に設立されました。所在地は10 Anson Road, #26-08A International Plaza, Singapore 079903です readdy.aiSingapore Business Directory創業者・背景：創業者のFrank Zhu氏は開発者から起業家へ転身し、10年以上にわたるプロダクト開発経験を有します。社内ツールでのAIデザイン機能の実験を経て、「非デザイナーでも直感的に使える対話型のUI生成ツール」を目指してReaddyを立ち上げました readdy.aiAI技術の中核：Readdyは大規模言語モデル（LLM）と生成AIを駆使し、ユーザーの自然言語による指示をもとにプロフェッショナルなUIデザインを生成し、HTML/CSSやReactなどの「生産現場で使えるコード」まで自動で出力します。具体的なモデル名やAPI提供元は公開されていませんが、2022年以降に登場した高性能LLMの進化を活用していると明言されています gongke.netreaddy.aiツールの特徴：自然言語対話でデザインを生成・修正Figmaファイルやフロントエンドコードへの一括エクスポートマルチラウンド会話による細かな調整が可能非デザイナーでも使いやすいシンプルなUIフロー

AI

  • 0
  • 298
  • 0
U3
「ChatGPT」どんな質問にも自然な日本語で答えてくれる人工知能チャットボット
非営利の人工知能研究組織OpenAIは11月30日(米国時間)、対話型言語モデル「ChatGPT」を発表しました(CNET Japan)。出典：https://softantenna.com/blog/chat-gpt-beta/AIとは思えないほどの高い回答能力が話題を呼び、公開からわずか6日後にはユーザー数が100万人を超えた。ニューヨーク・タイムズ紙 は昨年12月、検索の未来を書き換える可能性があるとしてGoogle幹部が危機感を抱き、社内に「Code red（非常事態）」を宣言したと報じている。出典：グーグル幹部は非常事態を宣言した…ネット検索を根本から変える｢ChatGPT｣の恐るべき可能性https://president.jp/articles/-/65432?page=1ChatGPTChatGPTのページは下記です。https://openai.com/blog/chatgpt/使用するにはメールアドレスでの登録と電話番号による認証が必要です。始め方ChatGPTとは？始め方やアカウント登録・使い方を解説https://www.btcc.com/ja-JP/academy/crypto-basics/what-is-chatgpt

AI

  • 0
  • 146
  • 0
U3
OpenAIから「Third-party security incident(外部のサービス会社で発生した情報セキュリティ上の事故)」というメールが来たけど大丈夫？（2025/11/27）
一言でまとめると「解析ツールの Mixpanel がやられたせいで、あなたの“名前・メールアドレス・ざっくり位置情報・ブラウザ情報など”が取られた可能性はある。けれど、チャット内容やAPIキー・決済情報などの“本当にヤバい情報”は漏れていない。その代わり、今後のフィッシングメールにはいつも以上に注意してね。」今回のお知らせは「OpenAI API（platform.openai.com）を使っていた人向け」の内容ですChatGPT（chat.openai.com だけを使っている一般ユーザー）は、今回の Mixpanel 事件の対象外と公式に説明されていますもう少し具体的にいうと影響がある可能性がある人platform.openai.com にログインして API を使っていた人APIキー発行している開発者、管理者、組織のメンバーダッシュボード（Usage, Billing, Playground など）を利用していた人ここで収集されていた 「フロントエンドのアクセス解析データ」（名前・メール・ブラウザ情報など）が、Mixpanel 側からエクスポートされた可能性がある、という話です。ほぼ関係ない人ChatGPT のみ利用（chat.openai.com / モバイルアプリ）APIアカウントを作成したことがない、または platform.openai.com を使っていないこういうユーザーについては、今回の Mixpanel インシデントには 含まれていない と報じられています。Mixpanelって何？「Mixpanel（ミックスパネル）」はざっくり言うと、Webサイトやアプリのユーザー行動を細かく追って分析するためのツール（プロダクトアナリティクス / イベント解析サービス）です。 もう少し具体的にいうとユーザーがどのページを見たかどのボタンを押したかどこで離脱したか継続利用してくれているかなどの「イベント」を記録して分析できるコンバージョン率・ファネル・リテンション・ユーザーフロー などを可視化するプロダクト向け解析ツールGoogle Analytics みたいな「アクセス解析」寄りというより、「プロダクトの中でユーザーがどう動いているか」を深掘りするツール という位置づけOpenAI はこれを platform.openai.com（APIダッシュボード側）のフロントエンド解析 に使っていて、今回その Mixpanel 側の一部データが不正アクセスを受けた、という文脈です。

AI

  • 0
  • 33
  • 0
U3
MCPとは？
MCPはModel Context Protocolの略で、AIと外部のツールやデータソースを接続するための新しい共通の通信規格です。USB-Cが様々なデバイスを接続するための規格であるように、MCPはAIに「このツールを使って」「このファイルを参照して」といった指示を伝えることで、AIがより多くのタスクを実行できるようにします。これにより、AIの活用範囲が広がり、専門的な知識がなくてもAIを便利に使えるようになります。MCPの主な特徴AIの能力拡張:AIが学習データだけでなく、外部のリアルタイム情報（天気予報APIや社内データベースなど）を利用できるようになります。開発の簡素化:異なるAIモデルやサービス間での連携を、共通の仕組みで実現します。柔軟な接続:「AIエージェント」が社内外の様々なシステム（SaaS、URL、ローカルデータなど）とスムーズに連携できるようになります。「コンテキスト」の管理:AIがタスクを遂行する上で必要な「文脈」全体を管理します。これには、対話履歴やタスクの進行状況なども含まれます。仕組みの例AIへの指示を分割する:MCPは、人間向けの自然な指示と、機械が処理するための構造化された指示を分けます。機械向け指示を先に読み込む:AIはまず、コンテキスト・ヘッダーと呼ばれる領域の指示（「このファイルを使え」「このAPIを呼び出せ」など）を読み込みます。外部ツールとの連携:指示に基づき、関連するツール（例：天気予報API）を呼び出し、必要な情報を取得します。情報をAIに返す:取得した情報をAIが利用しやすい形式で返し、タスクの実行に役立てます。

AI

  • 0
  • 16
  • 0
U3
ベクトルストア（ベクトルデータベース）とは？
ベクトルストア（Vector Store）／ベクトルデータベースとは、テキストや画像などのデータを数値のリスト（ベクトル埋め込み）として保存し、意味的に類似した情報を高速に検索・取得するための特別なデータベースです。生成AIのRAG（Retrieval-Augmented Generation）システムなどで使われ、単なるキーワード検索ではなく、内容の類似性に基づいて関連する文書やデータを探し出す役割を担います。ベクトルストアの主な機能と役割ベクトル埋め込みの保存:テキスト、画像、音声などのデータを、機械学習モデル（埋め込みモデル）を使って高次元の数値ベクトル（数値の配列）に変換し、保存します。類似性検索:保存されたベクトル群の中から、クエリ（質問）のベクトルと最も「近い」ベクトル（意味的に類似するデータ）を効率的に見つけ出します（例：K近傍法、ANNアルゴリズム）。RAGのバックエンド:生成AIがユーザーの質問に対して、社内文書や外部データから関連情報を検索して回答を生成する（RAG）際の、情報検索部分を担います。データの前処理:Vector Storeは、ドキュメントの分割（チャンク化）やベクトル化、インデックス作成といったプロセスを自動で行うこともあります。なぜ必要か？意味検索の実現:従来のデータベースでは困難な、意味に基づいた複雑な検索を可能にします。生成AIの強化:AIが持つ知識だけでなく、最新の情報や特定の業務データに基づいて回答できるようにし、回答の精度と信頼性を高めます。

AI

  • 0
  • 12
  • 0
U3

アクセスランキング

1

Excelで一つの値を一番下のセルまでコピーしたい時

16

2

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

5

3

VSCodeで複数ファイルを横断して検索＆置換する方法　Option+Shift+F

5

4

【解決】モニターディスプレイが消える「入力信号が見つかりませんでした」

5

5

自分のチャンネルのYouTube動画に広告が表示されないようにしたい

4

6

NEWマークを任意の日数だけ表示させる（JavaScript）

4

7

App Storeでアプリを一時的に配信停止にする方法

3

8

コーディングを依頼するときのXDへの指示の書き込み方サンプル

3

9

Criteoという広告が勝手に表示される

3

10

Rocket.chatのスターとピン止めの違い

3

11

SNSの公式ロゴアイコンのダウンロード元（Instagram,Twitter,Facebook）

2

12

WBMP形式の画像ファイルとは

2

13

Apple Distribution証明書の発行上限数は３つ

2

14

Adobe XDの機能：スタック　って何

2

15

ホームページのアクセスカウンターは最近なぜ見なくなったの？

2

16

【CSS】英語と日本語を混ぜた要素の高さが合わない

2

17

Google マテリアルのアイコンと画面を Adobe XD に読み込む方法

2

18

Adobe:Special characters must be escaped :[<].と出た

2

19

Wordでツールバー・メニューバーを常時表示にする（ピンマーク） Office２０１６

2

20

Excel：都道府県をプルダウンで選択すると、その都道府県の市区町村だけが次のセルの選択肢として出てくる

2

コメントランキング

1

AIO (AI最適化) 重点要件

1

2

AIコピペハラスメントとは？〜AIが生成した文章をそのまま送るのはやめよう

1

3

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

1

いいねランキング

1

AIコピペハラスメントとは？〜AIが生成した文章をそのまま送るのはやめよう

2

2

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

2

3

Looker Studio（Googleが無料で提供するBIツール）

1
この投稿者に問い合わせ
この投稿者に問い合わせ

当サイトでは、Cookieを使用しております。

すべての Cookie の使用に同意いただける場合は、下記の「同意します」をクリックしてください。

  • シェア
  • ログイン
  • 利用登録する
  • ログアウト
  • マイアカウント
  • メモする
  • このサイトについて
  • 問合せ
Copyright © Web担メモ
シェア
いいね！ X このエントリーをはてなブックマークに追加 LINEで送る