【デザインする前に知っておきたい！】よくあるUXのトラップを避ける方法とは

デザイナーが陥りやすいUXにおける4つの典型的なトラップとその回避方法を紹介しています。Webサイトやスマホアプリにおいて「UX」は欠かせません。デザインする前にどうしたらユーザーに好まれるサイトになるのか知っておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。

本記事は、Webデザイナー・グラフィックデザイナーのJames George氏によって投稿されました。

Webサイトを訪問したときに、あなたもフラストレーションやストレスを感じた経験がありませんか。特にウェブサイトがUXの実践原則を無視している場合には、よく起こり得ることです。

Webサイトの構築に携わる場合、ユーザーに好まれるサイトを作ろうと考えたら、UXの問題は避けて通ることができないでしょう。ここではデザイナーが陥りやすいUXにおける4つの典型的なトラップとその回避方法を紹介します。

1. フォーム

フォームは、ユーザー、クライアント、カスタマーの情報を収集するために不可欠です。フォームの利用は避けて通れないものであり、ユーザーが入力しやすいフォームでなければなりません。

フォームでの質問の数は、Webサイトにとって必要なだけの少ない範囲に絞るべきです。オンラインフォームの最大の問題の1つは、入力についての説明がユーザーに与えられていないケースです。

フォームの作成

具体的な情報の入力を求めるときには、何の入力を求めているのか強調しましょう。日付、時刻など形式的な情報を入力するフォームには、その入力例が示されているべきです。入力後にエラーメッセージを受信することほど、ユーザーにとってイライラすることはありません。

スクリーンショット 2016-07-19 11.25.50

プレースホルダーテキスト

さらに、フォームのフィールドにプレースホルダーテキストを設定して入力例を示しておけば（画像では赤い矢印の先）、ユーザーが情報入力するときのヒントとして役立ちます。

ただし、ユーザーがフォームに入力を開始した時に、プレースホルダーテキストが消えない設計は良くありません。ユーザーは入力を止めて、プレースホルダーテキストをコピー＆削除して、最初から入力し直すことになるためフラストレーションの原因となります。

ユーザーが入力フィールドをセレクトした時に、プレースホルダーテキストが消えるか確認しましょう。

エラーメッセージ

Webサイトで、説明も何もないエラーメッセージを受信することほど、イライラするものはありません。ユーザーへのエラーメッセージには、エラーの原因についての説明とその解決策が添えられているべきです。

例えば、ユーザー名とパスワードによるログインをユーザーが試みたときに、一方を間違えたことが原因でログインに失敗した場合、どちらがエラーの原因となったのか説明が必要です。

世界中のウェブサイトで数多くのログインが行われているため、ユーザー名とパスワードの組合せは日々蓄積されていきます。私自身、いつも使っていたユーザー名とパスワードの組合せを、Webサイトが求める条件（使用するアルファベット、数字、文字、句読点、記号などについて）を満たしていなかったという理由で、変更しなければならなかったことが何度かあります。

他にも次のような例があります。

登録のプロセスでは、入力されたパスワードのペアが一致しないときや、ユーザー名がすでに登録されているときには、ユーザーが情報を送信する前にエラーメッセージを表示するべきです。

十分な説明が与えられないまま何度もやり直しをするのは、誰でもイヤなものです。ユーザーのために、1回で正しい情報を送信できるような工夫ができれば、あなたは貢献度の高い仕事をしたことになります。

2. 大きなヘッダーがナビゲーションに使われている

この設計は最近は人気なのかわかりませんが、多くのWebサイトで見かけます。大きなサイズのヘッダーなどがナビゲーションの要素として使われていると、ユーザーがページをスクロールダウンするときに、多くのコンテンツが見えなくなります。

読みたいコンテンツに進みにくいときや、コンテンツがナビゲーションの要素で隠されてしまうとき、ユーザーにとってとくにフラストレーションとなるでしょう。

モバイル対応サイトではとくに注意

さらに悪いケースでは、サイトがモバイル対応の小さなサイズに設計されているのに、大きなサイズのヘッダーはそのままです。スマートフォンの画面は余白のスペースが限定されているため、これではユーザーエクスペリエンスの質が下がってしまいます。ナビゲーションの要素を表示するとしたら、小さなサイズのアイコンに変えるか、邪魔にならない場所に配置しましょう。

[PR] UI/UXデザインで挫折しない学習方法を動画で公開中

3. コントラストが低い

私は視力が良いほうですが、チャコールグレーのテキストを黒の背景上で読むのは、好きではありません。おそらく誰でもそう思うでしょう。Webデザインにおいてはコントラストが重要です。

tumblr_o05i9k2pBL1ul8y65o1_1280

テキスト

テキストは、文字のウェイト（太さ）も考えて、読みやすくするべきです。ウェイト（太さ）の値が100のフォントは、特殊なケースを除いてWeb上での利用には適していません。極細の文字をスマートフォンに使うのも良くありません。字形がよく見えるように、コントラストは十分高くしておくべきです。

色

Webサイトの全ての要素について、色同士のコントラストを十分高くしておくと見やすくなります。とくにテキストと背景は高いコントラストにしておくべきです。リンク、ナビゲーションの要素、アイコンについても同様です。ユーザーがコンテンツを探すのが難しくなるような、低いコントラストは良くありません。

CTA（CALLS TO ACTIONS 、コールトゥアクション）

リンクやナビゲーションの要素と同様に、CTA（コールトゥアクション：ユーザーにアクションを促す要素）もコントラストを高くするべきです。サイトの訪問者にアクションを期待するときには、この要素を目立たせて、読みやすくロードしやすいデザインにします。

効果的ではないCTAの例として、背景に同化して目立たないボタン要素、さらにひどい場合には、ホワイトスペースで囲まれたテキストのみでボタンのない要素があります。

4. モバイルサイトのタッチターゲット

モバイルサイトでよく見かけますが、これは最もフラストレーションとなる要素の1つです。

クリックできるボタンやリンクを作るときには、ユーザーが間違って他の要素をクリックしないように、十分なスペースを設けます。スマートフォンの場合には、ボタンやリンクをタップしやすくなるよう、画面の端から十分な距離を離しましょう。

ボタンが画面の4隅のいずれかに寄りすぎているときには、正確にタップすることが物理的に難しくなります。ユーザーの指が大きめの場合、スマートフォンがユーザーのアクションを認識できないおそれもあります。このときユーザーは機能を使うために何度もタップしなければなりません。これらの要素にはスペースを設けることが大変重要です。

tumblr_o1p2sciT2x1ul8y65o1_1280

画像：要素が私のスマートフォンの画面では端に寄りすぎています。スクリーンにタッチして設定するのに、5～6回も試さなければならないこともあります。

結論

UXの典型的な問題は、あらかじめよく考え、少しの手間をかけることで容易に回避できます。もしサイト訪問者に、利用を楽しんでもらいたいと思うなら、このプロセスをシンプルで柔軟にしておくことが大切です。

ユーザーにアクションを繰り返し要求することを回避できれば、フラストレーションを減らすことができます。

また、良くデザインされたサイトに誰もが期待するようなユーザーエクスペリエンスを、提供できるでしょう。

[お知らせ]TechAcademyでは初心者でもアプリのデザインができるようになるアプリUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

目的を見失わないために！プロトタイピングの間違った手法とは

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はUXPinのUXデザイナーであるMarcin T...

アプリデザイン

Goodpatchのプロダクトマネージャーに聞く！プロトタイピングツール「Prott」を使ったプロトタイピング

今日では、ソフトウェアやサービス、アプリ開発の現場において、必須プロセスとなっているプロトタイピング。IT業界ではこの1、2年でプロトタイピングのカルチャーが浸...

インタビュー

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、WebデザイナーであるChristian...

アプリデザイン

意味のあるデザインを！自然なアニメーションの作り方

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ソフトウェアデベロッパーのNick Babich氏によ...

アプリデザイン

作る前にチェック！海外のiPhoneアプリのデザイン集サイト18選

スマートフォンの普及に伴って、Webサイトをスマートフォンサイト用に対応するのはもちろんのこと、スマートフォンのアプリのリリースを検討している方も多いのではない...

アプリデザイン

【初心者でも分かる！】デザインツールJustinmindの使い方

初心者の方でも分かるようにJustinmindの使い方について解説している記事です。サイトのワイヤーフレームやプロトタイプを作成する上で非常に便利なツー...

アプリデザイン

あわせてよく読まれている記事

ほとんどのデザイナーが気付いていない「UXの4つの間違い」とは

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、HooktoWin.comの共同設立者であるAndrew McDermott氏によって投稿されました。デザイナーは不可能を可能にすることを期待されます。信じられないほど複雑なプロセスを、シンプルで美しいものに作り変えるよう求められることも、何度もあるかもしれません。そして成功したときには、ロックスターになったような気分を味わえるでしょう。しかし、こうした大きな期待に応えられなかったときには、ひどく落ち込むかもしれません。デザイナーには完璧主義者の人が多く、自分自身が自分に対する最悪の批評家であることもよくあります。間違いを自分の責任と見なして、全てを台無しにしてしまったかのように思うこともあります。それでも、落胆するような状況において間違いを受け入れることで、これを成長と学びの機会とすることができるはずです。もし本当のことをお伝えするとしたら…… デザイナーが気づいていない真実：間違いのほとんどは、デザイナーの責任ではありません。辛い現実：いずれにしても、デザイナーは責任を負うことになります。デザイナーに不足しているのは、人についての知識新規の仕事やプロジェクトにおける、デザイナーの目標設定の仕方が、間違いの原因というわけではありません。ほとんどの場合、実際はその逆です。デザイナーは、多くの人が気にしないような細部のデザインまで、こだわりを持って熱心に取り組みます。神は細部に宿ることを知っているからです。問題となるのは、人についての知識が不足しがちなことです。これは、デザイナーが学校で教えられないことですが、仕事に大きな影響を与えます。もしデザイナーが正規の（または非正規の）教育を受けていれば、その過程で自分独自のデザインを究めることを求められます。また、デザインの原則、デザインと配色の関係、色彩なども学びます。しかし、これだけでは十分ではありません。デザインや美術について教育を受けることはあっても、人について深く学ぶ機会はありません。こうした理解不足は、デザインに影響し、ひいては予期しないUXの間違いの原因となります。デザイナーに不足しているのは、人についての知識なのです。 UXの間違い1：ユーザーが実際以上に多くを知っていると思い込むことデザイナーは合理的な人々です。インターフェースの設計に多くの時間を費やすため、デザインがWeb上でどのように機能するかを直感的に理解しています。「これは常識だ！」とデザイナー自身が思っていても、実際はそうではないこともあります。デザイナーにとっての常識が、ユーザーにも通用するとは限りません。デザイナーは設計に多くの時間を費やしているために、よく知っているだけなのです。また、デザイナーがプロフェッショナルであるのに対して、ユーザーが同等の専門性を備えていないこともあります。こうした理由から、ユーザーに対して次のように仮定するのは、間違いです。適切な質問を選ぶことができる設定の操作について理解しているアイコン、マーク、ロゴの意味を知っているコンテンツに意識を集中し続けることができる Webサイトで提供している指示をよく読んでそれに従う必要とするコンテンツの見つけ方を知っている問題の核心が見えてきたでしょうか？デザイナーがこのように仮定すること自体は合理的ですが、問題を引き起こすおそれがあります。なぜなら、こうした仮定は現実に基づいたものではないからです。利用方法が全く分からないユーザーもいますユーザーの中には設定の操作が初めてという人もいますあなたの設計したサイトを、乱雑で混乱するようなデザインだと思うユーザーもいます関心が他に向いているマルチタスク型のユーザーは、コンテンツに集中するほど時間がありません指示に従うのを拒むユーザーもいますほとんどのユーザーは、見ているコンテンツについて詳しく知っていませんこうした場面でデザイナーに求められる仕事は、「迷える羊の群れを、頭数を減らして束ねる」ことです。条件に合うユーザーだけを選び抜き、意図したプロセス通りに彼らがサイトを利用できるような設計にします。その他の条件に合わないユーザーは、除外します。 UXの間違い2：ユーザーのためのデザイン「ユーザーのためのデザイン」は、ここ数年で繰り返し提言されているアドバイスで、頭にたたき込まれているデザイナーも多いかもしれません。デザイナーは、ユーザーのニーズをよく理解して、ユーザーを中心にデザインするよう教えられています。しかし、このアドバイスには見落としている点があります。「なぜ？」と不思議に思うかもしれません。見境なく教え込まれているアドバイスですから。その見落としている点とは、必ずしも全てのユーザーがターゲット・オーディエンス（Target audience：広告やマーケティングにおいて、目標とする顧客）と一致するとは限らないことです。サイトを利用しているユーザーが、「求めているユーザー」像と一致しないことがあるのです。例として、Googleを考えてみましょう。 Googleは、そのエネルギーや注意の大半をユーザーに向けています。Googleにとってのユーザーとは、検索者です。検索者により良いユーザー体験を提供するために、多くの時間と巨額の資金を投資しているのです。しかし、検索者がGoogleの唯一のユーザーでしょうか？実は、その他にもGoogleのユーザーは存在しています。広告主：Googleは広告主が自らの命令に従うことをよく知っています。Googleは、広告主やサイト運営者に対してポリシーを公開しています。もし彼らがGoogleのポリシーに違反して、好き勝手に利用するとしたら、広告掲載やサイトは強制停止されます。ボット（クローラ）：Googleは、ボットなどによってサイト上で「通常以上のトラフィックが検出」された場合に、これをブロックします。検索している主体が人間でも、誤検知（False positive）によりブロックされてしまうこともよくあります。詐欺者：Googleは詐欺サイトもブロックしています。例えば、偽のダウンロードボタンをクリックすると、ランサムウェア（ransomeware）がコンピュータにインストールされるよう仕組んであるサイトなどです。検索者：Googleの検索エンジンの利用者です。このユーザーたちこそGoogleに利益をもたらしています。彼らが広告をクリックしたり、アプリケーションを利用したり、ソフトウェアをダウンロードすることで、Googleに収益が発生する仕組みになっています。 Googleは、自らの目標や利益に反するユーザーに対しては、ユーザーエクスペリエンスの提供を拒否しているのです。 Googleは、ほとんど全てのユーザーに提供されていますが、Googleのユーザーリストに載っていない人々（ボット）は締め出されます。広告主が検索者にスパムを送信するとしたら、広告掲載を強制停止されます。Googleは、自らの目標や利益に反するユーザーに対しては、提供を拒否しているのです。「ユーザーのためのデザイン」は、デザイナーがターゲット・オーディエンスだけに意識を向けるという前提があってこそ有益なアドバイスになることは、十分理解できるかと思います。しかし、多くのデザイナーがユーザーについて見落としている重要な点は他にもあります。それは次の「UXの間違い3」で述べるとしましょう。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中UXの間違い3：フリクションが不十分であること Webデザインにおける「フリクション（friction）」とは、Webサイト（のレイアウトに使われている要素）の利用を阻害することを意味します。一般にデザイナーたちは、フリクションを悪いものだと考えています。Webサイトを上手く設計しなければ、意図した通りにユーザーが行動しないおそれもあります。こうしたイメージから、デザイナーはフリクションを恐れがちです。しかし、全てのWebサイトにはフリクションが必要です。もし音楽を聴いていて、うるさいと感じたらどうしますか？おそらく音量を下げますね？同じことがフリクションにも当てはまります。ユーザーは音楽に、フリクションは音量調節のダイヤルに、それぞれ例えることができます。望ましいユーザーだけをWebサイトに集めるために、いわばフリクションというダイヤルで、音量を上げたり下げたり調整するのです。フリクションを活用しているWebサイトの例を、次にいくつかご紹介します。 Craigslist（クレイグズリスト）：Craigslistは、同じ広告を50回連続で投稿されたりするのを嫌がります。そのため、Ghostingという技術によってフリクションを生み出しています。ユーザーがスパムを送信したり、広告を過度に多数回投稿した場合には、広告はブロックされて誰にも見えないように非表示になります。 Google：Googleはユーザーに自らのポリシーを尊重してもらいたいようです。もしサイトを悪用したり、検索結果を利用してWebスクレイピング（Web scraping）を行えば、「通常と異なる」ユーザーとして検出されます。さらに警告を無視するとブロックされます。 Quora：Q&Aのサイトです。利用ガイドラインはシンプルで、「Be nice, be respectful.（マナーと節度をもって利用すること）」というポリシーを掲げています。このポリシーを無視するユーザーには警告を与え、ブロックまたは利用禁止にします。フリクションを利用することで、他のユーザーにとって安全なサイトであることを保証しているのです。Quoraのサイトのシステムは、ユーザー体験の質を最大限に高めるようにデザインされています。デザイナーにとってフリクションは、問題となるかもしれません。しかしそれはデザイナーが、フリクションというダイヤルを調整する方法を知らなかったり、またはフリクションが存在すること自体知らないからです。デザイナーのフリクションに対する理解が不足していると、フリクションに過剰反応してしまったり、皮肉なことに望ましくないユーザーにWebサイトを悪用されることも起こり得ます。では、フリクションを具体的に実装するとしたら、どのようになるのでしょうか？例を見てみましょう。問い合わせフォームに、キャプチャを3～4つほど複数設けて、人間であることを判別する利用に至るまでのステップ数を必要以上に増やすことで、ユーザーをふるいにかける文字で埋め尽くされたページ、またはデザイン要素がぎっしりと並んだページにする入力フォームを必要以上に多く設置することで、ユーザーを疲労させ、興味を失わせる（逆に入力フォームを十分に設置しないとしたら、全てのユーザーのアクセスを容易にすることになります。）コンテンツと関連性の低いストックフォトや画像を使うことで、ユーザーがコンテンツの意味を理解する妨げとするユーザーに個人情報や支払い情報の入力を求める一方で、サイト運営者の顔写真や個人情報などは可能な限り非公開にしておくフリクションは重要な設計であり、その形やサイズは様々ですが、多くのデザイナーが理解に苦戦するのは確かです。 UXの間違い4：上司の指示にいつも忠実であることこの間違いを回避するには勇気を要します。それに加えて、さらに重要なことですが、目標を明確に理解していることも必要です。現在デザインしている要素は、どのような完成形が望ましいのか、開発しているWebサイトの目標は何なのかなどです。目標に関するこうした質問にクリアで決定的な答えを出しておくことは、必須ですその理由は、あなたの上司、会社の役員会、クライアント、関係責任者から、目標に反する要求をされることがあるからです。相手の要求通りに進めたら良い結果は生まれないと、経験から予測できることもあるかもしれません。当初の目標に反して進めた結果、失敗プロジェクトとなるおそれもあります。もっとも、「指示通りに仕事をこなしてさえいれば、彼らは報酬を支払ってくれるから構わない。」という考えで、上司に協調するのは簡単ですが。自分の意見を声に出して伝えることが非常に重要です上司が自分自身のために行動しない場合には、あなたが上司に代わって行動することが重要です。もし上司が、彼ら自身の利益を損なうような指示を出してきたら、あなたの意見を声に出して伝えましょう。悪いニュースを伝えるべき場面です。上司に彼ら自身が犯そうとしている間違いを理解してもらうためです。もし自分の意見を声に出して伝えないことが習慣化したら、平凡なポートフォリオしか生まれないほとんどのデザイナーは自分の意見をはっきりと伝えることはありません。仕事を失ったり、キャリアに傷が付くのを恐れているからです。しかし、そのことが逆にこうした事態を招く原因となります。この間違いに対処する手立てが何もない場合にはデザイナーとしてチームに参加したときに、計画やデザインがすでに決定されていた場合にはどうするべきでしょうか？まずチームの他のメンバーと話し合いを持ちましょう。そして自分の意見をサポートする根拠（例えば、リサーチ、レポート、データなど）を十分に用意した上で、プロジェクトの責任者に意見を伝えましょう。最初は不可能に思えるかもしれませんが、実際には行うことは可能です。小さなステップから始めて、段階を追ってゆっくりと進めてみましょう。あなたはデザイナーとしてプロフェッショナルです。デザインツールを活用すれば、他の人が見逃してしまうようなUXの間違いを見つけることもできると思います。間違いを正すことで、複雑なプロセスを、シンプルで美しいものへと作り変えることができるでしょう。 [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

無限スクロールの課題とは！スクロールが長いサイトのデザイン手法

本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。本記事は、UXデザイナーのNick Babich氏によって投稿されました。縦長で無限にスクロールするWebサイトが最近一般的になってきています。ロングスクロールを使うと、ユーザーはページをスクロールするだけで大量のコンテンツを閲覧することができるようになります。無限スクロールはFacebook・Twitterなどのフィードで見られる、エンドレスなスクロールの手法です。ロングスクロールには次のような利点があります。ユーザーをより引き込むことができます。スクロールを利用することで、目的のために必要な操作を最小限に抑えることができます。「次へ」をクリックする必要がないというメリットによって、ユーザーは次のページに移動する変化を気にすることなくコンテンツに没頭することができます。モバイルデバイスにうまく変換されます。ロングスクロール技術の普及の背景には、モバイル画面がよく使われるようになったということが大きく関わっています。画面が小さいほどスクロールの頻度は増えます。モバイルデバイスのジェスチャーコントロールによって、スクロールは直感的で楽しいものになります。しかし、このやり方には欠点がないわけではありません。デザイナーはコンテンツとナビゲーションにしっかりと注意を払う必要があります。この記事ではロングスクロールにおいてのいくつかの利点、考慮すべき点、それと簡単なヒントについて解説します。どのようなときにロングスクロールを利用するかロングスクロールはすべてのWebサイトに使われるわけではありません。次のような場合にふさわしいでしょう。ストーリーテリング(ストーリーテラーのために線型構造を作り出す) 長い記事や複数のステップによるチュートリアルなど、連続した長いコンテンツ(複数のページに分割するよりもユーザーエクスペリエンスが向上する) コンテンツを別々のパーツに分割できず、全体として提示する必要がある場合(インフォグラフィックなど) 製品の機能・品質・特質を物語形式で見せたいときどのようにロングスクロールを実装するか次の10のルールが、ロングスクロールによいユーザーエクスペリエンスをもたらすのに役立ちます。 1. ユーザーにスクロールを促すページが表示されるとすぐにユーザーはスクロールを開始しますが、サイト上部のコンテンツは依然として重要です。訪問者の最初の印象と品質に関する予想は、ページ上部の内容で決まります。ユーザーがページをスクロールするのは、サイトの上部に表示されているのが期待できるものである場合だけです。なので、最も魅力的なコンテンツを置きましょう。良い導入部・前書きを提示しましょう。(コンテンツの状況をはっきりさせて、ユーザーに「このページがどういうものであるか」ということを分かってもらうことができます) 魅力的な画像を使いましょう。(そのサイトに関連する情報を含む画像は、ユーザーの注意を引きつけます) 2. ナビゲーションオプションを常に保持するロングスクロールのWebサイトを作成する場合、ユーザーは現在の位置とナビゲーションを把握したいと思っていることを忘れないでください。ロングスクロールではナビゲーションに関する問題が起こることがあります。ページをスクロールしたときにナビゲーションバーが表示されなくなった場合、下の方までスクロールしていたのに一番上まで戻らなければいけなくなったりします。こういう問題に対しての解決策として、常に一貫した場所に表示され続けるメニューがあります。モバイルデバイスの場合：モバイル画面は他のデバイスよりも小さいため、ナビゲーションバーが画面の大部分を占めることがあります。ユーザーがコンテンツを見るためにスクロールしているときはナビゲーションバーを隠して、トップに戻るために画面を引き下げたときに表示させるとよいでしょう。ヒント：追加のナビゲーションを使用して、ページ内の各セクションの間をジャンプさせることもできます。以下のアニメーションの場合、ユーザーは自分の進行状況を確認することができると同時に特定のセクションへのショートカットとしてこれを利用することができます。 3.「戻る」ボタンが適切に動作することを確認するロングスクロールのサイトでは、ユーザーが自分のページ上の位置を見失うことがよくあります。ロングスクロールのリストからクリックして該当のページに行ったあと「戻る」ボタンを押したとき、元いた場所でなくページの一番上に戻ってしまうというような形です。そうすると、一度見たコンテンツをまたスクロールしなければいけなくなります。適切な場所に戻れないことで、当然ユーザーは不満を感じるでしょう。フィード内の要素をアクティブにしたあと、元いたところにきちんと戻れるようにしておく必要があります。Flickrの「戻る」ボタンはこのような機能についての良い例です。スクロール位置が記憶されており、「戻る」ボタンを押すと元の場所に戻ることができます。 4. スクロール位置に基づいてURLを変更するロングスクロールの一般的な問題のひとつとして、ページ上の特定の場所へのURLによる共有ができないという点があります。スクロール位置はURLに反映されず、そのページの先頭に繋がります。 URLが現在の位置を捉えないので、ユーザーは画面を簡単に切り替えることができなくなり苛立つことになります。 HTML5からは、history.pushState()関数を使うことで、ページをリロードすることなくブラウザに表示されるURLを変更することが可能になっています。 5. ページ内ジャンプ機能を使用するロングスクロールのもうひとつの共通の問題は、方向感覚がなくなることです。ユーザーは前に見たものを探すときに苦労します。長いチュートリアルなど、コンテンツが複数の重要なセクションに分かれている場合に特に深刻な問題になります。「セクションへジャンプ」オプションをつけることでこの現象を解決することができます。例えばTumblrでは、ページ内で迷子になったときのためにページの下や上にジャンプすることができるようになっています。ページ上のコンテンツはいくつかのはっきりしたブロックに分けられており、大きなインジケーターのドットが画面の左に固定されています。ヒント：「セクションへジャンプ」機能では、インジケーターのドットを使いやすくする必要があります。ドットがクリックやタップがしにくい状態だとユーザーを苛立たせることになります。そのため、ドットの大きさが適切であるかどうか確認してください。 6. コンテンツを読み込むときに、視覚的なフィードバックを表示するヤコブ・ニールセンのユーザビリティ10原則のひとつによると、システム状態の視認性はUIデザインにおいて重要な原理です。ユーザーはシステム上の現在の状態をいつでも知りたいと思っており、Webサイトは閲覧者を不安にさせてはいけません。適切な視覚的フィードバックを通して、ユーザーに今何が起きているのかを伝える必要があります。Webサイトがコンテンツを動的に読み込む場合は、ローディングが行われていることをはっきりと示さなければいけません。進行状況を示すインジケーターを使用して、新しいコンテンツが読み込まれていることを表現しましょう。読み込み時間は2秒～10秒の短い時間であるはずですので、システムが動作していることをループアニメーションで表すことができます。 7. スクロールハイジャックを行わないスクロールハイジャックのWebサイトでは、スクロールが制御され基本的なWebブラウザの機能を無効にされてしまいます。ユーザーがページをコントロールできない上に動作の予測ができなくなってしまうため、スクロールハイジャックは好ましくありません。この問題はAppleのMac Proのページで見ることができます。ユーザーがどれだけ早くスクロールしても、レイアウトはあらかじめ決められた速度で移動します。このページの全てのコンテンツはスクロールに関連付けられているため、訪問者はページを遅い速度でブラウズすることを強いられてしまいます。 8. ページの読み込み時間を最適化するロングスクロールのページでは、読み込みの長さの問題も発生します。これはWebサイトにおいて致命的な問題です。実際に、ユーザーの47％が2秒以内のWebページの読み込みを求めています。ページが3秒以内に読み込まれない場合、57％のユーザーが去ってしまいます。ロングスクロールの読み込み時間の問題は解決することができます。レイジーローディングなどの読み込み技術を利用し、ページの読み込み時間を最適化することで基本的なコンテンツにすぐにアクセスできるようにします。 9. リソース消費を考慮するロングスクロールを使用する場合は、ページが消費するリソース(CPUとメモリ)を常に考慮に入れてください。ページをリロードせずに複数のページの写真・アニメーションGIF・動画をスクロールすると、システムリソースが大幅に浪費される可能性があります。リソースが限られているデバイス(iPhoneなど)では大量のアセットの読み込みによる遅延が起きる可能性があります。そのため、さまざまなデバイスでWebサイトをテストし、該当の場所を通り過ぎたときにはアニメーションや動画を一時停止するなどの手法を利用します。 10. ユーザーの行動を考えるロングスクロールがどう効果的であるかを判断するために、ユーザーがどのように操作しているかを調査してください。アナリティクスデータが有効です。例えば、Googleアナリティクスではページ解析によって何人のユーザーが折りたたまれた部分の下をクリックしているか確認することができます。そのデータに応じてデザインを調整することが可能です。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中ECサイトでのロングスクロール ECサイトではロングスクロールは頻繁に使用されます。ユーザーは製品のリストや検索結果を、中断することなくスクロールして閲覧し続けることができます。ただしユーザー満足度を向上させるためには、いくつかの一般的な問題に対処する必要があります。ナビゲーションとフィルタをスティッキーにフィルタリングが適切に行われていると、ユーザーは何千ものWebサイト内の選択肢をニーズに合った数少ない項目に絞り込むことができます。ナビゲーションメニューとフィルタオプションを持続的に表示することで、ユーザーがコンテンツをうまく管理することができます。それぞれのアイテムをブックマークできるようにする後々参照できるように気になったアイテムを簡単にブックマークしておける機能は、ユーザーにとって強力なツールです。条件に一致したアイテムの数を表示する利用できるアイテムの数を表示することで、ユーザーはフィルタリングによる結果内容のスクロールにかかる時間を判断することができます。フッターにアクセスできるようにするユーザーはフッターの概念を理解しており、そこにWebサイトの大事な情報があると思っています。しかし、ロングスクロールではフッターの閲覧が困難なことがあります。ページの下に行くと新しいアイテムが継続的に読み込まれ、フッターは見えないところに押し込まれます。この問題は深刻なもののように思われますが、「もっと見る」ボタンを利用することで解決できます。この手法では、コンテンツはオンデマンドで読み込まれることになります。新しいコンテンツは、ユーザーが「もっと見る」ボタンをクリックするまでは自動でロードされません。これによってフッターに簡単にアクセスできるようになります。ロングスクロールと視差効果インタラクションデザインはロングスクロールを使ったWebサイトの基礎であり、アニメーションはその中でも欠かせない部分です。 Web上でのユーザーの注目のスパンが約8秒であることを考えると、楽しいスクロールは注意を引きつける時間を引き伸ばすことができると言えます。閲覧者を喜ばせるアニメーションのひとつに視差効果があります。視差スクロールでは背景画像は手前のコンテンツよりもゆっくりと動き、深みと没頭の錯覚を作り出します。この効果によって画面の立体感が増します。パララックススクロールをどんなときに使うか視差は大きな印象を与え、訪問者がもっとスクロールしたくなるなる面白い視覚効果です。ユーザーをあっと言わせたいときに便利な手法になります。パララックススクロールは、ガイド付きの物語形式で効果を発揮します。ストーリーをスムーズに直線的に伝えたい場合、視差効果とロングスクロールを組み合わせることによってユーザーは閲覧を実体験のように夢中になって楽しむことができます。 The Boatでは、画面がスクロールされると次のコンテンツのパスを作成しながらアニメーションによって閲覧者を次の場面に導きます。スクロールの動作はより楽しいものになり、ユーザーは「次はどうなるんだろう？」とワクワクするでしょう。パララックススクロールを使うべきではないケース多くのユーザーがはっきりしたタスク(製品の購入など)を目的としている場合は、パララックススクロールは使用しないでください。もし製品を購入するたびに視差効果を見せられるAmazonがあったら、どれだけフラストレーションがたまるか想像してみましょう。パララックスとページパフォーマンス視差効果を使用するWebサイトの多くは、スクロールのパフォーマンスに苦しんでいます。iPhoneのような高画素のデバイスでは特に害のあることです。すべてのパフォーマンスの問題を完全に解決することはできませんが、簡単な手法でスクロールのパフォーマンスを向上させることができます。ブラウザのアニメーションにはtranslate3d・scale・rotation・opacityといった手軽なプロパティのみを使用してください。大量の画像をアニメートしたり、劇的にサイズを変更させたりしてはいけません。ブラウザに画像(特に巨大なもの)をリサイズさせると、コストがかかる可能性があります。一度にたくさんのものをアニメートしないようにしましょう。パララックスとアクセシビリティ前庭機能障害を持つユーザーが、そのWebサイトを使用したとき視覚的にどのようになるかを考慮しましょう。アニメーションによって目まいが起きる可能性があります。 Val Headはより安全なアニメーションをデザインする方法として、もしWebサイトに大量の動きがある場合はモーションをオフにするオプションをつけることを推奨しています。ボタンあるいはトグルスイッチを使用して、Webサイト上のアニメーションを減らしたり消したりできるようにします。このアイデアの研究のために、Nat TarnoffはどのWebサイトでも使用できるトグルスイッチのプロトタイプを開発しました。最後にロングスクロールによって、没入感のあるブラウジングを生み出すことができます。ユーザーが直感的なUIが好きであれば、スクロールの長さは気にならないでしょう。閲覧者の目的が達成され、かつ便利だと感じさせるものにしてください。また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを開発することが可能です。独学に限界を感じている場合はご検討ください。

Webデザイン

デザイナー必見！クオリティの高いUIを作るために必要な7つの要素とは

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UX Phoenixのインテグレーションマネジャー、エンジニアであるSamella Garcia氏によって投稿されました。ユーザーインターフェース（UI）のデザインは最近のホットな話題ですが、それには理由があります。デジタルエクスペリエンスが私たちの生活の大部分を占めるようになり、クオリティの高いユーザーエクスペリエンス（UX）の価値が今まで以上に高まっているのです。モバイル技術、デジタル技術、 IoTの今後の目覚ましい成長を考慮すれば、UIのクオリティは現時点で重要であるだけではなく、将来的にはさらに重要になるでしょう。 Webサイトから、車内の液晶ディスプレイ、部屋のサーモスタットに至るまで、私たちの毎日は数多くのUIで溢れています。ユーザーはデジタルディスプレイの体験を増やすにつれて、数年前よりも質の高い体験を期待するようになりました。そのため、企業にとって顧客への良いUXを慎重に検討することが不可欠です。この記事では、クオリティの高いUIを作るために大事な7つの要素をご紹介します。 1. シンプルさ優れたインターフェースは目立つものではありません。派手な装飾や不必要なデザイン要素から構成されてはいません。質の高いUIは、合理的でシンプルなデザイン要素から構成されているのです。インターフェースをデザインするときには、機能やコンテンツを追加する前に、「ユーザーがタスクを実行するときに、本当に必要なものであるかどうか？」を考えてください。インターフェースの構成要素は、ユーザーにとって必要最小限なものにします。自己満足のためだけに要素を加えるのではなく、UXのクオリティに意識を集中しましょう。「シンプルさ」の原則を見事に実践している例が、MAAEMOのWebサイトです。MAAEMOはノルウェーのレストランで、Webサイトのトップページに最初に表示されるのは、予約のオプション（左上のBook a table）のみです。すっきりとしたインターフェースにするために、その他のオプションは、右上のハンバーガーメニュー（三本線が平行に並んだボタン）に隠されているのです。どこから予約したらいいかを探すために、複雑なナビゲーションによって無駄な時間を取られることもありません。 2. 明瞭さ明瞭さは、Webサイトやアプリにおいて最も重要なことの1つです。UIが存在する唯一の目的は、ユーザーとシステムのやり取りを促進することです。ユーザーはインターフェースの使い方がわからない場合、不満を感じて利用をやめるかもしれません。明瞭さを高めるには、ボタン要素やアクションボタンに、わかりやすくて正確なラベルを付けます。また、メッセージング（データの通信）もシンプルにする必要があります。ラベル、ナビゲーション、コンテンツを読みやすいものにするほど、ユーザーにとって何をすべきか明らかになります。また、最初の原則は「シンプルさ」であったことを思い出してください。長い説明でごちゃごちゃと散らかすのは避けましょう。ユーザーにとって読む価値のある説明でないとしたら、UXの邪魔になるだけです。2語の代わりに1語でも説明可能なら、そうする方が良いでしょう。ラベルとメッセージを簡潔にすることによって、見やすいデザインにして、ユーザーの読む時間を短縮しましょう。テキストを簡潔かつ正確なものにできれば、優れたUXを生み出す効果があります。努力を要するかもしれませんがその価値はあります。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中3. 一貫性一貫性のあるインターフェースによって、UXを高める使用パターンを実現できます。ユーザーが求めているのは、製品の使い方を一度理解したら、他の画面上でも同じように操作できるような体験です。そのためにはインターフェース全体において言語、レイアウト、デザインを統一します。そうすることで、ユーザーが仕組みを理解するのを助け、ユーザーの効率性を向上し、UXを高める効果があります。 4. 親しみやすさ UXデザインの目標の1つは、ユーザーにとって直感的なインターフェースを作ることです。UIが「直感的」であるとは、ユーザーにとって自然に理解できることを意味します。これを実現するには、設計において「親しみやすさ」を活用することが重要です。 UIは、ユーザーがその使い方をすでに理解していれば、親しみやすいと感じられます。ユーザーは何をするべきかを知っているため、使い方を考える必要がないのです。ユーザーにとってシステムのやり取りが容易になるように、「親しみやすさ」を活用したデザインにできる部分がないか検討しましょう。例として、近年多くのアプリにハンバーガーメニュー（三本線が平行に並んだボタン）が使われています。ユーザーはこのアイコンを見ればそれがメニューであるとすぐにわかります。メニューを探してその使い方を考えるのに時間がかかることもありません。例として、Born ShoesのWebサイトを見てみましょう。ユーザーにとって使いやすいサイトにするために、ユーザーにとって親しみやすいアイコンが、親しみやすい位置に配置されています。 5. ビジュアルヒエラルキー（視覚的階層構造）クオリティの高いUIを実現するためには重要でありながら忘れられがちなのが、重要度のメリハリをつけたインターフェースをデザインすることです。すべてが同じ重要度を持っているように見えるデザインは、情報の過負荷が起きているような印象になり、UXを損なうことになります。サイズ、色、要素の配置のコントラストをはっきりと強調して、ユーザーが理解しやすいインターフェースをデザインしましょう。ビジュアルヒエラルキーを上手く設計できれば、複雑さを抑制し、ユーザーのタスク実行も分かりやすくなるでしょう。例としてBudnitz BicyclesのWebサイトは、色のコントラストによって、ユーザーの視線を特定のセクションに集められるようなビジュアルヒエラルキーを生み出しています。右上の青い購入ボタン（Shop）が目立っていることでユーザーを上手く誘導できるでしょう。 6. 効率性 UIの目的は、ユーザーを目的地に導き、ユーザーの望むタスクを実行することです。クオリティの高いUIは、ユーザーが速く簡単にタスクを完了することを可能とします。言い換えると、稼働の効率性が高いのです。インターフェースの効率性を向上させる最良の方法の1つは、タスク分析を行うことです。タスク分析を実行するには、ユーザーの典型的な行動とタスクを予測して、それらをユーザーにとって最も速くて簡単になるようなプロセスでまとめます。必要な機能とユーザーが達成しようとする目標について、慎重に検討してください。ただナビゲーションをリストで並べるだけではなくて、ユーザーが何をしたいと思うかを予測して、ユーザーの行動がより容易になるようなデザインを実現しましょう。 7. レスポンシブネスレスポンシブネス（タスクを効率的に処理する能力）を実現するには、いくつかの方法があります。第一に、レスポンシブなインターフェースには速さが求められます。インターフェースとそれを支えるシステムが速く動作するように設計しましょう。たとえば、ユーザーはWebサイトの読み込みに時間がかかる場合には、すぐに不満を感じる傾向にあります。実際、近年ではWebサイトの読み込みに3秒もかかれば、ユーザーはブラウザの「戻る」の矢印ボタンをクリックするので、徐々にユーザーを失うことになります。Kissmetricsの調べによると、Webサイトの読み込みに3秒以上かかる場合にはユーザーの約40%がサイトを離れ、時間がかかるにつれてより多くのユーザーが「戻る」の矢印ボタンを押すことが明らかになっています。読み込みと動作のスピードが速いモバイルアプリとWebサイトが、UXを高めるのです。また、レスポンシブなUIには、ユーザーへの応答（フィードバック）も求められます。ユーザーの操作が受理されたことや進捗状況を、ユーザーに知らせる必要があるのです。たとえば、「ボタンが正常に押されました」とユーザーに表示したり、ページの読み込みが滞りなく進行していることを知らせるために進捗状況をプログレスバーで表示すると良いでしょう。こうした応答を設計できれば、ユーザー体験の質を高め、エラーを減らすこともできます。 TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。今後デザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。

Webデザイン

事例から学ぶ！HubSpotがサイト改善に成功したUX戦略とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UXPinのコンテンツ・ストラテジストであるJerry Cao氏によって投稿されました。 UXデザイナーのAustin Knight氏率いるチームが、Hubspotのサイトをリニューアルしたプロジェクトについて書かれています。 HubSpot（ハブスポット）のサイトは、世界の90カ国以上にわたり1万8000以上の企業にサービスを提供し、月間400万人以上のユーザーがアクセスしています。 HubSpotにとって、サイトこそ経営の要となるものでした。HubSpotが非公開会社から、多様な製品を提供する世界規模の公開会社へと発展するには、サイトのリニューアルが不可欠でした。サイトリニューアルのプロジェクトは、プロジェクト開始から一ヵ月半後に開かれる、HubSpotの年次イベント「INBOUND」で新しい製品ラインがリリースされるまでに、急いで完成させる必要がありました。 UXデザイナーのAustin Knight氏がこのプロジェクトを率いて、3つのチーム（ビジュアルデザイナー、デベロッパー、マーケティングマネジャー）が加わりました。またKnight氏はこの他に、製品のポジショニング戦略（product positioning）、コピーライティング、技術開発を担当する外部の6つのチームとも協力しました。この記事では、UXデザイナーが、過密なスケジュールのプロジェクトにおいて、リサーチ、共同作業、ユーザーに焦点を当てた「Lean UX」という手法を応用しながら、どのように良い結果を生み出せたのかを事例として紹介します。画像：HubSpotのリニューアルされたサイト次の3つのステップは、実際のプロジェクトをベースとしてUXPinが作成したベストプラクティスです。ステップ1：入念なリサーチ、継続的なテスト HubSpotのプロジェクトは、まず最初に、Knight氏が「Lean UX」という手法をチームに紹介することから始まりました。「Lean UX」とはJeff Gothelf氏によって提唱されている手法で、継続的な「学習ループ」（構築 – 評価 – 学習のループ）を用いてデザインプロセスを軽量化することによって、ビジネス戦略を整えるためのものです。このプロジェクトでは、ステップ1は、分析とユーザー調査を行い、手早く予測の検証を行うことでした。分析＆ヒートマップ多くのケースにおいては、デザインチームはマーケティング部門にデータ分析を依頼するのが一般的ですが、今回のプロジェクトでは、Knight氏は自らデータ分析を始めました。HubSpot、Googleアナリティクス、Mixpanelから膨大なデータにアクセスできました。主な課題は、これらの膨大なデータを分析して、意味のあるパターンを見つけ出すことでした。 Knight氏はまず、多くのユーザーの行動を分析した結果、次のような傾向が見られることに気づきました。サイト上でPRICING（価格表）に最初にアクセスする（ユーザーは製品のメリットよりも価格を優先していることがわかります。）サイト上でFAQ（問い合わせ）に最初にアクセスする（ユーザーの疑問が解決されていないことがわかります。）サイト上でサイト内検索を最初に利用する（主に製品について不明な点を検索しているので、ユーザーが必要な情報をサイトで得られていないことがわかります。）この分析から、HubSpotのサイトは完成度は高いものの、重要な情報が欠けているために、コンバージョン率が低下していることが判明したのです。 Knight氏はまた、2万5000人のユーザーを対象に、ヒートマップとスクロールマップによる分析を行い、合計46万7308のデータを集めました。数年分のデータを集めることができたため、問題（例として、ユーザーの25%しかサイトのページをスクロールしていないことなど）が生じた原因を理解するのに役立ちました。セッションの記録最後に、セッションの記録によって、定量分析と定性分析を行いました。セッションの記録は、生きた、匿名性のある、未だ分析されていないデータです。実際のユーザーの行動がそのまま反映されたデータなので、分析結果も信頼できます。セッションの記録は、デザインプロジェクト全体を通して行い、ユーザーへのインタビューやユーザビリティテストの結果を検証するのに役立てます。定性分析定量分析は何（What）を分析するのには役立ちますが、なぜ（Why）を知ることはできません。ユーザーエクスペリエンスに期待されることや、行動に隠された動機を知るためには、デザイナーはユーザーと利害関係者にインタビューを行う必要があります。 1. ユーザーへのインタビュー HubSpotのサイトの利用者の10%は、ログインや情報検索をしているユーザ―であるため、サイトのリニューアルにあたっては、これらの特定のグループを無視することはできません。データの分析結果を検証するためだけではなく、新しいサイトでどのようなコンテンツを提供するべきかのアイデアのヒントを得るために、Knight氏はユーザーへのインタビューを行いました。ユーザーへのインタビューのプロセスを徹底して考えたことで、的を絞って意見を集めることができました。 2. 利害関係者へのインタビューこのプロジェクトによってHubSpotのサイトの外観が根本的に変わることになるため、Knight氏はまた、HubSpotの会社の取締役、製品、マーケティング、セールス、カスタマーサポートのチームにもインタビューを行いました。次にKnight氏は、ユーザーへのインタビューから得られた意見、カスタマーサポートの記録、HubSpotのサイトのリニューアルの不要な原案、Twitterのツイート、電子メール、さらにはKnight氏自身の講演イベントでの参加者との会話などの結果を総合的に勘案にしました。「プロジェクトで取り組んだのは、『データを参考とした、人間を中心に考えたデザイン』だ。」とKnight氏は述べています。また、「デザイナーは可能なときにはいつでも、自分自身でデータを解釈して、デザインに関する決定を行う必要があります。近年、定量的なデータと定性的なデータを活用することで、デザイナーたちがますます力を発揮できるようになりました。一般的に、単なる意見や誰かの「好み」に基づいて決定することもなくなり、それ以上のことが可能になっているのです。今日のデザイナーが真に力を発揮するには、明示的なデータと黙示的なデータの両方を活用して、デザインのソリューションを導くことが大切です。」とも述べています。多変量テストによって、小さな変更を試す最後に、Knight氏はリサーチの結果を基にして、多変量テスト（Multivariate Testing：レイアウトデザインの候補の中から、最適なデザインを選ぶための手法）を行うために、デザインにいくつか変更を追加しました。多変量テストは、特定のデザイン要素を決定、却下することで、サイト全体のリニューアルに進む前に、チーム全体として戦略的な決定を行うのに役立ちます。ステップ2：実際のデザインを設計する Knight氏は、「全体の設計→テスト→学習→イテレーション→最適なソリューションの選択」という構造化されたプロセスの手法を用いました。簡単なプロトタイピング多変量テストによって、レイアウトのデザイン候補をチームで3つに絞り、さらにプロトタイプを作成しました。主な方向性が定まったところで、Knight氏は最初の段階でイテレーションを繰り返して行い、次に外観のデザインに取り組むという手法を取りました。実際には、ユーザー望む方向性や意見を反映することに多くの時間を費やしたことを考えれば、プロトタイプでも最終的な完成製品に近いものでした。 Knight氏は次のように述べています。「紙のプロトタイプ、ワイヤーフレーム、外観のデザインの段階に至るまで、テストはユーザーと共に行っています。」「プロジェクトのすべての段階において、ユーザーの声が反映されています。デザイナーとしては、ユーザーの声は耳に痛いこともあるかもしれません。ユーザーの意見にすべて従うのではなくて、方向性を見出すために活用するのがいいと思います。」モックアップ外観のデザインの段階において、Knight氏は特にビジュアルデザイナーと一緒に仕事を行いました。また、Knight氏はデベロッパーとは、プロジェクトの各段階ごとにデザインについてディスカッションを行っていたのも特筆すべきことです。開発側は、プロトタイプを作成する段階で集中的にコーディングを行う一方、全体を通してイテレーションを行うことで、チーム全体としてプロジェクトの進行段階が揃うようにしています。外観のデザインこうしてチームは、現代的で、美しく、鮮やかな色、HD画質の画像、型にはまらないグリッドデザインを活かしたサイトが完成しました。このグリッドデザインは、リニューアルしたサイトには「生き生きとしたデザイン」が必要だという観点から生まれたものです。グリッドデザインをベースとして、多くのデバイスに対応したマルチプラットフォームで、コンテンツの変更や削除も容易です。また重要なコンテンツは、ユーザーや利害関係者の提案に応じて、アップデートしやすくなっています。画像処理画像の枠のデザインも、型にはまらないグリッドデザインです。プロジェクトのチームは、まずサイトのレイアウトに完璧に収まる画像を選びました。マウスをホバーしていない状態（off-hover）では焦点のぼやけた画像の一部が表示され、マウスをホバーさせた状態（on-hover）では画像が右のグリッドの領域まで広がり、画像全体と追加の情報が表示されるような設計になっています。この画像処理によって、識別しやすいデザイン要素が生まれ、ユーザーのアクセスを大幅に増加させるインタラクションが実現しました。またチームは、ユーザーへのインタビューから、個々のユーザー向けに動的なコンテンツを提供することが、サイトリニューアルの成功に大切な要因であるとわかっていたので、これも開発しました。互換性とWebアクセシビリティ最後に、HubSpotのサイトのユーザーの16%はモバイル端末からアクセスしていること、アメリカの人口の19%はWebアクセシビリティのニーズがあることを考えると、コーディング作業に加えて、互換性とWebアクセシビリティを考慮するのも重要なことでした。プロジェクトの各作業の段階は同時並行で進めていたので、モバイル端末向け、デスクトップ端末向けの各サイト設計も同時並行で進めました。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中ステップ3：コーディングとテスト次のステップでは、HubSpot社のCMSを利用して、きれいなコードを設計するのが目標となりました。すべてのデバイスにおいてコードの互換性が保たれるように、Knight氏は、ビジュアルデザイナー、エンジニアと共に、QAテスト（品質保証テスト）を定期的に実施しました。各種デバイスや、Chrome、Safari、Firefox、Internet Explorer、Edge、Opera、Yandexなど各種ブラウザの多数のバージョンの解像度ごとに、Webサイトが正しく機能するかチェックするテストも行いました。さらに、BrowserStack（多数のブラウザ環境下における作動を再現するためのエミュレータ）を使い、実際のデバイス環境下におけるWebサイトの作動の再現も行いました。設計を改良するときには、ユーザーのプラットフォームごとの割合はすでに把握できていたため、利用者数やクリティカリティ（Criticality：システムエラーなどにおいて主要な要因を分析するための指標）を考えながら、優先順位を決めて効率的に進めることができました。ステップ4：テストの継続とイテレーションリニューアルしたHubSpotのWebサイトは、予定通り、年次イベント「INBOUND」の舞台において、同社の共同設立者たちによって、Webサイトのサポート対象である新製品や新機能の紹介とともに初公開されました。新製品のリリースは、大成功を収めました。しかし、チームとしては引き続き「Lean UX」の手法をプロジェクトで実践するため、栄光に浸っている暇はありませんでした。早速、チームはGoogleアナリティクスとHubSpotのサイトからデータを集計して、次の指標に注意を向けました。コンバージョン率（Conversion rate：目標の達成率）送信率（Submission rate：ユーザーがフォームにデータ入力して送信する率）離脱率（Drop-off rate）目標達成数（Goal completion）ナビゲーションサマリーにおける、参照元ページと移動先ページ検索クエリ（Search Queries）チームは、直帰率（Bounce rate：ユーザーが1ページだけ見てサイトを去る率）、ページ滞在時間など重要業績評価指標（KPI：Key Performance Indicators）として役に立つ指標のみを分析しました。さらにデザインの改良を重ねるために、チームはヒートマップを使って2万5000という膨大なセッションを分析し、追加のユーザビリティテストも行いました。結果：データが示すUXの成功今回のプロジェクトは、Knight氏とチームが「Lean UX」の手法を全て取り入れた初の試みでしたが、データ分析と設計を上手く組み合わせて、迅速にビジネスの成果につなげることができました。またリニューアルしたのHubSpotのWebサイトも、今回のプロジェクトのプロセスと同じくらい、柔軟性の高い設計に仕上がったので、今後のイテレーションも容易に行うことができると思います。デザインのリニューアルや、ユーザーやビジネス上のニーズに応じた修正にも、幅広く対応できるでしょう。秘密保持契約（NDA）のためすべては公開できませんが、Webサイト公開後のビジネス上の成果を、次にいくつかご紹介します。ユーザーのコールトゥアクション（CTA：Call To Action）への反応率の増加ユーザーのナビゲーション要素への反応率の増加製品のトライアル版契約数の増加同社の製品チームにおけるストレスの緩和今では、HubSpot社は「Lean UX」の手法を絶賛する支持者となっています。 Knight氏は、「私たちのチームは、プロジェクトの共同作業を効率的に進めることができた。」、「すべてのプロセスにユーザーの声を反映した結果、チームが誇りに思えるような、インパクトのあるWebサイトを構築できた。」と述べています。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

Webデザイン

Airbnbを事例に学ぶ！失敗しないWebサイトの作り方とは

本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はIndra Sofian氏によって投稿されました。 Webサイトの優れたデザインというと何を思い浮かべますか？私にとってはAirbnb（エアビーアンドビー）です。トップページに人目を引く動画があったり、カラーパレットの構成が良いだけでなく、優れたユーザー体験を考えて設計されているように思います。では、優れたユーザー体験の定義とは何でしょうか？ 1つの条件は、ナビゲーションや検索機能が優れていることです。ユーザーの求める情報を提供することが、ビジネスで使われるWebサイトの主な存在理由だからです。もしユーザーが必要な情報を得られない（または情報がわかりにくい）としたら、そのサイトは失敗作です。ユーザーが必要なときに必要な情報を得られるように、レイアウトとコンテンツを上手く組み合わせましょう。他にも考えるべき事は多くあり、失敗も数多く経験するかもしれません。最初は急がず、まず土台となるコンテンツから作り始めます。ワイヤーフレームから始めて、次にイテレーション（反復型の短期の開発サイクル）を実践し、最後にインタラクティブなモックアップを作成します。なぜワイヤーフレームを作るのか？ワイヤーフレームを作るメリットは、デザインのアイデアを形にしたり、イテレーション（反復型の短期の開発サイクル）を行うのに役立つことです。ワイヤーフレームはサイト完成時のコードを備えたものではなく、静的な試作デザインです。さらに動作性もテストできるインタラクティブなワイヤーフレームであれば、完璧です。ワイヤーフレームを作るときには、重要なデザイン要素を改良するために、失敗や試行錯誤があってもいいでしょう。またWebサイトにはそれぞれ目的があるものですが、ワイヤーフレームを使うことで、目的に最も合ったフレームワーク、コンテンツ、デザイン要素を作成できます。たとえば、Airbnbは旅行サイトでは、ユーザーに良い旅先と良いホスト先の情報を提供することが目的です。ヘッダーからリスト構造に至るまで、この目的に最適なデザインが考えられています。また、デザインの要はコンテンツです。ユーザーがWebサイトに訪れるのは、美しいデザインを見るためというよりも、情報を得るためです。 UIデザインの不変の原則ワイヤーフレームやモックアップを使った練習に入る前に、もう一度Airbnbの優れた点を考えてみましょう。 1.質の高い画像で注目を集める多くの人は旅行しようと考えるとき、おそらく詳細な計画やレンタカーの情報よりも、視覚的なイメージが先に思い浮かぶはずです。こうした傾向を踏まえて、視覚的なイメージを活用しているのがAirbnbです。ホスト先のリストなどすべてのコンテンツにおいて、画像がテキストより優先して使われています。レイアウトの大半は画像で占められていて、画像の隣に太文字の使われた要素やボタンを置いて、ユーザーがクリックしやすいようになっています。ヘッダーには、Airbnbの利用者が世界の旅先で異文化や多様な環境を体験している動画を使っています。これこそまさにユーザーが旅行サイトで見たいと思っているものです！フォームに文字を入力してホスト先の予約をするだけではなく、実際の旅行を疑似体験できるのです。 2.コンテンツをシンプルにする旅行の計画は、複雑で煩わしいものになりがちです。旅行先選び、行く場所の下調べ、滞在期間、ドライブの経路など考えるべきことが多くなります。 Airbnbのサイト上ではこうした情報を整理して、最も関連性の高い情報に的を絞って提供しているのです。データ入力用フォームはシンプルで、ホストの使うボタンも見つけやすいです。また、リスト構造もブラウジングが容易になるすっきりした設計です。ページには要素がリスト構造で並べられ、両端には余白が設けられているだけで、広告など余計な情報もなくすっきりしています。背景とフォントのコントラストが高く、コンテンツの文章もシンプルな語り口です。トップページで冗長な文章が続くこともなく、各コンテンツはシンプルな画像とその上の太文字のテキストから構成されています。 3.最も重要な機能を強調する Webサイトは、最もよく使われる機能へのアクセスが、最も容易になるようにデザインするべきです。ユーザーがサイトを訪問する理由を考えましょう。たとえばAirbnbでは、ユーザーはホスト先を探すためにサイトを訪問しています。そのため、次のようにCTA（コールトゥアクション）が上手く使われています。トップページの中央には、ユーザーにホスト先を案内するためのボタンが、CTAとして配置されています。また検索バーのボタン（「Search」）には、よく目立つピンクの色が使われています。検索バーの背景に、透過性のある黒い色を置くことで、検索バーをCTAとして一層目立たせています。ヘッダー中央に動画再生ボタンが配置されていて、ユーザーがクリックすると、旅行体験の動画が再生されます。また、Airbnbでは、ホストになることに興味のあるユーザー向けにも、「ホストになる」というボタンやホスト収入を示したブロック要素によって、わかりやすく情報を提供しています。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中AirbnbのWebサイトを作るためのステップではAirbnbのWebサイトを作ってみましょう。最初はワイヤーフレームです。ワイヤーフレームを作るメリットは、レイアウトに必要な要素を組み立て、全体としてどのように機能するかを試せることです。 Airbnbのサイトをまず静的なワイヤーフレームから組み立ててみましょう。 1.基本のレイアウト私の方法では、まずレイアウトの骨組みを作ることから始めます。「コンテンツワイヤーフレーム」として知られるこれらのボックスは、サイトのページ上の各要素を表しています。このステップでは、コンテンツ、視覚的な階層構造を主に考えましょう。これらのボックスを使って、ナビゲーションバー、ヘッダーなど各要素の配置を試してみます。この骨組みを作っておくことで、実際のデザインを詳細まで考えなくても、全体のレイアウトを考えることができます。新規のデザインを作成するときには、ボックス型のワイヤーフレーム同士を矢印でつないで関係性を示し、コンテンツの全体構造を把握するのもいいでしょう。既存のデザインに修正を加えるだけであれば、基本のデザインは完成しているので、最初からモックアップ作成のプロセスに進んでもいいでしょう。 2.ヘッドライン（見出し）とヘッダー見出しとヘッダーは、重要な要素です。見出しはユーザーの視線を瞬時に集められるような、はっきりとした表現力のあるデザインがいいでしょう。たとえば、Airbnbでは「Live There（暮らしてみよう）」という見出しを使っています。Airbnbは旅行先のホストを紹介するサービスなので、「travel there（旅してみよう）」や「visit there（訪れてみよう）」ではなく、このキャッチコピーが合っているのです。次に小見出しとして、「現地のホストのお家に宿泊して、191か国以上で暮らすように旅しよう」を作ります。ユーザーに、Airbnbの体験やどこからでも使える利便性を伝えられます。ヘッダー画像は、ユーザーが最初に目にするものです。ヘッドラインとのバランスが悪かったり、気を散らすような画像だとユーザーを失いかねません。ページにふさわしいヘッダー画像を使いましょう。 Airbnbでは、ユーザーが世界中で魅力的な旅をしている動画をヘッダーに使っています。 3.CTA（コールトゥアクション） CTA（コールトゥアクション）は、ユーザーを必要な動作へ上手く誘導できるデザインにすべきです。使う文言は、「続きの内容はコチラ」のような曖昧なものではなく、明快にすべきです。デザインとしては、緊急性が高いことを上手く伝えられるものがいいでしょう。 AirbnbのCTAは明快かつ詳細です。検索バーでは、「場所」「日時」「宿泊人数」などの要素、ピンク色の「探す」という要素を使って、わかりやすく構成されています。 CTAをヘッドラインの下に配置するのはよくあるレイアウトですが、Airbnbのサイトではこれが特別な効果を発揮しています。つまり、ただ目立つだけではなく、ユーザーはヘッダーの魅力的な動画を見ながら、検索バーで旅行のプランを検討できるのです。 4.コンテンツのブロック次にページのコンテンツを作ります。ここでは実験的に一部を作ります。 Webサイトの作成で、ページにヘッダー以外の要素も入れるときには、一番上のコンテンツに注目を集めるようなデザインにします。このブロックは、ほとんどヘッダーと同一化した要素と見なせます。 Airbnbのユーザーには、「旅行者」と「ホスト」の2タイプいます。ここで作成したブロックは、「ホスト」向けのものです。ブロック内に小さなCTAの要素（see what you can earn：「収入を見る」）を配置しています。 5.ナビゲーションバーナビゲーションバーは小さいながら、ユーザーの案内役として非常に役立ちます。ユーザーがサイト上で探している情報を見つけられない場合にも、最初に使うのはおそらくナビゲーションバーです。ナビゲーションバーに使うアイコンの数は限定しましょう。ナビゲーションバーのスペースは限られているので、あまり多くのアイコンを詰め込みすぎると、ユーザーを疲れさせる原因となります。それに見た目にもごちゃごちゃした感じになります。ユーザーを案内するのに必要十分なアイテムだけでいいのです。たとえばAirbnbでは、4つのアイコンに限定しています。「ホストになる」は、ユーザーの約半数に向けて作られたものです。「メッセージ」では、ユーザーに重要な通知を送ります。「ヘルプ」は総合案内です。「アカウント」はユーザーの情報管理のためのものです。 6.インタラクティブな設計にするインタラクティビティ（動作性）は、ユーザーエクスペリエンスの要です。インタラクティブな設計にするには様々な方法がありますが、ここではページ上で最も重要な、CTAの要素に動作性を加えてみます。モックアップの作成では、すべての要素にインタラクティビティを加える必要はありません。完成したサイトをイメージするのに十分な程度で構いません。また、少なくとも5人のユーザーに試用してもらいましょう。ドロップダウンメニューを追加して、ページ上にポップアップウィンドウで表示されるようにして、ユーザーがボタンをクリックしたり、マウスのカーソルをボタンから移動した時に消えるようにしてみました。また、マウスが検索ボタンの上にホバーした時に、ボタンの色が変わるようにしています。このような小さな工夫を加えることで、ユーザーにボタンに気づいてもらいやすくなります。上の画像は、検索バーの「目的地」にドロップダウンメニューを加えてみたものです。次のステップへこれですべてです！今回は、コンテンツのワイヤーフレームを作成し、イテレーションを実践し、動作性を備えたモックアップへと作り変えるステップを紹介しました。 Webサイトを作るときの、ワイヤーフレームとモックアップの作成スキルは、きっと他の場面でも応用できます。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

Webデザイン

要件定義書の作成手順を学ぶ！アイデアを形にするプロセスとは

本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。本記事は、モバイルアプリ開発の会社のCEO Eduard Khorkov氏によって投稿されました。なぜ要件定義書を書くのでしょうか。仮にあなたがモバイルアプリをプロデュースしたいと思っていながら、プログラミングスキルがないとします。そのためあなたは、アプリを作成することができる開発者を見つけ、その人にアイデアを説明します。最初に開発者にアプリを見せてもらったとき、意外にもあなたが望んでいたものと違うのに気付きます。なぜでしょうか。それはアイデアを説明するときに充分な説明がされていなかったからです。このような事態を防ぐため、アイデアを形式化してはっきりした姿にする必要があります。そのための一番の方法は要件定義書を書き、開発者と共有することです。要件定義書は開発プロセスの結果をあなたがどのように見ているかを示し、それによってあなたと開発者は同じ認識を持つことができます。この記事では要件定義書を作成するための最も一般的な方法を説明します。モバイルアプリケーションの要件定義書を書くための基本的な手順と、良い要件定義書はどのようなものなのかを学びます。どのように要件定義書作成に着手するか入念に作成された要件定義書は、不明確な点を排除し、開発者が何をするべきかをはっきりとさせます。さらにその文書は作業の範囲を明確にし、開発者は必要な時間と労力を見積もることができます。どのように文書を作成するのでしょうか。以下は、要件定義書を作成する際に守るTIPSです。 1. 総括的なアイデアを説明するアイデアに関する適切な説明は1つの文でまとめることができます。その文章にはアプリケーションの中心となる機能が書かれており、読んだ人はアプリケーションの内容をすぐに理解することができます。例えば、カロリー・トラッキングを行うモバイルアプリケーションの場合なら「カロリー消費量を統計分析して体重を気にする人を支援するアプリ」という風にすることができます。 2. 順番を考えるナビゲーションの基本パターンを学び、そのアプリケーションについてユーザーが実際に体験する順番通りに説明します。アイデアの要素が完成したら、オンボーディング画面やユーザー登録などアプリケーションの最初の手順を説明します。続いてアプリケーションのホーム画面などの部分に進みます。文書を読んだ人は、実際にユーザーがどのように操作を進めるかということを理解することができます。プライバシーポリシーや「パスワードを忘れたとき」などの基本的な機能や画面のことを忘れないようにしましょう。 3. 既存のアプリケーションを調査する App StoreとGoogle Playの既存アプリケーションを調べて、アプリの説明の際に参照してください。アプリAとアプリBの「パスワードを忘れたとき」機能が好きな場合は、それを文書内で説明します。 4. 細かい部分は省くアプリケーションの機能に焦点を合わせ、ボタンの色などの詳細は省略します。ほとんどのユーザーは細かい所を気にしません。ユーザーにとって関心があるのはそのアプリケーションが問題を解決するのに役立つかどうかです。要件文書を作成するときは、ユーザーがアプリで何ができるかということに集中して書いてください。 5. 機能の優先順位を決めるどの機能が他より重要かを伝えることで開発者は最初に何に焦点を当てるべきかを知ることができます。「Must（必須）」、「Should（推奨）」・「Could（可能）」・「Won’t（先送り）」のMoSCoWメソッドに従います。 6. テキストをワイヤーフレームで補うアプリケーション画面のワイヤーフレームを作成し、テキストに添付します。4つ以上のワイヤーフレーム画面がある場合、マップを作ると効果的です。この記事の後半でスクリーンマップについて説明します。要件定義書のフォーマット要件を記述する方法が分かったら、ドキュメントの適切なフォーマットを選びましょう。モバイルアプリの要件を記述するための基本的なフォーマットとして機能仕様書（FSD）・ユーザーストーリー・ワイヤーフレームなどがあります。機能仕様書（FSD） FSDはおそらく、ソフトウェア開発業界においてデフォルトのフォーマットです。製品が何をするべきか、どのようにするべきかを取り扱う標準的な項目リストで構成されています。簡単な電卓アプリケーションを例として、その機能をFSDで説明してみましょう。アプリケーション画面には基本的な算術計算ボタン(加算・減算・乗算・除算)と結果ボタン(「＝」で示されている)が追加されたデジタルキーボードが表示されます。数字ボタンをタップすると、その内容が画面内のディスプレイ部分に表示されます。新しい桁の数字は右側に追加されていきます。算術計算ボタンをタップすると、現在ディスプレイ部分に表示されている数字がメモリに与えられます。また、次の数値入力のためにディスプレイ部分はクリアされます。結果ボタンをタップすると、それまでの操作に従ってメモリ内の数値と表示されている数値が結合されます。結果の数値がディスプレイ部分に表示されます。このように機能仕様書のフォーマットでは、開発とビジネスの両方で使用されるため製品の詳細な説明が書かれています。そのため皆が同じ認識を持つことができます。 FSDを作成する人は、ソフトウェア開発の経験が豊富で構築しているモバイルや他のプラットフォームの仕様を知っている必要があります。また、要求される詳細レベルが高いため、完成させるのにはかなりの時間がかかります。ユーザーストーリーユーザーストーリーはFSDほど正式なものではありませんが、強力なフォーマットです。ユーザーがアプリでできることをリストにし、ユーザー観点から記述します。この文書ではユーザーがなぜそれをしたいのかを簡単に説明します。電卓の例で、いくつかの機能を追加しユーザーストーリーで説明してみましょう。ユーザーとして、非常に小さい数値や非常に大きな数値を取り扱うために10進数から指数関数に（またはその逆も）数値の表記を変更できるようにしたいと思っています。ユーザーとして、同僚と共有するために計算の履歴をPDFファイルで出力したいと考えます。この形式は技術的な要件の概要だけでなく、優れた投資対効果検討書も生み出します。そのため、ビジネスにとって重要でない機能が特定されている場合はその機能を取り除くか、将来のリリースに先送りにするかを決めることができます。ユーザーストーリーのフォーマットを利用すると、1つのストーリーから複数のサブストーリーに分割して詳細を定義することができます。例えば、PDFエクスポートのストーリーから以下のように分割することができます。ユーザーとして、画面の右上にある共有ボタンをタップしてオプション（PDF・テキスト・画像で共有）を表示させたいと思っています。共有オプションを選択したときに、iOSのDate Pickerを使用して共有される計算のタイムフレームを選択したいです。ユーザーストーリーは簡単で柔軟性があるため、最も便利で一般的なフォーマットのひとつになっています。スケッチとワイヤーフレームアプリケーションの要件を説明する他の方法は、スケッチあるいはワイヤーフレームでそれらを視覚化することです。 iOSの開発では、開発期間の約70％がインターフェイスの実装に費やされるため、すべての画面を目の前に置いておくことで何をするべきであるのかという作業の範囲が分かるようになります。モバイルアプリケーション用の適切なワイヤーフレームセットを作成するためには、画面を相互にリンクする方法・各画面に表示できる状態・プッシュ通知から開いたときにどのように動作するかというユーザー体験の基本を知っておく必要があります。フォーマットを融合させる適切に融合することでそれぞれのフォーマットの強みを生かすことができます。私たちの経験では、ユーザーストーリーとワイヤーフレームを混合させることが最も理にかなっています。ユーザーストーリーはアプリケーションの機能を説明し投資対効果検討書を規定しますが、ワイヤーフレームはこれらの機能がアプリケーションの画面にどのように表示されるかを示します。さらにユーザーストーリーとワイヤーフレームを混合させるのはFSD作成よりも時間がかからない上に、その相互作用の詳細と説明はすべてまとめられた状態になります。まず、アプリケーションのワイヤーフレームをスケッチすることから始めましょう。ワイヤーフレームが完成したら各画面に2つ以上のユーザーストーリーを追加し、ユーザーがその画面上で何ができるか説明します。私たちはこの方法がモバイルアプリケーションの開発に最も適していることを発見しました。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中練習してみましょう What I Eatアプリケーションを例として取り上げます。アプリケーションを一から開発しているというシチュエーションで要件定義書を作成してみましょう。まず、スティーブ・ブランクのXYZパターン「ZによってXがYするのを支援する」を使ってアイデアを形にしてみます。そのアプリケーションの前提はユーザーが一日に食べるものとカロリー摂取量をコントロールできるようにすることです。XYZメソッドで置き換えると「What I Eatアプリケーションは、簡単な食事履歴の機能によって体重を気にする人がカロリー消費をトラッキングするのに役立ちます」となります。前述の通り、ユーザーストーリーとワイヤーフレームを融合させるのが一番効果的です。次にWhat I Eatアプリのユーザーストーリーを各画面ごとに記述します。まずアプリケーションの開始・ホーム画面から始めましょう。ユーザーとして、アプリを開いてすぐに今日の食事の記録と消費カロリーを見たい。今食べた食事とそのカロリーを、すぐに追加したい。アプリ内のカレンダーにアクセスして、それまでの履歴を表示したい。あいまいさを回避するために、この画面のワイヤーフレームを作成します。ホーム画面に「新しい食事を追加」機能を入れることはできませんでした。代わりに、この機能を行う別の画面に移動するためのボタンを付けます。ここで、この新しい画面についてのユーザーストーリーをまとめます。今食べた食事の名前を入力したい。そのカロリーも入力したい。ホーム画面にはカレンダーを開くボタンがあります。色々なカレンダーアプリがあるので、まずそれらのデザインをチェックするといいでしょう。iPhoneのデフォルトカレンダーアプリがお気に入りなので、ここではそれを参考にします。ユーザーとして、今日の日付をすぐに選択したい。日付を選択すると、iPhoneのカレンダーアプリのようにその日の食事のリストが表示されるようにする。次の月、または前の月に切り替えられるようにする。 iPhoneカレンダーのユーザーインターフェイスをワイヤーフレームに配置します。最後に、アプリにいくつかの設定を追加する必要があります。食事記録のためのiCloudバックアップの有効・無効を切り替えたい。カロリー摂取量をトラッキングするリマインダーの有効・無効を切り替えたい。これで、ほぼ完了です。最後のステップではワイヤーフレームとユーザーストーリーをひとつのドキュメントにまとめ、各ワイヤーフレームとそれぞれのストーリーを配置します。さらに、それぞれの画面がどのように繋がっているかを視覚化するマップを描くこともできます。マップを作成している際に設定画面に移動するボタンがないことに気付いたため、ホーム画面に追加します。まとめここでは、ユーザーストーリーとワイヤーフレームを含むPDFと、それを補完するスクリーンマップを作成しました。これらによってアプリケーションに必要とされている機能が詳細に説明できます。これで要件定義書を開発者に送ることができる状態になります。今度は、開発者の作成したアプリケーションはあなたの思っていたものになるでしょう。一般的に言えば、要件定義書を書くことはあなたのビジョンを他のチームに伝えることです。上記の方法だけに限定せず、自由に試みて一番いい解決方法を見つけてください。 TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを開発することが可能です。独学に限界を感じている場合はご検討ください。

Webデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

【デザインする前に知っておきたい！】よくあるUXのトラップを避ける方法とは