はてぶ・Qiita・Zennのトレンド記事を紹介
デザインは、Webサイトやアプリの見た目や使いやすさを設計する作業です。UI/UXやグラフィックデザインなど、幅広い分野があります。
さよなら、Figmaからのコピペ。Pencil.devでデザインをコードとして管理する 🔖 35
こんにちは。 突然ですが、フロントエンド開発でこんな**「めんどくさい」**を感じたことはありませんか？ Figmaのデザインを見ながら、CSSの数値をポチポチ書き写す作業 「ここのマージン、デザインと違うよ」という指摘への修正対応 実装が進むにつれて、Figmaのデザイン画と実
Pencilで「AI臭くならないデザイン」を作るために、skillsに how / how to think を書いてみた 🔖 2
はじめに現在 Pencil の話題を見ることが増えました。https://www.pencil.dev/ただ、Pencil を触っていて、「それっぽいけど、どこかAIっぽい」「見た目は整っているけど、判断の一貫性がない」と感じることはありませんか？そこで今回は、P
新しいデザインツール Pencil を試してみた 🔖 220
:::info 当面の間 Pencil は無料で利用できますが、将来的には有料プランが導入される予定です。 ::: インストール後アプリケーションを起動したらメールアドレスの入力を求められます。登録したメールアドレスに確認コードが送信されるので、コードを入力してアクティベートしま
Claude CodeやCursorを使って、AIがUIデザインを生成することができる「Pencil」が登場！ 🔖 322
はじめにみなさんは、Pencil というAIツール使ったことがありますか？Pencilは、Figma + Layermate みたいなツールで、Pencil上でAIにUIを作らせたり、作成したUIをMCPを経由して開発させることができます！この記事では、実際に、Pe...
プロダクトエンジニアと肩を並べて品質をデザインする｡入社3ヶ月で実践した､開発プロセスから変えるQAの形 🔖 2
SmartHRにQAエンジニア(以降、QAEと表記)として入社して3ヶ月が経ちました。 振り返れば、『とにかく、小さくても何か貢献しなくては！』と必死になっている間に過ぎていった3ヶ月だったと感じます。 この記事では、「開発チームにおけるQAEが何をするべきなのか」と自分なりの役
2025年の終わりに、1980年代のキーボードを買うまでの自作キーボード沼の深さの話｜岩渕正樹 / NYのデザイン・フューチャリスト 🔖 97
さかのぼることコロナ渦の2020年、アメリカ在住の私は厳しいロックダウンで全く外出できず、家でハマれる趣味を模索している中で、Keychronのキーボードを買ったことが入り口となって、キーキャップやキースイッチを変えたりしているうちに、自分で全て作ってしまう自作キーボード沼にハマ
UIデザインのクオリティが格段にアップする！ 感覚的ではなく、論理的にデザインを改善するポイントを解説 🔖 73
WebサイトやスマホアプリのUIを魅力的に、そして一貫性のあるデザインに改善するときに役立つUIデザインの知識とテクニックを紹介します。 直感や感覚的な曖昧なものではなく、明確で論理的なガイドラインに基づいて改善することで、UIデザインのクオリティは格段にアップします。 14 l
数時間かけて1pxの移動を繰り返しているとき、脳は画面と癒着して、客観的な判断力を失っています。そうなれば、もう「頑張る」のは逆効果。麻痺した脳を物理的にハッキングして、他人の目（初見の感覚）を取り戻すためのリセット術をまとめました。1. 【セルフ診断】客観性を失っ...
過激コスチュームが話題、スマホゲー「ブラウンダスト2」 一部デザインの修正を発表→やっぱり撤回 「勇気が足りなかった」 🔖 42
ブラウンダスト2は、韓国のゲーム開発企業であるNEOWIZとGAMFS Nが開発・運営するスマートフォンゲーム。「胸いっぱいのRPG」と銘打っており、バニーガールや水着などセクシーなコスチュームを着たキャラクターが登場する。ゲーム内では、それらのコスチュームを有料アイテムとして販
AI コーディングエージェントでデザイン再現精度を上げる 7 つのテクニック - izanami 🔖 39
画像を切り出すときは、Figma MCP プラグインインストールすればいいし、新たにアイコンや画像を作りたい場合は、Gemini 3 系をメインで使えばいい 個人的には Antigravity + Gemini 3 Flash の組み合わせがフロントエンドに強いと感じてるけど、結
NotebookLM×Gemini【Gem】でデザイン性のある編集可能スライドを作る！｜尾辻和孝 🔖 250
NotebookLMを議事録管理や思考整理にフル活用している方は多いかと思います。しかし、スライド作成機能を使っていて、こんな悩みを感じたことはありませんか？ 「スライドのガチャ要素」：作るたびに構成が変わってしまう。 「デザインのばらつき」：ブランドカラーを統一したいのに、毎回
Figma MCP でデザインシステムを提供して AI コーディングエージェントに一貫したフロントエンドコードを書かせる 🔖 107
AI コーディングエージェントにフロントエンドのコードを書かせる際、Figma MCP を使用してデザインコンテキストやデザイントークンを提供することで、一貫したデザインガイドラインを遵守させる方法を紹介します。 AI コーディングエージェントにフロントエンドのコードを書かせる際
Secure by Design 原則 日本語訳 - セキュア・バイ・デザインなソフトウェアのための原則とアプローチ 🔖 77
本記事はCISAが2023年に発表した「Secure By Design - Shifting the Balance of Cybersecurity Risk: Principles and Approaches for Secure by Design Software」v
参考になるWebデザインが見つかる【ストックデザイン(stock design)】 🔖 33
STOCK DESIGN（ストックデザイン）は、Webデザインの各パーツを集めたギャラリーサイトです。 どのホームページにもある「ヘッダー、メインビジュアル、フッター」の他、LPで使われる「悩み、特徴、流れ、料金、事例、CTA」といった要素、コーポレートサイトで使われる「代表メッ
Spindle 2025: AI エージェント × デザインシステムで変わる Web 開発 | CyberAgent Developers Blog 🔖 29
Podcast こんにちは、Amebaのデザインシステム「Spindle」でテックリードをしている原 (@herablog) です。 本記事では「Spindle 2025」と題し、今年の変化と具体的な取り組みを振り返ります。 ※ 本文は2025年時点の活動を振り返った内容のため、
Spindle 2025: AI エージェント × デザインシステムで変わる Web 開発 🔖 29
Podcast こんにちは、Amebaのデザインシステム「Spindle」でテックリードをしている原 ...
【忙しい人向け】Figma Makeを中間処理に使ってデザイン実装精度を高めよう 🔖 2
こんにちは！ourlyでエンジニアをしている自称天使の大天使カリンエルです（@archkrnel）この記事は「開発生産性コミュニティD-Plus🐬 Advent Calendar 2025 25日目」の投稿です🎄🎅 はじめにFigma MCP ServerとClaudeを
新しいデザインシステム・コンポーネント管理のかたち「shadcn/ui registry」 🔖 42
この記事では、shadcn/ui の Registry 機能を活用して、企業の自家製の UI ライブラリやデザインシステムを構築・配布する方法を解説します。 はじめに UI コンポーネントライブラリを作成・配布する方法として、npm パッケージとして公開するのが一般的です。sha
新しいデザインシステム・コンポーネント管理のかたち「shadcn/ui registry」 🔖 42
この記事では、shadcn/ui の Registry 機能を活用して、企業の自家製の UI ライブラリやデザインシステムを構築・配布する方法を解説します。 はじめにUI コンポーネントライブラリを作成・配布する方法として、npm パッケージとして公開するのが一般的です。s
エンジニアの組織デザインどうしてる？〜BASE開発チームの実例を一挙公開〜 🔖 1
この記事はBASEアドベントカレンダーの24日目の記事です。 はじめに こんにちは！BASEプロダクト開発チームにて責任者（エンジニアリングマネージャー）をしている植田です。アドベントカレンダーも残すところあと2日ですね。 今回は エンジニア組織の「組織デザイン」 をテーマに、B
DMMデザイン組織の動き2025 - AI活用と人材戦略 - 🔖 1
自己紹介 はじめに 1. AIの進展による数年先のデザイナーの役割の変化 参考：取り組み詳細の記事 2. 理想に届かないAIに嘆かず、今伸びてるAIに目を向ける 3. デザインと事業の接続点をAIと見出す 参考：取り組み詳細の記事 4. さらなるデザイン組織全体の定着へ さいごに
AIにアクセシビリティのレビューはできる？ WCAGに基づいたAIによるデザインフィードバックの検証 🔖 1
この記事は、Goodpatch Advent Calendar 2025 24日目の記事です。 グッドパッチでエンジニアリングマネージャーをしている大角です。グッドパッチでは2024年に「アクセシビリティ推進プロジェクト」を立ち上げ、社内の有志でさまざまな取り組みを行ってきました
「このデザイン、CSSで再現できないかも😫」を解決してくれるかもしれないプロパティ、mask 🔖 31
CSSにおけるmaskというプロパティによってデザインを実装可能にしてくれたケースが3つありましたので、私見をしたためていきます。既にCSSのmaskプロパティについてご存知の方はmaskが可能にしてくれるデザインパターンへマスクという行為およびCSSのmaskについてこれか
「このデザイン、CSSで再現できないかも😫」を解決してくれるかもしれないプロパティ、mask 🔖 31
CSSにおけるmaskというプロパティによってデザインを実装可能にしてくれたケースが3つありましたので、私見をしたためていきます。既にCSSのmaskプロパティについてご存知の方はmaskが可能にしてくれるデザインパターンへマスクという行為およびCSSのmaskについてこれか
【Cursor✖️Figma】非エンジニアでも出来た！金融系UIデザインをAIで効率化する方法｜吉澤カレン 🔖 38
Visaプリペイドカードが発行できて、アプリだけでも使用できます金融系・フィンテックのプロダクトデザインでは、UIの見た目以上に「言葉の正確さ」や「表記ルール」が重要になります。 何故ならば、”エンドユーザーのお金を直に扱う事業”だからです。トラブルにならないような表現方法と、デ
4年間の実践から考える「異なる領域や立場を接続するデザイン」 - NTT docomo Business Engineers' Blog 🔖 67
この記事は、 NTT docomo Business Advent Calendar 2025 21日目の記事です。 こんにちは。イノベーションセンター IOWN推進室の塚越です。 12/21を担当するのも今年で3年目になりました。 最近、自分自身がキャリアの一つの分岐点に立って
AIと一緒にUIデザインしてみた｜Figma Make × 複数AIレビュー 🔖 2
!この記事は BABY JOB Advent Calendar 2025 の 22 日目の記事です。 はじめにこんにちは！BABY JOB株式会社でUIデザインを担当しているelmoです。最近、業務でAIを使う場面が増えてきました。資料作成やコーディングはもちろん
4年間の実践から考える「異なる領域や立場を接続するデザイン」 🔖 67
この記事は、 NTT docomo Business Advent Calendar 2025 21日目の記事です。 こんにちは。イノベーションセンター IOWN推進室の塚越です。 12/21を担当するのも今年で3年目になりました。 最近、自分自身がキャリアの一つの分岐点に立って
デザイン素人のエンジニアがスタレゾのツール開発で「AIデザイン100連ガチャ」を回したら、プロフェッショナルとは何かを思い知った話 🔖 1
はじめに はじめまして！GameWithに入社して半年が経った、ベンチャー開発チームの湯浅です。 この記事は GameWith アドベントカレンダー2025 19日目の記事です。 今回は、私が所属する「ベンチャー開発チーム」が普段どのようなフローで開発をしているかのご紹介と、その
こんにちは。株式会社ゼストでプロダクトデザインを担当している長沢です。 最近めっきり寒くなり、給湯器のお湯じゃないと食器が洗えない季節になりましたが、皆様いかがお過ごしでしょうか。 さて、今回は私が普段向き合っている『ZEST SCHEDULE』のデザインについて、少し違った切り
俺が一番好きなデザインパターン「Strategy Pattern」の話 🔖 240
はじめに こんにちは。データシステム部・推薦基盤ブロックのかみけん（上國料）です。 突然ですが、デザインパターンの中で個人的に一番好きなのは Strategy Pattern です。 学生時代、研究で鬼のように使っていました。機械学習の研究では「複数のモデルを同じ条件で比較する」
社内クラウドデザインパターン勉強会レポート - asken テックブログ 🔖 40
はじめに こんにちは。バックエンドエンジニアの齋藤です。 今回は、社内のCo-Learning委員会主催で2025年上期に行われた「クラウドデザインパターン勉強会」の内容をご紹介します。私は参加した側なので、参加者目線で紹介したいと思います。 この記事は、株式会社asken (あ
サクラクレパス、“AI疑惑”のポスター撤去へ 「実際のデザインと相違」 🔖 42
老舗文具メーカーのサクラクレパスは12月9日、スペインで開催されたイベント「Manga Barcelona（マンガバルセロナ）」で使用した販促ポスターに参加者の一部から「生成AIで作ったものではないか」と疑問が投げかけられた件で、公式見解を発表した。ポスターの使用を停止し、撤去す
俺が一番好きなデザインパターン「Strategy Pattern」の話 🔖 240
!🎄 本記事は ZOZO Advent Calendar 2025 シリーズ 8 の 11 日目です。ぜひ他の記事もご覧ください。 はじめにこんにちは。データシステム部・推薦基盤ブロックのかみけん（上國料）です。突然ですが、デザインパターンの中で個人的に一番好きなの
俺が一番好きなデザインパターン「Strategy Pattern」の話 🔖 240
!🎄 本記事は ZOZO Advent Calendar 2025 シリーズ 8 の 11 日目です。ぜひ他の記事もご覧ください。 はじめにこんにちは。データシステム部・推薦基盤ブロックのかみけん（上國料）です。突然ですが、デザインパターンの中で個人的に一番好きなの
はじめに こんにちは。バックエンドエンジニアの齋藤です。 今回は、社内のCo-Learning委員会主催で2025年上期に行われた「クラウドデザインパターン勉強会」の内容をご紹介します。私は参加した側なので、参加者目線で紹介したいと思います。 この記事は、株式会社asken (あ
デザインが苦手なエンジニアのための Figma MCP活用入門 🔖 1
デザインが苦手なエンジニアのためのFigma MCP活用入門 この記事は クラウドワークス グループ Advent Calendar 2025 シリーズ1の9日目の記事です。 1. はじめに こんにちは。株式会社クラウドワークスで、クラウドワークス テックのエンジニアをしている山
なぜデザインシステムをコードで管理するのか - Findy Tech Blog 🔖 43
こんにちは、ファインディCTOの佐藤(@ma3tk)です。この記事は、ファインディエンジニア #1 Advent Calendar 2025とファインディデザインチーム Advent Calendar 2025の4日目の記事です。 先日、Findy AI+という新規プロダクトのデ
AI エージェント開発で失敗しないための 10 のデザインパターン - フレームワークに依存しない設計の共通言語を定義する 🔖 70
株式会社ログラスは「良い景気を作ろう。」をミッションに、企業経営を推進する次世代型経営管理クラウド「Loglass 経営管理」を開発し提供しています。
こんにちは、ファインディCTOの佐藤(@ma3tk)です。この記事は、ファインディエンジニア #1 Advent Calendar 2025とファインディデザインチーム Advent Calendar 2025の4日目の記事です。 先日、Findy AI+という新規プロダクトのデ
BtoBサイトの参考デザイン12選。企業規模や業種別にポイントも解説 | Coneのコンテンツ制作所 🔖 79
このように、BtoBでは「問い合わせ」を獲得し、その後の商談で受注につなげるという構造になっています。だからこそ、企業全体の信頼性を示す「コーポレートサイト」と、サービスの詳細情報を伝えて問い合わせを獲得する「サービスサイト」が重要になるのです。 そこで本記事では、BtoBビジネ
伝わる資料に生まれ変わる！デザインの4つの基本原則を学ぼう 🔖 6
この記事は、アソビュー Advent Calendar 2025の2日目（裏面）です。 こんにちは。アソビューでデザインリードを担当している山中です。 資料作成をしている方、こんなお悩みありませんか？ 「なんか見づらいしわかりづらい資料だな、けどどこを改善すればいいのかわからない
レスポンシブデザインの「間」を適切に設計するためのフルイドタイポグラフィとグリッドシステムの考え方——キャンバスインからコンテンツアウトへ 🔖 47
「PLAID Designer’s Advent Calendar 2025」の1日目の記事です。 レスポンシブデザインでウェブサイトの制作をする場合、デザイナーがモバイル幅とデスクトップ幅のデザインカンプを作成し、開発者がそれをもとに実装するというワークフローが一般的である。こ
この記事は、Goodpatch Advent Calendar 2025 1日目の記事です 🎄 こんにちは！エンジニアのyukaです。 わたしはWebアクセシビリティ初心者なのですが、グッドパッチに入社してから、アクセシビリティスペシャリストのメンターのもとで、Webアクセシビリ
AI エージェント開発で失敗しないための 10 のデザインパターン - フレームワークに依存しない設計の共通言語を定義する 🔖 70
!この記事は 株式会社ログラス Productチーム Advent Calendar 2025 のシリーズ 1、1日目 の記事です。Loglass VPoT の川村（@k0j1iii）です。AI エージェントを作ってみたが、「制御が難しい」「中身がわからない」と感じた経験
デザイン理解ゼロだったエンジニアが、再びデザイン組織を率いるまで 🔖 23
こんにちは、プロダクト部 部長の稲垣です。（自己紹介やこれまでのキャリアについて↓をご覧ください。） tech-blog.rakus.co.jp 2025年4月、ラクスではプロダクト部が新たに組成され、デザイナーとプロダクトマネージャーが同じ組織に加わりました。 そして2025年
行動を分解すると、課題や解決策が見えてくる～「プロダクトデザインの第一歩」体験ワークショップ 🔖 5
こんにちは、プロダクトデザイナーの庄司です。 今回は、社内で「プロダクト開発を皆に身近に思ってもらう」を目的として開催したワークショップについて紹介します。弊社では毎月末にその月の成果等を発表する締め会(*1)を行っています。その中に毎月テーマを変えた全社ワークショップの時間があ