はてぶ・Qiita・Zennのトレンド記事を紹介
デザインは、Webサイトやアプリの見た目や使いやすさを設計する作業です。UI/UXやグラフィックデザインなど、幅広い分野があります。
導入したツールの定着までの「壁」をどう乗り越える？ ー 行動科学に基づく習慣化の仕組みとUXデザイン 🔖 2
はじめに こんにちは。デザインストラテジストの松迫です。 「AIツールを導入したが、その後定着しない」——こんな経験はないでしょうか？ 本記事では、行動科学に基づいた「ハビットデザインメソッド」を使って、 ツール定着の壁を乗り越える具体的な方法をお伝えします。 私は習慣化を促すU
数行のCSSで、UIデザインの使い心地を向上させるテクニックのまとめ 🔖 34
優れたインターフェイスは、小さな要素が積み重なって、素晴らしいユーザーエクスペリエンスが生み出されます。数行のCSSで、インターフェイスの使い心地を向上させるテクニックを紹介します。 生成AIのスキルとしてコーディングアシスタント（Claude Code、Codexなど）に使うこ
UIデザインやエディタのカラーに最適！ 目に優しい、アナログ印刷のインキと紙の色合いを再現したカラースキーム -Flexoki 🔖 42
アナログ印刷のインキ、温かみのある紙の色合いからインスピレーションを得て、デジタルのスクリーンで見ることを想定して設計されたカラースキームを紹介します。 WebサイトやスマホアプリのUIデザインに使用したり、VS Codeなどのエディタに使用したり、ライトモードでもダークモードで
デザイン書の老舗・MdNが消滅へ インプレスに吸収合併 🔖 198
デザイン誌「MdN」（2019年に休刊）で知られた出版社・エムディエヌコーポレーションが7月1日付でインプレスに吸収合併され、法人として消滅する。親会社のインプレスホールディングス（HD）が6月1日に発表した。 エムディエヌコーポレーションは1992年設立。デザイン誌「MdN」の
モダンなシステム運用への道標 - 第2回 ユーザー視点で考える！モダンな監視デザインパターンとアンチパターン 🔖 2
前回は、運用の真の目的が「MTTD（検出）とMTTR（復旧）の短縮」にあることをお伝えしました。では、具体的に「何」を「どう」監視すれば、この目的を達成できるのでしょうか。とりあえずCPUやメモリの負荷を眺めているだけでは、ユーザーが体験している「重い」「使えない」という不...
新人漫画原作者の人が、作画担当がチャッピーと画像生成AIで主人公の容姿デザインを作っていたことが先月発覚したため連載企画を降りた話が話題に 🔖 70
石川雅之 @isk_ms Alが仕事を奪いに来ると言うけれど、全然奪いに来ないのでこっちから奪われに行ってみた。「チャッピーなんか新キャラ考えてみてよ」 いや違うなー。その程度の新キャラではあかんのよ。まだお前に、いや貴様なんぞに奪われる気は1ナノも感じないわ。 pic.x.co
エヌビディア、日産他登壇「ソフトウェアデザイン for ハードウェアConference」 🔖 53
7/31(金)コングレスクエア羽田/ソフトウェアが物理世界を直接動かす領域における設計・実装・運用の意思決定をテーマに開催
UIデザインはもちろん、イラストや紙のデザインにも対応！ カラーパレットをAIで生成できる完全無料ツール -EnigmaEasel 🔖 45
ここ1,2年でAIによる便利なツールが増えてきました。ここで紹介するのはそれらの便利なAIツールの中でもかなり実用的で、これまでの定番ツールも同時に利用できるお勧めツールです。 プロンプト（日本語）で「夕陽のカラーパレットをつくって」とお願いできるのはこれまでもたくさんありました
Claude Codeでデザインのワークフローを変えたら、役割の境界が融けていった話──越境するほど鮮明になる、デザイナーの「核」とは｜Goodpatch Blog グッドパッチブログ 🔖 30
ナレッジ・ノウハウ Claude Codeでデザインのワークフローを変えたら、役割の境界が融けていった話──越境するほど鮮明になる、デザイナーの「核」とは こんにちは。グッドパッチのUI/UXデザイナーのナスカです。 最近、仕事で「Claude Code」の話を聞かない日がありま
無料化され、かなり進化したAffinityで何ができるのかが分かるデザイン書 -Affinity入門 無料ではじめるプロ並みデザイン 🔖 49
※本ページは、アフィリエイト広告を利用しています。 Affinityが無料化されて半年が過ぎようとしています。リリース直後はインストールがうまくいかないなどの問題がありましたが、現在はそういった問題はなくなりました。 無料化されて大きく変わったのが、3つのアプリが1つに統合された
職人技が光る美しいアイコン素材！ CSSの各プロパティや値をデザインしてアイコン化 -Cascade Icons 🔖 17
コードを理解するデザインツール向けに、CSSの各プロパティや値をデザインしてアイコン化したCascade Iconsを紹介します。 display: flex;, display: grid;はもちろん、position: sticky;, padding, margin, te
Inside #Board43: ソフトウェア・パッケージデザイン編 #rubykaigi 🔖 6
こんにちは。スマートバンクの kaoru です。RubyKaigi 2026 で実施した PicoRuby ワークショップについての連載第 2 回目として、masawada さんの基板編に続き、ソフトウェア(ブラウザー上で動く Board43 Playground および基板のフ
実案件で見えた、DESIGN.md × Copilot × Claudeという新しい進め方ここ最近、「AIでUIを作る」「デザインもAIがやる時代」といった話題をよく目にするようになりました。ただ正直なところ、絵はそれっぽく出るけど、実装につながらないプロトタイプ止ま
よく使うUIデザインパターンを全部まとめてみた（ユースケース別に分類・グループ化） 🔖 34
補足：各パターンの具体的な実装は MUI・Ant Design・Shadcn/ui などのコンポーネントライブラリで対応するものが見つかることが多いです。ライブラリはあくまで実装手段の一例です。 📋 目次 UIデザインパターン 入力の取得 (Getting Input) ナビゲー
ロゴ制作で提出した初稿デザインをAIに食わせて「こうしてほしいんです」と戻してきたクライアントに虚しさと憤りを感じた→デザインの現場で同じことが起きまくっているらしい 🔖 435
Yamanaka｜YNK.Design @KY_creator 契約があるので詳細は言えませんが… 僕もロゴ依頼で「こうしてほしいんです」って僕の初稿デザインをAIに食わせたものを戻され虚しさと憤りを感じました 結局その案件は先方からキャンセル。僕からは全デザインの破棄をお願いし
よく使うUIデザインパターンを全部まとめてみた（ユースケース別に分類・グループ化） 🔖 34
はじめにUIを設計・実装していると、「このインタラクション、なんて名前だっけ？」「似たようなパターンが多くてどれを使えばいいか迷う」という場面によく出くわします。そこで今回は、UIデザインパターンと説得的デザインパターンを、ユースケースごとに分類・ツリー形式でまとめ...
こんにちは。バクラク事業部で機械学習エンジニアをしている伊藤（@sbrf248）です。最近はオンライン上で日々流れてくる情報が膨大なので、頭の整理のため紙とペンをよく使うようになりました。GWには（手の届く範囲で）少し高価なボールペンを買ってみました。 さて、近頃はAI・LLMを
Figmaを使わずStorybookでデザイン描いたら検討漏れが131件見つかった 🔖 4
コードが書けないデザイナーがClaude CodeでStorybookを書き、PdMとの操作検証で131件の仕様課題を実装前に発見・解決。Figmaでは見えない「仕様の検討漏れ」をコードで炙り出し、手戻りを前工程で潰した実践録
なんでも作れる時代に、何を作るか — アラン・ケイとAI時代のプロダクトデザイン - enechain Tech Blog 🔖 48
アラン・ケイとは何者か 今のコンピュータ体験の多くはここから始まっている Dynabook — 「個人のためのメディア」という構想 GUI — コンピュータを「触れる」ものにした Smalltalk — コンピュータの見方そのものを変えた Appleのプロダクトとケイの思想 未来
Figma開かんでもデザインできる時代がきたで｜Claude Designで初稿まで爆速ガイド 🔖 1
Anthropic LabsのClaude Design（2026/4/17リリース）を実体験で完全攻略するで。プロンプト1本でプロトタイプ・ワイヤー・LP・スライド初稿作ってそのまま編集、デザインシステム構築、週間利用枠まで見せたる本やで。
【2026年4月更新】Claude Codeの役に立つフロントデザインのskills10選 🔖 62
「Claude Codeに頼んでUIを作ってもらったのに、なんか普通すぎる…」と感じたことはありませんか？ Interフォント、白背景に紫グラデーション、無難なカードレイアウト、これ、実は世界中のエンジニアが同じ悩みを抱えています。 Claude Codeは非常に優秀なコーディン
「AIによく見られる没個性的なデザインパターン」をShow HNへの投稿数が爆増した結果から分析するとこうなる、やはり独創性の欠如が問題 🔖 44
起業家かつソフトウェアエンジニアのエイドリアン・クレブス氏が、エンジニアが集うコミュニティ「Hacker News」の投稿を分析し、AIによるデザインが氾濫しているという結果についてブログにまとめています。 Show HN submissions tripled and now
要求から体験への変換を、AIが検証する時代のデザインシステム - freee Developers Hub 🔖 114
はじめに 現在freeeでAIフィジビリティ検証基盤のPdMをしています。Jです。もともとはフロントエンドエンジニア、デザインエンジニア、プロダクトデザイナーとキャリアを渡り歩いてきました。 どの職種にいても感じていたのは、要求が画面になり体験になるまでの変換のたびにロスが発生す
職域を超えるデザイン – AI時代のデジタルプロダクトデザイン戦略 🔖 1
AmebaLIFE事業本部のデジタルプロダクトデザインリードの本田です。 今回は、近年我々が取り組ん ...
要求から体験への変換を、AIが検証する時代のデザインシステム 🔖 114
はじめに 現在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再構築 🔖 3
「一貫性」という理想の裏に、迷い込んでいませんか？「プロダクトが多角化する中で、どうすれば一貫した体験を維持できるか」「開発スピードを落とさず、ブランドの信頼を守り抜くには？」現在、多くのプロダクト開発現場で、デザインシステムはこれらの問いに対する「銀の弾丸」として期待され
Claude Opus 4.7 のデザイン力を検証してみた 🔖 1
Claude Opus 4.7 が出たので、デザイン面の実力 を検証してみました。国内外の反応を見てみると、Opus 4.7 は 評価がかなり割れているモデル のようです。たとえばこんな声が出ています。トークン消費量が最大 35% 増（新トークナイザーの影響）自律化に振
これからのデザインの新しい定番書！ デザインのしっかりした知識とテクニックをかなり深く学べる -デザインの最強原則 🔖 92
これからのデザインの新しい定番書！ デザインのしっかりした知識とテクニックをかなり深く学べる -デザインの最強原則 ※本ページは、アフィリエイト広告を利用しています。 気に入ったデザインを参考にしたけど、うまくいかなかった。なぜこのデザインなのか聞かれても、説明できなかった。そん
ソニーの「サイバーショット」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