「デザイナー不要論」がまた燃えている。 AIがUIをつくれる、ロゴも生成できる、コードも書ける。だったらデザイナーはいらないんじゃないか。 SNSでは定期的にこの話題が燃えて、「デザインはそんな単純じゃない」と反論もあれば、「もうFigma触らなくても画面つくれる」と煽る声もあり、毎回それなりに盛り上がるけど、結論は出ないまま次の話題に流れていく。 最近この不安を相談されることが増えたので、同じ不安を感じてきた当事者として、いま何が起きているかを僕なりに言語化してみた。 Claude Codeを使って圧倒されたこと僕はビジネス価値やユーザーニーズを理解してUIデザインに落とし込むのが得意だけど、クエリを書いてユーザー行動を分析する仕事はアナリストほど得意ではなかった。 それ以外でも苦手分野の作業があれば、重要だとわかっているのに腰が重くて後回しにしていたこともあった。 それが今では、自然言

Google Stitch と awesome-design-md が示した、UI開発の新しい中間層AIでUIを作ること自体は、もう珍しくありません。 テキストから画面を出す。画像から叩き台を起こす。コードまで吐かせる。そこまでは、すでに多くの人が体験しています。 でも、現場で本当に困るのはその先です。 1枚の画面は出せても、2枚目、3枚目、設定画面、モーダル、テーブル、空状態、エラー状態まで含めて、同じ人格のUIを保てない。 ここで急に「AIっぽい雑さ」が出ます。 レイアウトの癖が変わる。 余白のリズムが崩れる。 ボタンの圧が画面ごとに違う。 色の使い方に節度がなくなる。 つまり、AIは画面を作れても、デザインシステムを守るのが苦手でした。 そこに対して、Google Stitch が DESIGN.md を前面に出してきた意味はかなり大きいです。 Google は 2025年5月に S

Claude Codeが目まぐるしいですね…！ 今回はClaude Code to Figmaによるデザイン制作をしてみての感想や今後のUI/UXデザイナーの役割を考えてみたいと思います。 Claude Code to Figmaでやったこと今回試したフローはざっくりこんな感じです。 セットアップ：Claude CodeにFigma MCPを接続する デザインシステムの用意：GoodpatchのSparkleをFigmaライブラリとして使用 Claudeで作成：要件を渡してReactコードを生成、Figmaに書き出し それぞれ詳しく書いていきます。 実際の手順セットアップセットアップはkenさんの以下のポストを参考にしました。非エンジニアにも丁寧に解説されているのでおすすめです。 大まかな流れはこうです。 Claude Codeデスクトップアプリをインストール ターミナルでClaude C

デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。

Claude CodeとFigma MCPを使って、一つ小さなプロダクトを作ってみた流れと気づきを振り返り用にまとめました。 コーディングはできないけど、自分で一つプロダクトを作ってみたいデザイナー向けに少しでも参考になればと思います〜 プロダクト概要Weekly Blooms は、週末に「小さな挑戦」を宣言・達成して自己効力感を育てるWebアプリ。 こちらのURLからぜひ触ってみてください。 使い方はシンプルな2ステップ 土曜朝に宣言 — 「My little challenge」として、この週末にやってみたい小さなことをひとつ入力 日曜夜に振り返る — 達成できたら「Done!」を押して、意外とよかったことを一言メモ 達成すると、ランダムに花の画像がご褒美で届く。その花と一言コメントをまとめたSNSシェア用カード（表：花の画像 / 裏：テキスト）を2枚ダウンロードして、Instagra

デザインシステムが小難しくてよくわからない・これでいいのか不安がある、というプロダクトデザイナー・UIデザイナーに向けたガイドです。暗黙知になりがちなセオリーやプラクティスを徹底的に言語化しました。デザイン観点と実装観点を統合的に扱っているので、各社内のデザイナーがキャッチアップする教材、エンジニア・デザイナーで読み合わせていただくためのドキュメントとして活用いただけます。

はじめに 近年、プロダクト開発の現場では「Design to Code」という概念が大きな注目を集めています。 これは、デザインツールで作成されたUIデザインを直接コードに変換する技術のことで、開発効率の大幅な向上が期待されています。 この流れの中で、Figma社は、Dev Mode（開発者向けの表示モード）やCode Connect（コードとデザインの同期機能）といった機能をリリースしてきました。 このような背景の中、つい最近では「Figma MCP」が話題となりました。 私たちのチームでは、このFigma MCPとAI搭載コードエディタ「Cursor」を組み合わせることで、実際のプロダクト開発に挑戦してみました！ 本記事では、その導入過程で得られた知見、そして実際の運用における工夫について紹介します。 🤖 Figma MCPとは Figma MCPについては、こちらの記事が非常にわか

HackerNoonのレトロなデザインにインスパイアされた、24ピクセルのグリッドで設計されたピクセルアイコンを紹介します。 アイコンは1,440個以上あり、一貫性が確保されたかわいいデザインです。Webサイト、アプリ、プロダクトなど、さまざまなプロジェクトで無料で利用できます。 Pixel Icon Library Pixel Icon Library -GitHub Pixel Icon Libraryは、HackerNoonの特徴であるクラシックなピクセルアイコンのコレクションです。Webサイトやアプリをはじめ、プロダクトなど、さまざざまなプロジェクトで無料で利用できるようになりました。 400種類以上のピクセル化されたベクターアイコン。 軽量のSVGファイル。 PNGファイルは12px, 16px, 24px, 48pxで、ライト・ダークモード対応。 ライセンスはMITライセンスで

パワーポイント用デザインテンプレートを無料でダウンロード。累計30万件以上の実績。A4・ワイド画面（16:9）の2サイズ対応。提案書・企画書・講演資料の品質と生産性を向上させます。個人・商用利用可。

Satsuyako first released the kana font CherryBomb in 2012 with the concept, "Cute with a kick." Its round and modern bounciness has made it appealing for divers

グッドパッチでは社員向けにさまざまな研修を実施しています。定期的な新入社員向けの基礎研修のほか、専門性と難度をより深めた「専門研修」を実施することがあります。この記事では、筆者usagimaruがグッドパッチのデザイナー支援組織であるDesignOpsとして2024年に実施した社内研修 「UIデザイントレーニング」 の内容を一部ご紹介します。 UIデザインの新卒研修についてはこちらの記事でご紹介しています。 https://goodpatch.com/blog/ui-training-softwaredesign 【関連記事】デザイン思考の研修おすすめ10選！ 期待できる効果や選ぶポイントは？ 研修の概要 この研修は、社内の若手UIデザイナー7名を対象に、情報設計の考え方や方法論を駆使した実践的なUIデザインに取り組むプログラムとして設計しました。主な企画をDesignOps部署中心に行い

line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 Webサイトのコーディング（実装）では、デザインデータ通りの数値を反映しているにも関わらず、ブラウザ上の表示がデザインデータと比べてずれる（余白が大きくなりすぎる）場合があります。 これはブラウザのline-heightの仕様によるものですが、line-height制御の難しさがデザインデータとコーディング後（ブラウザ表示）の余白のずれにつながっていると考えています。 この問題を解決するため、line-heightの不要な上下の余白を打ち消すCSSを試したところ効果を実感できたので、この方法のメリット・デメリットや活用についてまとめました。 チームで進めている実際のプロジェクトでこの方法を試してから、2020年1月の時点で9ヶ月ほど経ちますが、メリットとデメリットを比較してメリットが完

【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・

今回の記事は特に私の意見であり、所属会社の意見ではないことをお断りしておきます。 最近になってまたウォータフォール vs アジャイルの議論を見かけることが多くなってきたので、私が勤務する米国の世界規模のクラウドプロバイダーでは2024年現在どんな開発をしているのかをご紹介したいと思います。私はこれが「正解」といいたいのではなく、何らかのポイントが皆さんの何らかの参考になったらいいなと思って筆をとりました。 ちなみに、2016年時点で私のウォータフォール開発に対する考え方は下記のブログの通りで今も変わっていません。ただ、2024年現在だからといってアジャイルをやるべきと思っているわけでもありません。 もし、今ウォータフォールをやっている人がいたら「そんなこと言ってもどうしたらええねん」となると思うので、自分なりの解決方法も考えてみました。 最初に自分的な結論を書いておくと「2024年の開発と

こんにちは！東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るまで人間特有のあらゆる機能や性質のことです。どうしてそのような行動をするのか、という原理を知っていることが、モノづくりや仕組みづくりをする人たちにはとても大切なんです。 弊社デザイン部門には人間特性ワーキンググループという専門チームがあり、デザイン部門内で情報共有や勉強会を行っております。 noteにも「人間工学シリーズ」と

前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 なお、こちらの記事の内容は順次YouTube

やればやるほど呪術化する、AI画像錬成について。 以下は、その道の専門家にはメッチャ怒られるかもしれない、雑なロジックと制御講座。 いちおうメジャーなサービスでは、共通して動作するノウハウ（DALL-E2, MidJourney, StableEiffusion, DiscoDiffusion, crayon, dall-e mini 他）。 雑に理解する画像AIのしくみ対話型のAIにとって、呪文プロンプトとは画像錬成の方向性ベクトルを定めるものにすぎない。 たとえば、以下は「I love apple」で錬成された画像の例である。どうにも、ふわっとしたものが出てくる I Love Apple「Apple」という方向性ベクトルは、「リンゴ」「青リンゴ」と「アップルコンピューター（旧レインボーロゴ」「アップルコンピュータ（新ロゴ）」など、複数の可能性を同時に持つからだ。 つまり、「Apple」

ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、実装で注意する必要があります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、画面全域を覆うUIという意味において同種