エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
UXデザイナーが2018年に気にすべき10のこと
HannahはAppseeモバイル分析のコンテンツマーケティングマネージャーです。UXとモバイルアプリに強い情熱をもち、モバイルテクノロジーについてのインサイトや情報を見つけたり共有したりすることに親しんでいます。 2018年となった現在、UXデザイナーの価値と重要性を理解していないようなモバイルアプリ企業は、世の中に存在しないと考えてほぼ間違いないでしょう。 現在のあらゆるモバイルアプリにおいて、ユーザー体験が中心となっています。UXデザイナーが直面しているのは、後方からでなく前方からリードしていくという困難な課題です。枠に捉われない考え方で可能な限りルールを変えていくために、斬新でクリエイティブであることが永遠に求められています。つまりUXデザイナーには、新たなトレンドを作ることと、現行のトレンドに従うことの２つがつねに求められるでしょう。 この記事では、すべてのUXのプロが自己改善す
プロトタイプがビジネスに利益をもたらす理由
PaulはUXのデザイナーでありデジタルトランスフォーメーションの専門家です。彼はユーザーを促進するためのウェブやソーシャルメディア、モバイルの活用を、非営利やビジネスの分野で手助けしています。 私たちUXデザイナーは、プロトタイプをよく使います。しかし、UXデザイナーにとって、クライアントや経営陣にプロトタイプが時間や経費に見合うものだと説得することはストレスです。この記事では、プロトタイプのビジネスにおける利益について説明していきます。 プロトタイプは私たちが自由に使うことのできるもっとも強力なツールの内の１つです。しかし、多くの人がプロトタイプはお金がかかるデザインツールだと思っています。そのため、プロトタイプは適切なツールだと思われません。 締め切りまでの期間が短く、予算が限られている場合プロトタイプは最初にカットされるものの１つであることが多いです。代わりに、企業は生産工程を短縮
UXデザインの失敗を回避するためのVUCAという考え方
東京在住のUX/UIデザイナーであり、企業のデザインマネジメントやデザイン戦略を行う。制作会社、メガベンチャーを経て2017年、株式会社ビズリーチへ参画。事業とデザインを通じて日本のインハウスデザイン業界の発展を実現する為、経営直下でデザイン戦略を計画・推進。 あなたの周囲にUXデザイナーはいますか？ それともあなたがUXデザイナーでしょうか。もしあなたが関わるUXデザインがうまくいっているのであれば、大変素晴らしいことです。 しかし、そうでないのであれば、今も何か悩みを抱えているのではないでしょうか。 なかには、UXデザインを諦めてしまった方もいるかもしれません。 UXデザインは本当に悩みの種なのでしょうか。 過去の失敗例やそこから得た発見をもとに、失敗しないUXデザインについて考えていきたいと思います。 UXに翻弄される人々の苦悩 私自身、UX/UIデザイナーとしてインターネットサービ
WebデザインにおけるZ字型レイアウトの活用方法
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 あなたが書いた文章をすべてのユーザーが楽しみながら読んでいると想像するのは簡単です。しかし、現実を見てください。ユーザーはそんなことはしません。ただ斜め読みをするだけです。 ユーザーはWebページを読まず、斜め読みをします。何か目を引くものがあったときにだけ、斜め読みをやめて文章を読むのです。 デザイナーは、デザインしたWebページ上で人々がどこを見るかコントロールできます。ユーザーの目線を誘導するには、目がどのように情報を処理するのかを理解する必要があります。この記事では、Z字型パターンを使用したWebデザイン内に視覚的階層を生み出す理論と実践について説明します。 Z字型パターンとは何か、どのように作用し、なぜそうなるのか 読んで字のごとく、Z字型パターンのレ
UIデザインの倫理を考える：ダークパターンを回避せよ
Stephen Moyersは、オンラインマーケティング担当者、デザイナー、そして最新技術に精通したブロガーです。Webデザイン、開発、オンラインマーケティング、ソーシャルメディアなどについて執筆しています。 ほとんどのWebサイトのデザイナーは誠実なユーザー体験を提供しようと努力しています。しかし一部には、コンバージョン率を上げるためなら何でもしてしまうデザイナーもいます。ユーザーをだまして特定の行動を取らせようとさえするのです。 Web上でのインタラクションはどれもある程度のリスクをはらむものですが、一線を越えてしまい、犯罪行為ともとれる非倫理的なWebデザイン手法もあります。「ダークパターン」とは何かを学び、これを避けることで、きわめて悪質な間違いを回避しましょう。 ユーザーの行動をうながすこととだますことの境界線 疑わしいページに誘導するクリックベイト、「コンピューターウイルスを防
MVP（Minimum Viable Product）とは？実践するメリットと検証方法
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 MVP（実用最小限の製品： minimum viable product）という考え方が広まったのは少し前のことです。MVPはFrank Robinson氏によって定義され、起業家であり学者のSteve Blank氏と、リーンスタートアップ（Lean Startup）を提唱したEric Ries氏という２人のプロダクトデザインの権威によって有名になりました。 MVPとは？ 簡単に定義すると、MVPとは、製品を提供する上で必要最小限の機能のみをもつ、もっともシンプルな製品です。しかし一般的には、「顧客価値があり、利益を生み出せる最小限のもの」と考えられています。 MVP戦略においては、価値基準を理解することが決定的に重要です。たとえば、車輪は車輪だけではユーザ
インタラクションデザインとは？理想的なUXのための５次元要素
インタラクションデザインは、UXデザインという大きな分野の中で非常に重要な要素です。この記事では、インタラクションデザインの基本概念と凡例、またインタラクションデザイナーが普段どのような仕事をしているのかを簡単に説明していきます。 インタラクションデザインとは、簡潔に言うとユーザーと製品間のインタラクションに関するデザインのことです。 インタラクションデザインにおける製品とは、アプリやWebサイトなどのソフトウェアを指しています。インタラクションデザインのゴールは、ユーザーにもっとも適した方法で使用目的を達成できるような製品を作成することです。 インタラクションデザインの分野区分が広いために、定義が漠然としているように感じるかもしれません。ユーザーと製品間のインタラクションは、美しさ、モーション、音、空間などのさまざまな要素に関係しています。そして、ユーザーインタラクションで使用される音を
理解するべきユーザビリティとデザイラビリティの違い
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 「デザイラビリティ（Desirability）とユーザビリティ（Usability）の違いとは何か」という質問はUXデザインの分野でよく見受けられるため、区別できることは重要です。 なぜなら、ユーザビリティはUXの基本であり、ユーザビリティ（使いやすさ）がなければ、価値のあるUXを作り出すことが難しいからです。一方で、デザイラビリティ（望ましさ，好ましさ）がなければ、ユーザーの心にいつまでも残ることはほとんどありません。記憶に残り、誰かにオススメできるUXではなくなってしまう可能性があります。 ニールセンノーマングループが2008年アムステルダムで定義した、UXの４つのシンプルな段階があります。 ユーティリティ ユーザビリティ デザイラビリティ ブランド体験
【UXの迷信】ユーザビリティさえ良ければ、サイトの見た目は関係ない？
ZoltánはCentralway（チューリッヒのソフトウェア企業）のUXデザイナー長で、Ustreamの元UXディレクターです。美しく、かつ使えるプロダクトを作ることに情熱を燃やしています。 あなたは「ユーザビリティが担保されていれば、Webサイトのビジュアルは美しくなくてもいい」と思いますか？ Craigslistのように、見た目は味気なくても人気があるWebサイトもあるので、サイトのビジュアルデザインを重視せずにユーザビリティだけに重きを置く人がいます。 魅力的なビジュアルが果たす役割 しかし、「美しさ」も大事な役目を果たしているのです。ビジュアルが魅力的であればあるほど、Webサイトはより効果を発揮します。また、UXはユーザーの感情によって大きく左右されます。ビジュアルに好感を持てた方が、ユーザーはリラックスしてサイトを見ることができるうえに、「このサイトは信用できて使いやすい」と
デザインの現場で活用できる４つの定番プロジェクト管理ツール | UX MILK
デザインやアートに関わる人は、整理整頓が苦手というイメージを持たれることがあります。これを一般論として語るのはいささか無理がありますが、たしかにクリエイティブな人々は散らかす傾向にあるというデータもあり、実際に雑然とした状況から創造力が生まれているのことにも実例があります。 このようなカオスな状態は、個人では問題ないですが、チームでの作業になれば話は別です。整理されているかいないかは、業績を左右してしまうほど重要な点です。 グループメールでやりとりしたことがある人なら、様々な人がメールを送り合って、それがネスト化してしまった状態にイライラしたことがあると思います。重要な情報が載せされたメールを見逃す人がいたり、一度聞いたことをまた問い合わせる人がいたりする状況が、間違いなく起こります。チーム内の全員が、学生の頃のグループ作業などを、思い出すでしょう。 言うまでもなく、チームをまとめるツール
UXの信号色「赤・オレンジ・緑」はどのように使うべきか？
Ben氏はProcess Street社で、ライターとして活動しています。戦略構築と、悪いgifファイル、リサーチなどに精力を注いでいます。網を破れなかったり、アバランチェを閲覧したりする時は、彼をツイッターで見つけて下さい。 色彩理論がUXにおいて重要な役割を果たすことは、説明するまでもありません。CTAの色による強調からテキストの可読性をあげる効果まで、コンテクストにあった色の選択については最大限考慮する必要があります。適切に配色をすることによって、ユーザーからの反応を上手く引き出し、あなたの製品のユーザー体験を最大限ポジティブなものにすることを期待できます。 UXにおける信号色：赤・オレンジ・緑 おそらく最も重要な色彩は、赤・オレンジ・緑なのではないでしょうか。この3色は、「UXにおける信号色」と言えます。これは、一般的な組み合わせの中で最も使いやすい色彩だからという理由ではなく（実
工数見積もりやスケジュール管理で参考になる記事10選
プロジェクトを遂行するためには、工数の見積もりやスケジュール管理が必要になります。正確な見積もりは難しく納期に間に合わなかったり、残業や休日出勤で埋め合わせたりした経験はありませんか？ 今回は、より正確に工数の見積もるための手法や、差し込み作業を考慮したスケジュール手法などについて解説されている記事をまとめました。 マネージャー、エンジニア、デザイナーなどすべての方に参考なる内容だと思います。 開発の見積もりとスケジュール管理 クックパッド株式会社の方が実践している見積もりとスケジュール管理方法について紹介されています。工数を見積もるステップや、スケジュールを立てるときの注意点、スケジュール管理の方法について学びたい方におすすめの記事です。 開発の見積もりとスケジュール管理 不安とストレスから解放される見積りとスケジュール方法 開発をしているとき、納期に間に合わなかったらどうしようと不安に
デザイナーがフォローすべきインスタグラムアカウント10選 | UX MILK
Webやアプリのデザインにインスピレーションを与えてくれる、10個のインスタグラムのアカウントを紹介します。 Instragramは画像投稿型のSNSなので、言葉が通じなくとも世界中の作品からインスピレーションを受けることができます。英語アカウントを中心に日本語アカウントもいくつか紹介しています。 １. seblester イギリスのアーティスト、グラフィックデザイナーのSeb Lesterさんのアカウントです。動画投稿が多く、作品が完成する過程をじっくりと眺めることができて、つい夢中になってしまいます。中でも、有名企業や映画のロゴを手描きで再現した投稿は必見です。ロゴ作成の刺激になること間違いなしのアカウントです。 ２. annieatkins ダブリンで活動している、映画のグラフィックデザイナーAnnie Atkinsさんのアカウントです。グランド・ブダペスト・ホテルなどの映画の世
CSSの:nth-child(n)の基本的な使い方
CSS3から定義された:nth-child(n)は擬似クラスの一種です。 １つの要素に隣接している小要素の指定した何番目かの要素にスタイルを適用するものです。この擬似クラスを使用することで、指定した順番にある要素や、奇数や偶数でのスタイルの適用が可能になります。
CSSのlist-style-typeでリストのスタイルを設定する方法
CSSのlist-style-typeプロパティは、リストの見た目を設定するプロパティです。具体的には、リストの先頭のマークを変更することができます。記号だけでなく、数字やアルファベットも指定できる為とても便利です。
Web制作で大活躍！ FirefoxのHTML・CSS・JavaScriptのチェック機能活用術 | UX MILK
Web制作をしている方ならば、ページの表示の崩れが出た際にはソースを調べるかと思います。しかし、HTMLやCSSの作成に慣れてくると、ソースコードを調べるよりももっと効率の良い方法はないのかと考えますよね。 ここで、Firefoxの便利なアドオン「Firebug」を使ってみましょう。 HTMLやCSSの基本的な知識がある方ならば、Firebugを使うことで効率的にデバッグを行うことが出来ます。 Firebugを使ってみる Firebugのアドオンをインストールすると、ツールバーに虫のアイコンが表示されます。名前にbugとついているだけありますね。 調べたいページで先程の虫のアイコンをクリックすると、Firebugの画面が表示されます。下部に現れたパネルがHTMLやCSSのソースになります。 ツールバーの、虫アイコンの一つ右にあるアイコンを選択すると、調べたい要素をHTMLのどこに表されてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dropboxのファイルを暗号化してセキュリティを高める方法 | UX MILK
jQueryで特定の要素にCSSを追加・削除する方法：css()
【cd】Linuxでディレクトリを移動するコマンド