はてぶ・Qiita・Zennのトレンド記事を紹介
デザインは、Webサイトやアプリの見た目や使いやすさを設計する作業です。UI/UXやグラフィックデザインなど、幅広い分野があります。
Figmaを使わずStorybookでデザイン描いたら検討漏れが131件見つかった 🔖 3
コードが書けないデザイナーがClaude CodeでStorybookを書き、PdMとの操作検証で131件の仕様課題を実装前に発見・解決。Figmaでは見えない「仕様の検討漏れ」をコードで炙り出し、手戻りを前工程で潰した実践録
なんでも作れる時代に、何を作るか — アラン・ケイとAI時代のプロダクトデザイン - enechain Tech Blog 🔖 45
アラン・ケイとは何者か 今のコンピュータ体験の多くはここから始まっている Dynabook — 「個人のためのメディア」という構想 GUI — コンピュータを「触れる」ものにした Smalltalk — コンピュータの見方そのものを変えた Appleのプロダクトとケイの思想 未来
【2026年4月更新】Claude Codeの役に立つフロントデザインのskills10選 🔖 60
「Claude Codeに頼んでUIを作ってもらったのに、なんか普通すぎる…」と感じたことはありませんか？ Interフォント、白背景に紫グラデーション、無難なカードレイアウト、これ、実は世界中のエンジニアが同じ悩みを抱えています。 Claude Codeは非常に優秀なコーディン
「AIによく見られる没個性的なデザインパターン」をShow HNへの投稿数が爆増した結果から分析するとこうなる、やはり独創性の欠如が問題 🔖 44
起業家かつソフトウェアエンジニアのエイドリアン・クレブス氏が、エンジニアが集うコミュニティ「Hacker News」の投稿を分析し、AIによるデザインが氾濫しているという結果についてブログにまとめています。 Show HN submissions tripled and now
要求から体験への変換を、AIが検証する時代のデザインシステム - freee Developers Hub 🔖 110
はじめに 現在freeeでAIフィジビリティ検証基盤のPdMをしています。Jです。もともとはフロントエンドエンジニア、デザインエンジニア、プロダクトデザイナーとキャリアを渡り歩いてきました。 どの職種にいても感じていたのは、要求が画面になり体験になるまでの変換のたびにロスが発生す
職域を超えるデザイン – AI時代のデジタルプロダクトデザイン戦略 🔖 1
AmebaLIFE事業本部のデジタルプロダクトデザインリードの本田です。 今回は、近年我々が取り組ん ...
要求から体験への変換を、AIが検証する時代のデザインシステム 🔖 110
はじめに 現在freeeでAIフィジビリティ検証基盤のPdMをしています。Jです。もともとはフロントエンドエンジニア、デザインエンジニア、プロダクトデザイナーとキャリアを渡り歩いてきました。 どの職種にいても感じていたのは、要求が画面になり体験になるまでの変換のたびにロスが発生す
「Claude Design」が登場、AIに頼んでUIやプレゼン資料をデザイン可能 🔖 31
AI開発企業のAnthropicがデザインツール「Claude Design」を2026年4月17日に発表しました。Claude Designを使うことで、デザインに詳しくない人でもAIと協力して見栄えのよいUIやプレゼン資料を作ることができます。 Introducing Cla
【神機能】Claude Design完全解説！対話でデザインシステムからUI・スライドまで作れる｜まさお@未経験からプロまでAI活用 🔖 53
Anthropicが新プロダクト「Claude Design」をAnthropic Labsからリリースしました。これは、Claudeと対話しながらUIモックアップ・スライド・ランディングページ（LP）などのビジュアル制作を協働できる画期的なツールです。従来のAI画像生成とは異な
Claude Designは"デザイン"という行為をどう変えていくのか？｜こぎそ 🔖 29
2026年4月17日、AnthropicがClaude Designを発表しました。Claude Opus 4.7を基盤にしたデザイン生成の実験的プレビューで、段階ロールアウトで私のMax環境にも届いたので触ってみました。 Introducing Claude Design by
デザインシステムに「顧客」はいたか？ 陥りがちな神話と、リードエンジニアが挑む真のUI/UX再構築 🔖 2
「一貫性」という理想の裏に、迷い込んでいませんか？「プロダクトが多角化する中で、どうすれば一貫した体験を維持できるか」「開発スピードを落とさず、ブランドの信頼を守り抜くには？」現在、多くのプロダクト開発現場で、デザインシステムはこれらの問いに対する「銀の弾丸」として期待され
Claude Opus 4.7 のデザイン力を検証してみた 🔖 1
Claude Opus 4.7 が出たので、デザイン面の実力 を検証してみました。国内外の反応を見てみると、Opus 4.7 は 評価がかなり割れているモデル のようです。たとえばこんな声が出ています。トークン消費量が最大 35% 増（新トークナイザーの影響）自律化に振
これからのデザインの新しい定番書！ デザインのしっかりした知識とテクニックをかなり深く学べる -デザインの最強原則 🔖 91
これからのデザインの新しい定番書！ デザインのしっかりした知識とテクニックをかなり深く学べる -デザインの最強原則 ※本ページは、アフィリエイト広告を利用しています。 気に入ったデザインを参考にしたけど、うまくいかなかった。なぜこのデザインなのか聞かれても、説明できなかった。そん
ソニーの「サイバーショット」30周年 画期的なデザインと大胆な機構で注目を集めた“あの頃” 🔖 39
ソニーの「サイバーショット」30周年 画期的なデザインと大胆な機構で注目を集めた“あの頃”：荻窪圭のデジカメレビュープラス（1/5 ページ） 先日、キヤノンの「Powershot 30周年記念モデル」を機に、Powershotの30年を振り返るコラムを書いたのだけど、考えてみたら
コードとデザインを自由に行き来する ー Figma MCP × AIエージェントがもたらしたSpindle開発フローの変化 🔖 5
Figma MCPやCursor、Claude CodeといったAIツールの浸透によって、Ameba ...
Claude スキルで Notion PRD → Figma デザイン → UI 生成の自動化を作ってみた 🔖 1
はじめにNotion の PRD を起点に、AI がデザインシステムのコンポーネントを使った React コードを自動生成するワークフローを作りました。この記事では、その設計と仕組みを紹介します。 解決したかった課題従来のフロントエンド実装フローには、3つの課題がありまし
DESIGN.md + 壊れたら気づくハーネス - AI向けデザインシステムを「維持できる仕組み」にした記録 🔖 146
僕のケースでは、生成品質はほぼ同じだった。 ただしこれは、旧版の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 実践編 🔖 50
まず、このプロジェクトのスター数を見てほしいGitHub スター数：フォーク数：そのスターの伸び方がこちらです（クリックするとリアルタイムグラフが開きます）：リリースからほぼ垂直に伸びているのが分かります。なぜこれほど注目されているのか——今回の記事で、そ...
デザインエンジニアMeetup #5 イベントレポート 🔖 1
2026年2月26日に「デザインエンジニアMeetup #5」を開催しました！ デザインとエンジニアリングを横断し、プロダクトのデリバリーやアイデア検証を高速に行う「デザインエンジニア」。この職種はまだ事例が少なく、業務内容やキャリアの実態が語られる機会は多くありません。そこでe
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年ぶりに復刻 🔖 61
PC周辺機器メーカーのエレコムは3月25日、漫画家の士郎正宗さんがデザインしたマウス「M.A.P.P.」を24年ぶりに復刻すると発表した。5月1日の発売に先駆け、4月6日の正午からエレコムダイレクトショップで予約受付を始める。各色3300台の限定生産で、価格は1万2800円。 評
Rust・Kotlin・Go・TypeScriptで再考するGoFデザインパターン：モダン言語機能が変えた設計の常識 🔖 53
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冊の書籍が話題に…同一作品を用いた表紙は他にもいろいろ「マティスはデザインに取り入れやすい」「パブリックドメインだし」 🔖 74
九重ツクモ@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に特化したデザインシステムを作って工夫したこと｜坪田 朋 🔖 204
こんにちは、坪田です。 前回の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（ノバ）」というコードネームで呼ばれるこの次期デザインは、従来の四角く堅牢な印象を完全に払拭し、極端なまでの曲線と浮遊感、そして鮮やかな