OthloBlog - オスロブログ -

名古屋のIT系学生コミュニティOthloTechのブログです。

webサービスの企画とデザインの間にやるべき4つのこと

どーも!OthloTechのちーずです🧀
最近、OthloEventに参加してくれる女の子が増えてきて密かに喜んでいます。
私が参加者側だった時代は、女の子が全然いなくて寂しい思いをしていたので。笑
これからも男女隔たりなくいろんな人が参加してくれたら良いな〜って思っています!

今回は、開発よりではなくてUXデザインよりのお話をしようと思います。
webサービスを自分で開発していくにあたって、企画の土台がしっかりしていないとデザインの一貫性がなくなってしまったりせっかく作ったのに全然使われないサービスになってしまう可能性があるでしょう。
そうならないために企画とデザインの間にやるべき4つのことを説明していきます。
(「名古屋の学生団体を紹介するwebサービス」という企画例をもとに話をすすめていきます。)

記事のあらまし

  • webサービスを企画する学生をターゲットとしてサービスの企画からデザインの間にすべきことを順おって書いてきます。
  • 5W1Hでユーザー体験を洗い出す -> ターゲット(ターゲットユーザー / ペルソナ) -> 構造化シナリオ法 -> コンセプト

1) 5W1Hでユーザー体験を洗い出す

f:id:othlotech:20171115212817j:plain
最初に、5W1Hでユーザー体験をより明確にしていきます。
これらを意識することでサイトの意義を見失わずに制作を進めることができるでしょう。

  • When: いつサイトをみるのか?
    ex) 学生団体に所属したいな〜って思い立った暇な授業中(笑)

  • Where: どこでサイトをみるのか?
    ex) 学校

  • Who: だれがサイトをみるのか?
    ex) 名古屋の学生

  • What: このwebサイトはなにさせたいのか?
    ex) 学生団体に加入

  • Why: このサイトをなぜ利用するのか?
    ex) どのような学生が所属しているか詳しく載ってるから

  • How: ユーザーはどうやってサイトを訪れるのか?)
    ex) 「名古屋 学生団体」で検索


2) ユーザーを具体化する

f:id:othlotech:20171115212840j:plain
次に、5W1Hの「WHO」に当たる部分を詳しく決めていきます。
誰に見てもらいたいサイトなのか?を決めることは、ビジュアルにも大きく関わってくるため手を抜かずしっかり決めることをお勧めします!

ターゲットを具体化する時に、以下三つの項目を決定します。
( 短期的な企画だったりすると、ターゲットユーザーのみの決定でも良いかもしれません。)

ターゲットユーザー

ターゲットユーザーとは、実際にどのようなユーザーにサービスを利用してもらいたいかを、性別、年代、職業など、様々な観点から定めることを指しています。

ex ) 20歳前後、名古屋住み、女性、学生

ペルソナ

ペルソナとは、ざっくり言うとターゲットユーザー像を明記したものです。
名前や性別、性格や家族構成など、サービスを作っていく人たちはペルソナについて知らないことはないぞ。ってところまで詳細をつめて書き出します。
ペルソナを設定することによって、その明記したユーザーのためのコンテンツを考えることができるため、

  • 不必要なコンテンツの量産
  • デザインの方向性のぶれ
  • 共通認識のずれ

これらを解決することができます。

ex ) 手書きでざっくりと描きました。見辛いかもしれませんがご了承ください。

f:id:othlotech:20171115212811p:plain

参考サイト

https://manablog.org/persona/


3) シナリオを書く(構造化シナリオ法)

f:id:othlotech:20171115212814j:plain

シナリオは、ペルソナに対して、いつ、どこで、どのようにサービスとのインタラクションがあるのかを、時系列順に描いていくことを指しています。
シナリオを書くことによって、どのようなコンテンツがどのように提供されることが理想的であるかをより明確にできます。 書き方はいくつか方法がありますが、今回は構造化シナリオ法というものについて話そうと思います。

構造化シナリオ法は、ユーザーの本質的な欲求(ニーズ)をユーザーの価値と位置づけ、それを満たすシナリオを価値シナリオ→行動シナリオ→操作シナリオ三段階に分けて考えていくものです。
ビジョン提案型デザイン手法とも呼ばれ、現在の姿を洗い出して問題解決のシナリオを考えるのではなくて、あるべき姿を描くための企画提案に向いています。

価値シナリオ

価値シナリオは、ペルソナの持つ本質的な欲求を満たすための、最小限のシナリオです。
本質的な欲求に注目して書くため、具体的にどんなサービスを利用するのかなどを書くのではなくより抽象的でシンプルで大丈夫です!

< 主に書くもの >

  • 基本属性 (名前、年齢、職業など)
    主にペルソナと同じ内容でok!
  • 欲求に対する行動
    ex ) 先輩にオススメの学生団体を聞いている。
  • 欲求に対する目標
    ex ) 学生団体に所属して大学生らしい学生ライフをおくる。

行動シナリオ

行動シナリオは、ペルソナが本質的な欲求を満たすためにどんな目標を立て、どのように行動していくかのシナリオです。
ユーザーがどのように行動していくのかを肉付けするように書いていくと良いでしょう。

< 主に書くもの >

  • テーマ
  • ユーザーの目標
  • シーン
  • 行動とタスク

操作シナリオ

操作シナリオは、ペルソナが目標を達成するためにどのような製品・サービスを利用し、どのようなデバイスを使用して、どのような操作をするかのシナリオです。
行動シナリオのタスクをピックアップして、そのタスクにおいて目標を達成するためのシナリオを書いていきましょう。
操作シナリオを作成すると同時に画面構成を仕上げていっても良いです。

(⚠︎ シナリオの例を書くと記事が長くなりそうなので、例を省きます。)

参考サイト / 本

  • UXデザインをはじめる本

4) コンセプトを20文字程度で表す

f:id:othlotech:20171115212847j:plain
以上のフローを追っていくことによって、はっきりしたコンセプトが見えてきたとおもいます。
それらを要約するかのごとく、このサービスはどのようなものかを示す20字程度の言葉で表してみましょう。
もし、このような短い言葉で表せない〜ってなってしまったらもう一度、企画段階から振り返る必要があるでしょう。

ex) 名古屋の学生が集まるプラットホーム

参考サイト


さいごに

いかがでしょうか?
わりとめんどくさいフローとかも多いですが、企画を進めていくときに衝突する認識のズレ問題やコンテンツの必要性問題の解消の手助けをしてくれると思います。
企画の立ち上げ時やハッカソンなどのときに、是非この記事を活用していただけたらなぁ〜とおもってます。

以上ちーずでした!
ありがとうございました🧀