UIが嘘をつく？ UXデザインにおける「楽観的な更新」とSPAでの作り方 - カミナシ エンジニアブログ
こんにちは、デザインエンジニアのショウです。 突然ですが、UI/UX デザインにおいて、「楽観的な更新」という言葉を聞いたことがありますか？あまり聞いたことがなくても、実は日常にたくさん存在しています。 例えば、 twitter や facebook のいいねボタン。いいねをタップした直後に色がつくのですが、実はサーバーへのリクエスト送信と UI 上のいいねの色付きが同時に発生しています。つまりサーバーからの通信結果待たずに UI を更新しています。 他に、trello でタスクカードを隣の列に移動したり、iMessage や Facebook メッセンジャーでのメッセージの送信、Kindle アプリで途中までしかダウンロード出来てない本が読めることなども楽観的な更新です。 図：楽観的な更新を採用しない時と採用した時のメッセージ送信のUI （引用元） 楽観的な更新の意義 早くも 1968
React Query で optimistic-update な UI を実装してみる - Studyplus Engineering Blog
こんにちは @okupara です。 去年から Studyplus for School の API 周りの state 管理を Redux から React Query にし始めました。キャッシュや無限スクロールでのリクエストのサポート、ページネーションのサポートなど、隈雑になりがちな処理を抽象化してくれてるので、かなり使いやすいです。 最近個人的に React Query を使った optimistic-update な UI の実装方法をどうすれば良いのか試行錯誤していたので、現時点での実装案を共有できればと思います。 optimistic-update (optimistic-ui) "楽観的な更新・UI"とはなんぞやについてはカミナシさんの開発者ブログでわかりやすく解説されてます。 Reduxによるいいねボタンの実装例もありますので是非ともそちらををご参考ください。 今回自分が試
React でクラスコンポーネントより関数コンポーネントを使うべき理由 5 選
☞ React 一覧JSXJSXの記法条件分岐・ループ処理Design patternCompound ComponentOthersコンポーネントのレンダリング位置をずらすReact HooksReact Hooksとは？useEffectuseEffectのよく間違うポイントuseStateuseStateの注意点useMemouseCallbackuseReducerComponent関数コンポーネントを使うべき理由ReduxRedux の概念RefRefref forwardingServer ComponentReact Server Component Component の種類 React でコンポーネントを定義する際は大きく分けてクラスコンポーネント、関数コンポーネントの 2 つに分けることができます。 これらのコンポーネントについては、コンポーネントと props につい
ペアデザインで加速する、対話と共創のデザイン｜はのめぐみ
昨年11月にJX通信社に入社して半年たちました。新しい環境にも慣れ、仕事の進め方で手応えを感じているのが「ペアデザイン」です。構造化や具体化に長けているデザイナだからこそ、共創をリードできる存在だと思っています。 ペアデザインの可能性を探る みなさんは「ペアデザイン」と聞いて、真っ先に何をイメージしますか？ もともとは「ペアプログラミング」に呼応する表現です。多くの人は「同一のソフトウェアを触りながら、共同作業によって UI を仕上げること」を想像すると思います。 わたしも同じ考えですが、より広い意味で捉えられそうな気がします。 なぜなら、デザイン行為自体が必ずしもソフトウェアを使って作業するとは限らないからです。UI を仕上げることは、あくまでペアデザインのあり方のひとつで、より重要なことがあるのではないか。 チームのプロダクトマネージャー( 以下、PdM ) と行っているペアデザインを
Improve the Performance of your React Forms
Forms are a huge part of the web. Literally every interaction the user takes to make changes to backend data should use a form. Some forms are pretty simple, but in a real world scenario they get complicated quickly. You need to submit the form data the user entered, respond to server errors, validate the user input as they're typing (but not before they've blurred the input please), and sometimes
「人事労務freee」のEC2→EKS移行で、大変だったことと良かったこと - freee Developers Hub
freee Tech Night で司会をしていますのぶじゃすです。4月23日に配信した「freee Tech Night Online #10 〜人事労務freee、EKS移行」の様子をご紹介します。人事労務freeeのアプリケーションエンジニアhanakeとSREのnekottyoの二人に、移行の経緯、プロセス、導入後のメリットとデメリットについて語ってもらいました。 登壇者の写真 hanake: 写真左上 人事労務freeeのアプリケーション開発担当。 前職でdockerの使用経験あり。インフラの知識を持ちながら、スクラムマスターとしてプロジェクトをリード。 今回は、アプリケーションエンジニア側からEKS移行にチャレンジした。 nekottyo (@nekottyo): 写真右上 人事労務freee担当のSRE。AWS、EKS周りの管理がミッション。 Datadogでの監視も担当し、
1秒で恋に落ちるビジュアルを入り口に、長く使われて愛されるものを作りたい。ビジュアルデザイナーの挑戦｜Goodpatch Blog グッドパッチブログ
今回インタビューしたのは、GoodpatchのUIデザインユニットに所属する中田 彩。東京藝術大学のデザイン学科でデザインを学び、Web制作会社でビジュアルデザインのスキルを磨いてきた彼女は、2020年12月にGoodpatchへ入社。「長く使われて愛されるものを作りたい」という想いや、そのためにビジュアルデザイナーができること、今後挑戦したいことについてお話を聞きました。 藝大時代に出会ったデジタル領域のデザイン 学生時代は、東京藝術大学のデザイン科で、平面から立体までデザインに関わる全般を学びました。幅広い領域で制作経験を積みながら、自分のやりたいデザイン領域を探索していました。 そんな当時、とあるアーティストのプロモーションビデオを見て衝撃を受けました。SNSを連動させたコンテンツで、ユーザーが自身のSNSアカウントでログインすると、プロモーションビデオ内に自分と友達のアイコンが表示
UXデザイナーのマインドセットを学ぶGoodpatch流の新卒UXデザイン研修｜Goodpatch Blog グッドパッチブログ
はじめに 2021年、Goodpatchには8人の新卒が入社しました。 今年もGoodpatchでは4月から6月までの3ヶ月間で新卒研修を行っています。昨年は新卒の職種ごとに分け研修を行っていましたが、今年は全職種を対象としてUXデザインやUIデザイン、さらには営業の研修を行っています。 今回の記事では、UXデザイン研修がどのような目的で行われていて、どのような内容を学ぶことができるのかをご紹介します。 研修の目当て Goodpatchの新卒向けUXデザイン研修では以下を目当てとしています。 GoodpatchのUXデザイナーとして必要なマインドセットを理解すること Goodpatchに所属している先輩UXデザイナーを知ってもらうこと UXデザインに活用できるたくさんの手法を理解することも重要ではあるのですが、Goodpatchの研修では手法を伝えることよりも、まずはその土台となる Goo
UXリサーチとは何か？ プロダクトマネージャーが学び実践するための連載開始
「ユーザーをもっと明確に捉えてプロダクトの開発を進めたいのにやり方が分からない」「UXリサーチというキーワードは聞いたことがあるけどよく分かっていない」「UXリサーチは何かハードルが高い感じがして、自分一人ではできないかもしれない」といった悩みを聞くことがあります。また、UXリサーチに取り組もうとする人たちから「始めるにあたって、運用部分まで含めて分かる実践入門書的な存在がほしい」「調査企画や実践事例を見られる機会があるとよい」といった声も聞きます。そこで、本連載ではUXリサーチを実践するための入門編として「UXリサーチとは何か」から、「どのように実践するのか」を地道な運用部分まで分かるように紹介していきます。第1回となる今回の記事では、本連載の全体像と「UXリサーチとは何か」を解説します。 UXリサーチとプロダクトマネジメント 国内でUXリサーチというキーワードを見ることが増えてきました
それでも私がTailwind CSSではなく、CSS Modulesを推す理由 - Qiita
*2021 6/11追記 『でもクラス名考えるのめんどくさい』問題についての私の見解を大幅加筆しました。 *本記事はピュアなCSSについてのある程度の知識があり、Tailwind CSSの採用について考えている層を対象読者としています。ピュアCSSの知識が乏しく、最適なCSSフレームワークを探している読者は対象としていません。 色々書き比べた結果Tailwind CSSにしたという話 こちらの記事がバズっていた(6/9現在 over 200likes)為、読ませて頂きました。 これまで主観的な印象と薄い議論で賛否が分かれていたTailwind CSSについてこれまでのcssの技術の変遷を踏まえて技術的にかなり踏み込まれた考察の上で選定の理由が書かれており、Tailwind CSSアンチ派の私にとっても非常に勉強になる記事でありました。リスペクト。 その上で、こちらの記事では私が『それでもC
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
ロードマップに機能を書くべからず｜小城久美子 / ozyozyo
機能を書くならバックログにまず機能だけが書かれたロードマップから見ていきましょう。時系列に沿って、どんな機能を追加するのか並んでいます。 残念ながら、多くの場合、機能開発が遅延したり、差し込み案件が発生したりして、以下のようになってしまいます。 こうなると、もうこのロードマップは信頼できません。過去の実装がここまで遅延していると、次に取り掛かる機能がいつリリースされるのか分からず、どれの優先度がもっとも高いのかも判断するのが難しくなってしまいます。 こういった「機能」に近いものは、縦長のプロダクトバックログの形式で並べ、ユーザーストーリーに分解して見積もったものを上から順番に実施していくほうがスッキリします。 では、ロードマップがなぜ必要なのかプロダクトバックログはとても良いものですが、プロダクトの中期的・長期的な未来を構想するには少し見づらくなります。特に、会社の中で中期的・長期的な方針
式年遷宮アーキテクチャに関して（いまさら） - 勘と経験と読経
数年前に流行したソフトウェアアーキテクチャのメタファー（？）として「式年遷宮アーキテクチャ」というものがある。最近自分が日本美術史の授業で聞いた話を踏まえると、われわれエンジニアは式年遷宮をちょっと誤解しているような気がする、という話。いまさらなんなのさ、という気もするが色々調べてしまったので備忘録的に記録しておく。 式年遷宮アーキテクチャ たしか、このあたりの記事がきっかけで Martin Fowler氏の語る“犠牲的アーキテクチャ" 以下など各所で言及されていたように記憶している（おそらく初出は別のブログ記事だと思うのだけれども、現在はアクセスできないようだ）。 青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けて from masayoshi takahashi 一種のミームなので厳密には定義できないが「式年遷宮アーキテクチャ」という言葉に込められた要素は 定期的に作り直す
サーバーサイドで動的にOGP画像をシュッと作る方法 - FastAPIとCairoSVGで作る画像生成API - JX通信社エンジニアブログ
JX通信社シニア・エンジニアの@shinyorke（しんよーく）です. 最近は色んなエンジニアリングをしつつ, イベントの司会業をしています（詳細は最後の方を見てね）. 開発しているサービス・プロダクトの要件で, TwitterやLINE, FacebookでシェアするOGP*1コンテンツ（タイトル・本文・画像）が欲しい コンテンツはユーザーさんの操作で動的に変わる テキストだけじゃなくて, 画像も変えたい←これ なんて事は非常によくある話だと思います. 私はちょっと前に開発したAIワクチン接種予測でそれがありました. こういうやつです 例えば上記画像のテキスト（地域・年齢・接種可能時期）は予測の結果を動的に画像テンプレートに入れて都度作っています. 上記のOGPを生成するために必要なことはこういう感じだろうなー, と以下の絵の通り整理し, やったこと 結果的に, OGPを生成するためのサ
Web アクセシビリティに配慮し、なおかつ式として例外のないものにしたい色設計
デザインシステムにおける色設計、ルールをひとつの式で表現できるようにしたい。でもA11y対応でルールが増えるので、どうやったらシンプルにできるかを試行錯誤するお話。 色を展開するルールをシンプルにしたい 色計算が可能なプログラミング言語でひとつの式を使いさえすれば、設計されたカラーシステムを再現できるというのはメリットが多いはずだ。(デザインシステムで定義された色をわざわざコード上で演算する必要があるのかは怪しいけれど) メリット 規則的なのでプログラミングで表現しやすい 人間も覚えやすい 式の例 上記のように$some-colorに対して明度への演算をかけるだけで赤、青、黄、緑のカラーパレットがデザインシステムに沿ったものになるのであればいくらかコードへの負担が軽減されるのではないだろうか。(と期待しているけど、聞かないとダメですねコレ) RGBではなく、H(色相)S(彩度)B(明度)と
幸せなキャリアを歩むためのストレスマネジメント
このスライドは、社員のメンタルヘルスの維持・向上・回復を目的とし、書籍などから学んだことを、社内勉強会用にまとめた資料が原案です。 私自身は一企業の経営者であり、メンタルヘルスの専門家ではありません。このスライドも、書籍の引用とそれに付随する私の経験や考え方をまとめたものに過ぎません。 メンタルヘル…
すべての働く人におくるストレスマネジメントの基本 | knowledge / baigie
仕事は挑戦の連続です。経験を積み、スキルが上がり、評価されるほど、難易度が高い仕事に関わるようになります。そこには必ず苦難があり、ストレスが待ち構えています。 ストレス学説の生みの親であるカナダ人生理学者のハンス・セリエ氏は、「ストレスは人生のスパイスである」という名言を残しています。確かにストレスは必ずしも悪いものではありません。 例えばパフォーマンスとストレスレベルは、逆U字の関係にあります。あるレベルまではストレスレベルの高まりに従ってパフォーマンスは向上し、あるレベルを超えるとパフォーマンスは低下します。この法則は心理学者ロバート・ヤーキーズとジョン・ドットソンの名前を取り、「ヤーキーズ・ドットソンの法則」と呼ばれています。 この法則に従えば、仕事で高いパフォーマンスを発揮したいなら、ストレスをゼロにするのではなく、適度なレベルにコントロールしなければなりません。そのために必要なの
Firebaseを使ってどんなWebアプリケーションが作れるの？
そもそもFirebaseとはhttps://firebase.google.com/?hl=ja モバイルアプリやWebアプリケーションを素早く作成するために役立つ様々な機能が揃ったプラットフォームです。2014年にGoogleが買収し、現在もGoogleのサービスとして提供されています。 こういったプラットフォームを安定して提供することは技術力もリソースも必要ですが、Firebaseは十分にアプリ開発に使えるクオリティに達しており、さすがGoogleという印象です。 本記事はエンジニアのための技術的な解説ではなく、事業責任者・PM（プロジェクトマネージャー）・デザイナーなどエンジニア以外の職種の方にFirebaseの仕組みや概念をご理解いただけるように紹介していきます。 Webアプリケーション開発に使える代表的なFirebaseの機能https://firebase.google.com
明日から使えたり使えなかったりするFigmaの豆知識20選 - Qiita
毎回このウィンドウを開いて1つずつ入力するよりも、この入力の方が少し早くなります。 ちなみに、角丸はこの書式で複数の値を指定しても受け付けてくれません。 widthやheightに0.001と入力すると幅や高さが0になる 正確に言うと0.006より小さければ0になり、0.006以上なら0.01になります。 親Frameの幅や高さを0にしてClip contentのチェックを外すと、地味に使い勝手が良いときがあります。 例えば、Auto layoutだけど枠からはみ出したような表現も出来るようになります。 ※何を寝ぼけているのかカンマの位置が間違っています。記事の本筋とは関係ない場所なので目を瞑ってください……。 画像に書き出さずともpngとしてコピーできる 要素を選択した上で⇧ + ⌘ + Cを押すと、pngとしてコピーできます。 Figma上で貼り付けるのはもちろん、Slackにも持って
モーダルウィンドウのコンテナ要素に aria-modal 属性を適用する | Accessible & Usable
公開日 : 2021年6月6日 (2021年6月7日 更新) カテゴリー : アクセシビリティ 先の記事「折り畳まれたナビゲーションメニューの展開 (オーバーレイではなくインレイで)」を書く過程で、オーバーレイで提示されるモーダルウィンドウのアクセシビリティについて改めて調べていたところ、aria-modal という属性が気になりました。aria-modal とは、2017年に勧告された WAI-ARIA 1.1 から追加されたプロパティで、あるコンテナ要素に aria-modal="true" という属性が適用されている場合、その要素がモーダルであることをスクリーンリーダーなどの支援技術に示し、それ以外のコンテンツの利用を排除する (インタラクション可能な範囲を、モーダルのコンテンツに限定する) というものです。(参考 : aria-modal の定義 (WAI-ARIA 1.1) /
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A better segmented control