UXエンジニアが知っておきたいデザインシステムの原則 | Goodpatch Blog
Featured image: Business vector created by Freepik UXエンジニアという言葉を聞いたことがありますでしょうか。 私もここ数年で聞くようになった言葉です。UXエンジニアという仕事はまだ生まれたばかりで、定義が曖昧ですが、私は一言で言えば「UXデザインをする、もしくはその工程に関わるエンジニア」のことだと考えています。最近クックパッドさんでもUXエンジニアを採用しており、「UXエンジニア」って何する人？ クックパッド流・開発力を高めるDesignOpsの進め方は私の印象に残っている記事の一つです。 グッドパッチがチーム全員でデザインをしているように、UXデザインはデザイナーだけの仕事ではありません。例えばUIデザインがよくてもページの読み込みが遅いとユーザーの体験は悪くなってしまいます。その他にもエラーメッセージの言葉や見せ方、フォームのバリデ
「改めまして、Progressive Web Appsと申します」── Web UXの新たな基準を考える
Progressive Web Appsというワードが世に出て約2年半が経ちました。2015年10月に開催されたChrome Dev SummitにてFlipkartの事例をもってお披露目となったそのコンセプトは、2018年現在までに徐々に成功事例を増やしながらWeb界隈の注目を集め、ついに先日（忘れもしない2018年3月30日！）iOS 11.3からiOSデバイスでも一部の機能が利用できるようになるまで成長しました。これは、まるで進学する我が子を見ているかのような、新年度にふさわしい晴れやかなニュースですし、いい機会なので PWAとは何かを改めて振り返ってみようと思います。 Webに足りなかったもの 私はWebが大好きです。リンクを1つクリックしたら（インストールなど煩わしい手続きなしで）すぐに新しいコンテンツを読めるのは最高の体験だなと常日頃感じています。ただし、今までのWebアプリの
なぜUXという言葉は広まったのか｜Tsutomu Sogitani
2001年にデザイナーを目指すために会社を辞めるといったとき、ある先輩からは「その仕事儲かるの？」と言われ、上司には後悔しないかと何度も確認されました。でもそれは当然のことで、確かにその頃の多くの人の認識は「デザインはビジネスとは少し距離がある世界」でした。デザインは自分たちの仕事の延長上にあるものではなかったのです。 それと比べると、昨今のビジネスシーンにおけるデザインへの関心の高さには隔世の感を覚えます。事業課題としてデザインが議題にあがることは日常茶飯事です。経営者や事業責任者の口からデザインやUXという言葉が出ることは珍しくありません。先日拝見したある大規模システムのロードマップには「デザイン」というフェーズがしっかりと書き込まれていました。 もちろん人によってデザインの定義が違っていたり、広義のデザインと狭義のデザインが混在していたり、デザインに対する過剰な期待や誤解が含まれてい
UXデザインプロセスのコストとその内訳とは？
デザインそのものと違い、UXデザインにかかるコストはやや抽象的に思えるかもしれません。通常、UXデザインにおけるスケジュールやマイルストーン、コストなどは、推定によって算出されます。そして、このような経験に基づく推測は、実際の事例によって形成されます。 UXデザイナーへの報酬が不明瞭な理由には、さまざまな要因があります。プロジェクトの範囲、必要なテストの量、デザイナーの経験、プロダクトの複雑さや機能の違い、フリーランサーかUXデザイン会社かなどによってコストは変動します。 インターネットで典型的なUXデザイナーの相場を調べれば、実際にこのような曖昧な価格設定を見ることができます。Upworkは、１時間あたり$110〜$270の間で成果物ごとの内訳を提供しています。一方、ほかの会社は、アプリの品質次第で合計$2,000〜$35,000の範囲を提示しています。また、綿密な調査やアジャイルプロセ
FoursquareのUX・UI改善を書いたところ、創業者に届いて、人事からもメールが来た話 - 灰色ハイジのテキスト
通っていたサンフランシスコのデザイナー養成所Tradecraftの一番最初の課題で、アプリをピックアップして、見知らぬ人に声をかけてユーザビリティテストをして改善のプロトタイプを作って検証するーというものがあったのですが、そのプロセスをこの度記事にまとめてMediumに投稿しました。 するとGoogleのデザイナーが、なんとFoursquareの創業者のDennisにメンションしているではないですか。 Awesome, just shared with the team!— Dennis Crowley (@dens) 2018年3月9日 チームの人にシェアしてくれたみたいで、Foursquareのエンジニアの人からメッセージが届いたり、その日のうちに人事の人から「今ちょうどシニアプロダクトデザイナーのポジションを募集しているんだけど、興味があったら連絡待ってるよ」みたいなメールが届きまし
【加筆あり】 マツモトキヨシのロゴデザイナーが言った『UXの本質』と、IT業界の根本的なズレが致命的になるについて｜チカイケ秀夫@CBO(最高ブランディング責任者)
【加筆あり】 マツモトキヨシのロゴデザイナーが言った『UXの本質』と、IT業界の根本的なズレが致命的になるについて 今も「UI/UX」の議論が増えていますが、日本人が好きな表面的な手法論から、そもそもの深い部分の議論になっているのは、すごい良いと思っています。 特にIT業界が「UI/UX」が盛んに見えますが、そもそもの議論が「アプリ」「WEB」に限定されており、狭義の議論になっているので、本質的な話をしないとこの問題は解決できないと思っています。 私自身も以前はカスタマージャーニーなどもやっておりましたが、マツモトキヨシのロゴデザインをしたデザイナーの小谷中さんと、地元千葉で縁があり一緒に仕事をさせていただいた時に、施設のパンフレットデザインを見せた際に言われた、『パンフレットが置かれる現場に行ったみた？』 が今でも忘れられない一言であり、UXの本質的な言葉だと思っています。 デザイナーの
UXの社内勉強会で私が伝えたかった2つのこと｜Tsutomu Sogitani
UXの社内勉強会をしようと思ったのは、あるお客様に以下のようなことを言われたからだ。 「ベイジさんでは全員がユーザー目線で考えてるんですよね？」 会社の現状を包み隠さず言えば、私たちの会社は「全員がユーザー目線」とは言い難い。ベイジは全員がディレクター、デザイナー、エンジニアなどの専門領域を持った制作者集団であるが、長年受託の制作会社で働いていた者も多いが故に、制作者目線、開発者目線、受託者目線に囚われ、時にユーザー目線から外れた判断をしていても気が付かないことがある。 危機感を感じるのは、クライアントの多くがユーザーを理解しようとし、ごく自然に「ユーザーのためにはどうするのがいいのか」という発想で物事を考えているからである。もちろんその精度にはバラつきがあるし、企業目線になってることも多々あるが、近年のUXブームのおかげか、勉強熱心なクライアントほど「ユーザー目線で物事を考える」は仕事の
Web担の編集長も愛用、「無料・カンタン・便利」なWebページ監視&表示速度チェックツールでUX改善! | Web担当者Forum
課長： さて、今月の予算達成状況だけど……Webのほうはどう？ 部下： 芳しくないですね。売上だけでなく、新規会員のほうも、この状況だと難しそうです。 上司： キャンペーンの効果も出てないか。そもそもPVが上がってきていない。こうなると、いよいよ打つ手が少なくなってきたな。とりあえず広告を増やすかぁ。 部下： 課長、そこで提案があるんですが。サイトのパフォーマンス監視ってご存じですか？ 課長： サイトの死活判定のことか？ ここ最近は長時間のサーバーダウンも特に起きてないはずだが。 部下： サーバーが落ちてる落ちてないの話だけじゃなくて、サイトの表示速度が遅くなっていないか、なんです。サイト表示がちょっとでも遅いと、それだけでユーザーはサイトを離脱してしまうそうで。なので、本格的に測ってみませんか？ 課長： ……確かにその話聞いたことあるな。しかし、そうはいってもコストがなぁ。あと、ムズカシ
Webのアクセシビリティを向上させる、始めに取り組んでおきたいガイドラインの10項目のまとめ
Webの創始者であり、W3Cのディレクターを勤めるTim Berners-Lee氏の言葉に、「Webが持つ力とは、その普遍性にあります」というのがあります。Webサイトに誰もがアクセスできるようにするのは、わたし達の責任です。 Webのアクセシビリティは机上では難しいと思われがちですが、実際に取り組んでみるとそんなに難しいものではありません。障害者、スクリーンリーダのユーザー、低速接続のユーザーのアクセシビリティで、比較的簡単に取り組める項目を紹介します。 10 guidelines to improve your web accessibility 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webアクセシビリティとは何ですか？ 01.カラーに依存しない 02.ズームを無効にしない 03.alt属性のあなたが知らないかもし
ユーザーが不快に思わないプッシュ通知をデザインするには
毎日アプリから送信される通知の数に注目したことはありますか？ これらの通知の内、いくつを実際に注意して見ていますか？ 私たちは毎日、日々の生活を邪魔になるといっても過言ではない、役に立たない通知を数えきれないほど受け取っています。これらの通知はパーソナライズされているわけでもなく、私たちと関連性も薄く、送信のタイミングも考慮されていません。その結果、ユーザーは通知をオフにしたり、アプリを消去してしまったりします。 モバイルアプリをアンインストールする理由の１位に、通知が鬱陶しいことが挙げられました。回答者の実に71％が答えています。（２位以降は下から順に「複雑な登録フロー」、「フリーズする」、「UI/UXが悪い」、「押し付けがましい広告」、「プライバシーが不安」、「ソーシャルログインを強制される」） しかし、このUXのアンチパターンとも言うべきプッシュ通知は、企業とユーザーの双方にとって有
ケチャップボトルの事例で考えるユーザー体験の評価方法
Measuring Uの創設者。シックスシグマに熟練した統計学分析者であり、ユーザーエクスペリエンスを定量化したパイオニアでもあります。 ケチャップボトルを観察したことはありますか？ LinkedInで話題になったミームですが、ケチャップボトルを例にするとUI（ユーザーインターフェイス）とUX（ユーザーエクスペリエンス）の違いを上手く説明できます。 従来のケチャップボトルは単なるUIです。しかし、2002年に導入された、蓋とボトルが逆さまの状態で立てることができるケチャップボトルにはユーザー体験があると言われています。 UIとUXの混同 このミームを広めている人々に悪気はありませんが、この例には、UIとUXの違いを混同してしまう原因が現れています。実際には、両方のボトルともUIを提供していると同時にユーザー体験があるのです。 本来意図されているのは、新しいケチャップボトルのほうがより優れた
相手を説得するときにデザイナーがやってはいけない８つのこと
Paul BoagはUXデザイナーでデジタルトランスフォーメーションのエキスパート。非営利団体がWeb、ソーシャルメディア、モバイルを利用する支援をしている。 私たちは仕事をするために、クライアントとステークホルダーを納得させる必要があります。彼らがいないと、私たちは必要なことをするための承認を得ることができません。しかし、私たちのほとんどは説得するのが驚くほど下手です。よって問題は、私たちがどのように説得に失敗するのか、それについてどのように対処するべきかです。 私は、６月末のオンラインワークショップの準備にあたり、クライアントやステークホルダーとどのように協力して仕事するのかについて、多くのことを考えました。これは、同僚やクライアントから同意を得る方法について４つのパートから説明するものです。 私がこのようなワークショップを開くのは、ほとんどすべての作業において、やる価値があると他人を
FABをデザインに取り込む際に気をつけるべき３つのポイント
フローティングアクションボタン（FAB）は主にAndroidアプリにおいて、よく使われる操作方法です。FABは、UIの上に浮く丸いアイコンのような形で、デザイナーにとってはアプリの製品ストーリーの重要な部分を表現するためのツールです。 FABは非常にシンプルで導入しやすいUI要素ですが、実際にはデザイナーは間違ってデザインに取り込んでいることが多くあります。 この記事では以下の質問に答えていきたいと思います。 FABを使うタイミング FABのベストプラクティス UXを向上させるための、FABとアニメーションの組み合わせ方 FABを使うタイミング 特徴的なアクションを強調したいとき FABはもっとも関連性があったり、頻繁に使われるアクションを強調します。アプリの中でも、強い特徴を持つアクションに対してFABは使われるべきです。理想的には、以下の画像のようにFABはアプリ全体において中心的な機
オンボーディングについてレストランから学ぶべきこと
Adamはイギリスの起業家および慈善活動家で、「違いを作る人たちが違いをもたらす仕事をサポートする」というミッションの下に活動するFairheadという企業の創設者です。 一流のシェフが料理に対して「火の通し過ぎだ」と怒鳴りつけることと、ユーザーに対する優れたオンボーディングの間には、どのような関係があるのでしょうか？ 素敵な食事の体験というものには、食べ物自体よりはるかに興味をそそられる何かが存在します。それこそが、オンボーディングの体験です。 編注：オンボーディングは、新規ユーザーがサービスに慣れてもらうためのプロセスを指します。 この記事では、レストランでのオンボーディングの優れた部分と、それを今後のUXデザインにどのように応用できるかを解説していきます。 １. ドアの向こうにあるもの 前回私が妻とパリを訪れたとき、ほかの観光客と同じように私たちはよく外食をしました。ドラマチックな演
MVP（Minimum Viable Product）とは？実践するメリットと検証方法
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 MVP（実用最小限の製品： minimum viable product）という考え方が広まったのは少し前のことです。MVPはFrank Robinson氏によって定義され、起業家であり学者のSteve Blank氏と、リーンスタートアップ（Lean Startup）を提唱したEric Ries氏という２人のプロダクトデザインの権威によって有名になりました。 MVPとは？ 簡単に定義すると、MVPとは、製品を提供する上で必要最小限の機能のみをもつ、もっともシンプルな製品です。しかし一般的には、「顧客価値があり、利益を生み出せる最小限のもの」と考えられています。 MVP戦略においては、価値基準を理解することが決定的に重要です。たとえば、車輪は車輪だけではユーザ
つよいUI - transitkix design log
…というものを最近考えていました。「画面デザインのOKももらったし、私の仕事は終わり！あとはエンジニアに指示書を渡すだけ」と一息ついた時にこそ、改めてデザインを見つめなおすべきです。 つよいUIであるための7つの視点 1.本来、そこにあるはずの情報がない場合はどうなりますか？ リストUIで載せる情報が0件、文章が空っぽ、画像がない時など 2.表示する要素が想定よりすごく多い/すごく少ない場合はどうなりますか？ 数字の桁数、文章の行数、文章が入りきれない場合は文中・文末のどこを省略すべきか…など 3.ユーザーさんの立場によって、表示要素に変化はありませんか？ ゲストとログインユーザー、無料会員と有料会員…など 4.ロード中、もしくはロードされるまで何が出ていますか？ 通信中の表示、読み込み中の画像エリア…など 5.予期せぬエラーが起こった時、画面はどうなりますか？ 通信エラー、リンク先のコン
デザインの基本原則：シンメトリーとアシンメトリー
この記事はInteraction Design Foundationからの翻訳転載です。配信元または著者の許可を得て配信しています。 Symmetry vs. Asymmetry - Recalling basic design principles デザインにおける２つの重要な原則を見ていきます。これらは一見あまりに単純で当たり前のようで、考えるほどのことでもないように思えるでしょう。しかし私たちはその性質や効果を過小評価してはいけません。つねにシンメトリー（対称）とアシンメトリー（非対称）を心にとどめておくことで、デザインを計画して実行するときに、より良い判断を下せるようになるでしょう。 デザインを組成する個々の要素を、中心点や中心軸を基に均等に配置すると、シンメトリーのデザインになります。自然界におけるシンメトリーのわかりやすい例が蝶々です。左右の羽が（完全に同じでなくても）きわめて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazonのトップページがワチャワチャしてる
このCSSアニメーションのアイデアすごい！CSSの疑似クラスで実装するフローティングラベル
【保存版】無料で学べるUXデザインの教材まとめ｜TSUYOSHI KANEKO / GOGEN株式会社CXO
