ジェネレーティブAI時代のUIパターンを考える｜こぎそ
プロダクトデザイナーをやっている@kgsiです。 最近いわずもがなAIが熱いですよね。Stable Diffusionなどの画像生成モデル、GPT-3（GPT-4）やLaMDAといった大規模言語モデル（LLM）を使った生成系AIやツールが爆発的に増えてきており、個人向けアプリケーションはもちろんですが、業務用アプリケーションにもAIをベースとした機能が組み込まれ始めています。 昨今各社がリリースしてる「AIを下敷きとした機能・アプリケーション」は、ユーザーや業界が望んで生まれた待望の機能…というより、AIの可能性を探るためのPoC味が強い機能が多い印象です。UI（ユーザーインターフェース）においても旧来の延長線上のようなUIや、どうやって使うのかひと目ではわからない、極めて実験的なUIなど…多様なパターンが見かけられるようになりました。 この記事ではAIそのものの解説や実証ではなく、ジェネ
デザインシステムを組織に浸透させる3つの心得
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフーのデータソリューション事業のデザインを担当しています、水野 直と申します。 私は2020年にヤフーに新卒入社し、DS.INSIGHTというプロダクトを支えるDS.DESIGN SYSTEMの大規模改修を担当しました。 デザインシステムの難しさは、構築することよりも、プロダクトの成長に伴走してシステムを運用し、機能させ続けることにあります。サービスの改善のスピード、人の流動が激しい現代において、多くの組織がプロダクトを発展させていくため、車輪の再発明をしないようデザインの言語化、パターン化にリソースを注いでいるかと思います。 今回はNijibox主催「なぜデザインシステムが必要なのか」のイベントに登壇した際の内容をベースに、立
Material-UI is now Material UI! - MUI
Starting today we are evolving our brand identity to clarifying the difference between our company and our products. Material-UI: the organization is now called MUI. Material-UI: the Material Design components developed by MUI is now called Material UI, we ditched the hyphen! Material-UI X: the set of advanced React components is now called MUI X. Material-UI: the set of foundational MIT React com
丸よりも丸みを感じる!? スーパー楕円の魅力とデザイン | Spinners Inc.
こんにちは、Spinners の元山 (@kudakurage) です。 最近はresize.fmという緩めのデザイン系ポッドキャストを @dex1t と始めて、オーディオ系のデバイスや仕組みについて勉強する毎日です。今のポッドキャストの収録環境についても近々書き残しておこうと思っています。 2021年1月に日本で話題になった音声SNS「Clubhouse」についてresize.fmでも取り上げて話したのですが、その中でも話しているスーパー楕円というものについて今回は詳しく書いていこうと思います。 INDEXピート・ハインのスーパー楕円スーパー楕円とデザイン建築や家具のデザインデジタルプロダクトのデザインスーパー楕円を利用した印鑑スーパー楕円の描き方数式を使った描き方（Adobe Illustrator）簡易的な描き方（Vector Draw Tool）ピート・ハインのスーパー楕円 Sou
［新連載］SmartHRの知見を公開！ 大量データとパフォーマンスを見据えたインターフェースの設計
株式会社SmartHRのプロダクトデザイングループが、人事労務領域を扱うソフトウェア「SmartHR」開発で培った知識と経験を活かし、業務アプリケーションにおけるデザインアプローチの考えかたをお伝えしてきます。第1回のテーマは「インターフェース設計の知見と方針」についてです。 はじめまして。株式会社SmartHRプロダクトデザイングループ（以下、プロデザ）で開発を担当している小木曽（＠kgsi）です。 SmartHRは、雇用契約や入社手続き、年末調整などさまざまな労務手続きのペーパーレス化を実現するクラウド人事労務ソフトの会社です。組織の中でプロデザは、ソフトウェアのインターフェース設計と改善、ユーザーリサーチから要件定義、フロントエンド実装などの役割を担い、各領域に特化したデザイナーが、部署や役割を越境しながら日々業務に取り組んでいます。 今回は若輩ながら、SmartHRプロダクトデザイ
デザインパターンの使い方を パタン・ランゲージとの比較から考える / design-pattern-usage-inspired-by-pattern-language
Object Oriented Conference 2020 にて発表した内容です。
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
Devices from Design at Meta
Meta supports a diverse audience around the world and an equally diverse set of devices. To emphasize that in our design mocks, we redrew a range of devices to show the global diversity of the people using our products. Many of the devices come with a bitmap of the device with and without shadows. Please do not repackage and redistribute these as your own. Please see disclaimer for full details.
Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division
Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさらです。 直近のプロジェクトはまさにそんなプロジェクトでした。 本セッションではアトミックデザインのエッセンスを用いてコンポーネント分割の指針を示し、 またコンポーネント実装時に注意すべき事柄についてお話します # URL HomePage: https://nrslib.com Twitter: https://twitter.com/nrslib
文字サイズの比率と調和
ウェブページのテキストはいくつかの文字サイズの組み合わせで出来ています。それぞれの文字サイズは情報の階層構造を表現するなどの役割を担いますが、同時にお互いが適切なバランスで調和しているべきです。そのため文字サイズはページやコンポーネントごとに場当たり的に決められるべきではありません。プロジェクトを通じて一貫したシステムを形成している必要があります。 そういった調和と一貫性を持った文字サイズのシステムを作るために、私たちのチームでは「調和数列」に基づいて一連の文字サイズを決めることがあります。調和数列とは等差数列（隣接する項が共通の差を持つ数列）の各項の逆数からなる数列です。 1, 2, 3, 4, 5, 6 ... // 等差数列 1, 1/2, 1/3, 1/4, 1/5, 1/6 ... // 調和数列 実際に調和数列を用いて文字サイズを算出する例を以下に示します。 $font-siz
ソシオメディア | デザインマネジメント原論
– デザイン経営のための実践ハンドブック（デザインマネジメント・シリーズ） – デイビッド・ハンズ (著), 篠原 稔和 (監修, 翻訳), ソシオメディア株式会社 (翻訳) 東京電機大学出版局（2019/5/27）：ISBN-13: 978-4501631802 ; 3,996円 (税込) ; 240ページ シリーズ第１弾！デザインマネジメント領域の第一人者デイビッド・ハンズ著、待望の翻訳。本領域を学ぶ初学者から実務者までもが学ぶことができる最良の教科書。「デザイン」と「マネジメント」を統合的に扱う非常に難しいテーマであるにもかかわらず、明快でわかりやすい内容と構成。ワークショップなどを重ねながら活用できるハンドブックとしても使用可能。 （東京電機大学出版局社の紹介文より） 目次 日本の読者の皆さんへ まえがき 第1章 デザインの価値―デザインと組織― 1.1 はじめに 1.2 デザイン
WWDCのDesign Labが 最高だった
WWDC19の様子WWDC19、最終日にDesign Labにいってきました。 Design LabはAppleのデザイナーと1対1でアプリデザインを相談できるLabです。 アプリのデザインはApp Storeにリリース済み、プロトタイプどちらでも構いません。 WWDCアプリから予約が必要です。 当日の7:00から7:30までに予約リクエストをして、枠が空いていれば正式に予約完了という流れになっています。 Design Labはとても人気のLabでなかなか予約が取りづらいLabです。 しかし、最終日ともなると、参加者の数も少なくなっているので予約が取りやすくなっています。 個人アプリのデザイン相談 Design Labで私は個人で製作している「フライングスター風水」のアプリデザインについて相談しました。 相談ごと1つ目 引っ越し間取り画面の写真登録UIを改善したいと思っています。 間取り画
UI Sources | Mobile Design Patterns and Interactions
If you're facing payment issues, send me an email at abhinav@uisources.com for alternative methods Real design inspirationBrowse recordings of end to end user journeys from the top grossing apps to reduce iteration cycles, gain insights, identify trends & benchmark against your competitors and industry’s standard. Stop spending time reinventing the wheelAre you and your team spending time figuring
Haya2NOW
ISAS/JAXAJAPANESEENGLISHCURRENT TIME:-FROM LAUNCH:-FROM REENTRY:-DATA GENERATED:-DATA RECEIVED:-太陽電池発生電力:-Wバッテリー出力電力:-Wバス消費電力:-WANTENNAアンテナMGA中利得アンテナ方位角-仰角-TRANSMITTER送信機XTRP1XTRP2送信パワーアンプ-送信モード-送信ビットレート-接続アンテナ-RECEIVER受信機RX1RX2受信レベル--ビットレート--接続アンテナ--THRUSTERスラスタ噴射積算秒数TH01-TH02-TH03-TH04-TH05-TH06-TH07-TH08-TH09-TH10-TH11-TH12--USUDAUSUDA現地時刻2017-07-07T10:10:10方位角-仰角-出:-没:-通信状態接続開始時刻-BAND:-通信シミュレー
FAJP / フライヤー・チラシのグラフィックデザイン参考サイト
1999年から現在までのフライヤー・チラシのデザインをアーカイブしました。フライヤー、DM、チラシ等の紙のデザイン制作の参考に、まとめサイトとしてご活用ください。
San Francisco フォントを探る - Qiita
San Francisco Font Family San Francisco はひとつの書体ではなく、SF Pro, SF Compact などと呼ばれ、それぞれに Text, Display, Rounded バージョンが存在します。Text よりも Display の方が多くのウェイトを揃えているのは、Text は視認性を重視した書体ゆえ、細いものは利用する想定にないからなのだと思われます。SFシリーズはVariable fontに対応しています。 SF Pro vs. SF Compact SF Pro は macOS や iOS, tvOS デバイスのシステムフォントとして採用されています。SF Compact は Apple Watch のシステムフォントとして採用されています。Compact は字が四角形に近い形をしていて、Apple Watch のような小さなデバイスでも視
Design System - Francfranc Brand Identity
Francfrancのデザインシステムの目的は、ブランドの価値を上げ、実務者の負担を軽減し、イノベーティブな取り組みを推奨する上での合意形成を的確かつ迅速に行えるようになることです。2017年9月にその第1版を公開しました。 その大きな特徴は、情報発信における機能的な価値とブランドイメージの訴求という異なる目的に対して、誰もが認識できる基準を提示したことで、実務者の確認業務の軽減を促進し、スピーディーにクオリティの均一化を実現します。 Francfrancのデザインシステムは、変化する市場や時代の流れに沿って、柔軟性を持ちながら拡張し進化を遂げるものです。そして、ブランドの発祥や企業理念を広く振興するときに必ず参照されるものでなければなりません。 実務者および関係者はガイドラインを尊重し、的確な判断を下し、ブランドにふさわしい、そして創造性に富んだデザインを提供するように心がけてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインのしたじき
Games | Interface In Game
Daily UI Design Challenge, Inspiration, and Resources
