ユーザビリティというのは普遍的に重要なデザインテーマの一つですが、一方でユーザビリティへの関心は、UXが普及して以降、徐々に失われている印象があります。例えば、ユーザビリティがテーマにした書籍のほとんどは2000年代の刊行で、少なくとも日本国内において、2010年代以降に発刊された書籍は僅かです。 実際、Googleトレンドで2004年からの「ユーザビリティ」と「UXデザイン」の検索動向を比較しても、「UXデザイン」が2010年以降に増加傾向であるのに対して、「ユーザビリティ」は2000年代前半をピークに下降しています。 「UX」だと別の意図の検索を含むため、あえて「UXデザイン」で比較していますが、ここにデザイン文脈で使われる「UX」を加えると、「UX」は「ユーザビリティ」を確実に上回っているはずです。 だからといって、2010年代以降にユーザビリティが重要でなくなったわけではありません

Webデザインの出来を左右する「コンポジション」の重要性 | アドビUX道場 #UXDojo 連載 エクスペリエンスデザインの基礎知識 一般的なデザインは、カラー、タイポグラフィ、画像など多くの要素の組み合わせからできています。印刷用のデザインでも画面用でも、要素のバランスをとって全体的な体験をより良いものにするためには、デザインのコンポジションに関わるいくつかのルールの理解が欠かせません。この記事では、コンポジション、すなわちデザインの構成とは何かを説明し、ストーリーを語る優れたデザインの構築に役立ついくつかの原則を紹介します。 デザインにおける視覚的な構成とは？ 視覚的な構成は、デザイン構築の基礎であり、すべての要素を調和させて全体としてのメッセージを伝えるためのレイアウトです。下の画像に描かれている単語を使ったアートはその好例です。一つひとつの言葉はとても単純な要素ですが、要素の組み

こんにちは、スワンです( 'ω') noteではしばらくご無沙汰してたのですが、今回激戦を極めた「UI Crunch #13  娯楽のUI」に奇跡的にnoteレポート枠で受かったので、花金に早々に仕事を切り上げてご機嫌でイベントに行ってきました。 噂によると倍率40倍近くだったそうで「全盛期の東京芸術大学の受験倍率かよ」って突っ込みたくなりました（笑）ありがたい機会をゲットしたとともにいけなかった方々にこの興奮を還元するべくゴリっとイベントレポートをまとめてみようと思います。 前がき私事ですが、ちょうどこの春で働く環境が変わり、株式会社メルペイでデザイナーとして働くことになりました。社会人になって初めての、自分を取り巻く「場所」や「人」が大きく変わる体験。そしたら、まだ働き始めて本当に間もないのだけど「場所が変わるとこんなにも入ってくる情報の種類が変わってくるんだな〜」という予想外の驚きが

テキストをボタンにするのはデザインに手間がかからないので、簡単に設置できます。しかし、ユーザーはそのテキスト ボタンのテキストを読んだり、認識したり、タップすることに苦労を強いられます。 テキスト ボタンがスマホのユーザビリティを損なう理由、代わりに何を使えばいいのか、テキスト ボタンはどんな場合に適しているのかを紹介します。 Why Text Buttons Hurt Mobile Usability 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキスト ボタンはタップしにくい すべて大文字のテキスト ボタンは読みにくい テキスト ボタンは認識しにくい テキスト ボタンの代わりに何を使えばいいのか テキスト ボタンが意味をなすとき テキスト ボタンを乱用しない はじめに ボタンに必要なユーザービリティの基準は、ス

UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感

「失敗の話をしよう」 この言葉は過去に例を見ないほど、賞賛されるようになったと思います。Googleで「失敗」を検索すると、「なぜ全ての成功は失敗から始まるのか」「なぜ失敗は成功にとって良いのか」といった刺激的な記事のタイトルが多く出てくるでしょう。また失敗は「早く失敗せよ、多く失敗せよ」のように、リーンUXのアプローチの中でもよく登場する概念のひとつです。 そんな状況の中で、私は革新的な意見を述べたいと思います。 失敗は悪いことです。 そう、それはこんなにもシンプルなことです。失敗を望まないのは人間の直感的な反応でしょう？　失敗を望まないのには理由があります。失敗は良い目標にはなり得ないのです。 失敗を美徳として褒め称えたり、「早く失敗せよ、多く失敗せよ」といった言葉の背景にある考え方を掘り下げている記事を実際に読んでみると、そこでは失敗は素晴らしいものだとは、まったく語られていないと気

色は私たちの認識や感情に大きな影響を与えます。正しく使用された場合、その色はユーザーの特定の反応を引き出す事ができます。ここでは下記の理由に則り、赤と緑という２つの色に注目したいと思います。 赤色と緑色はどちらも実用的な色であるため、UIデザインにとって非常に重要です。 UIのアクセントカラーとして赤と緑を使用する、一般的な方法を見ていきましょう。 重要さを意味します。即座に注目を集め、ユーザーに迅速な決断を促す非常に目立つ色です。 赤色はとても高い温度を示す色です。情熱から怒りというような感情が含まれている強烈な色でもあります。 警告または危険を意味します。 赤いライトが点滅している場合、人々は危険または緊急事態を連想します。 エラー表示 赤色は多くの場合、警告や非常に重要で確認が必要なもののいずれかに関連付けられています。そのため、エラー表示について考えるときに最初に思いつくのは赤色で

2019/2/26 BIT VALLEY -INSIDE- Vol.6 @Leveragesでの登壇のスライドです。 発表の内容をnoteにしてますのでこちらもご参照ください。 https://note.com/taketetsu1982/n/n2e431592eade https://atn…

フォームが複数ページに渡る場合、ステップインジケーターは必要不可欠です。ステップインジケーターはユーザーに対して自分たちが今どのステップにいて、あとどのくらいのステップが残っているかを示す役割があります。 画面上のスペースが限られているためモバイルフォームで、ステップインジケーターを提示することは困難です。デスクトップと同じインジケーターをモバイルフォームで使用すると、可読性と可視性の問題が生じてしまいます。 直線型 vs 放射型 無理やり狭いスペースに各ステップのタイトルを収めると、テキストサイズが小さくなりユーザーが読みにくくなります。さらに一度にあまりに多くのステップ名と番号が表示されるため、可視性も下がります。結果、視覚的なノイズが発生し、ユーザーが現在いるステップを把握することが難しくなってしまいます。 モバイルフォームには放射型のインジケーターを使用してください。こちらの方がユ

人が外に出れば世界は変わる。ナイアンティックの信念がユーザーに与えるもの 2016年にローンチされた『Pokémon GO』は、熱狂をもって迎えられた。多くの人々がこのゲームの虜となり、街中に潜むポケモンを捕獲するために世界中を歩き回っていた。 Googleデザインチームのマネージャーから、当時社内スタートアップであったナイアンティックに移り、『Ingress』などの人気アプリや『Pokémon GO』プロジェクトの立ち上げにも深く関わった川島優志は、世界中の人々に体験を与え、文字通り「動かしてきた」人物だ。UX（ユーザー体験）にフォーカスしたデジタルハリウッド主催の特別授業『EAT creative program』に登壇した川島は、UXという概念をわかりやすく伝えるため、氷山の写真を見せる。 川島優志 川島：氷山全体がアプリケーションであるとするなら、水面上に見えるのが「シンプルで見た

ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ

実はこのテキストの中には、どこかがリンクになっています。どこのテキストにリンクが指定されているかビジュアルだけでわかりますか？ 少し意地悪な問題ですが、本題ではないので早速答えを述べます。実は、「このテキスト」という部分にリンクが指定されています（リンクには「#」が設定されているので、クリックするとこのページのトップに移動します）。 皆さんはどの段階で「このテキスト」という部分が少し青色であることに気づけましたか？もしかしたら、普段色を使うお仕事をされている方（デザイナーなど）はすぐに違和感に気づけたかもしれませんが、全てのテキストを読んでから青色になっている部分を探して見つけた方もいらっしゃるのではないでしょうか。 このように、本文が黒文字でリンク色に暗めの青を使った場合はリンクだと気づけないことがあリます。 では、どのようなスタイルにすれば良かったのか考えると以下のようなパターンが挙げ

ナレッジ・ノウハウ 任天堂のUI/UXデザイナーが語るデザイン思想。UI Crunch #13 娯楽のUI【書き起こし前編】 私たちが利用するサービスやプロダクトには、毎日使う実用品もあれば、娯楽品もあります。目的は異なっても、どちらも生活に欠かせないものです。技術が進化し、新しいものが生まれ続ける現代において選ばれるサービスやプロダクトには、人に寄り添ったデザインが求められることは想像に難くないでしょう。では、娯楽品のデザインに潜むロジックや哲学はどのようなものなのでしょうか。 2018年4月27日、DeNAとGoodpatchが主催するUI Crunchは、任天堂株式会社さまをゲストに迎え「UI Crunch #13 娯楽のUI – by Nintendo –」を開催しました！告知開始直後からたくさんの反響をいただき、最終的には4200人以上の方々にご応募いただきました。伝説の回となっ

これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同

自分のデジタルプロダクトデザイナーとしてのアメリカでのポートフォリオが必要になったため、海外のUX・プロダクトデザイナーのサイトを50個くらい見て回った。 決定的に日本の個人のポートフォリオと違うなと思ったのは、プロジェクトのケーススタディを紹介をしている人が多いこと。デザイナーの数（＝競合の数）など背景も違うのかもしれないけど、デザイナーの面接もしたことがあるので、採用視点で見ても仕事のプロセスが載っているのは良いなと思う。 何故UX・プロダクトデザイナーに限定しているかと言うと、デザイナーと言ってもさまざまで、例えばグラフィックデザイナーとUXデザイナーではプロセスも勝負する土俵もまったく異なるから。 目次： 1. 採用する人に考えさせない 2. プロジェクトのプロセスを見せる 3. ポートフォリオの構成 4. 自分がやったことを掘り下げる 5. ポートフォリオも作品のひとつ1. 採用

Tradecraftに入って最初に出た各自がそれぞれやるべき課題のひとつに実際のプロダクトの改善にチャレンジするものがありました。全体の流れは以下のようなもの。 自分が改善したいと思う、そして誰もが知っているアプリを選ぶ 問題点を見つけ、その仮説を立てる ユーザビリティテスト（ゲリラ！）を行い、仮説を検証する 改善のプロトタイプを作る プロトタイプを検証するユーザビリティテストを行う この一連のプロセスをケーススタディとしてまとめる インストラクターのZacがひとりひとりに対して、丁寧にレビューをしてくれていたのですが、他のプロジェクトが始まり忙しくなったせいもあり、公開するための編集を放置してしまっていました。それをようやくまとめなおし、遂にMediumへ投稿することが出来たのが以下の記事でした。 この記事は、自分のスキル故に英語ではうまく書ききれなかった補足事項、Tradecraftの

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける

こんにちは、tadoです。 アニメ・声優が好きです。 2018/3/24(土)AnimeJapan2018に行ってまいりました。 出展企業中でもNetflixのブースの体験がものすごいええなと思たので、イベレポがてら、つらつら書いていこうかなと思います。 先にまとめると下記3つが上手いこと設計されたブースでした。 1:Netflixのサービス理解 2:Netflixのアニメ公式twitterのフォロー 3:Netflixのサイトへの訪問 Netflixブースのレイアウト ブースのはこのようなレイアウトでした(雑すぎてすみません)。 目的もなくビッグサイトを徘徊しているとNetflixのバルーンが見え、小林裕介さんの声が聞こえてきたので思わずブースに吸い寄せられました。 声オタあるあるですかね。 では順番にどんな内容だったかを書いていきます! 観客を楽しませながら、Netflixのことを伝え

わりかん・決済アプリ「paymo」を運営する AnyPay, Inc.のPM & UI/UX Designer。技術とデザインの力をプロダクトに結集させるプロセスがとても好き。Twitterは@ikutani41。 WebサービスやiOS/Androidアプリのデザインをするとき、どのようなアカウント概念を採用するか検討したことはあるでしょうか？ ほとんどのアプリは、ユーザーごとにアカウントを作って情報やログを紐づけたり、機密情報を扱う場合は認証機構を設けたりする必要があります。また、どのようなタイミングで、どのような操作でアカウントを作ってもらうかはとても重要で、さまざまな選択肢があります。 一般的なデザイン アプリをインストールして初めて開いたとき、下図のような画面をよく見るかと思います。 こういったデザインが採用される背景には、理由があります。 ユーザが慣れているため操作に迷いにくい