誰でもかんたんに学べるUI/UX改善をするためのコトハジメ｜良いUI/UXを生み出すためのプロセスを学ぶことができる！

先ずはじめに「改善」というものは誰のために考え実行するものかを考えてみます。

その課題を解決することによって喜ぶターゲットは一体誰なのでしょうか？

”どのような「価値」を「誰に」対して「提供」するのか？”

この部分をまずは明快にする必要があります。

当然のことのようで意外と抜けているケースがあるので、改めて振り返ってみることも改善の第一歩です。

UIという言葉はそもそも何なのか？を解説しながら、身近にある事例などを紹介しながら理解を深めていきます。

UXという言葉はそもそも何なのか？を解説しながら、「有名なスマートフォン端末の進化」や「有名なSNSの進化」の背景などを参考にUXの理解を深めていただきます。

ユーザービリティという言葉はそもそも何なのか？を解説します。

UXと似た表現をされることも多いですが少し意味が違うので、その点を詳しくお話します。

「UI/UX」と表現されて一緒にされがちな2つですが、意味が全く違うのでその違いについておさらいしていきます。

これまでUIとUXとユーザービリティについてお話ししてきました。

これらの理解を踏まえて、実際にどのようにUIやUXを改善をするのかフローについて解説していきます。

目的と課題へのプロセスはブラックボックス化しないことが大事です。

ここでは、プロダクトの情報を共有しない場合に起こりうることや、情報を共有するメリットなどをお話します。

結論からはっきり言ってしまうと、いまだにUIやUXをデザイナーだけで作っていくのはもう古いです。

ユーザーに対してどのようなシナリオや視点で体験価値を提供するか、常に多角的なビジョンを様々な業種から共有しながら進行することが価値の高いサービスづくりを可能にするので、一人の専門家だけではなくチームで作り上げていく意識を持つ必要性について解説します。

これから改善しようとしているサービスがどのようなものなのかをメンバー全員が理解する必要があります。

そのために手っ取り早く、誰にでも素早く伝えることが出来る方法が「リーンキャンバス」です。

このセクションではリーンキャンバスについて学んでいきます。

リーンキャンバスには推奨されている要素の描き順があります。

各箇所に記入する内容とその理由について解説していきます。

「リーンキャンバス」と「従来の数十ページや数ヶ月かけて作る事業計画書」と相対的に比較してみると、活用するメリットが鮮明に理解できます。

そのメリットと各箇所の記入ポイントについて解説します。

このセクションでは全セクションで解説した「リーンキャンバス」を弊社でこれから行おうと計画している「IMAKEの教育事業」をもとに書き方を解説していきます。

自社のサービスモデルに当てはめながら、参考として御覧ください。

また、このレッスンでリーン・キャンバスのフォーマットをダウンロードできますので、一緒に書いてみましょう！

まずは「1.課題」を記入してきます。

「課題」には「顧客やユーザーが抱えている課題や満足してないものは何か？」を書き出します。

「2.顧客セグメント」と「3.独自の価値提案」を記入します。

「顧客セグメント」には「お金を支払ってくれる人が誰なのか？」を記入します。

一番難しいとされる「独自の価値提案」には「差別化要因と注目に値する価値」を単一で明確な説得力のあるメッセージを記述します。

「4.ソリューション」と「5.チャネル」を記入します。

「ソリューション」には「現在のサービスなどにおける機能や特徴のなかで上位3つの事柄」を記述します。

「チャネル」には「顧客へ商品を届ける経路」を記述します。

「6.収益の流れ」と「7.コスト構造」を記入します。

ビジネスの収支を理解する上で大事なファクターです。

「収益の流れ」には「収益モデルや顧客生涯価値、サービス価格」などを記述します。

「コスト構造」には「製品を市場に送り出すためにかかるコスト」などを記述します。

最後に「8.主要指標」と「9.圧倒的優位性」を記入します。

「収益の流れ」には「事業を継続していく上で成長を計測する指標や目標」などを記述します。

「圧倒的優位性」には「簡単にコピー（真似）や購入ができないもの」を記述します。

ここまで記入をすることで、サービスの全体像がなんとなく見えてきます。

また、現在そのサービス自体の方向性があっているかどうか情報の棚卸しをすることも出来ます。

現在そのサービスがどのような状況に置かれているかを分析するのに最適なのが「SWOT分析」です。

SWOT分析とはどんなものなのか？・メリット・書き方のポイントなどについて解説します。

UI/UXを改善をする際に、サービスやコンテンツをフレームワークを用いて俯瞰しながら改めて見つめ直すと、理解が深まって改善案を考えやすくなります。

このセクションでは、アイディアを引き出すためのビジネスフレームワークについて解説していきます。

前回のレクチャーで解説したSWOT分析を更に戦略的に分析をするために展開するのが「クロスSWOT分析」です。

それぞれの項目から戦略を整理・考察して、どれを指針として実行していくかという点をまとめることが出来ます。

ユーザーの行動や心理を理解・調べる方法として「定量データ分析」「定性データ分析」というのがあります。

定量・定性の各データの特徴と違いについて解説し、以降のレクチャーは「定性データ」を引き出す点を中心に学んでいきます。

ユーザーインタビューには大きく分けて3種類あり、それぞれのインタビュー方法について気をつけなければいけない点や、メリットなどを解説します。

ユーザーにインタビューをする大まかな流れを見ていただきながら、各フェーズでどのようなことを実施するのか？・どのような準備が必要なのか？などを解説していきます。

データがあることで利用者のサービス利用状況を可視化することが出来ます。

可視化することによって、簡単にチームとイメージの共有ができ、取り組むべき課題の「現状の問題」と「あるべき理想の姿」のギャップがわかります。

ここではデザイナーの視点でデータの有用性と、それらがもたらす先の展開について解説していきます。

このセクションでは、洗い出した改善点をまとめるために、プロトタイピング手法の中でもよく用いられる「戦術的プロトタイピング」を使って、プロダクト視点から考えるための実践方法を解説します。

以前のセクション「UXデザインの改善案」でも簡単にお話しましたが、このセクションではもっと細かに解説します。

このレクチャーでは、偽のペルソナと言われている「プラグマティック・ペルソナ」からご紹介していきます。

このペルソナが以降のレクチャーで解説するフレームワークに必要な仮説検証するための重要ポイントになります。

前回学習した「プラグマティックペルソナ」のケーススタディを参考に、どのような手順で作成していくのかを見てみましょう。

一緒に作ってみたい方はこの講座で「プラグマティックペルソナ」のフォーマットをダウンロードできますので、そちらを使いながら書いてみてください。

ユーザーシナリオはあるシナリオに沿ってユーザーの行動や期待を可視化したものです。

ここでは一連の流れでどんなテストが必要かが洗い出しやすくなるユーザーシナリオの解説をします。

前回学習した「ユーザーシナリオ」のケーススタディを参考に、どのような手順で作成していくのかを見てみましょう。

一緒に作ってみたい方はこの講座で「ユーザーシナリオ」のフォーマットをダウンロードできますので、そちらを使いながら書いてみてください。

ユーザーシナリオでユーザーの行動パターンや利用シーンを思い描けるようになると、それらの要素を分解していくことで現状解析用のカスタマージャーニーマップを作成することができます。

ここではユーザーが商品やサービスを知り、最終的に購買するまでのを図示したカスタマージャーニーマップについて解説します。

前回学習した「カスタマージャーニーマップ」のケーススタディを参考に、どのような手順で作成していくのかを見てみましょう。

一緒に作ってみたい方はこの講座で「カスタマージャーニーマップ」のフォーマットをダウンロードできますので、そちらを使いながら書いてみてください。

これまでは改善案を探るために文章化や図示化してきましたが、ここではプロダクトの視点を物語として第三者に伝わりやすくするためのストーリーボードについて解説していきます。

前回学習した「ストーリーボード」のケーススタディを参考に、どのような手順で作成していくのかを見てみましょう。

一緒に作ってみたい方はこの講座で「ストーリーボード」のフォーマットをダウンロードできますので、そちらを使いながら書いてみてください。

※この前のセクションの話をしていますが、後日追加されるセクションのことですので、公開まで少々お待ち下さい。

前セクションで解説したプロトタイプの種類の一つである「体験的プロトタイピング」について解説をしていきます。

また、そのメリット・考え方・以降のレッスンで紹介するツールの各項目説明についてお話します。

UIデザインという言葉が出始めてから、プロトタイプツールのポジションを確立し、Webデザインやアプリの制作を行う多くの企業が導入している、Sketchの「ツールの簡単な紹介」「おすすめポイント」「対応デバイス環境」「利用料金」「学習コスト」「操作感」について解説します。

ブラウザベースのため環境に左右されることなく使えて、今デザイナーを中心に注目されている、Figmaの「ツールの簡単な紹介」「おすすめポイント」「対応デバイス環境」「利用料金」「学習コスト」「操作感」について解説します。

デザインツール最大手のAdobe社が提供する、Adobe XDの「ツールの簡単な紹介」「おすすめポイント」「対応デバイス環境」「利用料金」「学習コスト」「操作感」について解説します。

Adobe製品ということで他のソフトとショートカットが共通化されていたり、普段からAdobe製品を使っている人なら覚えやすく、すぐに使いこなすことができます。

また、他のツール（Photoshop・Illustratorなど）で作業したオブジェクト（各種パーツ）を、いちいち置き換え直すことなくシームレスに反映できる点が最大の特徴です。

このレクチャーでは紹介した3つのツールをまとめて、それぞれを比較してみました。

自分の環境に合っている・触ってみたいと思ったツールを、無料期間などで試しに使ってみることをオススメします。

Webやアプリデザインの構築ルール・運用ルールの一つとして用いられる「デザインシステム」について解説をします。

デザインシステムがないと数カ月後や数年後には、フォントの大きさ・配色ルール・レイアウトなどがばらばらになってしまい、ツギハギのような一貫性のないデザインになりがちです。

ココでは、デザインシステムとは何か？・メリットについてお話をしていきます。

「デザインシステムの概念・原則の定義」や「デザインシステムは1つのプロダクトという考え方」をお話してデザインシステムとはどれだけ重要なのか？を理解していただきます。

また、実際に利用されているデザインシステムの事例をいくつか紹介します。

デザインシステムを作るために必要なものをご紹介します。

デザインのスタイルを定義するのでかなり数が多くなってしまいますが、コレを予め作っておくことでデザインの均一化する際に「複数人のデザイナー」や「新しく参画したデザイナー」などに効率よく伝えることができて作業効率の向上に繋がります。

実際にデザインシステムを作ることになった場合、簡単に企業やプロジェクトに導入して使ってもらったり馴染んでもらうことは難しいので、「導入・運用する上で気をつけなければならないポイント」をご紹介します。

みなさま、お疲れさまでした。

「最後に伝えておきたいこと」や「必ずしもこれが正解ではなく考え方の一種」ということをお話しています。

知識として学んだだけではなく、これから実務の中で試して改善することの必要性や、改善の実施方法などを体感してください。その中で取捨選択いただけたらと思います。

今後も色々とコースを作っていこうと考えておりますので、その際は是非またご覧いただけると幸いです。

ココまで長時間に渡ってのご視聴ありがとうございました！