Scottはミネアポリスに住むデザイナーであり、Brain Trafficコンテンツ戦略も主導しています。2010年以来、Webのさまざまな専門家に対してトークショーやワークショップを60回以上開催しています。 この記事はScott Kubie氏の著作『Writing for Designers』の前書きから抜粋したものです。 なんてことだ。ライティングを忘れていた。デザインというものには言葉が必要だった……それもたくさんの言葉が。てっきり誰かが……クライアントがやるのかと……。自分たちがライティングをやらないと。自分たちで終わらせないと！　でもどうやって！？ なんてこと経験はないでしょうか。ご心配なく、私がいます。一緒にライティングをしましょう。最初のステップは、厳しい真実を受け入れること。それは誰かがライティングをする必要があるということです。 ライティング以外はすべてプロセスを構築し

アプリはアイデアから生まれ、目的によって具体化されます。私たち起業家やデザイナー、開発者の関心は、最初から最後までスムーズな行程に沿ってユーザーを誘導して、有益な体験を与えることにあります。 あるリサーチによれば、65％近くのユーザーは、アプリ体験が好ましくないブランドを否定的に感じています。したがって決定的に重要なのは、ユーザーが労力を使わずに自分たちの課題の解決策にたどり着けるよう、インターフェイスのデザインをシンプルにすることです。 Gerry McGovern氏は『Usability: Navigation is More Important than Search』という記事の中で、機械に詳しい70％のユーザーはリンクをクリックすることからタスクを始めている一方で、残りの30％は検索から始めていることを明らかにしました。 これを踏まえると、ナビゲーションがユーザー体験でとても重要

AlexanderはStockholmに住むUXデザイナーです。アクセシビリティやフロントエンドの開発において長年の経験があります。 私は仕事の中で、優れた開発者経験がプロジェクトの成功に大きく寄与していることを知りました。この記事では、デザイナーとしてプロジェクトに貢献するヒントを紹介します。 私は、スウェーデンのストックホルムでUXデザイナー、フロントエンド開発者として８年間働いています。これまでに参加したプロジェクトを振り返ってみると、すばらしいユーザー体験を提供することができたプロジェクトには、いつも優れた開発者体験がありました。一方で、開発者を無視したプロジェクトでは、期待された体験が得られないことが多かったのです。 少し単純化しすぎかもしれませんが、開発者体験（DX=Developer Experience）は開発者のユーザー体験であると言えます。 「開発者体験」という言葉は珍

複数ページにまたがるWebサイトよりも、１枚で構成されるシングルページのWebサイトの方が明らかに作りやすいように思えます。しかし実際はユーザーフレンドリーであると同時に見た目も魅力的なサイトという観点では、シングルページで作る方がずっと難しいのです。 シングルページのデザインに、マルチページデザインの10倍の時間がかかることはありません。しかし、言いたいことすべてを１つのページに詰め込むために、しっかりプランを練ることが難しいのです。 もちろん好きなだけページを長くすることができますが、ほとんどの訪問者は３回目のスクロールの後で離脱し始めます。 シングルページの作り方について、この記事では５つの重要な要素を中心に説明しています。シングルページを構成するこれらの要素それぞれについて正しく理解していきましょう。 １. ゴール Webサイトのゴールを明確にして取り組む Webサイトが達成しよう

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

Measuring Uの創設者。シックスシグマに熟練した統計学分析者であり、ユーザーエクスペリエンスを定量化したパイオニアでもあります。 計測は、科学的知識の根幹です。また、ユーザー体験を理解し、体系的に改善する鍵でもあります。 しかし、数値だけですべての問題が解決されるわけではありません。指標を変動させるものを理解する必要があります。 外科医は患者の脈拍や血圧を測ることで、健康状態の良し悪しを示す指標が得られますが、それ以上にその数値に影響を与えているものを理解しなければなりません。 同じ論理がUXリサーチにも適用されます。 SUS、NPS、タスク時間、完了率、SUPR-QなどのUXの指標を使用することについては大賛成です。これらの指標を使うことは大切な第一歩ですが、体験の中から問題を見つけて解決するためには、次のステップとして、その数値に影響しているもの、数値の裏にある「理由」を理解す

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 ナビゲーションバーは、サイトでもっとも大切な要素の１つです。ユーザーは必要なコンテンツを探し出すとき、ナビゲーションバーを頼ります。ナビゲーションバーのボタンを正しくデザインしなければ、ユーザーに無駄な作業をさせてしまうかもしれません。 間違ったデザインだと、ユーザーがナビゲーションフローのどこにいるのかわからなくなり、困惑してしまうことがあります。また、ラベルやクリックボタンが読み取れないような間違いもあるでしょう。 これからナビゲーションバーのボタンのデザインで犯しがちな間違いを５つ紹介します。これらの間違いを犯している場合は、ナビゲーションバーをすぐに修正しましょう。 １. 選択したボタンが強調されない 多くのデザイナーは、ナビゲーションバーで選択したボタンを強調するようにデザイン

Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で

Ben Shneiderman氏の『Designing the User Interface』とJakob Nielsen氏の『Ten Usability Heuristics』の著書に基づく、インタラクションデザインに関する10個の原則というものがあります。 この原則は、「ヒューリスティック」と呼ばれるもので、経験則による広範なルールであり、特定のユーザビリティに関するガイドラインではありません。 １．一貫性を重視する 同じことを意味する複数の名称や状態があることは、ユーザーにとって好ましくありません。ユーザーの混乱を招かないように、用語と動作を一致させるようにしましょう。相手の驚きを最小限にする「驚き最小の原則（The Principle of Least Surprise）」に留意することが大事です。 アプリ内のすべての要素に一貫性を持たせるようにしましょう。たとえば、同じスタイルの

４月から始まる新生活、なかでも新社会人の方は新しい職場での期待の反面、不安になることもあるのではないでしょうか。 特に新社会人が新しい環境で気をつけたいのは「メモ」や「ノート」の取り方です。 上司に業務内容を教えてもらうときや、ミーティングに参加するときなど、メモやノートを取れ、と言われるのは世の常ですが、実際は何を使ってメモを取ればよいのでしょうか？ 新社会人のメモは手書きがおすすめ あなたは普段メモを取るときに、何を使いますか？　手書き派の人もいれば、スマホやPCなどのデジタルデバイス派の人もいることでしょう。もちろん、環境や状況にあわせて使い分ければよいのですが、新社会人の方の場合、メモは手書きでしたほうがよい理由がいくつかあります。 手で書くことで、頭が整理される PCやスマホで入力するより、手で書いたほうが脳にインプットされやすいと言われています。メモは何かを忘れないように書き残

AngelicaはProto.ioの、コンテンツ編集者です。オークランド育ちの彼女は、地元の散策を楽しみ、ベイエリアで行われる音楽やフード、文化的なイベントに参加することを好んでいます。 今、アメリカではハイテクな学習ツールが、教育現場に次々と導入されています。デザイナーやエンジニアの中でも、生徒の学習への関心を高めるために新しい手法が試されているという認識が広まりつつあります。教師たちも、ハイテクな学習ツールは生徒の意欲を向上させ、教室の環境をより良くする効果があると受け止めはじめました。 さまざまな商品が出回っていますが、今回の記事ではクリエイティブで革新的な10個のツールを紹介します。 １．Google Classroom 今や、教室の環境は、多くの人が想像しているものから大きく変化しており、デジタルツールは不可欠なものとなっています。 以前は、シラバスやたくさんの宿題を印刷し配布し

Welcome to UX MILK UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。 このサイトについて

モノづくりにおける様々なデザインの記事をご紹介します。デザインと言うとビジュアルデザインの話が取り上げられがちですが、UX MILKではそれ以外にも仕組みや体験のデザインの考え方から実装部分まで、幅広いトピックを取り上げます。

徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア

日本語のフォントはとにかく漢字が多いので、英語のフォントに比べると無料のフォントの種類が限られます。デザイナーであれば、日本語のフォントは有料で購入している人も多いかと思いますが、スポットで使いたい場合など、なかなか手を出しづらいのが現状です。 そこで今回は汎用性の高いゴシック体の日本語のフリーフォントを集めてみました。 ※細かな規約はサイトごとで異なるのでダウンロードするときはよく確認しましょう。 ※4/9 0:00 10選といいながら９つしかなかったので１つ追加しました Mgen+ (ムゲンプラス) 「Mgen+ (ムゲンプラス) 」は、フリーフォントである「M+ OUTLINE FONTS」をベースに、含まれていない漢字・記号をAdobeとGoogleが共同開発した「源ノ角ゴシック(Source Han Sans/Noto Sans CJKの日本語部分）」で補い、さらに豊富な漢字や記