ログインメモする

HOME

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

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

U3

2025/2/18

2025/2/18

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

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

コメント

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

関連する投稿

Reddit Answersとは？〜掲示板サイトの内容をAIが要約し、説明してくれる〜

Reddit Answersは、Reddit上の膨大な投稿やコメントを生成AIで要約し、質問に対して分かりやすい回答を返す新機能です。ユーザーが自然な言葉で質問すると、関連するコミュニティや投稿から抽出された意見・情報を整理して提示してくれます。主な特徴AIによる要約：Reddit内の投稿やコメントをまとめ、簡潔な答えを提示。リンク付き回答：元の投稿や関連コミュニティへのリンクが表示され、詳細を確認可能。多言語対応：英語・スペイン語・ポルトガル語・イタリア語・フランス語・ドイツ語で利用可能。利用地域：米国やカナダ、欧州諸国、アジアの一部などで提供。目的：情報探索の効率化、コミュニティ活性化、時間の節約。つまり、掲示板を一から読み込む必要なく、AIが要点を整理して答えを返す「Reddit版のQ&A検索」と考えると分かりやすいです。reddit answers の日本語ページhttps://www.reddit.com/answers/

0
17
1

U3

コサイン類似度（Cosine Similarity）って何ですか

コサイン類似度（Cosine Similarity）とは、一言で言うと「2つのデータが、どれくらい似ているか（類似しているか）」を測るための物差しのことです。AI、特に自然言語処理（テキストを扱うAI）の分野では、言葉や文章の意味の近さを計算するために頻繁に使われます。専門的な数式は一旦置いておき、イメージしやすいようにポイントを絞って解説します。1. 直感的なイメージ：矢印の向きAIは、言葉や文章を「数字の列（ベクトル）」として扱います。これを空間上の「矢印」だと想像してください。似ているデータ： 2本の矢印が同じ方向を向いている（角度が小さい）。似ていないデータ： 2本の矢印が違う方向を向いている（角度が大きい、例えば直角や反対方向）。コサイン類似度は、この「矢印の角度」を見て、似ているかどうかを判断します。1に近いほど：「激似」（方向が同じ）0に近いほど：「無関係」（方向が直角）-1に近いほど：「正反対」（方向が逆）2. 具体的な例例えば、以下の3つの文があったとします。文A: 「今日のランチは美味しいカレーだった。」文B: 「昼食に食べたスパイスの効いた料理は最高だった。」文C: 「明日の株価の変動を予測する。」人間が見れば、文Aと文Bは使っている単語は違いますが、「食事の話」をしていて意味が近いことがわかります。一方で文Cは全く関係ありません。AIがコサイン類似度を計算すると、以下のようになります（数値はイメージです）。文A と文B： 0.85 （とても似ている）文A と文C： 0.02 （ほとんど関係ない）3. AIに関する文脈でのコサイン類似度AI関連の話題でこの言葉が出る場合、主に以下の用途で使われている可能性が高いです。意味検索（セマンティック検索）：単なるキーワードの一致ではなく、「意味が近い資料」を探す機能。「PCの調子が悪い」と検索して、「パソコンのトラブルシューティング」の資料をヒットさせる際などに使われます。レコメンデーション（おすすめ機能）：「この商品を買った人は、傾向（ベクトルの向き）が似ているこの商品も買っています」という提案に使われます。RAG（検索拡張生成）：ChatGPTのようなAIに社内データを参照させる際、質問文と「最も意味が近い（コサイン類似度が高い）社内ドキュメント」を見つけ出し、それをAIに読ませるために使います。4. 「距離」ではなく「角度」を見る理由なぜ定規で測るような「距離」ではなく「角度（コサイン）」を使うのでしょうか？それは、文章の長さや頻度に左右されにくいからです。例えば、「猫が好き」という短い文と、「猫についての長編小説」があったとします。データの長さ（矢印の長さ）は全然違いますが、テーマ（矢印の向き）は同じ「猫」です。コサイン類似度は長さ（文の長短）を無視して、向き（テーマの一致度）だけを純粋に評価できるため、AIと相性が良いのです。まとめコサイン類似度、という言葉が出たら、「データの中身や意味が、どれくらい似ているかを判定する計算方法のことだな」と理解しておけば間違いありません。これに関連して、AIが言葉を数値化する「ベクトル化（埋め込み表現/Embeddings）」という技術についての解説はこちら

0
72
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フロー

0
311
0

U3

LLMOへの対応

AI向けのテキストのみのマークダウン形式（またはXML）のページをつくる必要がある。UGC（ユーザーが投稿するコンテンツ）サービスもAI向けのコンテンツとして用意した方が良い。Pararell というサービスもある。llms.txt：robots.txtのAI版みたいなもの今はまだ。将来導入される可能性がある。AIが読み込みやすいシングルページが主流になるかも。ReactでActivity APIを使って、複数ページっぽく見せる

0
13
0

U3

Google Opalってなんですか？〜無料で使える初心者向けAIアプリ構築ツール〜

2025年10月7日から日本でも使えるようになったOpalは、日本語で自然言語で指示するだけでちょっとしたアプリが作れるAIツールです。n8nなどと似ているが、もっと初心者向けで簡単。Googleアカウントがあれば無料で使える。

0
15
1

U3

Microsoft が Copilot Studio を発表　2023.10.16

【超速報】GPTsよりもすごいCopilot Studioって何！？【Microsoft Ignite2023】https://youtu.be/K6CbvEMT7wA?si=GPJSyfe5DOBLldFR

0
62
0

U3

AI検索の登場でGoogle広告の宣伝効果はなくなってしまうのか

Perplexityなどの登場で、GoogleGoogle検索を使う人は激減しそうです。今後Google広告の出稿に宣伝効果はなくなっていきそうでしょうか。だとすると次に有効な宣伝媒体は何でしょうか？確かに、ChatGPTやPerplexityのような高度なAI検索が普及していくと、「従来の検索エンジンに頼る理由」が弱まり、特に技術に詳しい層や情報収集の効率を重視する層はGoogle検索を使う頻度が減っていく可能性があります。これはGoogle検索に依存していた広告モデル、つまり検索連動型広告（Google広告）にとって構造的なリスクです。ただし、すぐにGoogle広告の効果がなくなるわけではありません大多数のユーザーは習慣的にGoogleを使っている：特にスマホの標準ブラウザ（例：AndroidのChrome）に組み込まれており、AIリテラシーが高くない層の移行は時間がかかります。商取引系キーワード（例：近くのレストラン、靴購入）では依然としてGoogleが強い。AI検索はまだ広告収益化が確立されていない：Perplexityなどはまだ広告モデルを構築中で、今のところ広告主にとって「使いやすい」媒体とは言えません。それでも中長期的には広告の分散が進みます今後、Google広告以外で有効となりそうな宣伝媒体は以下のようなものです：✅ AIネイティブな広告媒体（Perplexity・ChatGPT内広告など）現時点では未成熟ですが、OpenAIやPerplexityが広告モデルを導入すれば、質問意図ベースの超精密ターゲティングが可能になります。特定の質問（例：「ダイエットサプリおすすめ」）に対して製品が「自然な文脈」で紹介される形が理想です。✅ YouTubeやTikTokなどの動画系SNS依然として強力。特に「比較・体験・解説」に強いジャンルでは、検索よりも視覚・感情に訴える動画広告が有利。インフルエンサーを活用したレビューやハウツー形式が効果的。✅ X（旧Twitter）、Instagram、Facebook広告（メタ広告）精度の高いターゲティングが可能。購買意欲の高い層に対する「リターゲティング広告」や「カート離脱対策広告」など。✅ クローズドなコミュニティや専門家キュレーション型プラットフォーム例：note、Zenn、Slackコミュニティ、Reddit（海外）など。検索を介さずに、信頼する人・コミュニティから情報を得る流れが強まっています。今後の戦略的な広告施策としては：AI検索に対応したSEO・コンテンツ設計（単なるキーワードよりも意図に合った深い情報設計）動画・音声を含むマルチモーダルなコンテンツ拡充広告より信頼を得る「教育・啓蒙型マーケティング」（例：無料セミナー、比較記事）

0
40
0

U3

動画生成を自動化できるマルモキャスト

MulmoCast(マルモキャスト) https://github.com/receptron/mulmocast-cli/blob/main/docs/beta1_ja.mdNode.jsとターミナル操作になれている人向け

0
418
0

U3

AIにおける「チャンク（Chunk）」とは、「情報のまとまり」を指す

AIにおける「チャンク（Chunk）」とは、「情報のまとまり」を指す言葉です。文脈によって主に2つの意味で使われます。 1. RAG（検索拡張生成）におけるチャンク大規模言語モデル（LLM）に外部知識を参照させる「RAG」において、膨大な文書を扱いやすいサイズに分割した断片のことです。目的: LLMには一度に読み込める文字数（コンテキストウィンドウ）に制限があるため、長い文書を数百〜数千文字程度の「チャンク」に切り分けて保存し、関連する部分だけを取り出してAIに渡します。重要性: 分割が細かすぎると文脈が失われ、大きすぎるとノイズが増えて精度が落ちるため、適切なサイズ設定（チャンキング）が不可欠です。 2. 学習・処理の単位AIがテキストを処理する際、単語や文字そのものではなく、意味を持つ最小単位（トークン）をいくつか組み合わせたデータの塊として処理することを指す場合があります。

0
11
0

U3

AIO (AI最適化) 重点要件

主にサイトのコーディング面で、AIOを意識した要件1. セマンティックHTML: AIクローラーが構造を即座に理解できるよう、セマンティックタグを徹底すること。2. 構造化データ: 全ページにJSON-LDを配置し、サービス内容をデータとして定義すること。3. 高速表示: SSR/SSGを使い分け、AIがタイムアウトせずに全情報をスキャンできるようにすること。4. llms.txtの配置: AIエージェント向けに、サイト全体の情報を要約した /llms.txt を静的ファイルとして作成すること。技術スタック- Next.js 15 (App Router)- Tailwind CSS- Lucide React (Icons)- Framer Motion (Animations)

1
25
0

U3

アクセスランキング

1

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

7

2

アクセス解析結果に「fbclid」というパラメーターが付く原因は？

6

3

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

5

4

Notionのユーザーとゲストの関係や無料版制限について

4

5

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

4

6

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

4

7

マテリアルアイコンがずれる

4

8

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

3

9

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

3

10

口座情報の入力フォームを作成する際に気をつけること：Web

3

11

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

3

12

Windowsエミュレーター（EdgeでF12）

3

13

情報整理における「コウモリ問題」とは？

2

14

コサイン類似度（Cosine Similarity）って何ですか

2

15

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

2

16

法人の印鑑証明書の取得方法

2

17

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

2

18

パソコンからインスタグラムの新規投稿をする方法（初心者向け）

2

19

CSRファイルとは

2

20

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

2

コメントランキング

1

「２人の営業パーソン」のクイズ

1

2

AIO (AI最適化) 重点要件

1

3

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

1

いいねランキング

1

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

2

2

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

2

3

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

1

この投稿者に問い合わせ

お名前

メールアドレス

電話番号（任意）

本文

この投稿者に問い合わせ

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

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

シェア
ログイン
利用登録する
ログアウト
マイアカウント
メモする

このサイトについて
問合せ

Copyright © Web担メモ

シェア

このエントリーをはてなブックマークに追加