タグ

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

  • 体験をタッチポイントへと分解し、構造化するには【前編】

    UX Boothの編集者らはつねに発信し、ユーザーセンターなデザインの実践に関するストーリーを共有しつづけています。 この記事はChris Risdon氏とPatrick Quattlebaum氏のOrchestrating Experiences: Collaborative Design for Complexityの第2章からの抜粋です。Rosenfeld Mediaより、書籍とeブックが利用可能です。 マーケティング業界の用語である「タッチポイント」が「チャネル」という用語と共に少しずつ企業に浸透しつつあります。従来のマーケティングでは、顧客セグメントごとにキャンペーンを実施することで製品やサービスに対する需要を喚起していました。また多くの場合、キャンペーンにはいくつかの戦略があり、CMやダイレクトメール、バナー広告などを組み合わせて、ブランドに対する認知やオファーを増加させます。

    体験をタッチポイントへと分解し、構造化するには【前編】
    baba_jdl
    baba_jdl 2018/11/27
  • itemstore担当者に訊いた、アプリ内課金のトレンドとは | UX MILK

    アプリのデベロッパーにとって、アプリ内課金は今やアプリのマネタイズ手法のスタンダードです。今回はアプリ内課金を簡単実装できるサービス「itemstore」の開発に携わる高田さんに、アプリ内課金の実態やトレンドなどを聞きました。 高田 雄太郎 カイト株式会社 MBaaS事業部 2013年カイト株式会社にUnityエンジニアとしてジョイン。itemstoreのサービス立ち上げメンバー。ライトゲームの開発経験を生かして、itemstoreのSDKエンジニアリングを担当。アプリ開発者目線でマネタイズサポートや技術サポート等、開発者を支援し続けている。 itemstoreの取り組みからみる、アプリ内課金のトレンド ―itemstoreはアプリ内課金を簡単に導入するためのサービスですが、itemstoreさんの導入事例などからアプリ内課金における傾向やトレンドなどはありますか? まず、アプリ内課金とは

    itemstore担当者に訊いた、アプリ内課金のトレンドとは | UX MILK
    baba_jdl
    baba_jdl 2018/11/01
  • 海外事例から学ぶ、ユーザーの行動を導く優れたCTA10選

    この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 Outstanding Call-to-Action Examples 古き良きコールトゥアクション(CTA)はWebにおいて必須な要素です。CTAはユーザーに対してとって欲しい行動を正確に伝えるためにあります。たとえばこのを買ってください、無料ガイドブックをダウンロードしてください、もっと情報が欲しい場合はご連絡ください、などがそうです。 しかし、時折これらは陳腐なマーケティング文句にしか聞こえない場合があります。ひどいときなどは、意図と正反対のアクションに繋がっていることすらあるかもしれません。 では、優れたCTAとはどんなものでしょうか? ここではデザインがすぐれている、コピーが巧みに書かれている、とにかくユニーク、といった優れたCTAを10点紹介しま

    海外事例から学ぶ、ユーザーの行動を導く優れたCTA10選
    baba_jdl
    baba_jdl 2018/10/18
  • 【2018年春】今チェックしておきたいデザインツール12選

    JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 デザイン業界の流れは速く、絶えず新しいツールが誕生しています。そのため、デザイナーとして最先端を走り続けるには、世の中の動向につねに注意する必要があります。 そこで今回は2018年現在、チェックしておきたいデザインツールを厳選してまとめました。これらのツールにはデスクトップのプログラムもありますし、SaaSのアプリやブラウザツールもあります。 いずれにせよ、このリストにはみなさんがチェックしたいと思うものが必ずあるはずです。詰まるところ、素晴らしいデジタルコンテンツを作ることにおいて、あなたのデザインスキルはさまざまな手段の一部に過ぎないのです。 Adobe XD Adob

    【2018年春】今チェックしておきたいデザインツール12選
    baba_jdl
    baba_jdl 2018/04/03
  • ユーザビリティテストを補助するときの10の注意事項

    Measuring Uの創設者。シックスシグマに熟練した統計学分析者であり、ユーザーエクスペリエンスを定量化したパイオニアでもあります。 ユーザビリティテストを行う際の基原則の1つは、ソフトウェアやアプリ、Webサイトを被験者に使ってもらうことでサービスの問題を知ることです。 サービスの使用場面を再現することで、実際のユーザーが離脱してしまう問題や製品を他者に勧めなくなったりする問題を突き止めて修正することができます。 さて、黙ってユーザーを観察するべきと言われていますが、ファシリテーターはユーザーに干渉する必要があるのでしょうか? 私が言いたいのは、ユーザーがタスクに行き詰まり先に進めない状況について、ファシリテーターは何をすべきかということです。 ユーザビリティテストを実施した私の経験上、テスト中に被験者を手助けするかどうか、手助けするタイミング、手助けしたテストのデータの扱い方とい

    ユーザビリティテストを補助するときの10の注意事項
    baba_jdl
    baba_jdl 2017/12/04
  • 3つの事例から学ぶ、ユーザーを最優先にしたオンボーディング

    HannahはAppseeモバイル分析のコンテンツマーケティングマネージャーです。UXとモバイルアプリに強い情熱をもち、モバイルテクノロジーについてのインサイトや情報を見つけたり共有したりすることに親しんでいます。 モバイルユーザーのオンボーディングに関して、すべきこと、してはいけないことを単純にリストアップするのは簡単です。たとえば、オンボーディングの進捗状況やフローの長さをユーザーに伝えるべきで、ユーザーをコンテンツで圧倒してはいけません。また、ユーザーにすぐに許可を求めてはいけません。チュートリアルをスキップできるようにするべきです。 しかし、人間は視覚を重視する生き物ではないでしょうか。プロダクトマネージャーやUXデザイナーは特にそうです。そのため、オンボーディングの有効なベストプラクティスを習得したいなら、実際の素晴らしいデザインを見せることより優れた方法はありません。 モバイル

    3つの事例から学ぶ、ユーザーを最優先にしたオンボーディング
    baba_jdl
    baba_jdl 2017/12/04
  • ノンデザイナーがAdobe XDの使い方を動画講座で学んでみた

    最近では、新機能や新サービスをリリースする際に、プロトタイプを作成することも増えてきたと思います。 しかし、まだプロトタイピングツールを使ったことがないという人もいるのではないでしょうか? そこで今回は、オンライン学習プラットフォーム「Udemy」で最近開講した「誰でもかんたんに学べるAdobe XD入門講座」で、Adobe XDの使い方を学んでみたいと思います。 誰でもかんたんに学べるAdobe XD入門講座 この講座は、Adobe認定アソシエイトである濱野 将氏によるAdobe XD初心者向けの講座です。Adobe XDの基礎からはじまり、実在するサービスのモバイルアプリのプロトタイプを作成するという実践的な内容までカバーしています。 また、デザイン初心者向けに「なぜプロトタイプが必要なのか?」といったことやワイヤーフレーム、デザインカンプ、モックアップ、プロトタイプの違いなども丁寧に

    ノンデザイナーがAdobe XDの使い方を動画講座で学んでみた
  • Webデザインで「やるべきこと」と「やってはいけないこと」

    1.どんなデバイスでも同様の体験を提供する サイトの訪問者は、さまざまな種類のデバイスを使ってサイトにアクセスしています。デスクトップかもしれませんし、ラップトップやタブレット、携帯電話、音楽プレイヤー、または腕時計を使っているかもしれません。 UXデザインにおいて重要なのは、訪問者がどのようにサイトを閲覧しても、デバイスの種類に関わらず同様の経験を提供しなければならないことです。 ※編集部より:一部、誤訳がありましたので修正しました(11/10 11:00) 2. 使いやすくわかりやすいナビゲーションをデザインする ナビゲーションはユーザビリティにおける要です。どんなに良いWebサイトを作ったとしても、ユーザーがサイト内で上手く操作できないならば意味がないということを覚えておいてください。そのため、サイトのナビゲーションは以下の項目に従うべきなのです。 シンプル:どんなサイトであっても最

    Webデザインで「やるべきこと」と「やってはいけないこと」
    baba_jdl
    baba_jdl 2017/11/13
  • Webデザインのスタイルガイドの作り方

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

    Webデザインのスタイルガイドの作り方
  • WebデザインにおけるF字型レイアウトの活用方法

    Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 この記事ではF字型レイアウトの基、利点、作成方法ついてわかりやすく説明します。 F字型レイアウトとその働きについて 「F字型レイアウト」はユーザーがサイトを見るときの一般的な視線の動きをあらわします。 FはFastのFでもあり、多くのユーザーはWebサイトを高速で読み流しているのです。 F字型パターンは、200人以上のユーザーが数千のWebサイトを閲覧した結果を記録したNNGroupのアイトラッキング調査によって普及されました。多様なサイトやタスクに関わらず、ユーザーの視線の動きはほぼ一定していることが調査によってわかりました。この一定な視線の動きこそがアルファベットのFの字型に類似していたのです。 F字型は以下の3つの要素によって構成されています。 ユーザー

    WebデザインにおけるF字型レイアウトの活用方法
  • ディテールはプロダクトの成功を左右する

    Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 製品の成功にはさまざまな要素が関連していますが、製品全体のユーザー体験はほかの要素よりも重要です。新しいアプリやサイトを設計するときには、ベストプラクティスを実践することが堅実な方法です。しかし、全体像を描く際、あれば良いが必須ではないデザイン要素はいい加減にしてしまいがちです。ところが、良い経験と悪い経験の違いはこれらの細かいディテールをどれだけ考えてデザインすることに関係してくるのです。 この記事では、視覚的なフィードバックやマイクロコピー、ホワイトスペースに焦点を当てて、これらの小さい、あるいは大きいディテールがなぜデザインのよりわかりやすい要素と同じくらい重要で、製品の成功を左右するかを説明します。 視覚的なフィードバック 視覚的なフィードバックは、大き

    ディテールはプロダクトの成功を左右する
  • オンボーディングについてレストランから学ぶべきこと

    Adamはイギリスの起業家および慈善活動家で、「違いを作る人たちが違いをもたらす仕事をサポートする」というミッションの下に活動するFairheadという企業の創設者です。 一流のシェフが料理に対して「火の通し過ぎだ」と怒鳴りつけることと、ユーザーに対する優れたオンボーディングの間には、どのような関係があるのでしょうか? 素敵な事の体験というものには、べ物自体よりはるかに興味をそそられる何かが存在します。それこそが、オンボーディングの体験です。 編注:オンボーディングは、新規ユーザーがサービスに慣れてもらうためのプロセスを指します。 この記事では、レストランでのオンボーディングの優れた部分と、それを今後のUXデザインにどのように応用できるかを解説していきます。 1. ドアの向こうにあるもの 前回私がとパリを訪れたとき、ほかの観光客と同じように私たちはよく外をしました。ドラマチックな演

    オンボーディングについてレストランから学ぶべきこと
  • UXデザイン初心者のための5つのトレーニング

    たとえば、あなたがデジタルビジネスのオーナーまたはマーケティングの担当役員で、UXデザインの分野について詳しく知りたいとします。すでにUX関連のニュースやデザインのトレンドについて調べただけでなく、自社のUXデザイナーやコンサルタントに、UXの業務がビジネスプラン全体とどのように適応しているか何度も尋ねてきました。さらに、最終的な製品やモックアップがどのように見えたり感じたりするかについて、UXデザイナーにフィードバックを求めたりすることもあるかもしれません。 しかし、もう一歩踏み込んで、根的にユーザー体験がどのように作られているのかを知りたい場合はどうすればよいでしょうか。または、新しいWebサイトやアプリのアイデアがあり、専門家を雇う前に自分で作ってみたいと思うかもしれません。その場合、おそらく少しトレーニングが必要でしょう。そこで私たちの出番です。 この記事は、UXデザイン全体の流

    UXデザイン初心者のための5つのトレーニング
  • 魅力的なサイトに必要不可欠なシンプルなナビゲーション

    Christineは、appendToのフロントエンドの開発者およびライターです。appendToではチームのためのJavaScriptトレーニングを提供しています。 「インタラクティブ」「一貫性」「ミニマル」は、Webサイトのナビゲーションが話題となるときに共通して聞かれる言葉です。しかしこのリストにはもう1つ「シンプル」という言葉を加えなくてはなりません。 シンプルナビゲーションは、Webデザイン要素の中でもっとも美しいものの1つです。インタラクティブとミニマルデザイン、それぞれの特性を組み合わせることでWebサイトに一貫性をもらたします。 シンプルナビゲーションには以下の2つの特徴があります。 Webサイトのメインナビゲーションには、3~7つのセクションしかありません。これは、ドロップダウンメニューやメガメニューによる表示またはサブ的なナビゲーションの場合は当てはまりません。 デフォ

    魅力的なサイトに必要不可欠なシンプルなナビゲーション
  • UXデザインにおけるストーリーボードの役割と活用法 | UX MILK

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

    UXデザインにおけるストーリーボードの役割と活用法 | UX MILK
  • モバイル向けWebデザインのための基本的なガイドライン

    Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 モバイル向けにデザインをするなら、そのデバイスの使われ方とデバイスそのものの特性に配慮する必要があります。モバイルデザインを始める際に役立つ原則はいくつかありますが、これらはユーザーリサーチに取って代わるものではありません。絶対に厳守するべきガイドラインではないのです。 モバイルデザインでは、たくさんのことを考慮する必要があります。その多くは標準的なUXデザインでも踏まえる事項ですが、同時にモバイルデザイン特有のものも考慮しなければなりません。モバイルで提供するサービスを既存のものと統合する予定ですか? そうであれば、レスポンシブデザインとアダプティブデザインのどちらを採用しますか? 編注:レスポンシブデザインとは、デバイスに関係なく画面サイズに応じて表示を

    モバイル向けWebデザインのための基本的なガイドライン
  • アニメーションをWebサイトに導入するためのテクニック

    Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の1つです。現代のWebサイトでは、細かなインタラクションのデザインが根的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。 より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。 進捗 ローディングアニメーション Webアニメーションにもっとも共通する用途の1つは、ページの読み込み(ローディング)時にユーザーの気を紛らせることです。 ローディングアニメーションはユーザーの感覚時間に影響し、実際より待ち時間を短く感じさせることができます。 待ち

    アニメーションをWebサイトに導入するためのテクニック
    baba_jdl
    baba_jdl 2017/05/17
    “ユーザーは要素の機能に疑問を抱くと、その箇所にマウスを移動させる傾向があります。ですから、ホバーアニメーションが直感的に際立つ必要があります。ソース:codepen”
  • プロダクトリリース前に確認したい23のUXチェックリスト

    Fabio Muniz氏はTestLodge社のプロダクトデザイナーであり、製品開発の立ち上げ段階における設計で活躍しています。Fabio Muniz氏の仕事はfabio.designでご覧ください。 ソフトウェアの設計プロセスではプロダクトの欠陥が見つからず、ユーザーが使う段階になって欠陥が明らかになりユーザー体験を損ねてしまうことがあります。 この記事では、そういった事態に陥らないようにチェックしておくべき事項をリストアップしました。ここで挙げるチェックポイントは一般的なものであり多くのプロダクトに適用可能ですが、例外もあることをご理解ください。 インタラクションデザイン 01 - 頻繁に発生する操作が簡単にできるか チェックをする理由:同じ情報を繰り返し入力することは面倒であり、ユーザーの生産性向上に寄与しません。面倒な操作が多ければ、ユーザーはより生産性の高い競合プロダクトへの乗り

    プロダクトリリース前に確認したい23のUXチェックリスト
  • カード型UIにおける5つの効果的なテクニック

    「カード」とは、画像やテキストなどの情報が書かれた下図のようなデザインのことをいいます。カードは、シンプルな使いやすさとデザイン性とのバランスを重視する際にはもっともよく使われる手法となりました。PinterestやFacebookのようなサービスで使われはじめ、現在では多岐にわたる企業で使用されています。

    カード型UIにおける5つの効果的なテクニック
  • Googleデザインスプリントにおける5つのプロセス | UX MILK

    リソースが不足し、予算が取れない中で、企業は成功のほどが不明な大規模のデザインプロジェクトへの投資に乗り気にはなりません。 そんな中Googleは、デザインプロセスを速くし、価値あるインサイトを提供する方法論を作り出しました。 必要最低限の機能を持った製品(MVP)のことは一旦忘れて、1週間以内にプロトタイプを作り出し、テストすることにフォーカスしてみましょう。 Googleデザインスプリントプロセスの概要 Googleデザインスプリントは、5段階のプロセスで構成されます。各段階のプロセスは実行するのにおよそ1日(8時間)かかり、5段階すべて実行するにはおよそ40時間かかります。 素晴らしいデザインプロセスでは、繰り返すこと(イテレーション)が重要です。実際には、最初のスプリントで修正案をつくり、そのあとに少なくとも2回のイテレーションを回すことが強く推奨されています。 また、自分のアイデ

    Googleデザインスプリントにおける5つのプロセス | UX MILK