「今日からできるUXデザイン」実況まとめ難しく考えがちなUXデザインですが、今できることからやってこうぜって話です このまとめは、2019/05/08に株式会社gumi様でプログラマ向けに@kinakoboosterが行ったデザイン講義の反応です。 ご質問はTwitter@kinakoboosterまでお気軽にどうぞ。 続きを読む
サイトの問題点を浮き彫りにする「UX監査」のガイドライン
Cassandra Naji氏は、Webアプリやモバイルアプリ用のプロトタイピングツールJustinmindのマーケティングコンテンツ編集者です。 たとえばあなたがECサイトを運営していると考えてください。訪問者が検索エンジン経由でサイトを見つけてWebサイトを閲覧していることはわかっています。訪問者は購買手続きを始めました。ところが途中で手続きを止めてしまいコンバージョンまで至りませんでした。 何が原因で手続きを止めてしまったのかわかりません。情報ヒエラルキーやユーザーフローをアップデートすべきときなのかもしれません。どのようにすれば、手直しすべき部分がわかるのでしょうか。 UX監査は、Webサイトやアプリといったデジタルプロダクトの中で、ユーザーを悩ませコンバージョンを妨げているポイントを明らかにして、不完全な箇所を突き止める方法です。 UX監査は会計監査と同じように実証的な手法で既存
定量的なユーザー調査手法：概要 – U-Site
製品のユーザーエクスペリエンスについての数値データが必要なのに、何から始めたらよいのかわからない、ということはないだろうか。まず必要なのは正しいツールを選ぶことだ。最もよく使われている定量的手法のリストを確認しよう。 Quantitative User-Research Methodologies: An Overview by Kate Moran on April 22, 2018 日本語版2018年10月29日公開 定量的な調査よりも定性的な手法に引き付けられるUXの専門家は多い。そちらのほうが容易で費用がかからないと広く見なされているからである。定量調査につきもののサンプルサイズの大きさや統計学を彼らは敬遠しているのだ。 自分もそうだ、と思うようなら、あなたは損をしている！ 定量的な手法は、熟練のUXリサーチャーのツールキットの重要な要素だ。定量的手法は以下のことを可能にしてくれる
最前線で活躍するUIデザイナーに聞いた、Adobe XDの良い点・ダメな点 | 株式会社プライサー
こんにちは。デザイナーのモッチです。 今話題の『Adobe XD』、みなさんはもう活用されていますか？ アプリデザインの現場で、格段のスピードアップが期待される新しいデザインツールです。今回はそのAdobe XDについて、当社でバリバリ活用しているUIデザイナー・さっちーさんにきいてみました。 Adobe XDってなに？ ──まずはじめに、Adobe XDってなんですか？ Adobe XDなら、これ1つでコンセプトからすばやくプロトタイプも作成できます。Webサイト、モバイルアプリ、その他のデザインがこれ1つで可能な、まったく新しいUI/UXソリューションです。 …とAdobeのサイトからコピってみました（笑）。でも、本当にその通り。 UI/UXのためにまったく新しい方向から発足した開発チームが作ってくれたぞー！ という感じのアプリケーションです。それでいてAdobeユーザーであれば（で、
Adobe XDがどんどん便利になってる！Web制作に使える無料素材のまとめ
先週のCreative Cloudアップデートで、Adobe XDが正式版としてリリースされました。Adobeユーザーはもちろん、Windowsがメイン環境の人にもUI/UXデザインの本命と言えるでしょう。 昨日のAdobe Creative Cloud道場のライブ動画ではAdobe XDの近い将来の機能として、タブレット用のレイアウトを作成したら、人工知能Adobe Senseiでスマホ用の複数のレイアウト候補を自動作成し、あとはそこから選び出せるようになるとのことです。作業には時間をかけず、クリエイティブに時間をかけることができますね。 Adobe XDでWebサイトやスマホアプリを制作する際に役立つ、ユーザーフローやワイヤーフレーム、グリッド、スタイルガイド、UIコンポーネントなどの無料素材を紹介します。
マイクロインタラクションを活用してUXを改善する | UX MILK
Stephenはオンラインマーケティング担当者、デザイナー、テクノロジーに精通したブロガーです。彼はロサンゼルスに拠点を置くSPINX Digital Agencyと提携しています。 ユーザーは常にサイト内の機能とインタラクションをしています。そして、あなたが想像する以上にそのような小さなインタラクションは重要です。 小さなインタラクションは全体の体験に影響を与えます。これを利用してユーザー体験を向上させて、ユーザーが最後までインタラクションを続けてくれるようにしましょう。 マイクロインタラクションとは何か これらの小さなインタラクションには、マイクロインタラクションという適切な名前があります。マイクロインタラクションは、ユーザーがサイトとインタラクションをする際に行う基本的なタスクです。上手にデザインされているサイトは、ユーザーが操作するときにポジティブなフィードバックを与えます。ユーザ
サイトやアプリの使い心地を改善！UIアニメーションを良くする実践テクニック、小技7個まとめ
実際のサンプル例を確認しながら、UIデザインの「良い」アニメーションを「より良く」してみましょう。ほんの少し調整を行うだけで、UIマイクロインタラクションをより魅力的で、ユーザーにも分かりやすく表現できます。 たとえば、リスト形式で並べたコンテンツにちょっとした工夫を加えるだけで、よりつながりのあるUIパターンを演出できたり、コンテンツの関係性を考えたアニメーション遷移、ボタンをクリックするなどユーザーに行ってもらいたいものに注意を引くことも、ほんのわずかなUIマイクロインタラクションによって実現できます。 今回はこれらのサンプル例を作成するために、Material Motion、IBMのアニメーション原則、Motion in Manifestoのガイドラインを参考にしています。 また今回のサンプル例は、InVision Studio（現在は限定ユーザーのみのアーリーアクセスで、メール登録
Atlassianに学ぶ、大規模なUXチームにおける採用プロセス
Liam氏は次のように述べました。 「私たちはただ何となくデザインチームを拡大しようとしているのではありません。プロダクト管理と開発を補えるように、チームを拡大しているのです。」 Atlassianのデザイン組織は現在５つの部門にわかれています。 情報体験：プロダクトのコンテンツとインターフェイスのコピー、技術のドキュメントを作成する ユーザーリサーチ：ユーザーのニーズを調査、検証する プロダクトデザイン：プロダクトを改良し、新プロダクトを開発する クリエイティブチーム：インタラクティブなマーケティングプロジェクトを作成する デザインオペレーション：適切なツールやプロセス、ビジョンを導入してデザインチームを成功に導く 加えて、プロダクトに関わる３職種の連携を維持するために、Atlassianはガイドラインとして以下の比率を用いています。 デザイナー：プロダクトマネージャー：エンジニア＝１：
smoothState.js - 滑らかな画面遷移を提供 MOONGIFT
スマートフォン向けのWebサイトなどでは画面遷移が大事です。普通のURLを遷移するような動きではUXがよくありません。新しいコンテンツがスライドしてきたり、前の画面と滑らかに入れ替わることでユーザの意識を切らさずに操作を継続できるようになります。 そうした動きをサポートしてくれるライブラリがsmoothState.jsです。履歴管理も行ってくれるライブラリです。 smoothState.jsの使い方 デモです。クリック時にコンテンツがスムーズに表示されます。 アニメーションのされ方も複数あります。 メニューで使うパターンです。 smoothState.jsを使うと画面遷移はもちろん、履歴管理も行ってくれます。スマートフォンはもちろんデスクトップブラウザでも利用できるでしょう。多くのフレームワークでは同様の機能がありますが、大げさになってしまいます。遷移機能だけ欲しい時に良さそうです。 sm
UXデザインの正しい評価方法
ZEPPELIN ドイツ腕時計ブランドの"ZEPPELIN"とのコラボレーションウォッチパートナ... 詳細を見る
次世代のワイヤーフレーム「マイクロフレーム」とは
Marcinは製品デザインのプラットフォームである、UXPinのCEOおよび共同創設者です。2010年にUXPinを共同創設して以来、彼はポーランドのシリコンバレーオフィスの製作チームをリードし手助けしてきました。 「ワイヤーフレームの時代は終わりました。インタラクティブなプロトタイプこそがすべてです。」 私たちは少なくとも７年間は、この主張を聞き続けてきました。もしこのような議論に対して、人気がすべてを証明するというなら、真実はこの主張の逆と言えるでしょう。なぜならワイヤーフレームは終わったらしいと議論され続けているという事実自体が、ワイヤーフレームは顕在で、デザインプロセスにおいて少なくとも一部のプロジェクトやデザイナーに適合する形で存続していることを証明しているからです。 ワイヤーフレームはどのように生き残ってきたのでしょうか？ 実はワイヤーフレームは進化し続けています。 ワイヤーフ
GoodpatchのUIデザイナーがおすすめ UIデザインを理解するためのブックリスト【2021増補版】｜Goodpatch Blog グッドパッチブログ
今回は、GoodpatchのUIデザイナーにヒアリングし、UIデザインを理解するためのおすすめ本をまとめました。 次のような人に特におすすめです。 UIデザイナーになったばかりの人 もっとUIデザインについて勉強したい人 サービス、アプリ開発に携わるエンジニア・ディレクターの人 目的別に6つのカテゴリに分けてご紹介します。あなたの関心に沿ったトピックから、 気になる本を見つけていただけると嬉しいです。 1. UIデザインを基礎から理解する ユーザーインターフェース（UI）とは何なのか、どんなデザイン要素があるのか、UIが機能する環境とは？、どうやって作ってリリースするのか…UIデザインを始めるために、まずは基礎知識を網羅しましょう。 ■ はじめてのUIデザイン 改訂版 この本は、著者の1人である吉竹遼さんが「UIデザインを体系的に学ぶための本が少ない」という課題感から企画されました。そのた
プロダクトリリース前に確認したい23のUXチェックリスト
Fabio Muniz氏はTestLodge社のプロダクトデザイナーであり、製品開発の立ち上げ段階における設計で活躍しています。Fabio Muniz氏の仕事はfabio.designでご覧ください。 ソフトウェアの設計プロセスではプロダクトの欠陥が見つからず、ユーザーが使う段階になって欠陥が明らかになりユーザー体験を損ねてしまうことがあります。 この記事では、そういった事態に陥らないようにチェックしておくべき事項をリストアップしました。ここで挙げるチェックポイントは一般的なものであり多くのプロダクトに適用可能ですが、例外もあることをご理解ください。 インタラクションデザイン 01 - 頻繁に発生する操作が簡単にできるか チェックをする理由：同じ情報を繰り返し入力することは面倒であり、ユーザーの生産性向上に寄与しません。面倒な操作が多ければ、ユーザーはより生産性の高い競合プロダクトへの乗り
フロントエンドエンジニアが意識しておきたいユーザビリティ14選 - tatsuyankmura
デザイナー向けに書かれたユーザビリティの書籍や記事はたくさんありますが、実装者向けはあまりありません。そこで、これまでに私が実装をして、デザイナーに受けた指摘、配慮すべきと感じた点を中心にまとめてみました。 リンク・機能など 1. リンクや押せる箇所は気づいてもらえるようにする 便利な機能を実装しても、気づかれなくては意味がありません。リンクや押せる箇所などは、色が変わる、動くなどの変化を加えてユーザに気づいてもらえるよう配慮しましょう。 プロバスケットボールリーグ、Bリーグのサイト。タブですが、マウスオーバーしてもポインターが変わらず、反応もないので押せることに気づかないユーザもいるのではないでしょうか。 2. 画面最上部へ戻るボタンの設置 特に読み物系のサイトなど、画面が長くなる場合はページトップへ戻るリンクがあると便利です。スクロールで戻るのは意外と大変で手間がかかります。PCはブラ
説明なしでもわかるUIを実現するために！マイクロインタラクションの基本を理解しよう
こんにちは。TechAcademyの小嶋です。 皆様は「マイクロインタラクション」という言葉をご存知でしょうか。 誰にでもわかりやすいUI/UXを目指したもので、Webサービスやアプリなど様々な場面で使われています。 朝起きてアラームを解除するところから夜スマホの充電を開始してから寝るまで、数多くのマイクロインタラクションに触れています。 今回は、マイクロインタラクションの基本概念と利用するメリットを解説します。 あらゆるサービスに応用できる概念なので、ぜひこの機会に覚えておきましょう。 マイクロインタラクションとは:誰でも直感的に何をすればいいかがわかるデザイン マイクロインタラクションとは、「ヒューマンセンタードデザイン(人間中心のデザイン)」と呼ばれるデザイン手法の1つで、「今どのような状況で、次にどう行動すれば良いのかを直感的なUIで伝える」ことを目的としています。 説明書を読まず
UXデザイナーが備えておきたいツール・サービス厳選20個まとめ
UXデザインとはユーザーエクスペリエンス(UX)、Webサイトやアプリの使い勝手やユーザーが体験する満足度を重視したデザインのことで、あなたが満足するデザインをつくってもユーザーが使いやすいと感じなければUXが良いとは言えません。 ユーザーのリサーチやテストやフィードバック、プロトタイプやワイヤーフレームの作成、クライアントやチームメンバーとのコラボレーションなどに役立つツール・サービスを紹介します。 20 Valuable Tools For UX Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーのリサーチ・テスト・フィードバック プロトタイプ・ワイヤーフレームの作成ツール コラボレーションのツール ユーザーのリサーチ・テスト・フィードバック ユーザーのリサーチは、プロトタイプを制作する前におこなう
デザイナーだけでなくエンジニアもブックマークしておくべきUI/UXの情報を発信するメディア・ブログ6選｜TechClips[テッククリップス]
デザイナーにとっては、聞かない日がないほどトレンドとなっている「UI/UX」という言葉。もはやデザイナーに限らずエンジニアにとっても、UI/UXの概念を理解していることが基本のスキルセットとして必要とされる傾向もあり、これまでのような“モノ”から“コト”を重視する考えが強まっているように思います。 さて、本記事ではそうしたUI/UXの情報を余すことなく発信する国内メディアやブログを紹介。デザイナーはもちろん、エンジニアの方もUI/UXの理解を深める情報源として活用してみてはいかがでしょうか。 UI/UXとは 改めてUI/UXについて簡単にご紹介すると、それぞれの「UI」と「UX」では考え方が違うことに注意しましょう。はじめにUXとは、「ユーザーエクスペリエンス」の略で、いわゆる“体験”を指します。 例えば、「ECサイトで思いがけない好みの商品を見つけ、購入できたときの喜び。」つまり、利用者
![デザイナーだけでなくエンジニアもブックマークしておくべきUI/UXの情報を発信するメディア・ブログ6選｜TechClips[テッククリップス]](https://cdn-ak-scissors.b.st-hatena.com/image/square/442521c6f78a52c5edefd0d08aa7ebf16b21c1ca/height=288;version=1;width=512/https%3A%2F%2Fobject-storage.tyo1.conoha.io%2Fv1%2Fnc_261159609ad84809af5afcb9e5f56abb%2Ftechclips%2Fimages%2F122%2Fimage.png)
サービスデザインで取り入れたい、デザイン思考ツール
ペルソナやカスタマージャーニーマップ、アジャイル開発などなど。 UXやUI開発に携わる人なら知っている、有名なデザイン思考ツールはいろいろあります。 今回は、こういった良く使われているデザイン思考ツールにプラスして取り入れたい、サービスの課題をより深くより広く分析できるようなデザイン思考ツールをご紹介したいと思います。 なぜなぜ分析ユーザーに連続的に質問を重ねることで、UXの表面に現れた現象の背後にある理由を掘り下げていき、ユーザーが抱える問題の本質を分析する手法です。 例えば、飲食店を想定した次のやり取りを見てみましょう。 参考：Marc Stickdorn, Jakob Schneider『THIS IS SERVICE DESIGN THINKING.』（ビー・エヌ・エヌ新社）p.167ランチタイムの接客効率化という問題の裏に、別の問題があったということが良く分かります。同じくサービ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.ogura.blog/entry/2017/02/28/190245
よくわかるダメUI/UX画像コレクション - DOCUMENTS.TIPS
