はてぶ・Qiita・Zennのトレンド記事を紹介
デザインは、Webサイトやアプリの見た目や使いやすさを設計する作業です。UI/UXやグラフィックデザインなど、幅広い分野があります。
DESIGN.md + 壊れたら気づくハーネス - AI向けデザインシステムを「維持できる仕組み」にした記録 🔖 144
僕のケースでは、生成品質はほぼ同じだった。 ただしこれは、旧版のCLAUDE.mdを18KBかけてかなり丁寧に作り込んでいたから。Quick ReferenceにTailwindクラスを全部書き、禁止パターンを76項目列挙し、コンポーネント仕様もインラインで記述していた。ここまで
デザインシステムを Skills にしたら使いやすくなった サイボウズのプロダクトである kintone では、社内向けに kintone Design System と呼ばれるデザインシステムが提供されています。 AI Agent を用いた開発向けに、このデザインシステムの S
デザインシステムを Skills にしたら使いやすくなったサイボウズのプロダクトである kintone では、社内向けに kintone Design System と呼ばれるデザインシステムが提供されています。https://note.com/amishiratori/n/
デザインシステムを Skills にしたら使いやすくなったサイボウズのプロダクトである kintone では、社内向けに kintone Design System と呼ばれるデザインシステムが提供されています。https://note.com/amishiratori/n/
AI に「デザインの判断力」を与えるスキル `ui-ux-pro-max-skill` を徹底解説してみた — Codex CLI 実践編 🔖 49
まず、このプロジェクトのスター数を見てほしいGitHub スター数：フォーク数：そのスターの伸び方がこちらです（クリックするとリアルタイムグラフが開きます）：リリースからほぼ垂直に伸びているのが分かります。なぜこれほど注目されているのか——今回の記事で、そ...
use_figma使ってベッドからスマホでデザインつくった 🔖 5
仕事おわりにベッドに入ってダラダラモード。提案用にちょっとしたUI画面を用意しておきたいな……と思いつつ、PCを開く気力はゼロ。そんなとき、ふと思い出しました。Figmaにuse_figmaという機能が追加されたことを。「もしかして、スマホのClaudeアプリからFigma
デザインカンプからClaude CodeだけでLPを実装してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作 🔖 50
インターネットのみなさん、こんにちは。せなです。 最近X（旧Twitter）のタイムラインを開くたびに「Claude Code」の文字列が視界に飛び込んできます。果たしてこれがエコーチェンバー現象なのか、本当に世間で流行っているのか真偽は定かではありませんが、AI驚き屋の一人とし
デザインカンプからClaude CodeだけでLPを実装してみた 🔖 50
インターネットのみなさん、こんにちは。せなです。 最近X（旧Twitter）のタイムラインを開くたびに「Claude Code」の文字列が視界に飛び込んできます。果たしてこれがエコーチェンバー現象なのか、本当に世間で流行 […]
Androidが「デスクトップ」を再定義するか？ 最新デザインガイドライン公開 | gihyo.jp 🔖 26
3月も後半に入り桜の開花予想が話題に上る季節となりました。 新年度を目前に控え、Androidのエコシステムもまた、これまでの「モバイル中心」の枠組みを大きく踏み越えようとしています。 2026年3月16日、GoogleはAndroidアプリ向けのデザインガイドラインを更新して、
漫画家の士郎正宗さんがデザインしたマウス、エレコムが24年ぶりに復刻 🔖 60
PC周辺機器メーカーのエレコムは3月25日、漫画家の士郎正宗さんがデザインしたマウス「M.A.P.P.」を24年ぶりに復刻すると発表した。5月1日の発売に先駆け、4月6日の正午からエレコムダイレクトショップで予約受付を始める。各色3300台の限定生産で、価格は1万2800円。 評
Rust・Kotlin・Go・TypeScriptで再考するGoFデザインパターン：モダン言語機能が変えた設計の常識 🔖 52
Rust・Kotlin・Go・TypeScriptで再考するGoFデザインパターン：モダン言語機能が変えた設計の常識 1994年に発表されたGoF（Gang of Four）の23のデザインパターンは、オブジェクト指向プログラミングの設計指針として30年以上にわたり参照されてきま
デザインシステムプロジェクトをリードして気づいたこと 🔖 1
こんにちは！株式会社Schoo（以後スクー）新卒2年目の @hiroto_0411 です。エンジニアをしています。今回の記事では、この半期（約半年間）にわたってリードした「デザインシステムプロジェクト」の振り返りをお届けします。デザインシステム自体の技術的な話だけでなく、...
社内デザインシステム「Aegis」を用いた実装精度を30%から90%以上に引き上げた Agent Skills の開発方法 🔖 3
はじめに こんにちは、株式会社LegalOn Technologies ソフトウェアエンジニアのわたりょーです。デザインシステムチームに所属し、社内デザインシステム「Aegis」を開発・運用しています。 「Aegis」は、LegalOn Technologiesのプロダクト群で一
「こんなこともあるんだなあ」表紙デザインがまる被りの2冊の書籍が話題に…同一作品を用いた表紙は他にもいろいろ「マティスはデザインに取り入れやすい」「パブリックドメインだし」 🔖 73
九重ツクモ@1/5発売！「拝啓、婚約者様。私は怪物辺境伯と仲良くやっていくので貴方はもういりません」 @9stack_99 マティスの版画集「ジャズ」の中の「イカロス」。 ツクモは「ピエロの埋葬」が好き。 モチーフとして使いたくなるのよく分かるな。 こういう有名な作品はどうしたっ
ミニマルなデザインで使いやすい！ シンプルなHTMLでさまざまなUIコンポーネントを実装できる超軽量ライブラリ -Oat UI 🔖 42
セマンティックなHTMLで、Webサイトやスマホアプリでよく使用されるさまざまなUIコンポーネントや要素を実装できる超軽量UIライブラリを紹介します。 デザインはシンプルでミニマル！ 依存関係は一切なく、classレスとまではいきませんが、classの使用は最小限で、カスタマイズ
【比較実験】AIにやさしいFigmaデザインとは？Claude Code×Figma MCPによるAIフロントコーディング「はじめの一歩」 🔖 151
また、Desktop・リモート関係なく、プランごとにMCPサーバーのツール呼び出し回数が制限されています DesktopとRemoteの使い分け AIに渡されるデータの質という観点では、どちらも差はありません。しかしながら、無料枠で気軽に使いたいという方にとってはRemote版が
GoogleのUIデザインツール「Stitch」がアップデートされてAIと話しながら高品質UIをサクッと作成可能に、Figmaの株価は下落 🔖 269
GoogleがUIデザインツールの「Stitch」に大幅なアップデートを施しました。アップデート版のStitchではAIに自然言語で指示を出すだけで高品質なUIを作ることが可能。日本でもすでに利用可能だったので実際に使ってみました。 Stitch - Design with AI
UI UX Pro Max：AIコーディングアシスタントにデザインセンスを与えるSkill 🔖 4
はじめにClaude CodeやCursorなどのAIコーディングアシスタントに「ランディングページを作って」と頼むと、機能的には動くものの、デザイン面では物足りない結果になることがあります。配色がちぐはぐだったり、フォントの組み合わせが微妙だったり、業界に合わないスタ...
Claude Codeに特化したデザインシステムを作って工夫したこと｜坪田 朋 🔖 203
こんにちは、坪田です。 前回のClaude記事で触れた、Claude CodeやAI最適化したデザインシステムを作ってみたのでまとめです。 Claude Codeが生成するUIの品質が安定しない課題最初の頃は、何か作っても 「いかにもAIが作りました」感のあるデザインで生成されて
【比較実験】AIにやさしいFigmaデザインとは？Claude Code×Figma MCPによるAIフロントコーディング「はじめの一歩」 🔖 151
はじめにみなさんClaude Code触っていますか？かくいう私はプロジェクトでClaude Codeを触る機会があり、それ以来プライベートでもClaude Codeユーザーです。便利ですよね。私はフロントエンド開発をClaude Codeで行う機会が多く、特にFi...
「Code to Canvas」- FigmaとClaudeが変えるAI×デザイン×コードの新常識 - 🔖 1
こんにちは、ハヤマです。 今回は、Figmaで新たに実装された機能「Code to Canvas」が興味深かったので、 こちらについて理解を深めていきたいと思います。 （本記事は、普段コーディングを担当しないWebデザイナーの目線から書いています） Code to Canvasと
Figma MCP × GitHub Copilot でデザイン→コードの自動化を試してみた 🔖 1
Figma MCP と GitHub Copilot を連携し、デザインから React コンポーネントを生成する流れを、セットアップ手順と実践例を交えて紹介します。
【初心者完全版】Reactを使いこなすためのデザインパターン入門【図解解説】 🔖 34
はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 Reactを書いていると時々思うんです。 私はReactを活かしたコードをかけているのだろうか？ Reactにはデザインパターンとしていくつかの代表的なものが存在します。 HOC(高階コンポーネント
「デザインしないで営業？」から3年。壁の鮭と歩んだ、新卒デザイナーの今。 🔖 16
1. 愛知から上京、カバンには「鮭」を忍ばせて 2024年にROXX初の新卒デザイナーとして入社し、気づけば3年目。愛知県出身の25歳です。上京して数年経ちますが、冷蔵庫にはつけてみそかけてみそ（愛知のおいしい味噌だれ）を常備していますし、出先で「魚介モチーフ」の雑貨を見つけると
AIの台頭でデザインとフロントエンドの垣根は融合しつつあるのか？ - Finatext Tech Night #6 イベントレポート 🔖 2
株式会社FinatextのInsuretechドメインでデザインエンジニアを務めさせていただいている安藤（@ameprsand_xyz）です。本記事では2026/3/6に開催された AI時代のフロントエンド実践開発！ - Finatext Tech Night #6 のイベント
はじめに こんにちは、カケハシの生成AI研究開発チームとMusubi Insightチームにてデザイナーをしている堤です。 最近、X界隈では「Figma不要論」といった過激な言葉も飛び交うなど、UIデザインのプロセスが大きな転換期を迎えています。2026年3月現在、私自身のワーク
Firefoxがデザインの大幅な刷新を計画中：「Nova」が提示するUIの転換点とMozillaの決定的な焦燥 | XenoSpectrum 🔖 126
Webブラウザ市場において長らく苦境に立たされているMozillaが、起死回生の策ともとれる大規模なデザイン刷新に着手している。社内で「Nova（ノバ）」というコードネームで呼ばれるこの次期デザインは、従来の四角く堅牢な印象を完全に払拭し、極端なまでの曲線と浮遊感、そして鮮やかな
【初心者完全版】Reactを使いこなすためのデザインパターン入門【図解解説】 🔖 34
はじめにこんにちは、Watanabe Jin(@Sicut_study)です。Reactを書いていると時々思うんです。私はReactを活かしたコードをかけているのだろうか？Reactにはデザインパターンとしていくつかの代表的なものが存在します。HOC(高...
AI時代に人間が鍛えるべきデザイン筋力とは？ - enechain Tech Blog 🔖 33
こんにちは！ET(@et_universe)です。普段は電力取引プロダクトのデザインをしています。 AIを実務で使うようになって、「作る」速度が圧倒的に上がりました。そして同時に、速くなったからこそ見えてきた問いがあります。 速くなる「作る」フローの中で、人間が立ち止まって考える
運用まで考えたUI構築！デザインシステム導入の手引き 🔖 42
この記事の対象読者 プロダクト開発で、UIコンポーネントの管理に苦労しているエンジニア デザインシステムの導入を検討しているチームリード StorybookやHistoireを導入したものの、形骸化した経験がある人 1. はじめに：なぜあなたのデザインシステムは「負債」になるのか
WEBアプリ開発でよく使うデザインパターンを整理する 🔖 39
はじめに デザインパターンという言葉を聞くと、 GoF オブジェクト指向 クラス設計 といった印象を持つかもしれません。 しかし、WEBアプリ開発においても デザインパターンは日常的に使われています。 この記事では、WEBアプリ開発で実際によく登場するパターンにフォーカスして整理
デザインはどこへ行く？「Figma離れ」と、つくる人の境界線が消えていく話｜noko 🔖 42
最近読んだこの記事が、地味に衝撃でした。 👉 記事を読む（Why Are Designers Leaving Figma?） 画像：medium Why Are Designers Leaving Figma?タイトルからして強いんですが、 「デザイナーがFigmaから離れ始めて
Claude Code / Cursor と組み合わせるデザインツール「Pencil」は何者か 🔖 151
この記事は、Pencil を「実際に導入検討する前提」で整理したものです。 機能紹介だけでなく、弱点やコスト、向いている人まで含めて判断材料になるように書きます。 本記事は 2026-02-23 時点の公開情報をもとにしています。 先に結論 1. どういうものか Pencil は
「生成AIでWebデザインできるか調べて」と振られたので Pencil + Claude Code を試した話 🔖 4
お疲れさまです！いつも日刊IETFを書き続けているGMOコネクトの名もなきエンジニアです。生成AI使ってWebサイトのデザインできるかやっておいてって雑に依頼されたので調査しました。はじめにFigma でデザインを作って、それをエンジニアがコードに起こす。この受け...
「時間のデザイン」を読んで自分の習慣を振り返っていた - 桐生あんずです 🔖 44
www.sanctuarybooks.jp 「時間のデザイン」という本をここ最近読み終わった。今の自分に響く要素が多くあって良い本だったので思ったことをざっと書いておく。 先日の三浦半島.rb の参加者の方が紹介されていて、この本を読んで複数の趣味を並行で楽しむために時間の使い方
Cursorデザイン責任者に聞いた「AI時代の勉強法」。答えは「本を読め」 🔖 57
先日、Cursor Party Tokyoというイベントに参加してきた。 ゲストはCursorを作っているAnysphere社のデザイン責任者、Ryo Lu氏。 話を聞いていて強く印象に残ったのは、Cursorは「自動コード生成ツール」ではなくプログラミング学習者のパートナーだと
新デザインツールPencilはなぜエンジニアに刺さるのか 🔖 318
この記事は2026年2月20日時点の情報をもとにしています。Pencilは早期アクセス段階のため、仕様変更の可能性があります。最新の情報は公式サイトを確認してください。 Pencilとは何か Pencilは、IDEに統合できるAIネイティブなデザインツールだ。公式のキャッチコピー
はじめに前回の記事では、AIエージェントを 規範 / 記憶（プリファレンス/ペルソナ） / 記録 の 3 要素と、それらをどう変えられるかという 更新（ガバナンス） として捉えると、設計の議論がぶれにくい、という話をしました。この続編として本記事では、そのフレームワークを「設
AIに「ペルソナ」を与えるだけで、UIデザインはここまで化ける 🔖 284
はじめに AIにUIデザインや要件定義を頼むとき、「機能」ばかり指示していませんか？ 実は、誰が使うか（ペルソナ）を1行足すだけで、出力されるデザインの解像度が劇的に変わります。 同じ「タスク管理アプリ」という指示で、ペルソナの有無によってどれだけ差が出るか実験しました。 検証：
AIに「ペルソナ」を与えるだけで、UIデザインはここまで化ける 🔖 284
はじめにAIにUIデザインや要件定義を頼むとき、「機能」ばかり指示していませんか？実は、誰が使うか（ペルソナ）を1行足すだけで、出力されるデザインの解像度が劇的に変わります。同じ「タスク管理アプリ」という指示で、ペルソナの有無によってどれだけ差が出るか実験しました。...
トーマス @hsxCtzfbH9b5fxS 社会科授業で5年生のまとめをしてるんだけど、ある子が｢五円玉のデザインにある稲の絵は農業、裏の木の芽は林業、水の絵は水産業、穴のまわりのギザギザは歯車の絵で工業を表しているとのことで、日本国の基盤となる産業がモチーフ｣ってことを調べて発
温故知新なUIデザイン｜Nob NUKUI | THE GUILD 🔖 27
これは「Timelab Advent Calendar 2025」の16 日目の記事です。 タイムラボ Advent Calendar 2025 前提物事色々なことをする上で一定程度の歴史、「なぜそれがそのようになったのか？」を理解することはとても大切なことだと思います。 一緒に
さよなら、Figmaからのコピペ。Pencil.devでデザインをコードとして管理する 🔖 38
こんにちは。 突然ですが、フロントエンド開発でこんな**「めんどくさい」**を感じたことはありませんか？ Figmaのデザインを見ながら、CSSの数値をポチポチ書き写す作業 「ここのマージン、デザインと違うよ」という指摘への修正対応 実装が進むにつれて、Figmaのデザイン画と実
Pencilで「AI臭くならないデザイン」を作るために、skillsに how / how to think を書いてみた 🔖 5
はじめに現在 Pencil の話題を見ることが増えました。https://www.pencil.dev/ただ、Pencil を触っていて、「それっぽいけど、どこかAIっぽい」「見た目は整っているけど、判断の一貫性がない」と感じることはありませんか？そこで今回は、P
新しいデザインツール Pencil を試してみた 🔖 226
:::info 当面の間 Pencil は無料で利用できますが、将来的には有料プランが導入される予定です。 ::: インストール後アプリケーションを起動したらメールアドレスの入力を求められます。登録したメールアドレスに確認コードが送信されるので、コードを入力してアクティベートしま
Claude CodeやCursorを使って、AIがUIデザインを生成することができる「Pencil」が登場！ 🔖 322
はじめにみなさんは、Pencil というAIツール使ったことがありますか？Pencilは、Figma + Layermate みたいなツールで、Pencil上でAIにUIを作らせたり、作成したUIをMCPを経由して開発させることができます！この記事では、実際に、Pe...