「カスタマージャーニー」と耳にする機会は多いものの、実際に作り活用したことはかりますか？ 2019年12月17日開催のオンラインセミナーでは、人間中心設計を軸にプロダクトオーナー兼デザイナーをされている末綱 華英さんに、これまで企画開発に関わってこられたご経験から「ユーザの利用文脈を考えて設計するアプリ開発とは？」「どの様にリサーチを取り入れユーザの期待をプロダクトに反映しているのか？」などお伺いしました。 今回はそのダイジェストをお伝えします。 無料DL｜ペルソナ＆カスタマージャーニーマップ作成ワークショップ

SEOにおける成功を収めるために、Webサイト全体の品質を上げることは非常に重要です。 しかし、全体の品質が高いWebサイトとは、何をもって決定されるのでしょうか？ 様々な解釈が可能と思われますが、総合すると「ユーザーが満足のいく体験を提供するWebサイト」と考えることができるはずです。そして、そうしたサイトは、Webサイトで提供される情報が綿密な考えのもと配置されており、それぞれの情報が有機的に結びついているはずです。 今回は、ユーザーが満足のいく体験を提供するサイトを作り上げるために必要な考えを、「情報アーキテクチャ」と「リンク階層」を軸に説明しているSearch Enjine Journalの記事を紹介します。 ユーザー体験（UX）とは、単純性とデザインという領域に留まるものではなく、「ユーザーがそのサイトをどのように体験したか」についてのものだ。 Webサイトの体験は次の３つに要約

UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感

フォームのボタン配置は、多くの場合無視されるか、見映えに基づいて優先順位がつけられます。しかし、ボタン配置は非常に重要で、フォームを使いづらくする要因の一つであるため、正しく配置することが不可欠です。 フォームのボタン配置は、対象のボタンとフォームのタイプに依存されます。 さまざまなタイプのフォームを総合的に調査・分析し、それぞれのタイプでどこにボタンを配置するかについて解説します。 Where to put buttons on forms by Adam Silver 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 プライマリボタンは入力欄の左端に揃える 「戻る」ボタンはフォームの上に配置 分岐するアクションはフォームの上に配置 機能に応じて追加のボタンを配置 一部の単一フィールドのフォームでは、入力欄の横にボタンを配置 マ

スマホでボタンをどこに配置するとユーザーは操作がしやすいのか？ 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？ タスクを素早く完了することで、より満足のいくエ

Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきますが、使いやすさや操作性、機能の豊富さを比べるとDramaは頭1つ抜け出しているような印象です。 また、SketchやAdobe XDなどと比べるとUIデザインツールとしての機能に大きな遜色は無く、むしろ動作の滑らかさではSketchよりも勝っているのではないでしょうか。 Dramaを一言で述べると、「これまでのデザインツールのいいとこ取りをしたツール」であると言えるかもしれません。 現在はまだ正式リリースはされていませんが、公式サイトからベータ版をダウ

この記事では、UIデザインで最も一般的に使用されている要素の1つである入力フィールドについてご説明します。入力フィールドを使用すると、ユーザーはテキストをUIに入力でき、入力したものは通常フォームやダイアログに現れます。この記事では、その入力フィールドの要素とそのデザインでの決まりをご紹介します。 入力フィールド部分 入力フィールドは以下の部分で構成されています。 1．　コンテナ 2．　先頭アイコン（オプション要素） 3．　ラベル 4．　プレースホルダー/入力テキスト 5．　末尾アイコン（オプション要素） 6．　ヘルパーテキスト/エラーテキスト（オプション要素） 1．　コンテナ コンテナのサイズは、予想されるユーザーの入力にあわせる必要があります 単一行フィールドでは、カーソルがフィールドの右端に達すると、入力行より長いテキストが自動的に左にスクロールします。テキストがユーザーから見えなく

PaulはUXデザイナーであり、サービスデザインのコンサルタント。UNICEFなどの非営利団体や企業に対して、ユーザーのデジタル体験を向上させるためのコンサルティングを行っています。 私がUXの専門家から聞いた一番の不満は、「同僚や顧客、マネージャーが改善の障害になっている」ということだ。しかし、それはなぜでしょう。そして私たちはそれに対して何ができるのでしょうか。 以前から気になっていたことでシェアしたかった内容です。これが学びのあるブログ記事というより愚痴に近い内容であることは十分に理解していますが、これは私のブログ記事ですし、好きに書かせていただきます。 私は、UX分野の仲間たちが、同僚や顧客、経営者について不平を言うのを聞くのにうんざりしています。公平を期すために言っておくと、他のデジタル専門家も同じことをしていると聞いていますが、このあとすぐ触れるように、UXの専門家ならもっと良

UX Movementの創立者、ライター。ユーザーに優しいユーザーエクスペリエンスデザインのスキルを読者の方が上達できるよう、UX Movementのブログを作りました。 あなたのユーザーはスマホアプリやモバイルサイトのボタンをちゃんと狙った通りに押せているでしょうか？　きちんと押せているかをユーザーのせいにする前に、ボタンのサイズや間隔が最適化されているかどうか確認しましょう。 ボタンが最適なサイズと間隔になっていないと、ユーザーが狙いを外したり、間違ったボタンを押してしまいます。この記事ではどの程度が最適かを見ていきます。以下の数値は、96DPIでのCSSピクセルを基準にしています。 ボタンサイズの基準 まずは基準となるサイズがわからなければ、ボタンのサイズが最適かどうかを判断できません。幸いなことに、ボタンのサイズと間隔に関するリサーチによって、高齢者を含むほとんどのユーザーに有効な

UX Planet UX Planet is a one-stop resource for everything related to user experience. UXデザインの成功は正確なA / Bテストなしでは困難です。同じランディングページ用に作成されたチャンピオン、チャレンジャー、およびバリアントデザインでは、私たちデザイナーはデザインの効果的な使い方をユーザーテストからの装飾的な推論により見逃しがちです。 まず私は「ユーザーテスト」という言葉を使うことを控えています。あなたはユーザーのために構築し、あなたはユーザーをテストすることはできません。むしろ私は「ユーザビリティテスト」という用語を使用します。それはより適切と感じます。あなたなら何と言いますか？そして私たちがユーザビリティについて話すとき、選ぶべきデザインと経験の選択があります、そしてA / Bテストが来ます。 ラ

PaulはUXデザイナーであり、サービスデザインのコンサルタント。UNICEFなどの非営利団体や企業に対して、ユーザーのデジタル体験を向上させるためのコンサルティングを行っています。 多くのユーザーが行動を起こさない主な理由は、リスクについての不安があることです。リスクを削減することができれば、コンバージョンの向上が見込めます。では、どうすればリスクを削減できるのでしょうか。 あらゆるコールトゥアクション（CTA）はユーザーにとってリスクになり得ますが、人間は直感的にリスクに対応することはできません。実際、認知負荷を除けば、サイトでのアクションを阻害する１番の要因となるのがリスクなのです。 ですから、ユーザーにとって本当にリスクになるものを減らし、ユーザーが気づいているリスクは問題ないものであることを示して安心してもらう必要があります。 このためにはまず、ユーザーの心配事は何なのかを知る必

Webの開発市場は飽和状態なため、消費者はその選択肢の多さに目移りしています。名刺代わりのWebサイトを持っているだけでは、もはや競争力はありません。もっと直接的なセールスツールとして作用する必要があります。「いつか見てくれるだろう」という運は計画のうちには入らないのです。 心理学がデザインに有用であることは既知の事実です。特定の心理的なきっかけをいくつか使うことで、消費者の選択に影響を与えることができます。つまり、望ましい方向や行動へとユーザーをそっと促すことができますし、更に言うと、投資した以上の十分な見返りも得られるのです。 Webサイトのデザインで売り上げを伸ばせることがわかったところで、その目的に合った特別なテクニックと効果を調べていきましょう。 系列位置効果 Hermann Ebbinghaus氏によって定義されたこの心理学用語は、ユーザーは連続した項目の最初と最後の項目を思い

Ericは20年以上の経験を持つWebデザイナーです。『Your Guide to Becoming a Freelance Web Designer』の著者でもあります。 ページネーションはデザインの中での必需性が低く、見過ごされることが多いもののひとつです。しかしブログやコンテンツの多いサイトでは、ページネーションはナビゲーションにおいて重要な意味を持ちます。サイトのページネーションが上手く作られていると、ユーザーはサイトを深くまで探求するようになるでしょう。 信じられないかもしれませんが、ページネーションのレベルを次のステップまで引き上げるデザイナーたちがいます。ここではWebサイト改善に役立つ、独創的なページネーションのコードスニペットを見ていきましょう。 シンプルで直観的なホバー効果 基本的なホバー効果によって標準的なページネーションは大幅に改善されます。カーソル移動に合わせて滑

Fireは豊富なコンポーネントを含んだBootstrap 4向けのフリーUIキットです。これからも増えるようでさらに期待できそうです。クリーンで見やすく、必要なUIも揃えられており、すべての要素が100%レスポンシブWebデザイン対応と、フレームワークというよりは完成されたタイプでそのまま利用する流れになりそうです。ドキュメントページもFireが使われていますので使い方を確認しながら、見やすさも体感できる印象を受けました。良いUIキットだと思います。 Fire

UIデザインの考え方を学びたい、UIデザインを説明するためのロジックを学びたい、使いやすい・分かりやすいとは具体的にどうデザインすればよいのか、そんな人にかなりお勧めの一冊を紹介します。 UIデザインや人間の認知について知りたいことがすぐに分かり、役立つと思います。 UIデザイナーやディレクターだけでなく、UI制作に関わるすべての人にお勧めです。 本書は2013年に刊行された「UIデザインの教科書」の新版で、2018年の最新環境にあわせて、構成および内容を全面的に書き直しされたものです。

海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras Skytskyi より許可をもらい、翻訳転載しています。 最近では、UIデザインのアニメーションで感動させたり、驚くせることは難しくなってきています。画面上でのやり取りを示したり、アプリケーションの使い方を説明したり、ユーザーの注意を向けるなど、実装テクニックはさまざまです。 この記事では、UXデザインにおけるアニメーションの基本原則とルールをまとめてご紹介します。これからインターフェースデザインのアニメーションを作成したいというひとが、追加情報を探す必要がないよう、アニメーションのすべてをまとめた完全ガイドです。 アニメーションの持続時間とスピード 要素の状態や位置が変更されると、アニメーションの長さは、ユーザーに変更を通知し、

LINE25 Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs. タッチスクリーンは、おそらくモバイルデバイスの人気の理由の1つでしょう。 タッチスクリーンは、人と対話型装置との間の距離を縮め、その結果、直感的で使いやすいと感じさせます。そのため、スライダはモバイルデバイスに簡単に取り入れることができます。 スライダを使用すると、画面上の水平方向の動きだけで、サイトのコンテンツを閲覧することができます。しかし、これはモバイルナビゲーションとしては比較的活用されることのない機能です。 スライダは、いくつかの要素だけでサイトとアプリの素晴らしいナビ

こんにちは、tomaです。今回はTHE GUILDが主催する THE STUDY by THE GUILD #03 「データ×UXデザイン」 に参加したのでレポートを書きたいと思います。 第一部は以下の4名の方々による講演、第二部はこばかなさんモデレートによる登壇者のみなさまのパネルディスカッションでした。 大竹 雅登｜dely株式会社 CTO/執行役員 山田 智久｜アドビシステムズ株式会社 エクスペリエンス ビジネス部 シニアコンサルタント 安藤 剛 | THE GUILD / UX Designer 鈴木 陽介｜日本経済新聞社 デジタル事業BtoCユニット----- 必要十分の工数で意思決定するために 1人目はレシピ動画サイトkurashiruを運営するdelyの大竹さん。データに基づいたアイデアの検証プロセスについて、サンプルケースをもとにお話されました。 delyでは改善プロセスを

日々新たなデザインに関するニュースが飛び交っていますが、それはUIデザインツールに関しても同様です。 Adobe XDの正式リリース、Figma3.0のリリース、InVision Studioのベータ版公開など、2017年の終わりから2018年にかけて多くのUIデザインツールが登場しました。 今回は、2018年8月現在で公開されているUIデザインツールの中から、特に人気のツールについて機能や特徴を比較していきたいと思います。 最新の情報はこちら 2020年版：おすすめの人気UIデザインツールを徹底比較！【Figma / XD / Sketch】 現在は、デザインツール戦国時代とも言われるように、様々なデザインツールが競争を繰り広げています。 UIデザインを作るための「UIデザインツール」もどんどん進化していて、個性的なツールが多数登場していま... Web Design Trends UI