株式会社ロフトワークプロデューサー・柳川雄飛のオープニングに続き、クリエイティブディレクターの青木大地が登壇。「ユーザー理解」というシンプルながら難しいテーマで、作業プロセスを解説しました。 サービス全体を通したユーザー理解が必要 「ユーザーは、Webサイトの先に目的を持っています。例えば『Amazon.co.jp』を訪問するユーザーにとって、欲しい商品を手に入れることが、目的でありゴールです。Webサイトは通過点にすぎず、その前後にもサービスとのタッチポイントが存在します。ビジネスの新たな提供価値を考えるためには、本質的なユーザーのニーズに近づかなければなりません」と青木。Webだけでなく、サービス全体のUXを考慮し、サイト設計に反映させる必要があります。 メンタルモデルとインサイト では、どのようにユーザーを理解していくのか？ 青木は「メンタルモデル」「インサイト」という2つのキーワー

連載目次 WebサイトやWebサービスの改善の現場においては、ABテストを利用して改善を行っていくのは、すでにスタンダードになっている。一方で、ABテストを繰り返して改善を行ってみても、なかなか成果につながらずに行き詰まりを感じているケースも多いだろう。 本連載では、ABテストを利用したサイト改善の限界にぶつかっている人たちに向けて、リクルートグループ内で実践している改善ノウハウをお伝えしたい。Webサービスの改善に関わる企画担当者、ディレクター、デザイナー、エンジニアといった、全ての方々にとって役に立つ内容となると考えている。 成果を上げるためのポイントは「シナリオベースABテスト」と「アダプティブUX」 ABテストに限らず、Webサイトを効果的に改善して成果を上げるには、サイト上におけるユーザー体験（いわゆる「UX」だが、「ジャーニー」や「シナリオ」というのもほぼ同じようなことを指して

UXデザイン・サービスデザインの代表的手法であるカスタマージャーニーマップについて、コンセント代表／インフォメーションアーキテクトの長谷川のコラムを掲載します。 最近、「カスタマージャーニーマップ」という言葉があちこちで聞かれるようになった。 カスタマージャーニーマップは体験や感覚の可視化をするもので、企業が組織として顧客視点に立てるよう助けるツールとしてサービスデザイン（※1）の手法の一つとしても注目されている。 カスタマージャーニーマップ（CJM）を活用するためには、その役目の定義が最も重要となる。 ここでは、CJMを大別する2つの軸を紹介しよう。 図１：カスタマージャーニーマップの４象限 一つ目の軸は、Inside-out/Outside-inの視点。 Inside/Outsideとは事業者からの視点として、「自社事業の観点から＝Inside-out」と、「自社事業の外側の観点＝Ou

オンラインでクレジットカードを使って支払うことは簡単ですよね？この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから（例：Amazon）。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ

Webサイトのデザインの方向性決めというのは、検討が長引いたり、スケジュールの遅れに繋がったりする要注意ポイントの一つです。弊社も例外ではありませんが、一方で、デザインに至った過程を丁寧に解説することで、スムーズに進めることは可能であるとも感じています。ここでは、デザインコンセプトを自然に理解していただくために弊社が行っている提案方法を共有しようと思います。 以下のスライドは、実際に使われたスライドです。公開用に細部は少し変えましたが、内容はほとんどそのままです。 クライアントは、株式会社マネジメントサービスセンター（以下、MSC）という企業の人事戦略や人材育成の支援を行っているB2B企業です。ターゲットは人事部や経営層などで、前段として戦略、設計が完了し、ベースとなるデザイン案を初めて提案する際に使ったものです。こちらを元に、ステップごとに細かな解説をします。（スライド中に出てくる検討プ

ECzine Day（イーシージン・デイ）とは、ECzineが主催するカンファレンス型のイベントです。変化の激しいEC業界、この日にリアルな場にお越しいただくことで、トレンドやトピックスを効率的に短時間で網羅する機会としていただければ幸いです。

こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot

ユーザーファースト推進室、デザイナーの坂本です。 私が担当をしている「クックパッドおいしい健康」には、クックパッド本体の様々な場所から導線（誘導のリンク）が張られています。その中の1つに、特定キーワードで検索した時の導線があります。 ↓こちらは、スマートフォンサイトの特定キーワード検索時に表示される「おいしい健康」への導線です。例えば「糖尿病」や「高血圧」など特定の病名が入ったキーワードでレシピ検索をしたとき、この導線が表示されます。 この導線は検索ボリュームに対する遷移数の割合が著しく低かったため、改善のABテストをしました。小規模な改善だったのですが、その時に考えたことと、結果が興味深かったので、ご紹介できればと思います。 変更前の問題点 変更前の問題点として、以下のようなものがありました。 ユーザーへのメリットが不明瞭 別サービスに遷移することがわかりづらい キーワード検索のノイズに

UX Tokyo Advent Calenderへの参加のお誘いを頂いたので、僭越ながら記事を公開します。 内容としては時間軸によるUXの定義の中の、予期的UXについての部分になります。全体としては多くの記事などに書かれていますが、個々の段階についてはフォーカスしたものがないため、改めて考え直しまとめたものになります。また、その他の時間軸の部分についても今後書いていく予定です。 もし情報の漏れや解釈の誤りがあれば、UX Tokyoのグループや直接お会いした際にご指摘頂ければ幸いです。 時間軸としてのUX 2010年のドイツでのセミナーを翻訳されたUX白書というものがあります。 UX白書では異なる期間で生じる体験のプロセスを、図のように4つの段階に分類して説明しています。それぞれ「予期的UX」「一時的UX」「エピソード的UX」「累積的UX」の4つの段階に分類されており、全体をデザインしていく

インターネット環境の日進月歩の進化により、わたしたちはより快適にウェブページを閲覧することができるようになりました。 しかしその便利さは、裏を返せばユーザーは「読み込みは速くて当たり前」と考えてしまうということ。 サクサクと閲覧できないウェブページにはユーザーはストレスを感じ、ますますせっかちになっています。 そしてこれはフォームのコンバージョンにも影響を与えるであろうことが容易に想像できますね。 今回の記事では、そんなウェブサイトの表示スピードとEFOについて考えていきたいと思います。 サイトのパフォーマンスが購買行動に与える影響 では、実際にユーザーは表示速度が遅いとユーザーはどのくらいストレスを感じているのでしょうか。 Kissmetricsが公開している、ページスピードとEコマースサイトの利用状況の関係を示すインフォグラフィックは非常に興味深い内容となっていますので、そのデータの一

公開日 : 2014年5月21日 (2014年6月4日 更新) カテゴリー : ユーザビリティ / 情報設計 (IA) Web サイト上に提示される情報は、「シンプル」であるに越したことはありません。ユーザーの目的達成に関係しない情報ノイズは、極力、無いのがよいと言えるでしょう。 そして、その情報が不要なノイズかどうかは、ユーザーの目的の大小や粒度、ユーザー自身の当該分野に対するリテラシー (理解の度合い)、ユーザーの利用コンテキスト、などによって異なります。 この記事では、ユーザーに合わせて情報ノイズを排除する考えかたとして、「Progressive Disclosure」と「Progressive Reduction」について考えてみたいと思います。 Progressive Disclosure (プログレッシブ ディスクロージャー) 「Progressive Disclosure」と

公開日 : 2015年6月6日 (2015年6月10日 更新) カテゴリー : ユーザビリティ Pull to refresh という UI パターンがあります。タッチインターフェースにおいて、指を下方向にドラッグして離すと、画面の表示内容が最新状態に更新される、というものです。 iPhone を例に挙げると、Twitter、Facebook、Instagram、Pinterest、Swarm、Dropbox、Google Drive、Gmail、YouTube、…など多くのアプリで採用されており、アップル純正のメールアプリや Podcast アプリなどにも採用されています。 iPhone の Twitter アプリの pull to refresh。指を下方向にドラッグすると図示のようにローディングアイコンが現れ、指を離すとタイムラインが更新される。 この pull to refresh

公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア

サイトのUIを検証 １．TOPページ/カテゴリページ TOPページ（左）の表示に必要にして、スマートフォンECサイトとして売上を上げていく上で、必要な情報が表示されており、賑わっている感じも出ています。 その中でも目に留まったのが、スマートフォン以外の携帯電話では、間もなく通信販売を終了するというお知らせ。 MM総研「2014年度通期国内携帯電話端末出荷概況」（http://www.m2ri.jp/newsreleases/main.php?id=010120150514500）によると 携帯電話の出荷台数のうち約4分の3はスマートフォンですが、フィーチャーフォン出荷台数は前年度比6.0％増といったデータも出ています。 根強いフィーチャーフォンユーザー向けにも通販を継続させるかの判断は、どのECサイトでも悩ましい決断なのかもしれません。 カテゴリページ（右）でも、商品のサムネイル画像や販売

UXデザインをするならこの本を読もう！ 安藤先生のおすすめ書籍 ユーザー志向のものづくりの実践～安藤昌也氏（番外編） UXデザインを手がけるときに参考になる書籍を安藤先生に紹介してもらった。人間中心設計、インタビューの仕方、ペルソナの作り方、UIデザインのための心理学に関するものなど、いずれもUXデザインのヒントにつながりそうな本ばかりだ。 U-Site編集部 2015年6月24日 安藤 昌也（あんどう まさや） 千葉工業大学 工学部 デザイン科学科教授 Ph.D。UX、エスノグラフィックデザインアプローチの研究者で、ものづくりのコンサルタント。 （← 第3回「利他的UXデザイン：人の利他心を高めるものづくり」へ） 安藤先生へのインタビューの番外編。インタビューの間、背面の書棚がとても気になったので、UXデザインを手がけるときに参考になる書籍を紹介してもらった。いずれも、UXデザインの教科

1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ

スマートウォッチアプリは、ナビゲーション要素よりもジェスチャーに頼り、不可欠なものを優先し、ハンドオフをサポートし、目的に適合した、単独で用をなすコンテンツを作り出す必要がある。 The Apple Watch: User-Experience Appraisal by Raluca Budiu on May 17, 2015 日本語版2015年6月22日公開 私は昨年、Samsung Galaxyシリーズのスマートウォッチ、Gearを分析して、「スマートウォッチこそが未来である。しかし、Samsung Galaxy Gearはまだその途中経過にすぎない」と書いた。今、Apple Watchが多数の技術系サイトであふれんばかりの熱狂を引き起こしている。にもかかわらず、残念ながらそのUIは我々を未来にそれほど近づけてくれるものではない。今回の記事ではApple Watchについての所見と、デ

私たちの誰もが理解する”シンプル”という概念の正体を突き止めることは、難しそうに見えますが、実はそうでもありません。 私たちが製品やWebサイトをシンプルと感じるかどうかの背景には、”見れば分かる”ということだけではなく、単なる直観的な反応にとどまらない何かがあります。 Steve Jobs は次のように述べています。 シンプルであることは、複雑であることより難しい場合がある。物事をシンプルにするためには、思考を整理して懸命に考えなくてはならない。しかし、努力する価値はある。ひとたび達成すれば、山をも動かすことができるのだから。 シンプルにものを作ることにそんなに力があるのであれば、なぜ私たちはそうできないのでしょうか。 なぜシンプルであることは、こうも複雑なのでしょうか。 人生における多くの事柄と同じように、シンプルさには表面的に見えている以上の何かがあります。ここでは、私たちの脳が新し

オンラインビジネスの成功のためには、ユーザーの意見を客観的に多数取得し、その数値分析から具体的対策を練ることが重要だ。当たり前のことだが、これができているサイトは少ない。 UXはたびたび、Webサイトやサービスの「使い勝手」を指す「ユーザービリティ」と混同されがちだが、UXとは単なる使い勝手ではなく、商品・サービスを含めた体験そのものを表す。 UXの概念を示すものとしては、ピーター・モービル氏が提唱した「UXハニカム構造」が有名だ。しかし、キーワードは英語で言葉の意味がわかりづらく、内容を理解するのは少々難解である。 これを専門家以外にもわかりやすく、ゴメス・コンサルティングで編集したのが「サイト全体構造とUX7つの要素」だ。Webサイトの構造例と、それぞれに対応する7つのUX基準を記している。 1. アクセスのしやすさ「アクセスのしやすさ」とは、Webアクセシビリティやマルチデバイス対応

買物情報事業部の三浦です。 クックパッドではApple Watchの発売に合わせて、iOSアプリをApple Watch対応にアップデートしました。 クックパッドのWatchアプリは、レシピを閲覧するという機能だけをもったとてもシンプルなアプリです。 実はそんな王道なアプリでも、いくつかの紆余曲折を経て完成させました。今回はその開発の経緯を通して、改めて実感したシンプルさやユーザー視点の大切さをお伝えできればと思います。 アプリの機能紹介 クックパッドのWatchアプリでできることは以下の２点のみです。 とてもシンプル。 一番最後に見たレシピの閲覧(材料と手順のみ) 調理時間から起動できるタイマー機能 レシピ閲覧機能にした経緯 クックパッドでWatchアプリをつくるとなれば、「レシピを見る以外他にはないでしょう」と思われるかもしれません。 でも開発当初は「Watchでレシピを読まなくない？