登録フォームのテキストフィールドにはオフホワイトを
アプリケーションをデザインする際、ほとんどのデザイナーはコンテンツページには労力を費やしますが、登録フォームは見過ごしがちです。ユーザーが辿り着くのは、視覚的に魅力がなく、無味で事務的なフォームです。白いバックグラウンド、まっさらなテキストフィールド、煩雑な文章、不快な黒のアウトラインがあちこちに散らばった、登録のモチベーションを掻き立てないフォームです。もしあなたのフォームがそんな状態であれば、改善の余地ありです。 あなたのアプリを使いたいユーザーはフォームの見た目に関わらず登録はしてくれるでしょう。しかし、まだ決めかねているユーザーは事務的なフォームを見て辞めてしまうでしょう。第一印象で多くの見込み顧客を失っている可能性があるということです。もっと機能的で魅力的なフォームにすることで、ギリギリで決めかねているユーザーの背中を押すことができます。 ビジュアルがユーザーを後押しする ある調
北欧のUXデザイナーが日本の文化から学んだこと
Usable MachineのUXデザイナー/Design Matters。デザインと技術に関して書くことが大好きなデザインオタクです。 日本人は、複雑なデジタルテクノロジーを使いこなし、伝統文化からインスピレーションを引き出すことの本当の意味を理解していると言えます。私たちは北欧のデザイナーとして、日本のデザインと文化から学ぶべきものを見つけたいと思いました。そこで私たち、Design MattersのJulieとMichaelは、デジタルデザインの新しい視点を見つけるために東京に５日間、滞在してみることにしました。 日本はデザインの文化においてクオリティの高さは良く知られていて、特にテクノロジーの分野で高い評価を得ています。しかし、日本のデジタルプロダクトと非デジタルプロダクトのデザインはまったく異なることに気が付きました。インテリアデザインを始めとした日本の非デジタルデザインについて
フォントを見分けるために役立つ10のツール
Brendaはプロのライター兼ブロガー。個人ブランド「The Design Inkwell」を運営している。 フォントの選び方ひとつで、デザインの仕上がりが良くも悪くもなることは誰もが知っています。それ以上に、ネット上にはフォントがデザインの中心的な要素となっているケースが数多く見受けられます。あちらこちらに多くのフォントが散らばっているので、あるデザインに使われているフォントを特定することは簡単ではありません。 幸いなことにフォントを特定するのに役立つツールがいくつか公開されており、この記事ではその中でもおすすめなものをピックアップしています。ブラウザの拡張機能もあれば、Webアプリもあります。以下のリストをブックマークしておけば、デザインやWebサイトにどのフォントが使われているのかがすぐにわかるでしょう。 WhatFontIs WhatFontlsは、画像をアップロードするか、そのフ
ユーザーを離脱させない電話番号の入力フォームとは
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 電話番号入力フォームは、生年月日入力フォームと並んでくせ者です。たくさんのフォーマットがあり、どの入力方法が正しいかを見分けにくいことがよくあります。国番号を入力すべきか否かさえよくわかりません。 適切な入力フォーマットを判別できないと、ユーザーは電話番号入力フォーム以外の項目も入力内容が不適切なのではと不安になります。電話番号入力フォームでエラーがでると、フォーム入力自体を放棄してしまうかもしれません。 どのフォーマットが正しく、どのフォーマットでエラーが出るのかを、ユーザーが入力時に困惑しないように伝えるべきです。もしユーザーが困惑するようあればユーザー体験が乏しいということなので、デザインし直す必要があります。入力フォーム改善のためには、
「doda」のリブランディングの裏側、どのようにサイトのリデザインが行われたのか | UX MILK
社会人であれば転職サービスの「doda」は誰しも聞いたことがあるのではないでしょうか。 そんな「doda」が最近リブランディングを行い、CMや広告などでもイメージを一新しています。 今回は、「doda」のような大規模サービスでどのようにリブランディングが行われたのかを、パーソルキャリア株式会社のデザイナーである佐藤さんにお聞きしてきました。 登場人物 パーソルキャリア株式会社 転職メディア事業部 プロダクト開発統括部 UXデザイン部 クリエイティブグループ 佐藤 貴明 氏 “はたらくに迷う時代”にあわせたリブランディング ── 本日は、「doda」のリブランディングについてお聞きしたいと思います。まずは「doda」のリブランディングの概要をご説明いただけますか。 佐藤：「doda」は、今年の10月2日にリブランディングを行いました。１年以上前から準備していたもので、大きく変わったのはロゴと
効果的なUXライティングのための16のルール | UX MILK
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 UXライティングとは、プロダクトとユーザー間のインタラクションを支援し、プロダクト内のユーザーを導くUIのコピーライティングのことを指します。UIのコピーには、ボタンやメニューラベル、エラーメッセージ、セキュリティの注意喚起、利用規約、その他のプロダクト使用に関する指示などが含まれます。 UXライティングの主な目的は、ユーザーとデジタルプロダクトのコミュニケーションを解決することです。この記事では、効果的なUXライティングに関する実践的なヒントを提供します。 ※編注：当記事はあくまで英語におけるUXライティングについての紹介になります。 なぜUIのテキストをいじることがデザインプロセスにおいて重要なのか 多くの場合、プロダクトの開発者は、UIのテキストをプロダク
モーダルウィンドウはやめて！モバイルで最適なUIとは？ | UX MILK
モバイルサイトで最もフラストレーションのたまるユーザー体験の一つとしてモーダルウィンドウが挙げられます。PCサイトでは画面サイズが大きいので、モーダルウィンドウの表示に問題はありませんが、モバイルの場合はウィンドウが（ほとんどの場合）、画面外にはみ出てしまいます。ユーザーはモーダルの一部しか閲覧できず、閉じるのにも一苦労です。 また、画面上にキーボードが表示されている場合、閲覧は更に困難となります。キーボードは画面上に大きな面積を占め、ユーザーは自分が何を入力しているのかを確認するために、いちいちスクロールする必要が出てきます。もし、モーダルウィンドウで表示されているコンテンツを快適に見せたいのであれば、モバイルでのモーダルの使用は控え、代わりにアコーディオンを使いましょう。 アコーディオンはコンテンツをページ内に納めて表示するので、モーダルのように元のページにかぶさって表示されることはあ
会社で１人目のデザイナーがデザイン文化を組織に広めるために行った４つの取組み | UX MILK
デザイナーが抱える大きな悩みのひとつに、「デザインを理解してくれる人がいない」というものがあります。最近では少しずつ変わっていますが、デザインの重要性を理解してくれる企業は全体としてはまだまだ少ないように思えます。 今回は、専任のデザイナーがいない企業に１人目のデザイナーとして入社したテモナ株式会社の大村さんに、「デザイン文化を組織に浸透させるために行った取り組み」を聞いてきました。 登場人物 テモナ株式会社 UI/UXデザイナー 大村 真琴氏 デザインを考慮する重要性 ── 最初に、テモナさんの事業と大村さんの仕事内容を簡単に教えてください。 大村：テモナ株式会社は、「たまごリピート」と「たまごリピートNext」というサブスクリプションに特化したECの販売管理システムを提供しています。「たまごリピートNext」は、10年以上に渡って提供してきた「たまごリピート」をリニューアルしたサービス
Markdownで記述できる無料のテキストエディタ15選 | UX MILK
Markdownは幅広く注目されているマークアップ言語の一つです。その手軽な記述方法から、愛用している方も多いのではないでしょうか。 Markdownの特色としてはHTMLのような見やすいスタイリングで出力できる点です。Markdown初心者の方などはリアルタイムで出力結果が見れるとよりMarkdownに親しみが持てると思いますので、今回はMarkdownをプレビューできる、Markdown対応の無料テキストエディタを特集したいと思います。 Markdownとは？ ツールの紹介の前に、Markdownを知らない方のため、改めてMarkdownとは何かを見てみましょう。 Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。（Wikipedia） 平たく言えば簡
ブランドをもっとも印象づけるロゴの配置はどこか？ | UX MILK
ユーザーがWebサイトを見るとき、彼らの視線は左を向いています。そのため右側に配置されたロゴにはユーザーはあまり視線を向けず、ブランドリコールが弱くなります。左側に配置されたロゴには多くの視線が集まり、ブランドリコールに繋がります。 中央配置のロゴはサイトトップへのナビゲージョンを邪魔する Nielsen Norman Groupは中央配置のロゴについても研究を行いました。調査によると、ロゴが左と中央のどちらに配置されるかでブランドリコールに違いはありませんでした。位置よりもロゴのコントラストや読みやすさのようなデザイン的な違いがブランドリコールに影響していました。 それだけではなく、中央配置のロゴはユーザーがサイトトップへ遷移するのを邪魔していました。左配置のロゴを比べると、中央配置のほうがユーザーが１回のクリックでサイトトップへ戻ることを失敗する割合が「6倍近く高い」ことがわかりました
見出しを最後まで読まないユーザーのためのアイブロウヘッドライン
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 ユーザーがオンラインで読むことを想定して、文言を書いていますか？ アイトラッキング調査によると、多くのユーザーはオンライン記事の見出しを数単語だけ読み、最後までは読まないそうです。 さらなる調査で、ほとんどのユーザーが見出しの最初の２単語だけに目を通していることがわかりました。ユーザーはCTAをクリックする前に、見出しを見て内容を予測しているのです。 ユーザーは早くキーワードを知りたがる 見出しの最初の２単語でユーザーに本文のヒントを与えないと、ユーザーは見出しをスキップするだけではなく本文自体も読まないでしょう。 ユーザーが情報を手に入れるまでの忍耐力と行動力は長く続きません。そのため、彼らの興味を引くために見出しの最初の数単語に強いキーワー
ユーザー体験の改善・検証に使える海外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 or 暗いUI？ ユーザビリティから考えるUIの明るさ
SeanはCodal社の技術ライターおよびリサーチャーです。UXデザインからIoTまで、様々な話題のブログを投稿しています。 UXとUIの違いを知らない人に説明する最善の方法は、比喩を使って説明することです。UIが車の見た目だとすると、UXは運転の仕方です。またUIが出会い系のプロフィールだとしたら、UXは出会い方です。これらの比較は違いを上手く表している一方で、UIの複雑性を軽視していることもあります。 UIとは、単なる塗装やTinderのプロフィールではありません。UIとは全体の環境です。ピクセルひとつひとつが重要であり、多面的な構造を持っています。私たちは、サービスのプラットフォームを選ぶときは全体の体験を最適化できるよう注意深く考えます。一方で、配色理論やレイアウト、タイポグラフィ、フォントの選択などの小さな要素については、数秒以上かけて考慮されることは滅多にありません。 そのため
マイクロインタラクションを活用してUXを改善する | UX MILK
Stephenはオンラインマーケティング担当者、デザイナー、テクノロジーに精通したブロガーです。彼はロサンゼルスに拠点を置くSPINX Digital Agencyと提携しています。 ユーザーは常にサイト内の機能とインタラクションをしています。そして、あなたが想像する以上にそのような小さなインタラクションは重要です。 小さなインタラクションは全体の体験に影響を与えます。これを利用してユーザー体験を向上させて、ユーザーが最後までインタラクションを続けてくれるようにしましょう。 マイクロインタラクションとは何か これらの小さなインタラクションには、マイクロインタラクションという適切な名前があります。マイクロインタラクションは、ユーザーがサイトとインタラクションをする際に行う基本的なタスクです。上手にデザインされているサイトは、ユーザーが操作するときにポジティブなフィードバックを与えます。ユーザ
UXとCXの違いとは
Beataはロンドンを拠点にした特注ソフトウェア開発会社HeadChannel Ltd.のマネージングディレクターです。彼女の担当はストラテジーのディレクションおよび会社の継続的成長の監督で、顧客との緊密な関係を構築し、最良の運用の維持に努めています。 UX（ユーザーエクスぺリエンス）とCX（カスタマーエクスペリエンス）は全く異なる概念ですが、今ほどこの二つが近づいたこともありません。CXとUXが違う点は、CXが、実際にある人があなたのブランド、チーム、Webサイト、アプリ等々とのインタラクションで得た体験の総量であるという事実にあります。別の言い方をすればUXとはCXのごく一部に過ぎず、そのことは上の図に示した通りです。 これから私達はそれぞれの概念を個別に分析し、あなたがオーディエンスとインタラクトする各プロセスの役割についてよりよく理解してもらうことを目指します： UXは人々があなた
メールアドレスの確認フィールドをなくすべき理由
UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UXリサーチ最前線
モバイルアプリのUIデザインの参考になるスライド10選
