Figma Tokensの導入 デザイナーと協力して一貫性のあるUI実装を実現する - Qiita
この記事は Goodpatch Advent Calendar 2021 の12日目です。 今回はFigmaのPluginであるFigma Tokensを使ってみて実感した恩恵や、実際にどのように利用したかを書いていきます。 はじめに フロントエンジニアの責務の一つとしてUI実装（UIの実現）があります。 UI実装はFigmaなどのデザインファイルを設計書として実装していきます。しかしながら、デザイナーも人間なのでデザインファイルにミスがあることもあります。また、デザイナーとエンジニアが並走してプロジェクトを進めていく場合はデザインファイルの変更がたびたび起こることもあり、都度デザイナーとコミュニケーションをとりながらコードを修正しなければなりません。 このような状況を考えると、UI実現の責務をフロントエンドエンジニアだけが受け持つのは荷が重く、クオリティ低下につながる危険性があるのではな
UI トレースは何をトレースしているのか｜ai
エレクトリックベースをはじめて買ったとき、まず練習したのは Mr.Big の To Be With You だった。Billy Sheehan のベースの中ではそこまで難易度が高くないバラードだし、寮で同じ部屋の先輩が、よく口ずさんでいたから。 楽器を手にした人が最初にやるのは、誰かの作った曲を奏でることだろう。たくさんの曲をコピーするうちに、だんだんと自分なりの弾き方が身についていく。 その練習方法について批判する人はあまりいない。しかし UI のデザインやイラストになると、とたんに渋い顔をされたりする。 自分が良いと思ったデザインをトレースし、なぜ良いと思ったのか分析することは、有意義なことだと私は思う。もちろん、ただ写すだけではツールの習得にしかならない。 しかし例えば、有名な Jesse James Garrett の 5 Planes Model を地図に、トレースした表面から深
デザイナー×エンジニアで行う『ペアUI改善』のススメ｜あっきー
リリース前のちょっとしたUI修正をエンジニアがデザイナーとペアで修正したら、早くていい感じに進んだのでUI改善でも取り入れてみた話です。 UI改善する箇所は長くサイトを運営していると溜まってくる微妙な崩れや、いつか直したい案件のやつ。「なんか気になるを一掃するぞ！」とやってみました。 『ペアUI改善』の目的目的は以下のとおり。デザイナー・エンジニアの相互理解と、負債の解消がメインです。 ・チケットに上がりづらい余白・文字サイズ等のUI修正 ・数字に上がりづらいUXの向上 ・デザイナーがUIの修正方法を知る ・プログラマーが細部のデザイン意図を理解する『ペアUI改善』の流れ基本的にはペアプロと同じ流れを想定。 準備 ・対象のページを決める（今回は複数ページ） ・『気になるリスト』作成。なんか気になる箇所をまとめる ※気になるリストは日々上がるUI修正チケットとまとめておくと良さそう手順 １．
次世代の管理画面を作るフロントエンドの取り組み - BASEプロダクトチームブログ
フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイド)からJS(クライアントサイド)へ移行する 従来の「BASE」の画面ではPHPでHTMLの構築を行っていましたが、HTMLの構築をすべてPHPのコードから分離させて、Vueによるクライアントサイドでのレンダリングにしています。また管理画面の特性上（1ページあたりの閲覧時間が長く相対的にローディン
AppleのUI実装をさぐる - dely engineering blog
こんにちは。delyデザインエンジニアのJohn(@johnny__kei)です。 本記事はdely Advent Calendar 2018の10日目の記事です。 Qiita: https://qiita.com/advent-calendar/2018/dely Adventar: https://adventar.org/calendars/3535 前日は、プロダクトデザイナーのkassyが「ユーザーの声に振り回されないデザインの改善プロセス」という記事を書きました。いいプロダクトを作るには、ユーザーの声を鵜呑みにするのではなく、きちんと判断する必要がありますよね。 はじめに みなさんは、iOSアプリ開発をするときに、XcodeのDebugging View Hierarchiesを使用していますか？ Debugging View Hierarchiesを使用すると、アプリが現在の
一休のWebデザイナーとUIデザイナーの違い - 一休.com Developers Blog
この記事は一休.com アドベントカレンダーの20日目の記事です。 qiita.com はじめまして、宿泊サービスのUIデザインを担当しています河村です。 一休のデザイナーは部署ごとに在籍チームが異なります。私は長い間、営業企画部デザイナーとして働いていましたが、今年4月よりプロダクト開発部UIデザイナーとして働いています。（本ブログでは、前者をWebデザイナーとします） WebデザイナーとUIデザイナーをやってみて、多くのことが「違った」ので、どんな違いなのかをお話させていただきます。 目次 １） 仕事内容の違い ２） 必要なスキルの違い ３） 仕事の進め方の違い ４） まとめ 仕事内容の違い ビジュアル表現に特化 一休のWebデザイナーの主な業務内容は、トップページなどの更新作業、施設紹介ページ、特集・企画販促ページ、メールマガジン等の作成です。ページ全体のビジュアルを管理しているので
「UIデザイナーとエンジニアが輝けるステージを作る」UXデザイナーとして約2年働いた私の感じる、UXデザイナーの責務｜Katsuki Noda ｜note
この記事は Goodpatch UI Design Advent Calendar 2018の13日目の記事です。 今回の記事では、日々GoodpatchでUXデザイナー/PMとして働く立場として、UIデザイナーやエンジニアとどう関わっているのか、という話をしたいと思います。以前もUXデザイナーの定義や、優れたUXデザイナーの定義などいくつか記事を投稿してきました。それらのアップデート版と考えていただければ！ 一般論としてのUXデザイナーとしての責務まずはじめに、UXデザイナーと言ってもかなり定義が広いので、目線を合わせたいと思います。まず、ここで私の使う一般論としての「UXデザイン」の定義を以下とします。 問題の本質を発見し、解決のための顧客の一連の体験設計を行い、その設計に基づいてインターフェイスを作り上げ、問題を解決に導くという一連の行為を行う人。と定義します。とは言っても、範囲が広
活躍したいUI/UXデザイナーが習得すべき４つの基本スキル
JakeはUIデザインやWebディベロップメントに関するトピックを 扱っているライターです。彼の仕事はWeb検索やポートフォリオで見る事ができます。彼のTwitterをフォローする事もできます。 UI/UXデザイナーにとって、職探しはストレスが溜まります。というのもこの２つのスキルは似ていても、同じものではないためです。優秀なUIデザイナーはユーザー体験をすべて理解しているわけではありません。またプロのUXデザイナーもPhotoshopや Sketchをマスターしているとは限りません。 しかし重なる部分も多くあるため、優秀なUI/UXデザイナーになりたいならば、どちらの領域にも足を踏み入れる必要があります。 ここでは優秀なUI/UXデザイナーとして自分自身を売り込むために学ぶべき、UI/UXの基本的なスキルをお話します。両方の役割を担うことができれば、あなたは職場においてなくてはならない存
課題発見・解決がデザイナーの仕事。UIデザイナーに求められるスキルとは？｜Goodpatch UIデザイナー日比谷すみれさん講演
先日開催した学生向けイベント「はたらくデザイン#1」で、株式会社グッドパッチにてUIデザイナー兼プロジェクトマネージャーを務める日比谷すみれさんによる講演が行われました。 「UIデザイナーの仕事とは、課題解決をすること」と語る日比谷さん。UIデザインとは何なのか、これからデザイナーを目指す人がどのように学ぶべきかなど、日比谷さんの経験や実例を交えてお話いただきました。今回はその講演の様子をご紹介します。 編集・執筆 ／YOSHIKO INOUE, AYUPY GOTO ●プロフィール 日比谷 すみれさん UIデザイナー/UXデザイナー/プロジェクトマネージャー 早稲田大学商学部卒業後、SEOを中心としたWebコンサルティング会社にWebデザイナーとして入社。Webサービス・アプリ、広告サービスの運営・デザイン業務に幅広く従事する。2015 年 1 月よりグッドパッチのUIデザイナー兼プロジ
『スマホデザインにおける、忘れがちな5つのルール』
皆様、こんにちは。 Ameba コミュニティ部門 チーフクリエイティブディレクターのサトウ（@sugaar）です。 今回は、弊社コミュニティ部門における、サービスクオリティの向上とデザイナーのスキルアップを目的として開催している、「デザイナーロワイヤル」についてご紹介すると共に、普段忘れがちなスマホデザインの5つのルールをまとめさせて頂きます。 デザイナーロワイヤルとはデザイナーロワイヤルとは、8～10名のデザイナーが、お題となったAmebaサービスを使い込み、自分なりのブラッシュアップ案を持ち寄って点数を競う、バトル形式の会議です。 発表者以外にも、誰でも傍聴参加が出来るこの会議。 他のデザイナーの提案を間近で聞けるという事で、 回を追う毎に傍聴人が増え、会議終盤では熱気に包まれるほどの人気会議となりました。 そんなデザイナーロワイヤルの詳しい内容については、弊社「広報ブログ」で取材頂い
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
