🚀 Figma MCP × Cursorで加速するUI実装とその先の工夫
はじめに 近年、プロダクト開発の現場では「Design to Code」という概念が大きな注目を集めています。 これは、デザインツールで作成されたUIデザインを直接コードに変換する技術のことで、開発効率の大幅な向上が期待されています。 この流れの中で、Figma社は、Dev Mode（開発者向けの表示モード）やCode Connect（コードとデザインの同期機能）といった機能をリリースしてきました。 このような背景の中、つい最近では「Figma MCP」が話題となりました。 私たちのチームでは、このFigma MCPとAI搭載コードエディタ「Cursor」を組み合わせることで、実際のプロダクト開発に挑戦してみました！ 本記事では、その導入過程で得られた知見、そして実際の運用における工夫について紹介します。 🤖 Figma MCPとは Figma MCPについては、こちらの記事が非常にわか
【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ブラウ
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
Web制作の成否を決める、デザインカンプから画像を書き出すための手順とポイントを実務目線で解説 | 翔泳社
Web制作の要は、上がってきたデザインカンプに込められた意図をしっかり読み解いてからコーディングに取り掛かることです。今回はWebサイトクリエイターの千貫りこさんによる『プロのコーディングが身につくHTML/CSSスキルアップレッスン』（翔泳社）から、カンプから画像を書き出す手順とポイントを紹介します。プロが実際の業務で行っている工程や見方がそのまま解説されているので、Web制作に携わる方にはまさに現場のノウハウが身につく内容です。 カンプを見るときに気をつけるポイント 早くコーディングに取りかかりたい気持ちはいったん抑えて、まずはカンプデータを詳細に確認しましょう（図1-1、図1-2）。早い段階でカンプ上の不明点を解消しておくと、後の工程をスムーズに進められます。ここでは、多くのカンプに共通するチェックしておくとよいポイントを3つ紹介します。 図1-1 まずはカンプを念入りに確認しよう（
ホームページ制作で使える補助金・助成金一覧（2024年版） | Web幹事
ホームページ制作で補助金・助成金を使いたいと考えているものの、どの補助金・助成金が使えるのか分からず、お困りではないですか？ 本記事では、ホームページ制作で申請できる補助金・助成金の種類や手続きの仕方などを詳しく解説しています。この記事を最後まで読めば、補助金・助成金を活用し、お得にホームページを制作できるでしょう。 注意 この記事で紹介する補助金の中には、単なるホームページ制作という名目では審査が通らないものもあります。補助金の対象は複雑なので、よく記事をご覧になったうえで申請をしてください。 ※ホームページの制作を検討している方はWeb幹事にご相談ください。目的や予算などから最適な制作会社をご紹介します。何度でも相談無料で、制作会社からの営業もありません。 【無料】貴社で活用できる補助金・助成金を紹介してもらう ホームページ制作に役立つ記事もご覧ください ホームページとは？種類ごとの目
HTML5廃止されたって聞いたんですが、それでも勉強する必要ありますか？あと、働くまでに何年かあるので今習っても将来ならったのが廃止され... - Yahoo!知恵袋
>HTML5廃止されたって聞いたんですが、それでも勉強する必要ありますか？ HyperText Markup Language https://ja.wikipedia.org/wiki/HyperText_Markup_Language 初期のツール群は別として、HTML1～HTML5はほぼ上位互換(後方互換)です(そうしないと古いWebページが表示できなくなるので)。 HTML5から「HTML Living standard」もほぼ上位互換(後方互換)です(そうしないと古いWebページが表示できなくなるので)。 HTML Living Standardとは？廃止されたHTML5との違いなど徹底解説！ https://seolaboratory.jp/49735/#:~:text=HTML%20Living%20Standard%E3%81%A8HTML5%E3%81%AE%E9%81%
BtoBのWebサイト構成の考え方とは？制作時に必要なページ一覧 | BtoBマーケティングのお困りごとをまるっと解決「ferret」
BtoBの製品・サービスサイトを作る場合、どんなページをそろえればいいのでしょうか？ この記事では、これからBtoBのサイトを作ろうと思われている方、または、リニューアルを検討されている方に向けて「BtoBサイトを作るなら、これだけはそろえておきたいページ」について解説します。 サイト設計の考え方についてまとまった下記の資料も合わせてご覧ください。 ■あわせてよく読まれている資料 →BtoBマーケティングのためのサイトリニューアルガイド Webサイト構成とはWebサイト構成とは、Webサイトの設計図のことです。 Webサイトの設計図は「サイトマップ」と「ワイヤーフレーム」に分かれており、この2つの設計図を組み合わせることでWebサイトができあがります。それぞれについて詳しく見ていきましょう。 Webサイトの全体の構成：サイトマップサイトマップとは、サイト全体のページ構成を地図のように配置決
1分でも早く仕事を終わらせるためにVSCodeにできること - Qiita
はじめに 本投稿は**『VSCodeが最強のエディタだ!!』などといったことを伝える記事ではありません。** 数あるエディタの中の『VSCode』に焦点を当てて、作業効率化できるための使い方をまとめたものです。 いくつかのテーマに分けて、ご紹介させていただきますので、興味のあるところを拾い読みしていただければと思います。 (スクリーンショットについては、随時更新させていただきますが、古い場合があります。ご容赦ください。) 1.ショートカット ショートカットはかなりの数があるので、今回は**『1日の作業の中で登場頻度が多そうな操作』**に焦点をあてて、効率化を目指していきます。 ショートカットを覚えることで、ある程度の操作はマウスに触らずにできるようになります。 1つ1つの効果としては微々たるものですが、操作頻度の多いものであればあるほど、効果が期待できるので、覚えることをオススメします！
「くそダサいデザインの表紙」がダサくなくなるまでの解説がわかりやすくてタメになる…フォントや配色、文字配置など参考になる情報も
デザインtips @tips_bot ゆるく初心者向けのデザイン解説とか書きます。 絵描きさん向けの役立ち情報も多い。なんか思いついた時に自分用のメモも兼ねて投稿しているので、お気軽に〜！
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
全世代でスマホがネット利用のメインデバイスに、一方で年齢ごとに利用傾向に差【ニールセン調べ】 | Web担当者Forum
ニールセン デジタルは、2019年1月〜6月のデジタルメディアの利用動向をまとめた「Digital Trends 2019上半期」を発表した。 ニールセン インターネット基礎調査ニールセン ネットビュー（PC版インターネット視聴率情報）ニールセン モバイル ネットビュー（スマートフォン視聴率情報）ニールセン デジタルコンテンツ視聴率（Nielsen Digital Content Ratings）の4つの調査情報データをもとに、PCとスマートフォンの利用実態を分析している。 全世代にスマホ時代到来、代表的な4つのトピックを紹介同レポートでは、各デバイスの利用状況、主要動画サービス利用時間、メディア別動画広告許容度、各SNSアプリの利用者数推移、各ECサービス利用者数比較、フルタイム勤務者1人あたりスマートフォン利用時間といったデータの他、「新元号発表」「超大型連休」「オリンピックチケット」
Webサイトデザインの横幅サイズ！もう何pxか迷わない！ 2017年1月版
こんにちは。FASTCODINGデザイナーの七転び八重子です。みなさん、Webデザイン時のワイドサイズやファーストビューサイズを何ピクセルに設定してますか？私は半年ごとに支流のサイズを確認しているので、２０２１下半期スタートに合わせてまとめてみました。前回2020年10月にまとめましたが、今回は、デザインのレイアウトも考慮に入れています。目次 ソリッドレイアウトorリキッドレイアウトorフレキシブルレイアウト？ ソリッドレイアウト（固定レイアウト）とは？ リキッドレイアウト（可変レイアウト）とは？ リキッドの進化系... どうも、FASTCODINGディレクターのせりなです。 Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか？ パソコンは何pxで作るの？スマートフォンは何pxがいいの？ って聞かれることが多いので、デザインの横幅でもう迷わないた
フリーランスも知っておかないといけないデザイン料金の相場まとめ
フリーランスをスタートして半年以上が過ぎて、まだまだ月々の売上は売上報告にも書いている通り、多い時と少ない時の差がかなりありますが、ありがたいことに仕事自体は次第に増えています。 そうするとしっかりと考えておかないといけないのが、デザイン料金の設定です。これまではクラウドソーシングでのコンペや受注案件など、価格が決まっているものに応募したり、受けたりする流れでしたが、これからクライアントや代理店の方と直で料金の交渉をしたり、見積書を提出することが増えていきます。 そこで改めてその中のデザイン料金の相場について考え、まとめてみました。 デザイン料金で揉める場合 サバイブログでは過去に「デザインのクオリティと値段の関係をハッキリさせておこう」、「【クラウドソーシングも含む】プロに低料金の案件を気持良く、しっかり仕事をしてもらうコツ」という記事で、デザインとお金の関係に関しては色々と思うところを
human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)
ヒューマンピクトグラム2.0は、非常口のあの人のピクトグラムをTopeconHeroesダーヤマの好みで拡張、ストックしていくページです。 このサイトにストックしたピクトグラムは、WEB制作や会議の資料、企画書などのデザイン素材として無料で利用可能です。 ただし素材そのものの再配布、販売はNGっす。なお2.0だからって拡張元のピクトグラムに比べ優れている訳ではありません。 犬の散歩のピクトグラムその３ 飛び膝蹴り 社長、部長 ショートカット 手荷物検査 略奪婚 結婚式のピクトグラム 神父、牧師 ちゃぶ台返し 2 水球 ピクトグラム シンデレラ サムライ 3 サンタクロース 2 サンタクロース バーテンダーのピクトグラム2 バーテンダー 銅鑼 銅鑼をドーン 虫取り少年 少年時代 やり投げ 食事をするピクトさん 演説するピクトさん エスカレーター 下校する子供
プロのWebデザイナーが使用している人気のツール、フォント、ワークフローなどのまとめ -Web Design Trend Report
プロのWebデザイナー、デベロッパーが実際に作業しているファイルを元に、Webデザインのトレンドをツール、カラー、フォント、エフェクト、ワークフローの観点から調査したレポートを紹介します。 安定して人気のあるトレンド、変化しているトレンドをチェックできます。 2016 Web Design Trend Report デザイナーとデベロッパーのコラボツール「Avocode」で利用された1,127,302のPSDとSketchファイルに基づき、2016年のデータとしてまとめたものです。 レポート公開にあたり、私もほんの少しだけ協力しています。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザイナーが使用しているツール デザインのコンポーネント化 ファイルのリビジョン ファイルの容量 Webデザインでもっとも人気が高いフリー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://csslayout.io/
【2018年版】Yahoo! トップページへの広告掲載の種類と金額、バナーサイズ | EC-GROWTH-LAB
1カラムレイアウトはもはや王道! Webサイトデザインの基本を解説 | Webデザイン、これからどうなるの？（全10回）
W3Schools.com