UXという言葉が登場する以前に私が見たUXデザイン：CRX編
オフィス機器メーカー、ユーザビリティ評価専門会社を経て、2013年に株式会社キトヒトデザインを設立。ユーザビリティ、UI/UXデザイン関連業務を行う。 趣味はちょっとマイナーな国への旅行。 UXという言葉が騒がれるようになる前にも、UXデザインらしきものは確かにさまざまな形態で存在していました。この寄稿記事では、株式会社キトヒトデザインでユーザビリティ、UI/UXデザインなどを手がけている萩本さんがご自身で体験したデザインのお話を不定期更新でお届けしています。今回は第13回目です。シリーズ全編はこちら 私が富士ゼロックスに在籍中、競合であるキヤノン、リコーと共同でコピー機のUIデザインルールを決めるという極めて珍しい取り組みがありました。 ジャーニーマップ UXデザインツールの１つとして、よくジャーニーマップが紹介されます。ジャーニーマップをひとことで言えば、一連のユーザー体験を時系列的に
ペルソナの作り方とその活用法
この記事はBoxes & Arrowsからの翻訳転載です。配信元または著者の許可を得て配信しています。 Do You Know Your Users? Persona-Based Design for the Enterprise あなたは自分が他人と一緒だと思っていませんか。思考、意見、価値観、癖が他人と同じものであると。心理学では、実際よりも共通点が多いと思い込むことを「偽の合意効果」と呼びます。 偽の合意効果はソフトウェアをデザインする際に間違った決定をする原因になります。 Alan Cooper氏は、頭が良く、才能ある人が度々くだらないソフトウェアを作ってしまう原因を検証する中で、この効果に言及しました。彼はデザイナーの偏見を取り除き、ユーザーの深層心理を反映するべく、ペルソナベースドデザインという手法を生み出しました。1998年に著した名著「The Inmates are Run
UXデザイナーが創り出して活用する10の成果物
Miklosは、18年以上のキャリアをもつUXデザイナーのリーダーであり、プロダクトデザインのストラテジストでもあります。フルスペクトルのプロダクトデザイナーとして、ユーザーのニーズ、ビジネス目標、テクニカル面での実現可能性などを考慮しながら、ユーザーの要求を満たし、利益をもたらすプロダクトデザインを目指しています。 UXデザイナーはさまざまなシーンでその活躍が期待されています。たとえば最小限のドキュメントを用いて作業を進めるチーム、リーンスタートアップやアジャイル開発を求められる環境、外部企業とコンサルティング契約を結ぶ場合、または厳しいドキュメント要件を持つ大企業や政府機関のコンサルティング業務など、さまざまな環境が挙げられます。 関わり方や環境の性質（およびそれをすべて結び付けるもの）に関係なく、UXの専門家はデザインに関するアイデア、研究結果、プロジェクトのコンテキストを効果的にさ
デザインの生産性向上のために気をつけたい５つのこと
オークランド出身でProto.ioのコンテンツエディターであるAngelicaは音楽や食文化、ベイエリアを中心として開かれるカルチャーイベントに参加するのが大好きです。 デザイン業界は目まぐるしい速さで移り変わっていき、そんな中私たちは競合他社に追いつかれないよう、または投資家の期待に応えようと奮闘しています。これは暗に、デザインのアンテナをつねに張り巡らせておくべきだということを意味しています。デザインハック、つまりデザインの生産性向上への取り組みに関するアイデアについて、私たちは多くのデザイナーたちの視点を探り、日々、それをどのように実践しているのか聞いてみました。 私たちの質問は主に次の３つでした。 より短時間で、より良いデザインを実現したいと願うデザイナーたちにどのようにアドバイスしますか？ スローデザインのメリットはなんでしょうか？ 仮に時間的な制限がないとしたら、デザイナーはな
北欧のUXデザイナーが日本の文化から学んだこと
Usable MachineのUXデザイナー/Design Matters。デザインと技術に関して書くことが大好きなデザインオタクです。 日本人は、複雑なデジタルテクノロジーを使いこなし、伝統文化からインスピレーションを引き出すことの本当の意味を理解していると言えます。私たちは北欧のデザイナーとして、日本のデザインと文化から学ぶべきものを見つけたいと思いました。そこで私たち、Design MattersのJulieとMichaelは、デジタルデザインの新しい視点を見つけるために東京に５日間、滞在してみることにしました。 日本はデザインの文化においてクオリティの高さは良く知られていて、特にテクノロジーの分野で高い評価を得ています。しかし、日本のデジタルプロダクトと非デジタルプロダクトのデザインはまったく異なることに気が付きました。インテリアデザインを始めとした日本の非デジタルデザインについて
トグルスイッチの誤用をやめよう
AnthonyはUX Movementの設立者で執筆者です。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。 トグルスイッチを使うべき場合と使うべきでない場合があります。デザイナーが誤った使い方をするとユーザーの混乱とイライラにつながります。使うべきタイミングを知るには、さまざまなタイプのトグルの状態や選択肢について理解する必要があります。 文脈上の状態 vs システムの状態 トグルスイッチとトグルボタンをデザイナーは混同しがちです。両方とも状態を管理しますが、トグルスイッチとトグルボタンには根本的な違いがあります。トグルスイッチはシステムの状態を管理し、トグルボタンは文脈上の状態を管理します。文脈上の状態のトグルはユーザーが見ようとしている現在の画面にのみ影響を及ぼしますが、システムの状態のトグルはアプリ全体に影響を及ぼします。 トグルスイッチを文脈上の状態のために使う
UIでアイコンを使用するためのチェックリスト
アイコンは、GUIで最も頻繁に使用される要素の１つです。 どの様な要素があれば、よいアイコンなのでしょうか？ この記事ではあなたが使うアイコンがユーザーにとって機能するものとなるための簡単なチェックリストを紹介していきます。 １．認識しやすい 明瞭さは、優れたインターフェイスにおいて最も必要な要素です。しかし残念なことにそうでない場合が多々あります。 アイコンは何よりもまず意味が伝えられないといけません。アイコンが何を表しているのかが不明瞭な場合は、その意味がすぐに失われ、視覚的なノイズにしかなり得ません。 アイコンの優れているところは、ラベルを読まなくても意味が理解できるということです。 簡単なルールに従えば、意味が伝わらないアイコンの使用を避けることができるでしょう。 ユーザーになじみのあるアイコンを使用する ユーザーのアイコンへの理解は過去の経験に基づいています。 特殊なものではなく
優れたダッシュボードをデザインするための10のガイドライン | UX MILK
Neilは、イギリスのAstraZenecaで働くUXデザイナーです。現在さまざまなUXデザインのプロジェクトを率いています。 もしあなたがプロの自転車競技に詳しければ、「アシスト（Domestique）」という用語を聞いたことがあるでしょう。馴染みがない人に向けて説明すると、アシストとは自転車競技のチームにおける選手の役割を指します。「Domestique」はフランス語で「下僕」という意味です。 アシストの選手は、水のボトルをチームの車から集めてほかのチームメイトに渡すという役割を担っています。また、チームの車が近くにいないときに先頭選手の自転車が故障したら、自分の自転車や予備のタイヤを渡します。さらに、遅れているメンバーがいれば、先頭集団に追いつくまで彼らを牽引し、追いついたら自分はペースを落とします。このようにアシストの選手は無欲にひたすら奉仕し続けます。決してアシスト自身がレースに
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
Atlassianが見据えるデザインシステムの先にあるもの
デザインシステムを作っているプロダクトチームは多くあり、デザインシステムも発展しています。 私たちはAtlassianのAlex氏（デザインチーム主任）とVenn氏（シニアデザイナー）に、どのようにAtlassianのデザインガイドライン（ADG）を発展させてきたのかと、将来この業界がどこへ向かうと予測しているのかを直接伺いました。 縦割り状態を解消する Atlassianのデザインシステムチームは、デザインや開発、コンテンツ、イラストなどさまざまな分野をまとめています。Alex氏とVenn氏は、これらの分野を相互に繋げることこそが業界の将来にとって重要だと信じています。 デザインシステムにおける微妙なニュアンスのすれ違いなどはそれぞれの分野の違いから来ていると考えられており、ADGのチームはこれらの縦割りな状況は今後なくなるであろうと考えています。Airbnbの「React Sketch
Githubがデザインシステムを作るまでの道のり（前編）
Jerry Cao氏は、UXPinのコンテンツストラテジスト。プラットフォームのワイヤーフレーミングとプロトタイピングを行うためのアプリ内およびオンラインのコンテンツを開発しています。 Diana Mounter氏はGithubのプロダクトデザイナーおよびデザインシステムのリーダーです。 デザインと開発において15年近いキャリアをもつ彼女は、Etsyでシニアデザイナーを務めた後、2015年末にGithubのチームに参加しました。 私たちはこのインタビューで彼女に、デザインシステムにおけるベストプラクティスと、デザインシステムの作成・保守の経験から学んだ教訓について聞きました。このインタビューは、動画で見ることもできます。 また、デザインシステムの利点やプロセスについてもっと知りたければ、無料のeブック『Why Build a Design System？』をダウンロードしてください。 Gi
Webデザインの価値を理解できない人にどう対処するか
この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 Dealing with People Who Don’t Value Web Designers Webデザイン業界に少しでも携われば、一度はWebデザイナーの仕事の価値を理解しない人と出会うでしょう。私たちが生きるこの情報化された世界においてさえ、いまだにWebデザインの仕事は誰にでもできると考える人が存在するのには驚かされます。 数年前まで、Webデザイナーが仕事を理解されないのはよくあることでした。私が若手デザイナーだった頃、一部の同僚や上司でさえも私の職業をまったく理解していなかったのを覚えています。 しかし、当時Webデザインは一般の人々にとってかなり新しい概念だったため、理解していないことに悪意があるとは思いませんでした。まだ全員がWebの状況を把握で
身近な例で学ぶMVP（Minimum Viable Product）の重要性
PaulはUXデザイナーであり、デジタルトランスフォーメーションの専門家です。非営利団体や企業のWeb、ソーシャルメディア、モバイルを使ったユーザーとの結びつきを支援しています。 MVP（実用最小限の製品： Minimum Viable Product）とは、わずかな時間でユーザー中心設計に基づくデジタルサービスを構築する素晴らしい手段です。また、MVPは大幅なコスト削減にも繋がります。 私はMVPの概念について数多く記事を書きました。しかし、MVPが正確に何であるかは説明してきませんでした。MVPという言葉を耳にしたことがあっても、その意味を知らない、もしくはなぜ重要とされるのか理解していなければこの記事は役に立つでしょう。 従来のプロセス MVPについて理解するには、まず多くの製品がどのようにして作られているのかを知る必要があります。従来のプロセスを実証するにあたり、新しい建物を建築す
Webサイトに一貫性を持たせるパターンライブラリのすすめ
PaulはUXデザイナーであり、デジタルトランスフォーメーションの専門家。非営利団体や企業のWeb、ソーシャルメディア、モバイルを使ったユーザーとの結びつきを支援しています。これまでに30校を超える大学、大規模な慈善団体や企業を支援し、デジタルに精通した人々の変化し続けるニーズに適応する手助けをしてきました。 Webサイトに一貫性を持たせて、管理しやすくすることは、大規模な組織が直面するもっとも大きな悩みの１つです。幸いにも、このときパターンライブラリが役に立ちます。 大規模なWebサイトが直面する特有の問題に対するソリューションとして、気付けば私はパターンライブラリの作成を提案することが増えていました。それは、クライアントがNestleのような大企業であろうと、ストラクスライド大学のような高等教育機関であろうと、あるいは国境なき医師団のような大きな慈善団体であろうと同じです。 では、パタ
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
次世代のワイヤーフレーム「マイクロフレーム」とは
Marcinは製品デザインのプラットフォームである、UXPinのCEOおよび共同創設者です。2010年にUXPinを共同創設して以来、彼はポーランドのシリコンバレーオフィスの製作チームをリードし手助けしてきました。 「ワイヤーフレームの時代は終わりました。インタラクティブなプロトタイプこそがすべてです。」 私たちは少なくとも７年間は、この主張を聞き続けてきました。もしこのような議論に対して、人気がすべてを証明するというなら、真実はこの主張の逆と言えるでしょう。なぜならワイヤーフレームは終わったらしいと議論され続けているという事実自体が、ワイヤーフレームは顕在で、デザインプロセスにおいて少なくとも一部のプロジェクトやデザイナーに適合する形で存続していることを証明しているからです。 ワイヤーフレームはどのように生き残ってきたのでしょうか？ 実はワイヤーフレームは進化し続けています。 ワイヤーフ
モバイルアプリにおける５つのアニメーションの活用法
10年前、ユーザーインターフェイスでアニメーションやモーションを使うことは、ユーザーのことを考慮するのではなく、むしろユーザビリティの低下につながりました。なぜなら、ピカピカする派手なWebサイトや立ち上がるポップアップ、点滅するボタンなどが多用されていたからです。 しかし、アニメーションやモーションに対する認識は、ここ数年で大きく変化しました。 iPhoneやモバイルアプリの導入以来、多くのデザイナーは動的アニメーションの将来性を見越して経験を積んできました。そして、アニメーションはインターフェースデザインの重要な部分になりつつあります。なぜなら、アニメーションはデザイナーに「時間」という新たな次元を提供したからです。 現代のインターフェースは、静的な画面の連続ではありません。アニメーションによって製品に時間という次元が生まれたため、機械と人間のギャップを埋めることが可能になったのです。
アニメーションをWebサイトに導入するためのテクニック
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の１つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。 より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。 進捗 ローディングアニメーション Webアニメーションにもっとも共通する用途の１つは、ページの読み込み（ローディング）時にユーザーの気を紛らせることです。 ローディングアニメーションはユーザーの感覚時間に影響し、実際より待ち時間を短く感じさせることができます。 待ち
使いやすいフォームデザインのための新しい４つのルール
大規模なECサイトにおけるUXチームのリードであり、レンセラー工科大学でヒューマン・コンピューター・インタラクションの修士号を取得しています。Webサイト、Twitter。 私たちは日々、オンライン上でフォームを使っています。購入を完了するため、メーリングリストやソーシャルネットワークなどに登録するため、ディスカッションに参加するため、美味しそうなランチの写真を投稿するためなど、フォームを使う場面はさまざまです。オンラインで情報を入力するために、フォームは必要不可欠と言っても過言ではありません。 しかし、長きに渡ってフォームの改善はあまり見られませんでした。「使える」ものではあったものの、「使いやすい」ものには至らなかったのです。 近年では新しいテクニックを正しく使うことで、デザイナーはより早く、簡単で、生産性のあるフォームの作成が可能になっています。 フォームは短ければ良いのか 「フォー
デザインに便利そうな「スマートパッド」をUX MILKチームで試してみた
デザインの仕事においては、単純作業系のタスクもあれば、想像力を膨らませるようなタスクもあります。作業はできる限り効率化する一方、アイデア出しやデザインなどはじっくり考える時間を取りたいものです。 今回はクリエイターが抱えるさまざまなタスクに便利そうな「スマートパッド」というツールをご紹介したいと思います。実際にUX MILKの開発チームが使ってみた感想などを交えつつ、スマートパッドとは何なのか、そしてこの製品をどう仕事に使っていくのかを見ていきましょう。 スマートパッドとは スマートパッドは一見普通のノートパッドのようですが、専用のボールペンで書くことで、内容がデータ化されるというツールです。ノートの横の丸いボタンを押して電源を入れてから、ノートに書き込み、再度ボタンを押すことでデータが保存されます。今回使っているのは「Bamboo Folio」という製品です。 書いたデータは専用のスマー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
