タグ

ブックマーク / uxmilk.jp (43)

  • 第2期生募集中!卒業生が語る「UX School」で得た実践的な学びとは

    2017年秋冬に開講されたネットイヤーグループ主催のUX Schoolが、この春2期生を募集します。そこで今回はUX Schoolの講師と第1期受講生の計4名に、スクールでの学びや受講後の変化についてお話を伺ってきました。 UX School講師 宮村 和実 氏:ネットイヤーグループ株式会社 UXデザイン部 シニアUXデザイナー(左端) 原田 紘子 氏:ネットイヤーグループ株式会社 UXデザインUXデザイナー(右端) UX School第1期 受講生 小松 尚寿 氏:スタディプラス株式会社(中央左) 恩田 志保 氏:株式会社オズビジョン(中央右) 気軽に実践的に学べる、UX School ── 1期生の卒業から1年近く経て、ついに2期生を募集されるということですが、UX Schoolを知らない方のために、どのようなものかを簡単に教えてください。 宮村:公式Webサイトに「裸足でUXしち

    第2期生募集中!卒業生が語る「UX School」で得た実践的な学びとは
    nubonubo
    nubonubo 2019/04/03
  • エラーメッセージはフォームのどこに表示するべきか

    UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか? ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という2箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか? 調査に

    エラーメッセージはフォームのどこに表示するべきか
    nubonubo
    nubonubo 2018/08/28
  • スーパーマリオのステージ1-1から学べるUX

    上海で働くさすらいのゲームデザイナー/ディレクター。日語、中国語、英語、名古屋弁のマルチリンガルということになっている。 ファミコンの初代スーパーマリオブラザーズには優れたUXを作りあげるためのヒントがたくさんあります。 今回の記事では、スーパーマリオの1-1に散りばめられた「ユーザーに新しいことを自然に覚えてもらう工夫」を紹介します。 新規コンテンツの「色々覚えるのめんどくさい問題」 新しいコンテンツでは、ユーザーにいかに使い方や遊び方を理解してもらうかが非常に大きな課題です。 クリエイターは「新しくて誰も見たことがないものを作りたい!」と思うものですが、ユーザーにとってみればコンテンツを初めて利用するときの面倒くささがその斬新さに比例して大きくなっていきます。最初の「覚える」段階のUXが悪ければ、その先にどれだけステキな体験が待っていたとしても、そこに到達する前に多くのユーザーは離脱

    スーパーマリオのステージ1-1から学べるUX
  • モバイルWebサイトの3つの落とし穴と解決策

    Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 2016年、世界で初めてモバイルによるインターネットの使用率が、デスクトップによる使用率を上回りました。Google UKの調査では以下のように記述されています。 現在、英国の成人の65%がスマートフォンをインターネット利用の主要デバイスとして使用しています。 人々は情報を検索したり、購入したり、サービスに契約するためにモバイルデバイスを使用します。ユーザーの好みの変化は、ユーザーの期待に拍車をかけています。今日、ほとんどのユーザーは、ひどいパフォーマンスに耐えることはできなくなっています。ユーザーは必要な情報がすぐに手に入らないと、(文字通りワンタップして)別のオプションに切り替えてしまいます。 この記事では、ページ読み込みの遅さやサインインの壁、長い購入プロ

    モバイルWebサイトの3つの落とし穴と解決策
  • 【2018年版】アプリUXデザインのトレンド12選

    モバイルアプリ領域の動きは非常に早く、UXデザインにおいて成功するためには、デザイナーは先見の明を持ち、新たな課題に備えなければなりません。 ここでは皆さんのタスクを軽減するために、2018年において影響力がもっとも大きいであろうトレンドをリストアップしました。 1. ユーザージャーニーの簡略化 アプリやWebサイトを使用する場合、ユーザーには特定の目的があります。その目的を達成するために費やす労力が少ないほど、より良い体験となるのです。 リニアユーザフロー リニアデザイン体験とは、ユーザーが各ステップを1つのアクションで完了できるようにするための開始・途中・終了があるUXのことです。タスクを完了するために必要な時間を見積もることができるため、リニアユーザーフローはユーザーのためになります。

    【2018年版】アプリUXデザインのトレンド12選
    nubonubo
    nubonubo 2018/05/14
  • ゲーミフィケーションのための4つのプレイヤータイプ

    この記事はInteraction Design Foundationからの翻訳転載です。配信元または著者の許可を得て配信しています。 Bartle’s Player Types for Gamification ゲーミフィケーションはゲームデザインと同じものではありません。ゲーミフィケーションは、非ゲーム領域にゲーム要素を持ち込んだものだからです。しかし、ゲームデザインとゲーミフィケーションには重なる部分がいくつかあります。その1つが、プレイヤータイプです。プレイヤーをよりよく理解するほど、彼らのニーズに合わせることができるようになります。 プレイヤーの心理学 ビジネスでゲーミフィケーションを活用する場合、どのようなゲームプレイをプレイヤーが好むか理解するのが良いでしょう。Richard Bartle氏によってデザインされた、Bartleの心理学テストというシンプルな方法があります。これは

    ゲーミフィケーションのための4つのプレイヤータイプ
  • これからデザイナーのキャリアをどう考える?活躍するデザイナー3人に聞いてきた

    UX MILK編集長。株式会社メンバーズ LXグループ所属。LX(ラーニングエスペリエンス)にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / TwitterUX MILK編集長兼デザイナーの三瓶です。 「デザイン」というと、一昔前まではグラフィックやアートの意味合いが強かったですが、今ではサービスデザインや体験のデザインなども注目されるようになりました。そんな中、私たちは「デザイナー」として、今後どのようなキャリアの歩み方をしていけば良いのでしょうか? 今回はデザイナーの転職サービス「デザイナードラフト」の提供のもと、現在活躍されている3名のデザイナーにそれぞれのキャリア感をお伺いしてきました。 登場人物 広野 萌 株式会社FOLIO CDO 倉光美和 株式会社クックパッド デザイナー 割石裕太 株式会社Fablic / OH アートデ

    これからデザイナーのキャリアをどう考える?活躍するデザイナー3人に聞いてきた
  • メールアドレスの確認フィールドをなくすべき理由

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

    メールアドレスの確認フィールドをなくすべき理由
    nubonubo
    nubonubo 2018/03/27
  • フォームをより使いやすくするためのJavaScript/CSSツール10選

    この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 JavaScript and CSS Tools to Enhance Your Forms フォームは多くのWebサイトにとって欠かせないものです。しかし私たちは、その細部にまでいつも気を配れるわけではありません。 フォームを改善する方法はたくさん存在します。バリデーションの追加や、マスクやその他のビジュアルガイドをインプットしたりすることが挙げられるでしょう。そしてこれは表面的な対処でしかありません。最終目標は、できる限り使いやすく魅力的なフォームにすることです。 この記事では、最適なフォームを作るための10の無料ツールを紹介します。 formbase formbaseは、CSS/SASSを使用してフォーム要素に改善されたデフォルト要素をもたらすパッケージ

    フォームをより使いやすくするためのJavaScript/CSSツール10選
  • UXデザイナーの転職事情:これからのデザイナーに求められること

    UX MILK編集長。株式会社メンバーズ LXグループ所属。LX(ラーニングエスペリエンス)にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / TwitterUX MILK編集長の三瓶です。UX MILK関連のデザイン全般手掛けているので、そろそろ「UXデザイナー」と名乗ってもいい気がしてきている今日この頃です。 さて、今回は「UXデザイナー」のキャリアにまつわる話です。「UX」という言葉や「デザイン」の定義というのは実にあいまいなものですが、そんな中、私たちはそれをどう生業としていけばよいのでしょうか? そこでデザイナーの転職事情に詳しいクリーク・アンド・リバー社の吉田氏にインタビューをしてきました。 登場人物 クリーク・アンド・リバー社 吉田 悠平 氏 UX MILK編集長 三瓶 亮 UXデザイナーの需要は高まっている 三瓶:まず簡単

    UXデザイナーの転職事情:これからのデザイナーに求められること
  • プロトタイプも埋め込める、デザイナーの情報共有を加速させるDocBase

    デザイナーの仕事は、成果物に対するデザインだけではありません。デザイン制作をしたら、「なぜそのデザインなのか」をステークホルダーに説明し、コンセンサスを取る必要があります。 デザイナーがカバーする領域も広がる中、私たちデザイナーはどのようにデザインを共有するべきでしょうか? 今回は、UX MILKチームがどのように情報共有を行っているかを紹介します。 デザインドキュメントをどのように共有すべきか デザインドキュメントには、ワイヤーフレームやプロトタイプ、ビジュアルデザインなどさまざまなものがあります。 プロジェクトが進むにつれ、デザインドキュメントは増え、また変更が加えられていきます。すると、これらをどのように保存・整理し、共有するかという問題が出てきます。 UX MILKチームでは、こういった問題を解決するために、DocBaseを使ったデザインの共有を行っています。 なぜDocBaseで

    プロトタイプも埋め込める、デザイナーの情報共有を加速させるDocBase
  • Webデザインにおけるホワイトスペースの種類と役割

    Mads SoegaardはInteraction Design Foundationの共同設立者および編集長です。 デザイナーの皆さんをびっくりさせるような、非常に大事なツールを紹介しようと思います。そのツールは、音符と音符の間の静けさと同じくらい過小評価されています。ところが、そのツールにはユーザーをページ上にとどめる力があります。 多くの要素によって、インタラクティブデザインのレイアウトと構造は形づくられます。そして無視されがちですが、もっとも不可欠な要素の1つにホワイトスペース(またはネガティブスペース)があります。ホワイトスペースは、ほかのデザイン要素の中やその周りにあります。 Webサイトやアプリの場合、さまざまなビジュアル要素がレイアウトを構成します。ビジュアル要素には、タイポグラフィや境界線、アイコン、画像などが含まれます。絵を想像してみてください。これらのパーツはペイント

    Webデザインにおけるホワイトスペースの種類と役割
  • 会話的なUIとは何か? チャットボットが注目される理由

    PaulaはフリーのWebデザイナーです。彼女は小規模なオンラインビジネスのリブランディングなどを手掛けています。 会話型UIとは簡単に言うと、まるでほかの人と会話をしているかのように、言語を自然な形で処理するチャットボット体験です。テクノロジーにおける典型的な体験では、コンピューターが何かを実行するために、アイコンやリンクをクリックするような指示が求められます。私たちはある程度操作に慣れているとはいえ、これらは自然なコミュニケーションでも人間らしいコミュニケーションでもありません。 会話型UIは、インターフェースとの対話を人間同士が普通の会話をしているかのようなコミュニケーションの形へ切り替えます。現在、会話型UIを取り入れた、2つの人気な手法があります。1つはAmazonAlexaのように、実際の会話を通して使用するものと、もう1つはFacebookの Messengerのように、チ

    会話的なUIとは何か? チャットボットが注目される理由
    nubonubo
    nubonubo 2018/02/14
  • UIデザインパターンの参考になるサイト10選

    同じようなデザインの手直しに人生の貴重な時間を費やしたいと思う人はいません。過去に別のアプリなどで解決されている問題があるのなら、その問題の解決策がテンプレートとして既に存在するはずです。それこそが、誰にでも使えるデザインパターンです。 ここでは、Web上でデザインパターンを見つけるのに最適なサイトをリストアップしました。執筆時現在、これらのリソースはすべて無料ですが、一部はプレミアム版などを支払うように求められる場合があります。なお、この記事は、これらのサイトのアフィリエイトではないことを最初に断っておきます。 UI Patterns UI Patternsでは、好みのパターンを簡単に検索でき、使えると思ったパターンをグループ化することができます。また、自分のデザインでのパターン活用に役立つ、UIデザインパターンに関する多くの興味深い記事があります。 WELIE Interaction

    UIデザインパターンの参考になるサイト10選
    nubonubo
    nubonubo 2018/01/24
  • カラースキーム作成に便利な14のツール | UX MILK

    Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザイナーが使う手段の中で、「色」はもっとも強力なツールの1つです。同時に、色という概念は習得するのが難しくもあります。色の組み合わせが無数にある中で、サイトやアプリに使用する色を決めるのは骨の折れる作業です。 そこで作業を簡単にするために、カラーパレットを決める際に便利なツールのリストを作成しました。これらのツールを使えば、多くの時間を節約できるでしょう。 この記事では、以下のような切り口から便利なツールを紹介します。 インスピレーションを受ける 自分だけのカラースキームを生み出す 色のアクセシビリティを考慮する 1. インスピレーションを受ける 自然の風景 あなたの周りには、既にたくさんのひらめきのもとがあります。インスピレーションを受けるには、周りを見回す

    カラースキーム作成に便利な14のツール | UX MILK
  • UXデザインにおけるストーリーボードの役割と活用法 | UX MILK

    Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 UXデザインを行う際、ワークショップやインタビューなどが主流な調査方法として挙げられます。そして調査結果はユーザーストーリーやプロセスフローで表現されます。また、チームのメンバーと考えを共有したり解決策を話し合うための手段として、ペルソナやWebページのレイアウトであるワイヤーフレームといったツールが使われます。 しかし、これらの調査を行うためには設計した製品のターゲットとなる、実在するユーザーを考慮しなければなりません。製品をより良いものにするためには、ユーザーと製品の間で何が起こっているかを理解し、製品がどのようにユーザーの生活を良くするのかを把握しておく必要があります。そして、ユーザーへの理解を深めるためにストーリーボードを活用します。 この記事では、UX

    UXデザインにおけるストーリーボードの役割と活用法 | UX MILK
    nubonubo
    nubonubo 2017/12/31
  • インタビュー:あえて仕様書を作らないコロプラのデザイン現場とは?

    『クイズRPG 魔法使いと黒のウィズ』や『白プロジェクト』など、誰もが知っているスマホゲームを提供している株式会社コロプラ。最近では、VRに注力していることでも話題になっています。 ゲームはよく知られていますが、実際にゲームがどのように作られているかを知っている人は少ないのではないでしょうか。そこで、今回はコロプラのゲームプロデューサーとデザイナーの2人にゲーム制作の現場についてお話を伺いました。 ―まずは自己紹介をそれぞれお願いしてもよろしいでしょうか? アッキー氏(以下、アッキー):はい、アッキーと申します。『白プロジェクト』や『バトルガール ハイスクール』、最近だと『白テニス』や『プロ野球バーサス』で、2DデザイナーとしてUIデザインやコンセプト作りなどを担当していました。 前職は、広告系のデザイナーで、メインはDTPデザインをやっていました。ですので、まったく関係ない企業か

    インタビュー:あえて仕様書を作らないコロプラのデザイン現場とは?
  • モバイルのUXデザインにおけるベストプラクティス

    Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 アプリはコンテンツやサービスを提供するための、今日(こんにち)の主流かつ確かな方法です。しかし、飽和状態の市場でユーザーを満足させ、その興味をつなぎとめるために、どうすればモバイルアプリは意義や価値のあるものとなるのでしょうか。 この記事では、素晴らしいモバイルUXを作る鍵となる、UXデザインのための7つのヒントをご紹介します。 1. 一つの画面につき、一つの操作 ユーザーが情報を取得する際の努力を軽減する 皆さんがデザインするアプリの画面では、ユーザーにとって最も価値のある一つの動作を助長するものでなければなりません。各画面を一つの目的だけのためにデザインし、Call to Action(行動喚起)は一つに留めましょう。こうすることで、ユーザーはアプリを理解・

    モバイルのUXデザインにおけるベストプラクティス
    nubonubo
    nubonubo 2017/12/31
  • アンダーラインと可読性:リンクをどのようにデザインするか?

    Cassandra Naji氏はJustinmindのマーケティングコンテンツ制作者です。Justinmindはあなたのソフトウェアソリューションをコードを書かずに視覚化しテストする為に、ウェブとモバイルアプリのプロトタイプ作成可能にするプロトタイプ製造するツールです。 Webの黎明期から、ハイパーリンクはオンライン上での体験の基礎をなす要素でした。リンクを開くということは、Webを閲覧している人々が最も頻繁に実行する行為のうちの一つであるということが研究で分かっています。 30年以上に渡り、デザイナーたちはリンクの新しいデザインを試してきましたが、今でもアンダーラインが最も広く使われています。青いアンダーラインのハイパーリンクは最も広く理解されているWebでの慣習の一つです。 World Wide Webは文書とリンクから構成される ―Tim Berners-Lee, 1991 一方で、

    アンダーラインと可読性:リンクをどのようにデザインするか?
  • 音声技術の発達により劇的に変化するであろう5つの産業

    Georginaはライター兼受賞歴のある脚家で、ミレニアル世代やその他のサブカルチャーに関心があります。ベルリンの専門学校CareerFoundryで編集者をしており、ユーザー体験やテクノロジーについて執筆しています。 音声UI技術はより賢く、素早く、そして信頼性の高いものになってきています。この技術の進化は、今そして未来の主要産業にたいしてどのような意味を持つのでしょうか? 音声UIは、数十年前から注目されてきました。しかし、技術的な限界とデータ量の不足のため、コンピューターと話すことができるという我々の夢を実現するのは非常に困難でした。 それが、完全に変わろうとしているのです。 AIやクラウドの進化により、ユーザーからより詳細なデータをマシンに蓄積できるようになりました。そして以前よりもずっと、私たちの発言を理解することができるようになりました。 声はビジネスのビッグチャンスです。

    音声技術の発達により劇的に変化するであろう5つの産業
    nubonubo
    nubonubo 2017/12/20