ユーザー体験の改善・検証に使える海外UXツール16選【2018年版】 | UX MILK
ConnorはAppseeのインバウンドマーケティングチームの一員です。ソーシャルメディアとコンテンツの熱意あるプロで、テクノロジーやアンドロイドについては何日間でも熱く語れます。 世の中には、たくさんのUXツールが存在します。複数の選択肢があることは良いことですが、選ぶときは一苦労です。アプリのユーザーが機能の多さに圧倒されてしまうことがあるように、UXデザイナーやプロダクトマネージャーがUXツールの多さに圧倒されてしまっているのです。 私は、もう少し簡単に最高のUXツールを見つけられるようにしたいと思っています。そこで、評判の良いUXツールをインターネットの隅々まで探し、デバイスごとに分類しました。この記事ではこれらの優れたUXツールを用途ごとに見ていきます。 定性分析ツール 「分析」という単語を聞いてほとんどの人が想像するのは、数字やチャート、テーブル、Googleアナリティクスのロ
UXデザインとUIデザインの３つの大きな違い
Alan Smith氏は、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 UXとUIの定義についての論争は、その２つの言葉が現れて以来ずっと続いています。UXはUser Experience（ユーザー体験）、UIはUser Interface（ユーザーインターフェイス）を表しています。 さっぱりわからないですか？ これを理解できる瞬間はおそらくこないでしょう。エンドユーザーへのインターフェイスがユーザー体験に対してどのように影響を与えるかわかるでしょうか？ また、UXとUIという言葉が同じ時期に作られたものでないという事実も、この２つをとりまく混乱の原因のひとつであることは間違いないでしょう。UXとUIは、同時期に考え出された言葉ではなく、当初は明確に定義され
アダプディブデザインか、レスポンシブデザインか
アダプティブデザインとレスポンシブデザインは、両方ともブラウザのウインドウ幅に応じてUIを調整するという点ではとてもよく似ています。しかし、その調整の仕方において両者は異なっています。 UXデザインエージェンシー「Codal」の一員である私たちは、プロジェクトや予算、リソースに関する助言をよく求められます。それはそれでいいのですが、現場の人々の中にはアダプティブデザインというものがあることを知らない人もいます。 では、早速本題に入りましょう。 レスポンシブデザインでは、ブラウザのビューポート（表示領域）に基づいてWebサイトの見え方が変わります。通常、開発者はブラウザの幅によってページ上の要素を動的に変化させます。 レスポンシブなWebサイトは完全に流動的で、スクリーンサイズではなくビューポートに対応します。なぜならレスポンシブなWebサイトは、パーセンテージに基づいたCSSの指定を用いる
UXデザインにおけるビジュアルヒエラルキー
SeanはCodalの技術研究者かつライターで、UXデザインからInternet of Thingsまで幅広いトピックについてのブログを執筆しています。開発者、デザイナー、マーケティング担当者の傍で、Codalが最高品質の魅力的なwebコンテンツを作成できるよう補助しています。 今、あなたはこの文章をどのように読んでいますか？ ノートPCやスマートフォンといった、デバイスの話ではありません。どのように読んでいるのかという方法についてです。目で見た情報は、一体どのようにして脳で処理されているのでしょう？ 数年前、良く出回ったミームでは、私たちは一文字ずつ読むのではなく、文章を全体を読んでいるということを示しています。もしかしたらTwitterやチェーンメールで、以下の乱雑な文章を見たことがある方もいるかもしれません。 It deosn’t mttaer in waht oredr the l
情報設計を見直すためのカードソート調査の進め方
アルメニアのUXコンサルタントで、洗練された使いやすいデジタル製品に対する大きな情熱を持っています。@armen_ghazaryanでいつでもコンタクトをとることができます。 人によって食べ物の好みが異なるように意見も異なります。そのため、重要な意思決定を行う際には、ユーザーの考えを考慮する必要があるのです。 たとえば、連絡先情報を「About us」セクションに置くべきか、フッターに置くべきか、そのほかの場所に置くべきかといった議論をするとします。チームメンバーの意見はそれぞれ何らかの部分で正しいかもしれませんが、本当に重要な意見はユーザーの意見だけです。 それでは、どのようにユーザーのアイデアを実際の情報設計（IA）に組み込めば良いのでしょうか？ 私はカードソートをおすすめします。シンプルで実践と分析がしやすく、有効なUXデザインプロセスです。 カードソートとは カードソートは、トピッ
国内のUX専門家が集結した「UXify 2018 Japan」レポート【前編】
4月27日にUXのグローバルカンファレンス「UXify 2018 Japan」が開催されました。 「UXify」は米インフラジスティックスが主催する、UXの専門家が現場で得た知識、体験、事例などを共有するグローバルカンファレンスです。今まで米国やブルガリアで開催されてきましたが、５年目となる今回は日本でも初開催を迎え、「Future of UX = UXの未来」をテーマに国内の専門家が集まり、セッションを行いました。 今回は行われた５セッションの内容を前編・後編に分けてご紹介します。 １. 自分起点でUXの未来を考える 最初に登壇したのは株式会社セカンドファクトリーのUXデザイナー、斎藤氏。ワークショップ形式のプログラムで会場を盛り上げていました。 このワークショップは、登壇者である斎藤氏自身を題材とし、「わたし（斎藤氏）の活動をを分解し、一緒にUXの未来を考える」というテーマで共創駆動モ
ユーザー体験に影響する重要な７つの要素
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 ユーザー体験（UX）は、製品が市場で成功するか、失敗するかを左右する重要なものです。改めて、UXとはどういう意味なのでしょうか。 UXは、製品の「使いやすさ」を示す「ユーザビリティ」と混同されがちです。 実際、教養としてのUXはユーザビリティから始まったものの、次第にユーザビリティを包括するものになっていきました。優れた製品を市場に提供するために、ユーザー体験のあらゆる側面に配慮することが重要です。 UX分野のパイオニアのPeter Morville氏は、同分野のベストセラー著者です。フォーチュン誌に載る上位500の会社にも、UXに関するアドバイスをしています。 ユーザー体験に重要な要素として、彼は以下の７つを挙げました。 役に立つ：Useful 使いやすい
UXデザインプロセスがプロジェクトに応じて柔軟であるべき理由
Codal社のクリエイティブ・ストラテジスト。 マーケティングおよび戦略の企画・実行、ニュースレターの企画と構成などを手掛ける。 UX業界に身を置く人なら誰もがそれぞれの「UXデザインプロセス」を持っており、その手法はさまざまです。似たようなフローやプロセスであることが多いものの、考え方は大きく異なります。 UXデザインプロセスでは、１つの手法がすべてに当てはまることはありません。デザイナーやUXを担当する人であれば、「UXデザインプロセスとは何ですか？」と何度も問いかけられたことでしょう。より抽象的なレベルでの概論を展開することも可能ですが、プロジェクトの詳細を理解するまでは、プロセスを定義するべきではないでしょう。 UXデザインプロセスの重要性 最終的な製品の品質が、わかりやすく簡潔なUXプロセスによって決まることもあります。つまり、プロセスによって製品の良し悪しが決まってしまうという
ユーザーの潜在的なニーズを引き出すためのリサーチ方法とは
Jeff Sauro氏は、統計とユーサビリティに関するコンサルティング会社である、MeasuringU社の創設者であり、1,000社以上の顧客を抱えています。彼は、統計やUXに関する、20ケ以上の文献と５つの本を執筆しています。 2000年代の最初の頃、私は商品先物トレーダー向けアプリケーションのユーザビリティを改善する手伝いをしていました。タブレットコンピューター向けのアプリで、iPad誕生の10年も前のことです。 そのアプリがサポートしようとしていた機能やタスクについて、私たちには良いアイディアがありました。 しかし、トレーダーがどのようにアプリを使うのか、もしくはアプリを使って何を成し遂げたいのかはあまりよくわかっていませんでした。そのため、私たちはクライアントであるCBOEのフロアで１日を過ごし、４人のトレーダーが仕事をこなすときにアプリを使う様子を観察しました。 そして、取引の合
ミニマルデザインで最低限守りたい4つのルール
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 モバイルデバイスの利用が伸びるとともに、ミニマリズムもまた増加傾向にあります。ミニマリズムは、アプリやウェブサイトに読み込み時間の高速化や画面サイズの互換性などの利点をもたらします。 素晴らしいユーザビリティと組み合わせた美しくミニマルなアプリは非常に印象的です。そして、わかりやすくシンプルなアプリはコミュニケーションにおいて非常に重要です。 しかし同時に、ミニマリズムを正しく行うことは難しくもあります。ミニマリズムを試してみたい方は、始める前にいくつかの基本的な経験則をしっかり理解しておくようにしましょう。ここで、ミニマリズムを上手く機能させるヒントをいくつかご紹介します。 余計な要素をすべて取り除く デザイン内のすべてのアイテムには、目的がなければなりません
UXデザイナーが資料作成で気をつけたい３つのポイント
YonaはCodalの技術調査担当者です。Codalでは、コンテンツ戦略、資料作成、ブログ執筆と編集で責任者を務めます。余暇には、ギター演奏や料理に情熱を注ぐ旅行好きの人間です。 UXデザイナーたちの仕事は、多忙を極めています。調査、設計、依頼主とのやり取り、チームでの作業などの仕事をしていると、資料を作成する時間はほぼ残されていないと言えます。 それでは、資料を完璧にすることは時間の無駄でしょうか？ そうである面も、そうでない面もあります。それは資料の「目的」と「有用性」によるでしょう。 一般的な資料、例えば文書として記録を残すという目的しか持たないものは、雑多すぎて無意味なものです。一方で、対象を絞り込んだ資料は有用かつ、役立つものとなる可能性を秘めています。 資料作成に時間をかけすぎてしまうことを防ぎ、その時間をデザインや調査にあてるためには、次の項目について考えると良いでしょう。
これからReactを勉強する人が最初に見るべきスライド７選
React.js（以下、React）は、Facebookが作ったJavaScriptのビュー・ライブラリです。最近よく耳にするけどあまり理解していないという人も多いのではないでしょうか。 そこで今回は、 「Reactって最近よく聞くけど一体何？」 「jQueryと何が違うの？」 といった疑問にこたえてくれる初心者向けのスライドを厳選して紹介します。JavaScriptは苦手だけど概念だけは理解したいといった人のために、なるべくわかりやすいものを選んでいます。 ＊もし、「このスライドもおすすめ」というものがあったら教えてください。 Reactとは？ なぜ人は必死でjQueryを捨てようとしているのか なぜjQueryを捨て、Reactを採用しようとするのかについて説明してくれるスライドです。ページ遷移のないシングルページアプリケーション（SPA）への需要が増えてきているといった最近のトレンド
これからアジャイル開発を学びたい人向けの基礎知識と５つの事例
アジャイル開発という言葉が騒がれるようになってしばらく経ちますが、ピンときていない人もまだいるかと思います。あるいは、概念は理解していても、実際どう実務に取り入れたら良いのかわからない方も多いかもしれません。 今回はアジャイル開発の簡単な紹介と、導入を検討している方のためのサイトやスライドを紹介していきたいと思います。 アジャイル開発とは アジャイル開発とは、迅速かつ柔軟な開発手法の総称を指します。ちなみに、アジャイル（=agile）とは英語で「すばやい」「俊敏な」という意味です。アジャイル開発の手法としては、スクラムやエクストリーム・プログラミング（XP）などがあります。 アジャイル開発と言われる手法の特徴としては、１〜２週間の短い期間で１つの機能を開発し、これを繰り返して全体のソフトウェアを作り上げていく点が挙げられます。 ウォーターフォール型とアジャイル型の違い アジャイル開発はしば
登録フォームのユーザビリティを向上させる５つのポイント
Codal社のクリエイティブ戦略家。Codal社はシカゴを拠点とするモバイル開発のソリューションを提供しています。 Webページで犯しがちな間違いの一つとして、登録フォームに項目を作成しすぎることが挙げられます。 今後の販促のためにユーザーの情報をたくさん手にいれようと、サイトやアプリのフォームは項目で溢れかえってしまいます。これはユーザーのフラストレーションや苛立ちを誘う原因の一つになります。 ユーザーから情報を求める前に、なぜそもそも登録する必要があるか述べることはとても重要です。１、２文で端的に自社サイトに登録するメリットをまとめることです。そしてこの文章を登録ページの目立つところ（理想は登録フォームの近く）に表示するべきです。 割引クーポンや無料のE-book、その他の登録しなければ利用できない独占コンテンツのアクセス件を受け取るといったメリットを用意するのもよいでしょう。もし登録
パララックスや無限スクロールはどんなときに使えばいい？
課題 ・サイトが多様且つ大量の内容を含んでいて、複数のページでは誘導が難しい ・サイト上のコンテンツをスムーズに、そして連続して展開したい 解決策 Webサイトに含む情報を一か所に集めたいなら、長距離スクロールサイトをシングルページで作りましょう。ソーシャルメディアのサイトや、その他ユーザーの制作物を含むサイトには絶大な効果を発揮します。これらは内容を一度にまとめて閲覧することが楽しみの一つであり、また常に内容の更新が行われるために、情報の分類が難しいからです。 画面が小さいためにスクロール量が多くなるモバイル環境の普及も、長距離スクロールにとっては追い風です。 後述する無限スクロールを長距離スクロールと組み合わせれば、Webサイトの閲覧に没入感を生み出します。ユーザーが特定の情報を探している場合は、Amazonのような体系的な仕組みに軍配が上がりますが、情報を次々に閲覧するなら、長距離ス
ノンデザイナーでも配色に困らないカラーパレットツール10選
色はデザインにおいて重要な役割をもち、色の組み合わせひとつでユーザーに与える印象は大きく変わります。しかし、配色を決めるのはなかなか難しく、悩んでしまいがちです。 今回はそのようなときに役立つ、配色を提案してくれるサイトや、配色がコレクションされているサイトを紹介します。配色のアイデアを与えてくれるサービスばかりなので、ぜひ活用してみてください。 HELLO COLOR http://jxnblk.com/hello-color/ クリックすることで２色の色の組み合わせを提案してくれるサイトです。また、スペースキーを押すことで、提案された２色に合う色を表示してくれます。配色のデザイン知識がなくても使うことができる便利なサービスです。 PALETTABLE http://www.palettable.io/ 提案された色が「好き」か「嫌い」かを選択していくだけで、カラーパレットが完成します。
マテリアルデザインに見る機能的なアニメーションの６つの法則
機能的なアニメーションとは、演出のみのアニメーションと違い、その意図が明確かつ論理的に校正された、控えめなアニメーションのことです。それはUIにおける認知的負荷を軽減させ、変化の見落としを防ぎ、そしてよりその空間の記憶を呼び起こしやすくさせ、何よりもUIに命を吹き込みます。 その動きは、増えたり、分かれたり、その形やサイズが変わることで、画面をさらに生き生きと見せることができます。機能的なアニメーションは、ナビゲーション上でユーザーをスムーズに移動させ、スクリーン上の要素の配置の変化を説明し、要素の階層を明確にするために使用するものです。 成功する機能的なアニメーションには、以下の６つの特徴があります。 1. レスポンスがよい UIデザインにおいてビジュアル・フィードバックはとても重要です。なぜなら、ユーザーの認知に対するごく自然な要求に訴えかけるからです。現実世界ではボタンやコントロール
デザイン初心者必見！デザインの原則が学べるコンテンツ10選
デザインという単語は主にかっこいいものをセンスで作ると認識されがちです。 ですが、デザインは本来「設計する」と訳され、意図を伝わりやすくするために情報構成を考えることを指します。中にはセンスや感覚でこなせる人もいますが、法則さえ抑えればある程度のデザインなら誰でも理解し実践できます。 今日は自分にはデザインセンスがない、と落ち込んでいる方に、この記事では役立つ10サイトを厳選して紹介します。 デザインの原則・理論 １. デザイナーに言われた「非デザイナーが気をつけるべきデザインの「４原則」 ハズさないデザインの4原則（近接・整列・反復・コントラスト）が分かりやすく解説されています。実際に具体例を比較しているので感覚的にも理解することができます。 ２. 感覚派デザイナーも知っておいて損はない「デザインの要素と原則」 デザインの前提・デザインの要素・ゲシュタルト原則・デザインの原則の4つの
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
Web・アプリデザイナーがチェックしておくべき企業ブログ10選
Webやアプリに携わるデザイナーにおすすめの企業ブログを厳選しました。各社が提供しているサービスの事例や、ノウハウ、最新トレンドなどあらゆる情報が公開されているので、ぜひチェックしてみてはいかかでしょうか。 dwango creators’ blog http://creator.dwango.co.jp/ 株式会社ドワンゴのデザイナーが運営している、2015年11月にできたばかりのブログです。ニコニコのサービスに関連した記事や、現場で活躍しているデザイナーが実践している便利なTipsが紹介されています。 1pixel http://ameblo.jp/ca-1pixel/ 株式会社サイバーエージェントが運営しているクリエイターズブログです。サイバーエージェントのゲームやWebサービスで使用されている技術や、話題の音楽配信アプリ「AWA」の開発秘話などが掲載されています。 DeNA Cre
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
