ダメなUXデザイナーが言いそうな10のセリフ
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 優秀なUXデザイナーについて書かれた記事はインターネットに多く存在しますが、本記事はそれらとは違います。今回は悪いUXデザイナーを見分ける方法について話したいと思います。 デザイナーが優秀かどうか見極めるのに役立つセリフを10個ご紹介します。 私はUXデザイナーなので、ユーザーにとって何が最善か知っています ステークホルダーよりも、チームメンバーよりもはるかに問題領域に詳しいと信じているデザイナーは少なくありません。ときにはユーザーより把握していると考える人さえいます。したがって、デザイナーが自分たちのソリューションに固執し、批評から逃れようとする状況がよく起こります。 理解しておくべきは、どれだけ長くデザイナーとして経験を積んでいようと、すべてのアイデアは仮説
Webサイトのフッターをあなどってはいけない
Webサイトのフッターは、想像以上にユーザー体験に効果的です。しかし、Webデザイン代理店の多くが、フッターのデザインをプロセスの最後に回していて、フッターの潜在能力を存分に活かしきれていません。 このような会社は重大な機会を見逃しています。フッターは手早く貼ればいいバンパーステッカーではなく、UXの安全策です。ユーザーがページの下までスクロールしても探したい情報が見つからないとき、フッターは安全弁として機能します。フッターは、ユーザーが探すのを諦めてサイトから離脱する前に引き付ける最後の機会です。 お決まりのテンプレートのようなフッターでお茶を濁すのではなく、Webデザインにおける未開拓資源を最大限に活用してみてはいかがでしょうか。本記事では、フッターの潜在能力を最適化して活かすヒントを紹介します。 フッターの重要性とは？ フッターデザインの要点を掘り下げる前に、フッターには想像以上の能
UXデザインとUIデザインの３つの大きな違い
Alan Smith氏は、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 UXとUIの定義についての論争は、その２つの言葉が現れて以来ずっと続いています。UXはUser Experience（ユーザー体験）、UIはUser Interface（ユーザーインターフェイス）を表しています。 さっぱりわからないですか？ これを理解できる瞬間はおそらくこないでしょう。エンドユーザーへのインターフェイスがユーザー体験に対してどのように影響を与えるかわかるでしょうか？ また、UXとUIという言葉が同じ時期に作られたものでないという事実も、この２つをとりまく混乱の原因のひとつであることは間違いないでしょう。UXとUIは、同時期に考え出された言葉ではなく、当初は明確に定義され
デザインの一貫性の重要性とは
Chris氏はプロダクトマーケティングマネージャーであり、デザインとタイポグラフィのバックグラウンドを持っています。アカデミー・オブ・ファイン・アーツでインストラクターを務め、学生にデザイン理論とソフトウェアデザインについて教えています。 デザインシステムをどのように作成すれば、サービスが拡大する際にデザイナーや開発者がいつも直面する問題を解決できるのでしょうか。 少し前に、UXPinのCEOであるMarcin Treder氏は、社内のデザインシステムの構築に役立つ一連の記事を執筆しました。業界のリーダーたちにインタビューすると、世界中のチームにおいて頻発する問題はデザインの一貫性の欠如であるとわかりました。また、デザインチームやユーザーにとって、この一貫性の欠如は数多くの問題を引き起こす可能性があります。 ユーザーの混乱：同じアクションなのにさまざまなパターンがあると、ユーザーは混乱して
モバイルではメニューを画面下に表示すべき理由
スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
メールアドレスの確認フィールドをなくすべき理由
UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
コンテンツファーストでプロトタイプを構築する
Benは、UXPinのコンテンツデザイナーです。Webデザインとバックエンドの開発の仕事をしています。 ユーザーのためにデザインするには、ユーザーの最終目標とそこに辿り着くまでの行動を知っておかなければなりません。この２つはそれぞれコンテンツとユーザーフローと呼ばれます。これらが一緒になって、素晴らしいWebサイトの核を作るのです。 では、情報の概要をインタラクティブデザインに昇華させるにはどうすればいいのでしょうか？ この記事では、一連のコンテンツを１つのプロトタイプにする手法について、紹介したいと思います。 コンテンツリストをまとめる 私たちは何をデザインしているのでしょうか？ 多くのデザイナーは、まず外枠を作成してから内側へと仕事を進めていきます。ユーザーが多くの時間を費やす情報自体を検証する前に、情報の入れ物や枠組みから制作してしまうのです。 内から外へデザインを進める人は、ユーザ
次世代のワイヤーフレーム「マイクロフレーム」とは
Marcinは製品デザインのプラットフォームである、UXPinのCEOおよび共同創設者です。2010年にUXPinを共同創設して以来、彼はポーランドのシリコンバレーオフィスの製作チームをリードし手助けしてきました。 「ワイヤーフレームの時代は終わりました。インタラクティブなプロトタイプこそがすべてです。」 私たちは少なくとも７年間は、この主張を聞き続けてきました。もしこのような議論に対して、人気がすべてを証明するというなら、真実はこの主張の逆と言えるでしょう。なぜならワイヤーフレームは終わったらしいと議論され続けているという事実自体が、ワイヤーフレームは顕在で、デザインプロセスにおいて少なくとも一部のプロジェクトやデザイナーに適合する形で存続していることを証明しているからです。 ワイヤーフレームはどのように生き残ってきたのでしょうか？ 実はワイヤーフレームは進化し続けています。 ワイヤーフ
いま企業に求められるデザイナーとは？デザイナードラフトに聞いてみた
いま転職したらどれくらいの年収になるのだろうと考えたことはありますか？ また、デザイナーとしてのキャリアパスや市場価値などは気になる人も多いのではないでしょうか。 そこで、今回はデザイナーの市場価値の透明化を目指す転職サービス「デザイナードラフト」の現場の方々に、いま企業に求められているデザイナー像などについて聞いてきました。 デザイナー転職市場への問題意識から始まったサービス ―まずはデザイナードラフトの概要をご紹介いただけますか。 島田：弊社ではエンジニア向けの「転職ドラフト」を運営しており、その中でデザイナーとエンジニアで共通する問題点や、デザイナー特有の問題点も見えてきました。そこで、デザイナー向けで展開しようとなったのが「デザイナードラフト」です。 たとえば、転職において内定をもらう段階になって年収などの条件が開示されるのは、デザイナー・エンジニアに関わらず共通する問題だと感じて
UIのライティングでやってはいけない16のこと
UIのラベルやテキストは、正確且つ簡潔なライティングによって使いやすくなり、信頼度が高まります。 では、ラベルやテキストのライティングにおいてやってはいけないこととは何でしょうか？ 今回はUIライティングで避けるべき16個のポイントをご紹介します。 1. 特殊な言い回しと専門用語 ユーザーの知らない用語や馴染みのない言い回しはユーザーの認知的負荷を増やしてしまいます。「ギークな会話」を避ける為にベストを尽くしましょう。安全策を取って、すべての読者に向けて書くということ、そしてビギナー、ベテラン問わず通じるような一般的な言葉を用いましょう。 以下は特殊な言い回しをエラーメッセージに使用した例です。 もちろん、これは状況によります。もしこのメッセージを見て理解できるユーザーが対象なのであれば問題ありません。そうでなければ、今すぐにでも単純で直感的になるように変更しましょう。 2. 長過ぎる詳細
ケーススタディ：Airbnbの「信頼をデザインする」という挑戦
最近私が参加したデザイン関連のイベントの一つにeBay and StubHub: Marketplace Panel and After Partyがあります。その当日のパネル・ディスカッションでは、Airbnbのエクスペリエンスデザイン部門責任者であるKatie M. Dill氏が「信頼」「ダイバーシティ」そして「クロスカルチャー・ブランディング」について語っていました。 それをきっかけに私はAirbnbのデザインがどのようにして異文化間のビジネスを支えるのかをケーススタディとして、学んでみようと思いました。 信頼を築くということは、基本的にはデザイン思考のメンタリティを持ちながら、与えられた機会や挑戦にアプローチすることを意味しています。パネル・ディスカッションの全ての登壇者は、信頼を築く際にデザインがどのような役割を果たしていたかを語っていました。彼らは全員、人間の体験というものを中
最新トレンドにも対応！コピペで使える実用性重視なCSSボタン９選
Web制作をする際に必ずと言っていいほど必要になるのが「ボタン」です。 今はCSSのみで作られているボタンが主流で、たくさんのライブラリやスニペットが出回っていますが、作っているサイトによってはアニメーションが過剰すぎたり、トーンが合わない場合も出てきます。 そこで今回は派手でかっこいいアニメーションというより、実用性や汎用性を重視したボタンに厳選して、コピペでお手軽に使用することができるCSSのボタンをいくつかご紹介します。少しお洒落にスタイリング・アニメーションしたいけど、そこそこでいい…と思っている方向けの厳選セレクションです。 コピペですぐ使える実用性の高いCSSボタン サイト上でカスタマイズするものより、もう少し高度なデザインをお求めの方は以下のサイトをご参考下さい。こちらは既に出来上がっているデザインのソースをダウンロードするタイプになりますので、カスタマイズには少々スキルが必
その文字、薄すぎない？ デザインにおける灰色の明度は何%が最適か
UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。 一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかることのできる色でもあります。濃い灰色は主に見出しや本文に、薄い灰色はメタデータ、分類名、説明文に多く使われます。これらの色合いのうち、最も乱用されるのは薄い灰色です。 薄い灰色の文字の問題点 文字色として薄すぎる灰色は可読性に問題を起こしかねません。灰色の文字を薄くしすぎてしまえば、読者が読むにあたって支障をきたすことになります。文字の明度によっては、薄い色の背景に混ざってしまうのです。この現象は、単語や文字をぼやけさせ、判読を困難にします。無理に判読を試みれば、目を傷めてしまうでしょう。 また、薄い灰色の文字は読者の誘導
WebデザイナーがフォローすべきTumblrアカウント10選 | UX MILK
TumblrでWebデザイナーがフォローすべきアカウントを10個厳選してご紹介します。 Tumblrは画像や動画、文章など、様々なメディア形態で投稿できることから、グラフィックだけに留まらず様々な方法でデザインのインスピレーションを得ることができます。英語・日本語アカウントを織り交ぜて取り上げていますので気になるアカウントはぜひフォローしてみてください。※括弧内にアカウント名を表示しています。 １. All The Style Guides（allthestyleguides） 様々なサイトのスタイルガイドとパターンライブラリを紹介している、非常に勉強になるアカウントです。どうしても自分が知っているスタイルガイドばかりを参考にしてしまいがちですが、こうやってまとめてあると新たなスタイルガイド、パターンライブラリに出会うことができてとてもありがたいですね。 ２. House of Butto
商用可能な丸文字日本語フリーフォント10選
かわいらしいイメージやあたたかい雰囲気を出したいときに、ゴシックや明朝フォントだとしっくりこない場合があります。そんなときには丸文字のフォントを当てはめてみるとしっくりくるかもしれません。 今回は商用可能なものに絞って、丸文字のフリーフォントを１０点ご紹介します。 瀬戸フォント JIS第四水準までの漢字や難しい漢字も収録されているので、他のフォントで漢字で見つからなくて困ったという時は、こちらのフォントで試してみてください。Unicodeを使った顔文字もだいたいが表示可能です。 丸文字「ニコモジ＋（プラス）」フォント ニコニコ動画で使われているフォントをイメージしてつくられたフォントです。ひらがな・カタカナ・英数字のみオリジナルで、それ以外の文字グリフ（漢字など）には源柔ゴシックが利用されています。 じゆうちょうフォント Version 2.07 太めのサインペンで書いたようなゴシック体の
dribbbleのぬるぬる動くメニューUIのアイデア10選
アプリデザインにおけるUIのアニメーションは、いざ作るとなると「どう動かすか」などと考えてしまい、無難なものに落ち着きがちです。発想が小さくなっているなと感じたら、他の人の自由な発想を見てみるのもいいかもしれません。 そこで今回は、dribbbleにて公開されているメニューUIのアニメーションから10点ご紹介いたします。ぬるぬる動きまくるポートフォリオからインスピレーションを見いだせれば幸いです。 ※過剰で独りよがりなアニメーションはユーザー体験として不適切になりがちですので、きちんとTPOをわきまえたアニメーションを心がけましょう！ Animated sliding tab bar フッター部分を完全に非表示にさせつつも、折りたたまれていたかのように表示させるアニメーションです。ユーザーが混乱しないように予め操作方法を説明しておくといった配慮が必要になりますが、デザインとしては使いやすい
登録フォームにおけるパスワード確認用の入力欄は必要か | UX MILK
登録フォームは、Webページの中でもいちばんデザインが難しいもののうちの一つです。あるフォーム要素を入れるか入れないかといったことが、コンバージョン率に影響を与えます。どの要素を入れるか入れないか考えることもデザイナーの仕事です。 パスワード確認はコンバージョン率を下げる たいていのWebクリエイタ―は、パスワードを初めて作る場合にはパスワード確認用の入力欄を表示させなければいけないと考えています。 これは、パスワードを入力する欄がユーザーの入力をマスキングするためです。ユーザーはミスタイプしてもそれに気づきません。パスワード確認で、ユーザーに２回パスワードを入力させることにより、ミスタイプを発見します。 パスワード確認欄は理にかなったものに思えますが、それを表示させることはコンバージョン率を下げる可能性があります。ある調査によると、登録フォームを離脱した全ての人のうち、４分の１以上が、パ
実はあのアニメやマンガで使われていたフォントまとめ
デザインをするとき、「あの作品みたいなフォント」のようにイメージしたり、説明したりすることはないですか？ 今回は有名なアニメ作品の中でもフォントが特徴的なものを集めてみました。 マティス-EB アニメのフォントとして必ず引き合いに出される定番フォントがマティス-EBです。こちらは「新世紀エヴァンゲリオン」の題字で使用されていることで有名ですが、元のフォントを見ればわかるように、使用の際にはかなり横幅を圧縮しており、独特の緊張感を醸し出しています。 ラグランパンチUB こちらは見覚えのある方も多いのではないでしょうか。作中にもタイポグラフィを大胆に使ったことで話題になった「キルラキル」のフォントです。そのインパクトあるボールドさと、大胆な赤と文字づかいでラグランパンチはキルラキルフォントとして一躍有名フォントとなりました。 ゴシックMB101 モリサワフォントに収録されている、使い勝手のいい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
