業務向けUIデザインシステムの代表例と、これから｜久保 シンスケ
リーガルテックAI SaaSであるMNTSQ（モンテスキュー）でプロダクトデザイナーをしているクボです。 この記事は、社内のプロダクトチームで実施している気軽な知見共有の会であるProduct Dev Talkで話した内容をもとに作成しました。 デジタルプロダクト向けには、一貫性のあるデザインやデザイン言語を定義し、そのデザインを統一的かつスケーラブルに適用するためのUIデザインシステムが存在します。一連のルールやガイドライン、コンポーネントなどが含まれており、多数のプロダクトやサービスのデザインを調整し、再利用可能なデザインパターンを開発することができます。このため、ソフトウェアやコンテンツの開発、更新を迅速かつ効果的に行い、UIの品質と効率を高め、UXを向上させることが可能です。 また、ブランドデザインシステムに内包されたり接続することで、企業や組織が保持するブランドイメージやデザイン
Why Storybook in 2022?
Teams around the world use Storybook to power their frontend workflows. But how it is used can vary immensely. Microsoft documents their Fluent design system. Mozilla develops pages for their web apps in isolation. While BBC automates testing for readers in every locale. The breadth of Storybook’s use cases makes it tricky for new folks to understand the core value. Why do developers actually use
Storybookを導入してみてわかった、導入おすすめプロジェクトの特徴 | Fintan
はじめに 西日本テクノロジー＆イノベーション室の山田です。 現在私が所属しているプロジェクトでStorybookを導入しました。 導入前に期待していた利点のほかにも、導入してはじめて気づいたStorybookの良さがありました。 また、導入して気づいた点をもとにStorybookの導入に向いているプロジェクトの特徴を考えました。 本記事ではその2点の紹介をします。 Storybookの概要 StorybookはUIのコンポーネントをアプリケーションに組み込まず独立して開発できるツールです。 ReactなどのUIを構築するライブラリを使用してアプリケーション開発を行う場合、コンポーネントを画面に組み込み、画面全体の動作を確認しながら開発を進めていきます。 それに対し、Storybookを使用することで個別のコンポーネント単体の動作・UIの確認ができます。 Storybookを起動すると以下の
大規模サービスのUIデザインを管理する工夫｜たまい
2022年7月27日にFigma Japan Community Event「Figmaの活用策をシェアしよう！」でLTを行いましたので、その発表内容を公開します。 以下、書き起こし内容です👇 たまい（@tmi_1064）です。現在はクックパッドにてレシピサービスアプリの体験設計・UIデザインに取り組んでいます。 クックパッドのデザイン体制現在クックパッドでは、「毎日の料理を楽しみにする」ことを目標に料理に関する課題を解決できるプロダクトを3部署、合計9人のデザイナー体制で開発しています。 1サービスにこれだけのデザイナーが関わるとなると、様々な課題が出てきてしまいます。 今回はそんな課題に対してどんな方法で解決したかをいくつかご紹介させていただきます。 課題1：施策/デザイナーが複数関係していてトンマナ管理・仕様の把握が大変まず1つ目は「施策/デザイナーが複数関係していてトンマナ管理・
商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 アイコンは小さいサイズでもくっきり見えるようにデザインされており、SVGだけでなく、Webフォントも揃っています。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 アイコンのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute IconはWebサイトやスマホアプリのUI用にシンプルにデザインされた高品質なアイコンです。24x24のグリッドで設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストローク、SVG、PNG、およびWebフォントがサポートされています。 ライセンスはApache License 2.0で、商用
【インタビュー】5年ぶりの新作でUI開発フローを一新！ デザイナーとプログラマーの分業を実現した『真・女神転生V』 - OPTPiX Labs Blog
※メニュー画面の選択肢やパーティメンバーのパネルのレイアウトに SpriteStudio。背景には CRI Sofdec の”ムービーテクスチャ”も採用 小山田 氏：ここにあるシーンには、すべて SpriteStudio が使われていますね。 大橋 氏：メッセージダイアログは、SpriteStudio をフル活用していますね。それに、 “MENU”画面の背景は、Sofdec*の「ムービーテクスチャ」も使っています。 *筆者注：CRI Sofdec。マルチプラットフォーム対応の動画再生システム 小山田 氏：本日のインタビューに先駆けて、チーフデザイナーからコメントを預かってきました。そのコメントによるとー “UI のデザインコンセプトは、シックで抽象絵画的な印象の基本的に落ち着きのある UI 表現を目指しています。” “機能性＆操作性重視で視認性や画面情報の伝わりやすさを大切にしつつ、要所要
React でデザインシステムを正しく実装する - コンポーネントカタログを超えて | Wantedly Engineer Blog
Wantedly でバックエンドのテックリード的なやつをやってる @izumin5210 です。半年くらい前から取り組んでいた、UI デザインシステムの React 実装について紹介します。ソフトウェアの設計としても非常にエキサイティングだったので、ライブラリ作ったりするのが好きな人なども楽しんでもらえると思います。 TL;DRWantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール＆アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となるデザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮するこの話が気になった（Web・モバイル問わず）フロント
Storybook Tutorials
professional developers experienced with JavaScript, React and Storybook. If you're not quite there yet, visit Intro to Storybook to learn the basics! Testing UIs is awkward. Users expect frequent releases packed with features. But every new feature introduces more UI and new states that you then have to test. Every testing tool promises “easy, not flaky, fast”, but has trade-offs in the fine prin
2020年のデザイントレンドと注目のWebサイト5選 | アドビUX道場 #UXDojo
2020年のデザイントレンドと注目のWebサイト5選 | アドビUX道場 #UXDojo 連載 エクスペリエンスデザインの基礎知識 Webサイトのデザインおよび制作のための技術は、年々利用しやすくなっています。数時間でコードを書かずにサイトを公開できるプラットフォームを提供するSquarespaceやWixはその好例です。 一方、市場における競合はとても激しく、そのためユーザー体験がますます重要視されるようになっています。適切にサイトをデザインすることができれば、訪問者に良い印象を与え、再度訪問したいという意欲を持たせる可能性も高まるでしょう。 では、どのようにデザインすればサイトを際立たせることができるのでしょうか？優れたWebデザインの例はいくつも存在しますが、それらを見つけ出して優れている理由を特定するのは手間のかかる作業です。そこでこの記事では、2020年のベストデザインと呼べるW
"Neumorphism" なるUIデザインのトレンド｜木村 博信 (hiro_kimu)
「新しいスキューモーフィズム」を謳う "Neumorphism" というデザインが最近一部で提唱されているようです。 Skeuomorph Mobile Banking by Alexander Plyuto この例のようにボタンやカードなどの要素が凹凸で表現されていて、明るい影（光）が落とされているのが特徴です。それによってボーダーや塗りを使わずに要素の形状を表します。 Neumorphism in user interfaces 単色の物体に凹凸が付けられているように見えるビジュアルは、ディーター・ラムスがBRAUNで手掛けたブロダクトや初期iPodのデザインをちょっと想起させますね。 端的に言えば「スキューモーフィズムに半分回帰した」ようなUIデザインです。 The Book Of Life - "Dieter Rams" ルールこちらに解説記事がありますが、次のようなルールがあるよ
Top UI/UX Design Works for Inspiration — #89
Every day most digital designers look for inspiration on sources like Dribbble. In a large stream of the works, it is very easy to miss some quality shots with small number of likes and comments. We decided to change that and every week showcase some of the recent cool shots of young designers who didn’t get much attention of the community. Here they are:
iOSアプリ開発でUIをリッチにする表現集第2弾 - mojiru【もじをもじる】
iOSアプリ開発 UI実装であると嬉しいレシピブックVol.2 「iOSアプリ開発 UI実装であると嬉しいレシピブックVol.2」発行主旨・内容紹介 「iOSアプリ開発 UI実装であると嬉しいレシピブックVol.2」目次 「iOSアプリ開発 UI実装であると嬉しいレシピブックVol.2」Amazonでの購入はこちら 「iOSアプリ開発 UI実装であると嬉しいレシピブックVol.2」楽天市場での購入はこちら※電子書籍版です。 iOSアプリ開発 UI実装であると嬉しいレシピブックVol.2 インプレスグループで電子出版事業を手がけるインプレスR&Dは、技術書典や技術書同人誌博覧会をはじめとした各種即売会や、勉強会・LT会などで頒布された技術同人誌を底本とした商業書籍を刊行し、技術同人誌の普及と発展に貢献することを目指し、最新の知見を発信する「技術の泉シリーズ」から酒井文也氏著書でUIをもっとリ
任天堂のゲームでよく見かける「あのフォント」の秘密に迫る。近年の様々なタイトルで採用 | EGGPLANT MAGAZINE（エッグプラントマガジン）
近年の任天堂製タイトルの多くはあるフォントを利用していることをご存知でしょうか？ このフォントは「スーパーマリオ オデッセイ」ではほぼ全てのテキストにこの利用されていますし、「大乱闘スマッシュブラザーズ Special」でもゲーム内の文字という文字がこのフォント、さらに「ゼルダの伝説 ブレスオブ ザ ワイルド」の主要なテキストもこのフォントですし、「ARMS」もそう、「スーパーマリオパーティ」もこのフォントですし、例を挙げればキリがありません。 スーパーマリオ オデッセイ 大乱闘スマッシュブラザーズ Special ゼルダの伝説 ブレスオブ ザ ワイルド ARMS 「こんなに使われてるってことは任天堂オリジナルフォント？」とお思いの方もいるかもしれませんが、このフォントの正体はフォントワークス社の「ロダンNTLG」(ニタラゴ)で、同社の定額制サービス「LETS」に加入すれば使えてしまうので
Figma3.0リリースでFigmaがDOPEなデザインツールになった｜SketchでもAdobe XDでもない選択肢｜Nao Komura｜note
みなさんはFigmaというデザインツールをご存知でしょうか。 正直な所、Adobe XDやSketchなどと比べると知名度も低いし、それらのツールと比べても機能は充実しているのですが使い所が微妙。 (ちなみに、Figmaの公式サイトにもXD、Sketch、Invision Studio、Framerと比較したページはあるのですが全部同じ内容で肩透かしをくらいます。) という具合に個人的に推しているデザインツールではあるものの、惜しい部分が多くまだ布教できる段階では無いな、という印象も持っていました。 しかし...... バージョン3.0のリリースでその印象が大きく変わり、最強のデザインツールFigmaを布教するぞ、という気持ちになりました(謎の使命感) ということで、Figmaの機能の紹介をメインに主要なUIデザインツールであるSketchとAdobe XDとの比較なんかも合間合間していこ
Figmaの使い方、全力でまとめました。｜hikaru-takase /Loglass
最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。 私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。 導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが名前と職業を聞かれるぐらいで簡単に登録できます。またgoogleアカウントを持ってる人であれば、そちらからすぐにログインできるのでおすすめ。 ログイン後はfigmaのダッシュボードが表示されます。 webブラウザでほぼすべての機能が使えるのがfigmaの特長でもあります。 Desktop Appをインストールする やはり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者は要チェック！ Figmaで無料利用できるUI用のデザインシステムのまとめ -Design Systems for Figma
Fluenticons
Andrii Teslia
https://s.muz.li/NzgyYzQxNjI0
Lovers Magazine x SPACES
