🚀 Figma MCP × Cursorで加速するUI実装とその先の工夫
はじめに 近年、プロダクト開発の現場では「Design to Code」という概念が大きな注目を集めています。 これは、デザインツールで作成されたUIデザインを直接コードに変換する技術のことで、開発効率の大幅な向上が期待されています。 この流れの中で、Figma社は、Dev Mode（開発者向けの表示モード）やCode Connect（コードとデザインの同期機能）といった機能をリリースしてきました。 このような背景の中、つい最近では「Figma MCP」が話題となりました。 私たちのチームでは、このFigma MCPとAI搭載コードエディタ「Cursor」を組み合わせることで、実際のプロダクト開発に挑戦してみました！ 本記事では、その導入過程で得られた知見、そして実際の運用における工夫について紹介します。 🤖 Figma MCPとは Figma MCPについては、こちらの記事が非常にわか
君たちはCursorを本当に使えているか
2025/03/27追記 Cursor側のアップデートが1ヶ月で進んでいるので、以下追記しました。 本記事の内容を踏まえたあとに読むとよいかと思います！ はじめに こんにちは。Builtoという会社で代表 & エンジニアをしている冨田です。 タスク管理をAIがサポートする「サポットさん」など、AIプロダクトを作っています！ 「サポットさん」の概要はこちらから: https://lp.sapot-san.com/ 開発にもAIをフル活用しており、そこで得られた知見を共有したいと思います。 具体的には、経験3年以上の現役ソフトウェアエンジニア（生成AIのない時代からコードを書いてきた方々）をターゲットに、本番運用レベルの大規模コードベースでもCursorを活用しコーディング時間を 1/3〜1/5 に縮めている手法をお伝えします。 仕様策定やアプリの機能にもLLMをフル活用していますが、今回は実
役に立たない「ペルソナ・カスタマージャーニーマップ」はコレ！ 現場で使える見直し術 | 【レポート】Web担当者Forumミーティング 2024 秋 (Web担当者Forum)
役に立たない「ペルソナ・カスタマージャーニーマップ」はコレ！ 現場で使える見直し術 | 【レポート】Web担当者Forumミーティング 2024 秋 顧客を深く理解し、より良いアプローチをするために活用される「ペルソナ」「カスタマージャーニーマップ」。だが、苦労して作っても、形骸化するケースも多い。「Web担当者Forum ミーティング2024 秋 」にグッドパッチのUXデザインユニット長を務める秋野氏が登壇し、ペルソナとカスタマージャーニーマップのよくある誤解や失敗事例を紹介しながら、効果的な活用法を解説した。
それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
エンジニアに読んで欲しい技術書90選 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに タイトル通り、読んで欲しい（圧）技術書をたくさん集めてみました。自身の担当から外れる領域に関しては、会社の人に協力を仰ぎ、編集しました。「何を読めばいいかわからない」、「次の読む本を探したい」などのように考えている方の参考になればと思います。 また、大きく、 ・新米エンジニア ・脱新米エンジニア と分けてまとめたので、参考にしてみてください。 技術書のススメ 技術書の紹介の前に、技術書で得られるものについて説明したいと思います。全然読み飛ばしてもらって大丈夫です。この章から本の紹介を行なっていきます。 技術書は体系的な構成とな
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
CSS Generator for Tooltip Shapes & Speech Bubbles
Get a CSS-only Tooltip Shape or Speech Bubble made with a single-element and customizable using CSS variables. <div class="tooltip">Your text content</div> Read the content of each tooltip to know which one to use. You can adjust the position of the tail using the range slider. Click the shape to copy the CSS
【WordPress】htaccessでロシア・中国・ウクライナ等からアクセス拒否する方法
「Order allow,deny」は「最初は許可（allow）を書いて、次に拒否（deny）を書くよ」という宣言。 「allow from all」は「とえあえず全部アクセス許可するよ」という建前。 そして、コピーしてきた「deny from IPアドレス」で「この人たちは許可しないよ、さようなら」という無慈悲な本音。 # BEGIN WordPress # END WordPress Order allow,deny allow from all deny from 1.0.1.0/24 deny from 1.0.2.0/23 deny from 1.0.8.0/21 ・ ・ 長いので省略 ・ deny from 223.255.248.0/22 deny from 223.255.252.0/23 WordPressを使っているならば、「# BEGIN WordPress」「# E
HTML, CSS, JavaScriptの標準の仕様書はどこにあるのか
HTML HTMLの仕様策定には複雑な歴史があります。詳細は他の解説記事に譲りますが、簡単に述べるとW3CとWHATWGのダブルスタンダード状態が長い間続いていました。2022年現在はWHATWGによってLiving Standardとしてまとめられた仕様が実質的な標準となっています。Living Standardという名前が示す通り、バージョンはなくエディターによって随時更新されています。 CSS CSSの仕様はW3Cが策定しています。現在は、CSSとして1つの標準仕様があるわけではなく、数多くのモジュールに分かれて標準仕様の策定が進められています。草案、勧告候補などを経て勧告に至るプロセスと、Levelという概念で整理されたバージョン管理が特徴です。年に1度、SnapShotとしてその時点での標準化の概況が公開されています。 JavaScript JavaScriptは主にWebブラウ
2025年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近の出来事を取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial, "Hir
ECサイト構築・運用セキュリティガイドライン | 情報セキュリティ | IPA 独立行政法人 情報処理推進機構
近年、ECサイトからの個人情報及びクレジットカード情報の流出事件が多数発生しており、被害の大半を中小企業の自社構築サイトが占めています。中小企業の自社構築サイトにおいては、セキュリティ対策の必要性が十分に理解されていないため、適切なセキュリティ対策が行われず被害を招いている状況です。 ECサイトのセキュリティ対策を強化するため、IPAではECサイト構築・運用時のセキュリティ対策をまとめた「ECサイト構築・運用セキュリティガイドライン」を作成し、本日(2023年3月16日)、公開しました。 ガイドラインの内容 ECサイトでひとたび事故及び被害を発生させてしまうと、ECサイトの長期間の閉鎖に伴う売上高の大幅な減少や、原因調査や被害の補償等の事故対応費用を含む甚大な経済的損失が発生します。 本ガイドラインは、ECサイトを構築、運営されている中小企業の皆様に、ECサイトのセキュリティ対策を実施する
Web制作の成否を決める、デザインカンプから画像を書き出すための手順とポイントを実務目線で解説 | 翔泳社
Web制作の要は、上がってきたデザインカンプに込められた意図をしっかり読み解いてからコーディングに取り掛かることです。今回はWebサイトクリエイターの千貫りこさんによる『プロのコーディングが身につくHTML/CSSスキルアップレッスン』（翔泳社）から、カンプから画像を書き出す手順とポイントを紹介します。プロが実際の業務で行っている工程や見方がそのまま解説されているので、Web制作に携わる方にはまさに現場のノウハウが身につく内容です。 カンプを見るときに気をつけるポイント 早くコーディングに取りかかりたい気持ちはいったん抑えて、まずはカンプデータを詳細に確認しましょう（図1-1、図1-2）。早い段階でカンプ上の不明点を解消しておくと、後の工程をスムーズに進められます。ここでは、多くのカンプに共通するチェックしておくとよいポイントを3つ紹介します。 図1-1 まずはカンプを念入りに確認しよう（
CSSの三角関数を理解しよう！ sin()とcos()でできる表現 - ICS MEDIA
2023年3月から主要なブラウザでCSSの三角関数が使えるようになりました。 とはいえ、「CSSで三角関数をどうやって使えばいいの？」「そもそも三角関数で何ができるの？」という方も多いのではないでしょうか。この記事では三角関数のうちサイン関数とコサイン関数の作例を交えながら解説します。 三角関数のおさらい まずはサイン関数とコサイン関数のそれぞれの使い方を少しおさらいしてみましょう。下図は角度をθ、半径をrとした時のx座標とy座標を表したものです。 たとえば角度が60°で半径が200だった場合、CSSのサイン関数とコサイン関数を使うと、x座標はcos(60deg) * 200、y座標はsin(60deg) * 200で求められます。つまり、角度と半径が分かっている円周上の点の位置を計算できるのです。 実装例 1. ローディングアニメーション ローディングアニメーションをCSSで実装した例で
ソフィアコラム | エスモビSIM、MVNOビジネスを応援するソフィアデジタル株式会社
ソフィアコラムではMVNO事業者の視点でスマホ・SIM・携帯キャリアの情報を発信しています。 ソフィアデジタル株式会社の「インターネット通信で人・企業・物を繋ぎます」理念のもと最新情報をお届けします。
ビジネスデザインが貧相だと、ムダな仕事は一気に増える | リッチ・シェフレン | DIRECT Connect
…と、今回はこのあたりにしておきます。 ここまででも、かなりの事をあなたがしなければいけないということが分かりますよね？ まだまだありますが、次回にしましょう。 大きな利益とその向こう側へ リッチシェフレンでした。 ーーーーーーーーーー 編集者のオススメ： 原田隆史先生の講演会が開催！！ もしあなたが、、、 ・2018年、大きな目標、高い目標を絶対に達成したい ・とにかく何かビジネスや人生を変えるきっかけをつかみたい ・心の底から燃えるような人生の目標、やりたい事をみつけたい と思っているのなら、、ぜひこの講演会に参加してみてください。 原田先生の話を直接聞くことで、自分が本当にやりたいこと、成し遂げたいこと、目標を達成するためにはどう行動すればいいのか？ 全てがはっきりと明確になるでしょう、、、 ↓ 詳しくはこちらーーーーーーーーーー
「VSCode」での開発をよりスムーズに！基本的で役に立つ拡張機能を解説
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられるということも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
Web集客の方法と種類18選！成功事例と戦略のコツをわかりやすく解説
Web集客とは？ Web集客とは、Webサービスを活用してさまざまな施策を実行し、自社のWebサイトや店舗へより多くの人を集客する手法です。まずは、Web集客の概要を学んでおきましょう。 Web集客の目的 Web集客の目的は、お問い合わせ数や購入数の増加はもちろん、認知度の向上やブランディング、ファンの獲得などさまざまです。集客をメインの目的としていますが、必ずしも「商品を買ってもらうこと」だけが目的ではない点が特徴的です。 スマートフォンやECサイトの利用が当たり前になった現代、以前のように紙のチラシを配ったり電話で営業したりするだけでは、十分な営業効果は得られません。そのため、インターネットを使った手法でユーザーを集めて、より多くの見込み顧客に自社のお客さまになってもらうことがとても重要なのです。 Web集客とWebマーケティングの違い Webマーケティングとは、Web上の施策を通じて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
35 Free SEO Tools to Help Your Website Rank Higher
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
見積書はどうやって作る？サイト制作/ホームページ制作の見積書について | センタード