はてぶ・Qiita・Zennのトレンド記事を紹介
デザインは、Webサイトやアプリの見た目や使いやすさを設計する作業です。UI/UXやグラフィックデザインなど、幅広い分野があります。
スマートラウンドのデザインシステムのこれまでとこれから ~第2回 基本パーツの整備によって統一されたデザインとCSSを書かなくて良い世界へ~ 🔖 1
はじめにはじめまして、株式スマートラウンドでチーフテックリードをしているtsukakei1012です！この記事は連載シリーズ「スマートラウンドのデザインシステムのこれまでとこれから」の2回目の記事となります。第1回はエンジニアとデザイナーでデザインルールを整備する仕組みを整
スマートラウンドのデザインシステムのこれまでとこれから ~第2回 基本パーツの整備によって統一されたデザインとCSSを書かなくて良い世界へ~ 🔖 1
はじめにはじめまして、株式スマートラウンドでチーフテックリードをしているtsukakei1012です！この記事は連載シリーズ「スマートラウンドのデザインシステムのこれまでとこれから」の2回目の記事となります。第1回はエンジニアとデザイナーでデザインルールを整備する仕組みを整
こんにちは、稲垣です。 先日、「読書シェア」に参加しましたので、書籍の紹介とともに表題の件について書いてみようと思います。 yumemi.connpass.com 自己紹介 書籍紹介 最後に
TypeScriptで学ぶデザインパターン 〜Iterator編〜 🔖 1
この記事はJava言語で学ぶデザインパターンを読んで学んだ内容を、TypeScriptのサンプルコードに落としこんでみた記録です。「Iterator パターン」とは何かを理解し、TypeScriptの言語仕様との関係性を把握できる内容となっています。 Iterator パター
たった20秒でUIデザイン完成？Googleの新AIツール「Stitch」をさっそく使ってみた！ 🔖 350
はじめにGoogle I/O 2025が、5月20日（火）と21日（水）の2日間にわたって開催されましたが、皆さんはご覧になりましたか？https://www.youtube.com/watch…
Kindle + DeepLでデザインの名著を自動翻訳して読む｜鈴木慎吾 / TSUMIKI INC. 🔖 59
インタラクションデザインの名著と言われていますが、長らく絶版となっていて中古価格は年々高騰する一方です。なかなか手を出しづらい値段ですが、原著の最新版である以下なら普通の価格で購入できます。 About Face: The Essentials of Interaction De
OpenAI、Appleの元デザイン責任者アイブ氏の企業を65億ドルで買収 AIデバイス開発に本腰か 🔖 45
米OpenAIは5月21日（現地時間）、米Appleの元デザイン責任者、ジョニー・アイブ氏が昨年立ち上げたデザイン企業ioのチームを「より緊密に協働するために合併する」と発表した。米The New York Timesによると、買収は全額株式交換で行われ、総額65億ドルという。
Zustand × React Context を組み合わせたデザインパターン実践 🔖 7
はじめにDress Code株式会社で直近HR Forceの開発をしている、ふるしょうです。HR領域のSaaSは、複雑なフォームの機能要件が伴うことが少なくありません。例えば、入社手続きにおける家族情報の登録など、動的フィールドの表示/非表示や編集制御、複雑な依存関係を持つ
AIを組織の競争力に変える、SpeeeのAIガバナンスデザイン 🔖 16
こんにちは、Speeeでビジネス領域のAIガバナンスプロジェクトのオーナーをしております 長山と申します。普段はバントナー事業部で、クライアント企業のDXに伴走支援しております。また本記事でご紹介する取り組みでは、日々、「AIをもっと活用したい」という現場の声と「安全に使おう」と
webアクセシビリティ、デザイン面での最初の難題「緑オレンジ問題」を考える｜加藤朋義 🔖 329
「このボタンは目立たせたいから、オレンジにしよう！」 そう思ってデザインすると、「このオレンジはアクセシビリティ未達です」と指摘が入る。 目立つ色を使ったのに、アクセシビリティに達していない。そんなちょっと腑に落ちない経験ないでしょうか。 ここではデザイナーさんがひっかかりやすい
Figma Config 2025参加レポート：DMMプロダクトマネージャーが現地で感じた、デザインの未来と熱気。 🔖 2
こんにちは！DMMプロダクトマネージャーの小島です。 このレポートでは、FigmaConfig2025で得られた刺激的な体験や、発表された新機能、そしてサンフランシスコでのちょっとした出来事についてお話ししたいと思います。Figmaユーザーの方も、そうでない方も、これからのモノづ
本書は、C# を用いて GoF（Gang of Four）デザインパターン23種を体系的に解説した完全ガイドです。単なるパターンの紹介にとどまらず、「なぜこの設計が選ばれるのか」という動機と意図にフォーカスし、現代的な設計力の土台となる考え方を掘り下げていきます。✅ 本書の特
デザインシステム「TechTrain Terminal.」のデザイントークンを公開しました！ 🔖 2
こんにちは！TechBowlの梶川(@kajitack)です。この度、TechTrainのデザインシステム『TechTrain Terminal.』のデザイントークンを公開しました！デザイントークンの詳細は、以下のリポジトリでご覧いただけます。https://github.
デザインエンジニアMeetup #1 | イベントレポート 🔖 1
2024年4月25日に「デザインエンジニアMeetup #1 」を開催しました！ デザインとエンジニアリングを横断して問題解決を行い、プロダクトのデリバリーやアイデア検証を高速に行う「デザインエンジニア」。この職種はまだ事例が少なく、業務やキャリアの実態が語られる機会は多くありま
【デザインシステム奮闘記 Vol.01】あの頃は手探りだった――デザインシステム導入までのなが〜い旅路w 🔖 2
みなさん、こんにちは。ジンジャーでプロダクトデザイナーをしている門阪です。この度デザインパートナー「Goodpatch」と協業し、デザインシステム「jinjer sirup」を導入しました！（うおおおおお！おめでとう〜！！👏👏）まだまだ成長段階のデザインシステムですが、私た
模倣から創造へ。Lumaで拡張するデザインの可能性 🔖 16
こんにちは、Insight Edge デザイナーの水上（みずかみ）です。 2023年5月にジョインさせていただき、Insight Edgeが発信する様々なデザインを担当しております。 今回は、近年話題になっている3D生成AIツール「Luma」を使ったビジュアルデザイン制作について
最近のUIデザインにぴったり！ HEXコードより色彩が豊かなOKLCH値のカラーパレットをまとめたCSS -uchū 🔖 31
最近はHEXコードから脱却して、色彩が豊かなOKLCH値のカラーを使用しているWebサイトやスマホアプリが増えてきました。さまざまなプロジェクトで使用できるOKLCHのカラーパレットをまとめたCSSを紹介します。 「uchū」は日本語の「宇宙」で、作者が日本のスタイルや美学などが
ジョナサン・アイブ氏が語る、創造的チーム作りとデザイン哲学 - iPhone Mania 🔖 25
AppleでiPhoneやiMacなどの製品を送り出し、最高デザイン責任者を務めたジョナサン・アイブ氏が対談に登壇しました。創造的な成果を挙げるチーム作りや、製品デザインにおける哲学、デザイナーが持つべき覚悟、自身の失敗、現在進行中のプロジェクトなどについて語りました。 ジョナサ
Googleアプリのロゴ、約10年ぶりにデザイン変更 AI時代反映か 🔖 125
米GoogleのGoogleアプリのロゴの「G」のデザインが約10年ぶりに変更された。5月13日現在、公式発表はまだないが、iOSアプリのApp Storeのロゴは既に新しいものになっており、Pixel端末のアプリのロゴもバージョン「16.18.37.sa.arm64」にアップデ
アクセンチュアによるゆめみの買収で思うこと｜芝陽一郎 | 株式会社アイスリーデザイン | 創業者 & CEO 🔖 380
先週5/8、当社にとっては驚きのニュースが飛び込んできた。ゆめみ、アクセンチュアによる買収に合意のニュースだ。株式会社ゆめみは、国内でも有数のデザインとエンジニアリングを垂直に統合している会社で、当社(アイスリーデザイン)も、ざっくり言えば同じ業態で、案件もたまにバッティングをし
壊滅的な自分のUIデザインをAIにいい感じにしてもらう 🔖 66
はじめに自分は正直デザインが苦手です...。なので個人開発で画面のイメージを作ってみたものの、パワーポイントでただ図形をはっつけたような悩ましいもので「なんとかならないものか」と頭を抱えていまし…
Webスタイルガイド | Science Tokyoデザインシステム 🔖 180
Webスタイルガイドは、本学のWebサイト管理者・運用担当者をはじめ、Webサイトに関わるすべての方が利用することができます。ご利用いただく際は、利用規約の記載事項を遵守し、最新の情報やデータをご利用いただくようお願いいたします。 更新履歴
CanvaがAIにより大幅アップデート！「Visual Suite 2.0」が起こす、デザイン革命 🔖 25
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
【インタビューVol.2 前編】デザインで組織を動かす。GMO全社横断クリエイティブ改革の始まり 🔖 2
危機感から始まった、GMOインターネットグループ横断型会議体の立ち上げ —お二人は「クリエイターシナジー会議」などを通じて、GMOインターネットグループ全体のクリエイティブを強化する取り組みを進めていらっしゃるんですよね […]
『PMフィッシュボウル 〜組織デザインってむずくない？編〜』参加してみた 🔖 17
こんにちは、稲垣です。 2025年度からはイベント参加や登壇だけでなく RAKUS Developers Blog | ラクス エンジニアブログやRakus Designers note にも積極的に投稿して行こうかなと思っています。 Xでもプロダクトマネージャーのこと、デザイナ
個人開発の一環でWebデザインのモーションのアイデアを集めたサイトを作りました。掲載されているコードは自由にお使いいただけます。 このサイトのコンセプトやどのような作りになっているのか紹介します。 サイト概要 Webデザインにおける様々な動きに注目して、そのプリミティブな要素を紹
こんにちは！ 新規事業開発室にてデザイナーをやっているitoです！ この記事では先日Gunosyからリリースされた適時開示プラットフォーム「IR Hub」のロゴデザインができるまでの経緯を簡単に共有できればと思います。 IR Hubとは？ IR Hubとは、あらゆる情報開示に
個人開発の一環でWebデザインのモーションのアイデアを集めたサイトを作りました。掲載されているコードは自由にお使いいただけます。https://web-motion-catalog.com/このサイトのコンセプトやどのような作りになっているのか紹介します。 サイト概要W
はじめに 長らくReactを雰囲気で書いてきました。コンポーネントを作り、propsを渡し、状態を管理する基本的な概念は理解していたものの、より体系的なアプローチや設計パターンについては深く考えずにコードを書いていました。しかし、より大規模で保守性の高いアプリケーションを構築する
デザインシステム MFUI を MCP サーバー化して社内に提供した話 🔖 50
はじめに この記事は、弊社で開発しているデザインシステム MFUI のコンポーネント情報を AI コーディングアシスタントに効率的に提供するために開発した Model Context Protocol (MCP) サーバーの実装と活用方法について解説します。 なお、MFUI の詳
はじめに長らくReactを雰囲気で書いてきました。コンポーネントを作り、propsを渡し、状態を管理する基本的な概念は理解していたものの、より体系的なアプローチや設計パターンについては深く考えずにコードを書いていました。しかし、より大規模で保守性の高いアプリケーションを構築する
デザインシステム MFUI を MCP サーバー化して社内に提供した話 🔖 50
はじめにこの記事は、弊社で開発しているデザインシステム MFUI のコンポーネント情報を AI コーディングアシスタントに効率的に提供するために開発した Model Context Protocol (MCP) サーバーの実装と活用方法について解説します。なお、MFUI の詳
Ubie の SWE 3 人で、『デザインシステムをMCPサーバー化したらUI実装が爆速になった』の話を深掘る｜oliva 🔖 68
gurichanとolivaは、プロダクト「症状検索エンジン ユビー」を開発するソフトウェアエンジニア（今回のMCPサーバーの利用者）です。 sosukeは、アプリケーション基盤チームのソフトウェアエンジニア（今回のMCPサーバーの提供者）として、開発者体験の向上に取り組んでいま
Vueでも! デザインシステムをMCPサーバー化してみた 🔖 1
話題のMCP(Model Context Protocol)を活用し、Vue3/Vuetifyベースのデザインシステム向けに独自サーバーを実装。LLM連携による開発効率化、実装ノウハウ、課題を詳解します。
エンジニアが Figma のデザインを実装するときに見るべきポイント 🔖 2
デザイナーの白川です。 主にプロダクトのUIをデザインしています。 前回はデザイナー向けに「Figma で実装イメージを効果的に伝えるためのデザインのコツ」という記事を書きました。 developers.play.jp 今回の記事ではエンジニアさん向けにFigmaのデザインを実装
FigmaデザインをHTMLコードへ自動変換する方法 - GMOインターネットグループ グループ研究開発本部 🔖 287
1. はじめに こんにちは、次世代システム研究室のT.D.Qです。 デザインとコーディングの間にあるギャップを埋める新しいアプローチとして、FigmaでデザインされたウェブUIを自動的にHTML/CSSコードに変換する方法が注目されています。特に、オープンソースのFigma Co
【開発者に聞いた】ソニー・ホンダ「協業の仕方」をAFEELA 1のデザインから解き明かす 🔖 13
コンテンツブロックが有効であることを検知しました。 このサイトを利用するには、コンテンツブロック機能（広告ブロック機能を持つ拡張機能等）を無効にしてページを再読み込みしてください。 ✕
社内のデザインシステムをMCP化したので事例を紹介！ts-morphを使ったアプローチの実装・プロンプト例をまとめて解説 🔖 183
こんにちは！株式会社エス・エム・エスでエンジニアをしている @_kimuson です。 今回は、社内のプロダクト開発で利用しているデザインシステムを MCP 化して提供し、社内のデザインシステムを活用した自然言語によるコーディング環境を整備したので、事例を紹介します！ デザインシ
スマートラウンドのデザインシステムのこれまでとこれから ~第1回 エンジニアとデザイナーの協業開始 ~ 🔖 1
はじめにはじめまして、株式スマートラウンドでチーフテックリードをしているtsukakei1012です。私たちの会社では、エンジニアとデザイナーが協力してUIコンポーネントやルールを整備する「デザインシステム」を重視しています。今では、社内で誰もが当たり前に使うコンポーネントが
社内のデザインシステムをMCP化したので事例を紹介！ts-morphを使ったアプローチの実装・プロンプト例をまとめて解説 🔖 183
こんにちは！株式会社エス・エム・エスでエンジニアをしている @_kimuson です。今回は、社内のプロダクト開発で利用しているデザインシステムを MCP 化して提供し、社内のデザインシステムを活用した自然言語によるコーディング環境を整備したので、事例を紹介します！ デザイ