SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

おすすめのイベント

おすすめの講座

おすすめのウェビナー

マーケティングは“経営ごと” に。業界キーパーソンへの独自取材、注目テーマやトレンドを解説する特集など、オリジナルの最新マーケティング情報を毎月お届け。

『MarkeZine』(雑誌)

第106号(2024年10月号)
特集「令和時代のシニアマーケティング」

MarkeZineプレミアム for チーム/チーム プラス 加入の方は、誌面がウェブでも読めます

翔泳社の本(AD)

UI/UXの基礎知識と、アプリ開発プロジェクトにおけるUXデザインのポイント

 今やサービスの成功に優れたUI/UXは欠かせないものになりました。特にUXはマーケティングでも重要であり、どんなに便利な機能やメリットがあってもUXが悪ければユーザーは離れていってしまいます。UI/UXのベストプラクティスを押さえておくことは、たとえデザイナーやエンジニアでなくても不可欠です。今回は新刊『プロセス・オブ・UI/UX[UXデザイン編]』(翔泳社)から、UI/UXの基礎知識と本書で題材となる架空のニュースアプリ開発プロジェクトにおけるUI/UXの検討ポイントを紹介します。

 本記事は『プロセス・オブ・UI/UX[UXデザイン編] 実践形式で学ぶリサーチからユーザー調査・企画・要件定義・改善まで』(桂信/株式会社エクストーン著)の「INTRODUCTION」から抜粋したものです。掲載にあたって一部を編集しています。

UI/UXとは?

 UI/UXは、「UI」と「UX」という2つの言葉から成り立っています。UIはユーザーインターフェイス(User Interface)、UXはユーザーエクスペリエンス(UserExperience)の略称です。UXのほうが広い意味を持つので、UX、UIの順番で説明します。

UX(User Experience)

 ユーザーエクスペリエンスとは、「ユーザーが製品やサービスの利用を通して得られる体験」を指しており、「ユーザー体験」とよく言われます。

 このユーザー体験は、ユーザーがその製品やサービスを利用することで生まれる「楽しい」「うれしい」「美しい」という感情や、「他社の製品より使いやすい」「見やすい」といったサービスの質、さらにはサービスに抱く印象など、ユーザーがその製品やサービスを通して感じたすべての体験を指します。その体験の範囲は、利用前の体験、利用中の体験、利用後の体験、そして、ユーザーが製品やサービスを知ってから忘れるまでの総合的な体験を指しています(参考:USER EXPERIENCE WHITE PAPER)。

蓄積された体験をもとに全体を振り返る

UI(User Interface)

 ユーザーインターフェイスとは、ユーザーが触れる画面、つまりアプリやWebサイトなどのユーザーが実際に操作する画面を指します。画面内の色やフォント、形状などのデザインや、ボタンや文字、画像などのレイアウトなど、ユーザーの視界に入ってくるすべての情報を指します。

UI/UXを考える

 ユーザーがアプリやWebサービスを利用する体験において、その接点となるのはUIです。そのため、UIはUXの一部の要素と言えます。このUXとUIという2つの要素は、UIから構成されるアプリやWebサービスを作る際には、切っても切れない関係性です。

 そのため、アプリやWebサービスの企画を考える時に「UI/UXを考える」と言います。

UI/UXを考える

 UI/UXにおいては、「User Experience」と「User Interface」の両方に入っている「User」という言葉に象徴されるように「人」を中心に考えることが大きな特徴です。

 製品やサービスを考える時に、技術やコスト、ビジネスなどさまざまな視点があります。それぞれの視点で企画を検討していくと、異なる価値観での検討となるため別々の企画が生まれます。製品やサービスを検討する際に重視していることは、それぞれの視点で大きく異なっているはずです。

 UI/UXを軸に考える際は、その製品やサービスを利用する「人」を中心に考え、「答えはそれを利用する人の中にある」と捉えることが基本です。UIのユーザビリティの向上だけではなく、ユーザーと企業、ユーザーとサービスの間で行われるあらゆるやり取りにおいて、付加価値の高いユーザー体験を設計することを目指します。

さまざまなアプローチとUI/UXの普及

 この「人を中心に考える」というアプローチは、決して新しいものではありません。利用する人を中心におく思考法に「デザイン思考(Design Thinking)」や「人間中心設計(Human Centered Design)」などが昔からあります。「UX」という概念が初めて世の中で言及されたのは、D.A.ノーマン著の『誰のためのデザイン?(認知科学者のデザイン原論)』と言われています。この本が刊行されたのは1990年、実に30年以上前のことです。

 私がこの仕事を始めた2005年から「ユーザー中心に考える」ことは、私自身や周囲の方々の中では、当たり前のように行われてきました。ただ、その頃のWebサービスは、技術的にもまだ発展途上だったため技術やコンテンツを中心に検討されていた印象が強く、必ずしもユーザー中心に考えられてはいませんでした。「この技術があるからできることを考えてみよう」「このコンテンツをどうすれば展開できるかを考えよう」といったイメージです。

 それが大きく変わったのは、やはり2007年1月に発表されたAppleのiPhoneの登場が大きかったのではないでしょうか。

歴代のiPhone

 iPhoneの登場は、私たちの生活を大きく変えました。iPhoneのハードウェアやソフトウェア、コンテンツ配信、デリバリー、サポートに至るまで、すべてが今まで見たことがなかった洗練された世界でした。そのすべてのプロセスの中心に置かれていたのは、常に「人」でした。その結果、iPhoneは、私たちに感動と便利さを感じさせることに成功し、多くのファンを獲得して爆発的に普及しました。

 その影響で、製品やサービスを利用する時だけではなく、前後のユーザー体験(「UX」)も含めてデザインするべきであるという考え方が広まり、広義の意味でのデザイン(装飾としてのデザインではなく設計としてのデザイン)が、ビジネスシーンでも重要視され始めていきました。そして、iPhoneやその後に登場したAndroidも、ユーザーが直接画面を触って操作することがその大きな特徴だったため、「UI」の重要性が増していきました。

 そのため、アプリやWebサイトのデザインを検討する際の言葉として「UI/UX」が普及していきました。この「UI/UXを考える」時に、多くの手法や考え方があります。本書では、それらを架空のプロジェクトを通して解説していきます。あなたもプロジェクトメンバーの一員として、本書でUI/UXを一緒に考えていきましょう。

ニュースアプリを作ろう

 ニュースアプリを作る。これが、本書『プロセス・オブ・UI/UX[UXデザイン編]』で実践する架空のプロジェクトのテーマです。

 なぜ、ニュースアプリかというと、きっと本書を読まれている方の多くが慣れ親しんだアプリの1つであり、ニュースアプリのUI/UX検討は多くの方にとって想像しやすいのではないかと感じたためです。本書を読まれている多くの方のスマートフォンにも、少なくとも1つはニュースアプリが入っているのではないでしょうか。現在、移動時間にニュースアプリで最新のニュースを見たり、PUSH通知で速報を知ったりと、多くの情報をニュースアプリから得ている人が多くいます。

 本書では、このニュースアプリをゼロから考えていきます。

オリエンテーション

 制約がないプロジェクトはなかなかないので、今回のニュースアプリのプロジェクトにおいても、いくつかの前提状況や制約を設けることにします。こちらが、クライアントから提示されたオリエンテーションの内容とします。

  • 現在、My Channelというサイトを運営しており、時事ニュースはもちろんショッピングやレシピなどさまざまなコンテンツやサービスを提供しているが、認知度に課題を感じている
  • ニュースは、コンテンツを持っている各媒体とすでに契約していて、そこから提供してもらっている
  • My Channelというブランドの認知度を向上させ、自社のコンテンツやサービスへの来訪者を増やすために、サイトの中でも利用者が多いニュース部分を切り出してニュースアプリを提供したいと考えている
  • その一方で、ニュースアプリは競合が多く、新規参入は一筋縄ではいかないと考えており、独自の機能やコンテンツが必要だと感じている
  • できればアプリ内での収入も確保していきたい
  • アプリの仕様策定・デザイン制作を行い、開発がスタートできるようにしてほしい
  • 期間は4カ月

 自分で書きながら、なかなか難しいお題です。12月上旬に依頼を受けて年度末(3月末)までの4カ月で検討するプロジェクトは、よくあるケースなので、そのイメージを抱いてください。

 今回は架空のプロジェクトですが、私自身もプロジェクトを楽しみながら、どのようなユーザー体験が得られるニュースアプリにすべきかを本気で検討していきます。最初の時点でゴールの形が見えているプロジェクトはほぼありません。だからこそ、どういったゴールになるのかをワクワクしながら楽しむことが大事です。そのためには、ゴールに進むための検討プロセスの設計が重要になってきます。

 プロセスの検討に入る前に、今回のオリエンテーションのポイントを整理します。クライアントからヒアリングをしたら、常に端的にまとめ直して、意識すべきポイントを明確にしていきます。

プロジェクトのポイント

  • ゴール
    優先度1 My Channelの認知度の向上
    優先度2 My Channelの他のサービスへの送客
    優先度3 アプリ内の収入確保
  • ゴールを達成するための手段
    ニュース部分を切り出してニュースアプリを展開する
  • 課題
    独自の機能やコンテンツが必要だと考えるがそれは何か
  • 最終アウトプット
    本アプリのユーザー体験
    開発会社に提供するためのアプリの仕様とデザイン
  • 検討に使える期間
    4カ月

UI/UX検討のポイント

  • ヒアリングした情報は、常に端的にまとめて、ゴールや課題を明確にしていく

大きな検討テーマを整理する

 まずは、最初に得たポイントをもとに、検討すべきテーマを整理します。

 UI/UX検討において大事なことの1つは、情報を得るたびにその情報を分析し、検討にどう活かすかを考えることです。

ゴールと利用されるストーリーの関連性

 先に整理した「ゴール」と、このアプリをユーザーが利用する際の理想的なストーリーとの関係性を明らかにします。そのために、ユーザーの利用ストーリーをステップごとに描き、そこにゴールを紐づけてみましょう。

ユーザーの利用ストーリーとゴール
ユーザーの利用ストーリーとゴール

 こうしてみると、最も優先度が高い優先度①のゴールを達成するには【STEP4】にたどり着く必要があり、そのためにはユーザーにアプリを起動してもらってから【STEP2】と【STEP3】を順番に達成する必要があることが整理できます。

 次に、各STEPを実現するためにクリアしなければいけない課題を定義します。

各STEPの課題
各STEPの課題

 STEPごとの課題が整理できました。この4つの課題を解決する方法を考えることが、オリエンテーションの際にヒアリングした課題である「独自の機能やコンテンツが必要だと考えるがそれは何か」を見つけることにつながりそうです。大きな漠然とした課題は、小さな課題に分解すると、検討のハードルが下がっていくのでオススメです。

プロジェクトのポイント

  • 検討すべき課題の整理
    課題1:どうすれば、私たちのニュースアプリをインストール、起動してもらえるか?
    課題2:どうすれば、多くのニュースを見てもらえるか?
    課題3:どうやってMy Channelの他のサービスへ誘導するか?
    課題4:どうやってMy Channelの他のサービスを利用してもらえるようにするか?

UI/UX検討のポイント

  • 情報は新しく得るたびに整理して、どう検討に活かすのか、それらの優先順位はどうあるべきか、どうアプローチして向き合うべきかを常に考える

続きは書籍で丁寧に解説

 このあと本書では各課題の優先度とアプローチの方法を整理し、具体的なプロジェクトの計画を立てていきます。そして実際にプロジェクトを進めながらリサーチやユーザー調査、ペルソナ設計などUXデザインについて解説していきますので、興味のある方はぜひ本書をチェックしてみてください。

プロセス・オブ・UI/UX[UXデザイン編] 実践形式で学ぶリサーチからユーザー調査・企画・要件定義・改善まで

Amazon SEshop その他

プロセス・オブ・UI/UX[UXデザイン編]
実践形式で学ぶリサーチからユーザー調査・企画・要件定義・改善まで

著者:桂信、株式会社エクストーン
発売日:2024年5月22日(水)
定価:2,420円(税込)(本体2,200円+税10%)

本書について

本書は、全2巻でUI/UXの具体的なプロセスを学べるガイドブックの「UXデザイン編」です。架空のプロジェクトを題材として、プロジェクトの組み立て方、進行、その時の作業イメージなどを具体的に解説します。

この記事は参考になりましたか?

  • Facebook
  • X
  • Pocket
  • note
翔泳社の本連載記事一覧

もっと読む

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

MarkeZine(マーケジン)
2024/05/29 07:00 https://markezine.jp/article/detail/45598

Special Contents

PR

Job Board

PR

おすすめ

イベント

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング