Kent&Co.のいろんなメモ帳
be

WordCamp Tokyo 2018で登壇しました【内容更新しました】

UI/UXについてお話しするスピーカーがあまり居ないので、公募した結果、登壇することになりました。
取り急ぎ資料公開用に記事を挙げておりますが、追って内容など詰めて更新し直します。


という事で更新です。遅くなりました。 


というわけで資料

今回のスライドについて

今回のコンセプトは「楽しいスライド」でした。
普段ならやらない自分の写真を入れたり、スプラトゥーン2っぽくしてみたり。
写真は高坂裕希さんに撮ってもらった物。良い写真撮ってくれますので、良かったら皆さんお願いしてみて下さい。(僕のTwitterに連絡頂けたら紹介しますよー。)
そして、挿絵は昼寝ぬこさん。紆余曲折してYouTubeチャンネルで登録者100人突破というときにイラストを描いてくれました。その流れで、今回もお願いした所存。お昼で買収した格好に。

どうしても堅苦しいイメージがあるセッションを、楽しく見せたかったというのが大きいです。
中身はどうあれ、「こういうセッションなら、そんなに疲れないなー」って思ってもらえたらと思っています。

作る中で、「ココまでやったらスプラトゥーン2のフォントにするか?」とも思ったのですが、視認性と権利的な問題(後日WordPress TVにアップされること)を考えて、やめておきました。最終的にUDフォントのMiguMixを利用しています。
自分の写真のフリップに載せた文字はJTCじゃんけんUです。フォートナイトの文字ですね。気付きましたか?(これはフォントとして販売されているので、先のようなゲーム専用フォントで起こり得る権利問題は発生しないということになります。)

お気づきの方がどれくらいいらっしゃったかはわかりませんが、今回のスライドはAdobe Xdで作っております。
スライドは矢印キーで先送りしていく形でした。Xdのアートボードは上から順番に優先度があり、その中で同行(横方向に同じ高さ)にあるアートボードは左から右へという順番で送られます。
特にスライドの遷移とかを付けなくても先送り出来るので、割と軽いし、全体見渡せるしPPT何かよりもやりやすいかなぁと思いました。
ちなみに最後のスライドを少しだけが少し上にずれてしまっていたようで、前日まで理由が掴めず苦戦していたのはナイショです。

伝えたかったこと

大きく二つあります。

  • 誰でも日々の積み重ねでUXを考えることは出来るよ
  • WordPressだから特別というわけでは無くて、何に対しても使える方法はあるよ

というような感じ。

セッションについて

ペルソナやカスタマージャーニーマップの事を知らないUI/UX事始め的な内容を目指していたので、最初に「解っている人は、他の所に行ってね」って言うことは最初から決めていました。
だって、そういう所の基本の話をしたかったわけで、無駄になる可能性は高かったですし。

あとは、スライドを当日、必ず手元で見れる状況にしておくというのが私の中での一つのポイントでした。
スライドの中には「見せる気のないスライド」がいくつかあって、でも見えないのが気持ち悪いという方も居るという事も認識はしているし、座席によっては見えない部分があるという事もわかっていたので、当日手元で見れる方法は用意しておこうと思いました。
その中で、使ったのがWordPressの予約投稿。WordPressの予約投稿をセットし、登壇直前にTwitterにハッシュタグ付きでツイートされるという仕組みを利用して、忘れずにシェアする手段を用意しました。ほら、直前って何が起こるかわからないし。

いざ、セッションという事で、正直30人も居れば充分くらいのつもりで居たら、こんなに集まって…という感じで120人くらいはいらっしゃっていたように思います。本当にありがとうございました。
(実は大阪のWordCampでは登壇落選してたので、この内容の需要って本当にあるのかな…って不安でした。)
会場にピンクの髪の毛の人が居て、超プレッシャーでした。 (((( ;゚Д゚)))ガクガクブルブル

ということで、UI/UXの基本の話。
UI/UXって、よくセットで言われることはありますが、「ユーザーエクスペリエンス(UX)」という大きな括りのモノを実現する一つの手段が「ユーザーインターフェイス(UI)」なのであって、正直同列ではないと思うんですよね。UIがUXに包括されている感じ。
そしてUXというのは、アプリやサイトに触れているときだけで無く、それに関わる事を話していたり、それらを使って得た情報を利用している(この「利用」には、知識として利用するという事なども含まれます)時までもが含まれ、とても考える事は多くなります。
特にアプリは役割が制限されており、かなりイメージしやすいところはありますが、サイトとなるとその使われ方は千差万別。本当に誰のために作っているのかという事が割と重要なわけです。

という事で登場するのがペルソナ。
ペルソナは、人物像を一人作り上げたモノのことですが、これを作る理由はいくつかあります。そして作るべき人物像も適当で良いわけでは無い。

まず、人物像はできるだけ一人に絞るべき。勿論、あまりにも多様な場合には話が変わってくるのですが、そういうわけでなければ、 ターゲット層の平均値・中央値的人物像 を目指すべきです。
というのも、「層」だと、判断の都度「こっちのひと」「あっちのひと」と基準がブレてしまい、最終的に誰のために作ったモノかわからなくなってしまうため。そのために、「層」の中の人全員から均等に近い人=平均値・中央値的な人になるべきという事です。

そして、目指すべきペルソナのレベル感は「共通の知人として認識出来るくらいの人物」という事になります。その人物のバックグラウンドがあって、どんなことを考える人か明確になっており、どんな生活をしているのか、何を持っているのか、好きそうなことは何か…など、アレコレ調べて出していくわけです。年収とかもわかった方が良いし、住んでるところがわかるのも必要。出身はどこだっけ? 誕生日いつだっけ? そんなことも入れていきたいですよね。まるでドラマの主人公を作るようなイメージです。
このときに重要なのは、エビデンス。チームメンバー全員の考える「一般的な人」の像は必ずしも一致するとは限りません。つまりは、誰が見ても「なるほど、だからこの人物なのね」というように納得出来なければ行けません。そのためには外部の情報源が裏付けになります。
という事は、しっかり調べて、裏付けのあるペルソナ像をつくらないといけないと言う事ですね。

これは、建物でいうところの基礎に当たる部分ですので、ココが緩いと後々辛くなります。上司・クライアントに「この機能欲しい!」って後からいわれても、必ずペルソナを基準に考えましょう。そうしないと「層のあっちこっちで判断した」という状態になって、沼に陥ります。

このペルソナが、何かを達成するためにやっていくことを分析するのがカスタマージャーニーマップ。
カスタマージャーニーマップでは、フェーズを分けて、それぞれのフェーズで行動としてはどんなことをするかというのを書き上げていきます。そのときのペルソナの考えていること、サイト・アプリへのモチベーションなどを纏めていきましょう。
その下にはインサイトとして、制作者・運営者として気付いた点や対策すべき点などを書き出していきましょう。具体的な対策方法などは無くても大丈夫です。何を検討しなければいけないのかを洗い出すのがこの欄の目的です。

この様にしてドンドンと纏めていけば、自ずとベストアンサーが見つかってくる。
ラフ・ワイヤーフレームに起こしたりしながらUIを作り上げていくわけですね。

というのが今回のメインの内容。具体的なデザインの問題はWebデザイナーさんのお仕事だと思いますし、今回は触れていません。(仕事としては自分でもやるけども、セッションのタイトルからは離れていってしまうなと思ったので今回は触れませんでした。)

ということで

今回の内容はいわゆるセオリーです。必ずしもどの案件でも必要というわけでは無いですが、これをやれば、トラブルを減らせるはずだよ!という所をお伝えしたつもりです。

上手くいろんな方に伝わったかわからないのですが、少なからず「誰でも出来ることがわかって安心した」とか、「ストンと落ちた」とかコメントを見れたので少しは安心しています。
アフターパーティー以降も「伝わったか不安すぎる」「アレで良かったのか不安すぎる」という話はずっとしていたのですが、少しずつ意見を見れる機会も増えてきて良かったです。

どうやら、来年のWordCampでもお話出来る機会がありそうですので、良かったらどんな話を知りたいか、Twitter( @sasagawaki )宛ででも教えて下さい。

by

TechAcademy公認エバンジェリスト

中学時代に買ってもらったPerforma 550以降ずっとアップル製品漬けの人生。iPhoneは日本上陸時から愛用し続けている。
「誰かが作っているなら、自分でも作れるはず!」という安易な発想からHP制作などを始め、ネットの世界から情報を集めてひたすらいろんなことをやってみるようになった。

TechAcademyでは、Webデザイン / WordPress / UI/UXを担当するメンター。

よく歌って踊っている。

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

be