デジタルプロダクトデザインと創作の間にある深い溝
OpenAI API を使ったデザインからコード生成する Figma プラグイン - Gaudiy Tech Blog
こんにちは。ファンと共に時代を進める、Web3スタートアップのGaudiyに、6月からお試し入社する seya（@sekikazu01）と申します。 ここしばらく話題になっている、OpenAI が提供する ChatGPT を代表とした LLM。この記事では、そんな OpenAI の API を使って Figma からコード生成するプラグインを作ってみた過程を記していこうと思います。 先に背景をちょっとお伝えしますと、Gaudiy ではPSFに向けて、複数パターンのUI・機能を実際に提供しながら検証を回すことを予定しています。 すでに定義したコンポーネントはある程度使い回せるものの、ページ実装の試行回数の増加が見込まれる状況です。ここの作業効率化のために、コンポーネントをしっかり活用しながらも、ちょっといじればプロダクション利用可能な React コードを Figma から書き出すトライとし
定性的ユーザビリティテストの進め方｜ちなつ｜note
🎄Money Forward Design Advent Calendar 2022の20日目の記事です🎄 こんにちは！マネーフォワードでデザイナーをしている三上です。 今回は、私がUI/UXデザインを担当している「マネーフォワード クラウド勤怠」で実施したユーザビリティテストについて、まとめてみました。 何のユーザビリティテストを実施したのか 今回は打刻画面の改修の中で、テストを実施しました。 ユーザーのアンケートから「間違った打刻をしてしまう」といった声が多くあったからです。 打刻の操作は多くのユーザーが毎日行うため、影響も大きいです。そこでリリース前にデザインプロトタイプを用いてユーザビリティを確認しようと考えました！ 旧・打刻画面新・打刻画面（ユーザビリティテスト用）実施手順テストの目的 ・考えたデザインがユーザーが間違えずに安心感を持って打刻できるものになっているか ・↑にな
カルーセルUIのアクセシビリティを向上させてみよう！｜bonji810｜note
この記事は STUDIO アクセシビリティ委員会のマガジン vol.7 です。 こんにちは！STUDIO株式会社 フロントエンドエンジニアのjimbouです。 私からはSTUDIO アクセシビリティ委員会マガジンにて、主にエンジニア/デザイナーさん向けに技術的な記事を発信しています。 STUDIOに限らずWebサイト、Webアプリに携わる全ての方々に読んでいただければと思います🌟 今回は「カルーセルUI」についての記事になります💡 Webサイト、WebアプリでカルーセルUIをデザイン/実装する方に向けて、少しでも役に立つ記事になれば幸いです☺️ 何のためにアクセシビリティを向上させるのか？では、カルーセルUIを実装する上で、アクセシビリティを向上させるとどんな良いことが起こるのでしょうか。 例として、アクセシビリティを特に意識せず、主にdivタグを用いてマークアップしたカルーセルUIを
エンジニアとデザイナーのコンポーネント品評会｜osanai / ui designer
カンムでデザイナーをしている osanai です。バンドルカードやPoolのデザインを担当しております。 アプリの改善を長年やっていると、デザインにおける一貫性の欠如が発生しがちです。意味合いは同じなのに画面ごとに色やサイズや異なっていたり、用途は同じなのに類似したデザインパターンが複数存在していたり、古いUIが一部の画面で残されたままになっていたり。 このような一貫性の欠如はデザイン負債とも呼ばれ、蓄積するとさまざまな運用コストが発生します。デザインパターンを適用するときにどれが適切か迷う、デザインを変更したときに動作確認すべき影響範囲が広い、本来は不必要なパターンを実装しなければならない、などなど。 今回はデザイン負債解消の一手として取り組んでいるコンポーネント品評会についてご紹介します。 課題コンポーネント品評会で解決したかった課題として、次のようなものがありました。 不必要なコンポ
A CSS carousel with snapping points and a scroll-linked navigation
I realized a #CSS only #slider – #carousel with a full-working bottom navigation thanks to • the new scroll-timeline feature • the native scroll-snapping / scroll-behavior • a step() animation-timing-function So far it works only on Chrome Canary codepen.io/fcalderan/pen/… Just remember: all the snippets work only on Chrome 94+. Why a carousel? Well, I'm aware that carousels are probably the most
実装しやすいデザインファイルの作り方
実装されたデザインと自分のデザインが全然違う。。。。となる場面はどのデザイナーも経験があると思います。予算やツールの関係でそうなる場合は仕方ないですが、デザイナーが少し心構えや仕事の仕方を変えるだけで、防げる場合も実は多いのです。 このDeckでは実装側と同じ言語を”話す”デザインファイルを作るヒントをお話しています。よかったらご覧ください。
Figma Tokensの導入 デザイナーと協力して一貫性のあるUI実装を実現する - Qiita
この記事は Goodpatch Advent Calendar 2021 の12日目です。 今回はFigmaのPluginであるFigma Tokensを使ってみて実感した恩恵や、実際にどのように利用したかを書いていきます。 はじめに フロントエンジニアの責務の一つとしてUI実装（UIの実現）があります。 UI実装はFigmaなどのデザインファイルを設計書として実装していきます。しかしながら、デザイナーも人間なのでデザインファイルにミスがあることもあります。また、デザイナーとエンジニアが並走してプロジェクトを進めていく場合はデザインファイルの変更がたびたび起こることもあり、都度デザイナーとコミュニケーションをとりながらコードを修正しなければなりません。 このような状況を考えると、UI実現の責務をフロントエンドエンジニアだけが受け持つのは荷が重く、クオリティ低下につながる危険性があるのではな
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.9
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第9弾は見出しや本文など、テキストのデザインのテクニックです。 UI & UX Micro-Tips: Volume Nine. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ホワイトスペースはデザイン要素 2. 明るいテキストと画像のコントラスト比を適切に保つ 3. 見出しや本文にぴったりな垂直のリズム 4. 書体の読みやすさは、x-heightまたはIl1で確認 5. テキストブロックのサイズに応じてline-heightを調整 6. テキストのカラーパレットはシンプルにし、濃淡だけを変える はじめ
待機状態のUIについて整理してみる(デザイン編)
Introduction 概要 待機状態 UI のデザインについての記事です。 待機状態 UI というのは、ローディングや情報の処理待ち時に用いられる UIのことです。ここで待機状態の UI と読んでいる理由は、各デザインシステムやガイドラインなどで言い方が違うため、今回はこのように言及させてください。 この記事では、既存のデザインガイドラインや既存のデザインシステムから待機状態の UI の概観、デザインにおいて考慮することをまとめます！ ベストプラクティスを提案するわけではなく、作成する際、配慮することを頭に入れて思考できる記事にします。 背景、課題感 WebFront-end における各 UI の実装を行おうと考えているが、実装する際、ビジネス側やデザイン側と実装する UI について話し合って作ることが多いです。 小さなプロジェクトだと、デザイナーがいない事も多く、Front-end
ベイジの業務システムUIデザインワークフロー（100のタスクを徹底解説） | ベイジのUIラボ～業務システムとSaaSのUIを考える
2021年現在、ベイジの柱の事業はウェブ制作事業とウェブアプリデザイン事業です。ウェブ制作事業は会社設立の2010年からの主力事業で、サービス品質の平準化を目的に2014年頃からワークフローの整備を進めてきました。 一方ウェブアプリデザイン事業については、事業拡大したのがここ数年で、まだワークフローが整備されておらず、各人の裁量に委ねた進め方になっていました。そこで今後の事業拡大とメンバー増員を想定し作成したのが、業務システムやSaaSのUIデザインに特化した「ベイジの業務システムUIデザインワークフロー2021年版」です。 基本的な進め方は国際規格（ISO 9241-210※）の人間中心設計プロセスに基づいて組み立てていますが、細かいタスクの順序や内容は、今までベイジで培ってきたノウハウをふんだんに盛り込み、組み換えています。 また今回ワークフローを整備するうえでは、クライアントごとの開
テスト優先度をあげたくなる実話 - フロントエンド版 -
Storybook・テストに関して「メンテナンス工数に見合うだけのメリットがあるか？」という議論を、経験したことはないでしょうか。フロントエンドは、とにかく動くものを作ることが優先され、Storybook・テストが二の次になっている現場も少なくないと思います。 限りある工数を割きチームで取り組むものですから、導入するためには「どういったメリットがあるのか？」という具体的な例をチームに示す必要があります。これは今年、筆者が体験した実メリットのお話です。導入を躊躇している現場にむけ、参考になればと思い書きました。 【Storybook】不要な Global CSS を削除できた きちんとコンポーネント設計され、コンポーネントに閉じた指定をしていたとしても、どこかに必ず Global な CSS があると思います。何かしらの資材を受け継ぎ立ち上げたプロジェクトに関しては、Global な CSS
Amebaのデザインシステム「Spindle」の全貌公開
メディア統括本部・技術横断室の谷です。組織横断の活動しながら、AmebaやAmebaマンガという事業に関わっています。実務としては、コード実装をメインに、UI設計やUX設計、最近ではユーザーインタビュー等のリサーチ業務をおこなっています。 この記事では私が立ち上げから2年くらいかけて関わってきたAmebaのデザインシステムについて、その全貌を解説します。 そして本日からデザインシステム「Spindle」のサイトを試験的に一般公開します。詳しくは記事後半にて。 まず前段のお話として、Amebaという事業について説明させてください。 Ameba事業の概要 Amebaはブログサービスであるアメーバブログを主としたサイバーエージェントのメディア事業の1つです。 多くの人はおそらく「アメブロ」や「ピグ」の印象が強いですが、関連事業やサービスとしてはマンガや占い、ニュースなど色々と展開をしています。
「バラバラになりそうだった」メルカリUI / UXの認識をDesign Systemにまとめたデザイナーたちの話 | mercan (メルカン)
「Design System（デザインシステム）」とは、開発で必要となるデザインの概念やスタイルなどがまとめられたものです。開発効率の向上だけでなく、プロダクトの一貫性を担保するためにUIのコンポーネントを規格化。プロダクトマネージャー（PM）やデザイナー、エンジニアの共通言語として存在しています。 そんなDesign Systemが、メルカリグループ内で誕生したのは2019年夏ごろでした。 「なぜそのタイミングでつくったの？」 「Design Systemをつくった目的は？」 そんな疑問を、Design Systemの設計をリードしたProduct Designチームの@tottieと@morishy、@kitajにぶつけてみました。 ※撮影時のみ、マスクを外しています。
サービス開発の優先順位について意識してること｜ottiee / Alu CCO
祝日なので(暇なので)note書きます、こんにちは。 アルのCXOとして働いていて日々デザイナーとして頑張っているのですが、2021年7月からは00:00 StudioのiOSアプリ開発のリーダー的なことも兼任していたりします。 リーダー的なこと、と言ってもPdMはCTOがやってくれていて最終意思決定は信頼してお任せできるのと、何よりチームのエンジニアの自走力が半端ないので「こいつ何してんの？」と言われると何もしてない気もするんですが、それでも開発の優先順位とか考えて決めたりする機会はそれなりにあったりします。 緊急度と重要度複数の案件が発生した際に、優先順位の決め方として、緊急度と重要度のマトリックスで考えるとかはよくある手法だと思います。 緊急度が高いものは、例えば、サービスが使えなくなってる状態とか、機能が欠損してしまってるとか、他社との協業で締め切りが差し迫っているとか やらないと
カルーセルUIを実現するJSライブラリまとめ(2024年版) - 導入手間や機能の比較紹介 - ICS MEDIA
いずれもMITライセンスで公開されていますので、個人・商用問わず利用可能です。 Slick.js Slickスリック.jsは簡潔なコードで実装できるのが特徴のモバイルフレンドリーなカルーセルライブラリです。機能は少なめですが、ナビゲーションや表示するスライド数を変更するといった基本的な機能は備わっています。jQueryプラグインのため実装にはjQueryを読み込む必要があります。タッチ・スワイプ操作にも対応しています。ReactやVue向けのモジュール、TypeScriptのサポートは公式で提供されていませんがOSSで存在します。 このJSライブラリの基本的な実装と、アニメーションをフェードに変えた作例を用意しました。 基本の作例 サンプルを別ウインドウで開く コードを確認する <div class="slick carousel"> <div>1</div> <div>2</div> <
5 つの事例に見るハンバーガーメニューの役割と使い方 | アドビ UX 道場 #UXDojo
5 つの事例に見るハンバーガーメニューの役割と使い方 | アドビ UX 道場 #UXDojo Web サイトやモバイルアプリではハンバーガーメニューが標準的なナビゲーションとして使われています。この記事で、ハンバーガーメニューの利点と欠点、さらにベストプラクティスを学びましょう。 Web サイトを閲覧した時、ページの左上か右上の角の近くに、三本線のアイコンを見たことがありませんか？これはハンバーガーアイコンとして知られているもので、ナビゲーションのオプションを格納する目的で使われます。見た目はかなり単純ですが、実は多くの議論を引き起こしてきたデザイン要素です。ハンバーガーメニューを使うのが好きなデザイナーも、嫌いなデザイナーもいます。 この記事ではハンバーガーメニューのコンセプトと利点・欠点を確認し、いくつかの優れた実例を紹介します。 ハンバーガーメニューとは何か？ ハンバーガーメニューは
トレタO/Xの開発の裏側 - トレタ開発者ブログ
はじめに こんにちは、Half-Vaccinatedなフロントエンドエンジニアのkitagawaです。接種2回目にビビりながら今から備えています。 この度トレタの新しいサービスとして、トレタO/X(トレタオーエックス)が正式リリースされました。O/Xは「Order Experience(注文体験)」の略で、飲食店に来店したお客様がご自身のスマートフォンで注文から決済までを行えるモバイルオーダーアプリです。 サービスの本格立ち上げから今回のリリースまで、約1年ほど主にバックエンドのマネジメントに携わってきたので、その振り返りとして開発内で行った数々の挑戦について、この記事では紹介しようと思います。 サービスの詳細や背景については代表のひとしさんのブログをぜひご一読ください。 トレタO/Xの特徴 タブレット据置機でのオーダーや、テイクアウトのモバイルオーダーなど、オーダーアプリを目にする機会は
ダークモード入門
はじめに WEBサイトにダークモードを実装する際に調べたことの覚書です。 以下のような内容です。 OSの設定によってCSSのメディアクエリでスタイルを適用する 切り替えスイッチによるモードの変更 おまけ：Tailwind CSSでダークモード 今回作成したコードの全体は以下になります。 CSSのメディアクエリでスタイル適用する 最初に、OSで設定されたモードによって、CSSのメディアクエリprefers-color-schemeで適用するスタイルを切り替える方法です。:rootに変数で色を指定して利用しています。 :root { --cBackground: #fedfe1; --cText: #656765; } /* OSの設定がダークモード時のスタイル */ @media (prefers-color-scheme: dark) { :root { --cBackground: #6
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LINE NEWS、没入型の新UIに移行
