CursorのVisual Editor（ビジュアルエディター）を早速使ってみたら、エグかった😱
1. Figma UIでデザインを編集。paddingの調整・グラデーションの変更など
2. Applyを押す
3. コードがそのまま実現💐
「Figmaで描いた絵を再現する」時代から「Figmaである程度デザインを作って、Cursor上で最終成果物を直接いじってAIにコードを書かせる」時代になった。

なお、ビジュアルエディターのUIはどうみてもFigmaです。ありがとうございます

https://t.co/tNaobbKfqP

#Figma #Cursor December 12, 2025

東大松尾研究所が公開した「AIコーディング実践環境の構築方法」が有益すぎた。スラッシュコマンドやタスク分解でAIとの対話を構造化し、GitHub連携で自動化まで実現。ドキュメント駆動開発やLinter設定など実務ノウハウが詰まってて、開発効率が3〜5倍になる仕組みが分かる。Claude Code/Cursor使ってる人は必読👇🧵 December 12, 2025

しれっと追加されてたCursorのデバッグモード使ってみました。
結論めちゃくちゃいいのでぜひ使ってほしいです！
これのおかげでフロントのややこしいバグが直りました。

使う前はシステムプロンプト変えただけかな〜とか思ってましたが全然違いました。
これを使うと
1. Cursorがコードを眺める
2. 怪しい箇所にCursorが閲覧できる専用ログを仕込む
3. 人間が実行してバグを再現する
4. Cursorがそのログを見て解決する
5. (解決したらログを全て削除)
というフローで、その手があったかーと感心させられました。

この方法だと特別にデバッグ環境を用意させることもないし、ログをわざわざコピペする必要もない。
この方法は全く思いつかなかった。。。 December 12, 2025

Cursorがビジュアルエディタをリリース。

これはかなり便利。

細かい修正を手動で調整でき、パワポ感覚でUIをドラッグ＆ドロップ編集可能。

・Cursor上のターミナルで、Claude Codeを使ってサービス開発

・サイドバーのBrowserタブで動作確認しつつ、UIも直接変更

変更内容はAIが自動でコードに反映。
最高の開発体験。
素晴らしい。

↓詳細 December 12, 2025

【2025年最新のWeb制作において必要なスキル、不必要なスキル】

意外とエンジニアの人でもWeb制作領域の内情はあまり知られていなさそうなので一旦僕が見えている範囲でまとめてみます。基本的なものに絞ります。

他にもある！って方はリプライで教えてください🙏

【技術領域】
--基礎--
✅ HTML/CSS
✅ JavaScript
✅ WordPress
✅ PHP
✅ 上記技術群を用いてお問い合わせフォームの実装・設置ができること

--応用--
✅ セマンティックなHTMLの書き方
✅ display: grid; を使ったレイアウト方法
✅ 画像の最適化知識（WebPなどへの変換、適切なサイズ圧縮）
✅ GSAPなどのアニメーション系ライブラリ
✅ AlpineJS（個人的におすすめ、記法はVueっぽい）
✅ BEMのようなクラス命名規則
✅ emmet（HTML/CSSの短縮記法）

--超応用--
✅ Astro（React / Vueなどの恩恵を受けつつWeb制作に適したフレームワーク）
✅ （Astroが使いたいなら）React / Vue
✅ Tailwind CSS
✅ Astroなどを使うならnpm / node.jsの仕組み（ビルド環境としての基礎知識）

【関連・周辺知識】
--技術関係--
✅ Can I Useでブラウザ対応状況を確認できること
✅ MDNでHTML/CSS/JSの正しい使い方を都度確認できること

--開発環境・ツール--
✅ ターミナル、コマンドラインの基礎知識
✅ Git/GitHubによるコード管理ができること
✅ Cursorなどのエディタを使えること
✅ ChatGPT / Gemini / Claudeの主要AIに慣れていること
✅ WordPressの開発環境構築（おすすめツール：Local）
✅ Figma（デザインツール）の基本操作

--インフラ・サーバー--
✅ レンタルサーバーの契約から運用ができること
✅ ドメインを契約できてレンタルサーバーとの連携が設定できること
✅ FTPを扱えること
✅ メールアドレスの作成・設定サポートができること（意外と求められる）

--マーケティング・解析--
✅ 基本的なSEO内部対策ができること
✅ GA4のセットアップができること
✅ Search Consoleのセットアップができること
✅ Clarity（ヒートマップツール）のセットアップができること

【不要なもの】
❌ jQuery
❌ React / Vueの深い知識
❌ Next.js / Nuxt.js
❌ Pythonなどの他の言語
❌ Sass（個人的には必要性を感じない。これをやるくらいならAstroなどを使ったコンポーネント志向の開発を学んでしまった方がいい）

#Web制作 December 12, 2025

CursorのDebugモード、控えめに言って最高すぎる。
ひとつずつ仮説を立ててログを仕込んでログサーバーも立てて、人間が行うべきステップも提示してくれて、ログを確認して仮説検証して・・・
最高の機能だ 🥳
UIがうまく組めないときよく使っている December 12, 2025

Cursor の Visual Editor について触ったり社内のデザイナー・エンジニアと話したけど

・既存プロダクトの UI 修正の敷居は下がりそう。内製で似た仕組みは既にあったけど、いよいよデザイナーと PdM は Cursor でよくなりそう
・新規プロダクトの場合は Figma (Make)でばーっと複数案つくることが多いので、まだ完全代替はしづらい
・いずれにせよ design to code はデザインシステムの成熟度次第でかなり質とスピードに差がついてくるので、あらためてがんばって育ててこうな

という書いてみるとやっぱそうだよね〜という結論になりました。マルチプロダクトのデザインシステム進化がんばります！💪 December 12, 2025

Antigravityの有効な活用方法として「デザインだけかっこよくしてもらう」はありかなーと思う今日このごろ。

エンジニア的には、速度感や安定感からCursorなど他のツールで開発することが多いんですが、出来上がったものに対して「挙動は変更せずに見た目をかっこよくして」とAntigravityに雑に投げるとかなり見た目がいい感じになります。

販売用のプロダクト開発で使えるかでいうと怪しいですが、自分用のちょいツールを開発するときには見た目が良くなってテンション上がるのでオススメです😂

例）最近作った自分用の音声編集ツール
←Before ┃ After→ December 12, 2025

Cursor の デザインエディタ、既存のデザインの変更や調整は圧倒的にやりやすくなると思う。ただ、Figma を完全に代替するかと言われると、まだわからない。

ゼロベースで複数案考えたい時や、イメージを書き起こして探索したい時にまで、コードを書き換える必要があるのかと言われると、微妙な気がする。むしろそのフェーズは、もう少しラフに組み立てて試せて、固まったらそのままコードに変換できる、みたいな流れがあると理想的かも。

自分たちはこれまでもFigmaをイメージボードとして使って、最終的なデザインの正はコードにしてきたので、大きくワークフローは変わらなそうだけど、Cursorのエディタ上で直感的に細かい調整ができるようになったのはかなり嬉しい。 December 12, 2025

Cursor Browserの、CSS一覧が見やすい！　Chromeの開発者ツールだと、有効なものと無効なものが打ち消し線とかでごちゃごちゃってなるのが、Cursorは本当に今かかっているCSSだけを一覧できる。最高。 https://t.co/g0IJJaXnmc December 12, 2025

みんな！ボクの「AIデベロッパー」使ってくれたかな？

Cursorでバイブコーディングしても保守運用やデプロイ作業が難しい方は、ボクを使えばブラウザ上で開発してそのまま公開、デプロイ、github連携までワンクリックでできるよ！( ｰ̀εｰ́ )ﾌﾝｯ

ボクでアプリ作ったらリプで教えて！👇 https://t.co/plmgXNivsF December 12, 2025

Cursor上でFigmaのようにデザインを変更でき、AIが実装まで一気通貫で行ってくれる新機能が発表。

これまでFigma上で仕様とデザインを固めていた工程が、今後はIDE（Cursor）上で完結できるようになり、デザインとコーディングの境界がなくなっていきそう https://t.co/XTlZlsNHzt December 12, 2025

@akihiro_genai 確かにツールとしての独自色を出してるのがClaudeCode の特徴であり、ClaudeCode ファンが根強い背景だと思います。
Cursor もそういう側面があると感じます。 December 12, 2025

notionAIをちょこっとコンテキスト探索系の能力を深掘りしてた。コンテキスト収集の依頼をするとviewツールとsearchツールを使う。cursorに比べてよしなに探す力が強いのは後者のsearchツールのおかげで、横断的に爆速で検索してくれる。ただこの検索機能はポンコツなところもあり具体的にファイル名で検索とか詳細検索は対応しておらぬ。なので具体的にこれを読んでという依頼はviewツールでこなす。viewツールは指定したページを開いて中身を読んでもらえる。ただこちらの処理はcursorとかに比べると遅い。複数ページ指定したり、フォルダの中身見ていってーとかするととても遅い。あとnotionapiの仕様に準拠するので読めないタイプのブロックとかあり、たとえばリンク形式とか読めないっぽい。cursorとかだとaliasリンクとか読んでその先のフォルダとか読んでくれるけど、notionだと難しそう。前後にラベルが付いててどんなリンクかとか文字で分かればsearchツールで探そうとはしてくれるが。よしな力は表裏一体。自律的に動いてくれるのはいいのだが、細かく指定して動く能力は圧倒的にcursorよなあ。たとえばコマンドとかで「このページ配下をまっさきに検索対象にしてほしい！！」みたいなcursorだと簡単にできる命令がうまくうごかない。まあ、とはいえ、サーチとビューだけでそこまで困ることはnotion内のページであれば体感はそんなにないですけどね。このページ配下とかは見つけてくれないけど、結果的に全体からちょうど良さげなページを見つけてくれたりはするので。コントロールしまくりたいマイクロマネジメント系AI活用用途では少しストレス。 December 12, 2025

Cursorのデザインエディタ、嬉しいは嬉しいが、そんなに騒ぐほどかあ？という気もしている。なんか見えてる「デザイン」の領域が狭いんだよな。 December 12, 2025

【ナレッジ×AI革命】で、絶対に埋まらない生産格差が生まれました。

煽り抜きでヤバいです。

「Obsidian」というローカルナレッジベースアプリ
「Cursor」というプログラミングAI

この2つを組み合わせることで、

たった3日で、

書籍： 7冊分
note記事：50〜70記事
YouTube台本 ： 30〜50本

に相当するコンテンツが作れました。

生産における特異点の誕生です。

この時点でAIを使える人と使えない人での、競争は終わりました。

別競技だからです。

上記のツールのかけ合わせ利用法。

初歩的なことならYoutubeに動画があります。

それだけじゃ、この量のコンテンツは作れないけど。

いやらしい言い方ですが、わたしの勝利です。

負けようがない。 December 12, 2025

「学習中からAIエディタを使っていいのか🤔」
これ、とても良い悩みです。

結論から言うと、導入自体はOK。
初学者のうちからCopilotやCursorに慣れておくのは良いことです。

注意すべきは「AIが書いたコードを理解せずそのまま使うこと」！

「AIで目標物が作れた＝自分で作れた」ではありません。

AIが書いたコードで動くものが作れたとしても、中身を自分で理解できていなければ、それはスキルになりません。

エンジニアを目指していたはずが、気づけば「AIがないと何も作れないAIノーコーダー」になってしまいます。

⚠️ 成長を止める「悪いAI活用」
❌ AIに丸々コードを書かせる
❌ エラー修正を思考停止で丸投げする
❌ コピペして動いたら「ヨシ！」で終わらせる

✅ エンジニアになるための「良いAI活用」
⭕️ まず自分で書いて、分からない点を質問する
⭕️ エラーの意味や原因についてAIに解説してもらう
⭕️ どうしても分からない時は見本を出力してもらい、コードの意味を解説してもらう（そして理解してから自分で書く）
⭕️ 予測変換など「書きたいことが決まっていて、入力の手間を省略する」ものはOK

つまり、AIを「回答者」ではなく「壁打ち相手」にするのが大事です。

================================
💡 とはいえ、つい答えを見てしまう人へ
================================
「分かってはいるけど、つい答えを聞いちゃう…」
そんな人は、意思の力に頼らず、ツール側で強制的に「答えが出ない設定」にしてしまいましょう👍

まず、GeminiやChatGPTには「学習支援モード」があります。

例えばGeminiの「ガイド付き学習」モードでは、単に質問の「答え」を出すのではなく、「専属の家庭教師」のように振る舞い、対話を通じてユーザーの理解を深めてくれます。

また、CursorなどのAIエディタでは、AIの性格を「答えを教えないスパルタメンター」に変えることができます。

↓答えではなく「ヒントを教える」モードにする方法
これを設定しておけば、AIエディタ上で直接コードを修正させる機能（Cmd+K）を使った場合でも、勝手にコードを書き換えずに「コメントでヒントを書く」ような挙動に変化します。

「このバグ直して」と言っても、「このエラーログは〇〇を示唆していますが、どの変数が怪しいと思いますか？」のように、あえて直接的な答えを教えず思考するチャンスをくれるようになります。

=================================
📚 基礎あってこその「バイブコーディング」
=================================
バイブコーディングは、確かに開発スピードを劇的に高める強力な武器です。

ですが、忘れてはいけないのは基礎あってこその「バイブコーディング」だということ！

プログラミングの基礎知識がない状態で、ただAIにコードを書かせるだけでは意味がありません。生成されたコードの品質やセキュリティリスクを判断できず、バグが起きた際に対処することもできないからです。

基礎ができていない状態で使っても、それは単なる「ツールの操作」に過ぎず、そこにエンジニアのバリューはありません。

バイブコーディングは、基礎を身につけたエンジニアであれば後からいくらでも習得できます。

学習中は焦ってAI活用術を追い求めるよりも、まずはエンジニアとしての足腰、確かな技術力を鍛え上げていきましょう💪 December 12, 2025

MyBatisのCursorで行を先読みするメモ https://t.co/1mvVGCUrXf

必要になったケースがあったのでメモ December 12, 2025

これまではFigma MakeやGeminiで生成したプロトを移植して、それをCursorに参考情報として読ませて…というフローを踏んでいました。でも、IDE上で直接形にできるならその工程がまるっと不要になりますね。

本当に全ての生産活動がIDEに集約されていく未来を感じます。。 https://t.co/4iVUiiCWWP December 12, 2025

Cursorのコード補完ほんと楽で便利なのだけど、コード書いている途中に「これ、間違いじゃない？」というのもリアルタイムに控えめに良い感じに提案してくれたらもっと嬉しい。贅沢すぎか。 December 12, 2025