WordCamp HANEDA 2019に登壇したよ

TechAcademyでメンターをしています

【2019.04.21 更新】

取り急ぎ資料公開のために記事としてアップしますしましたが、セッションを終えて更新しました。資料を見たい方はこちらから。なお、SlideShareの容量制限のため、後半の写真部分は一部抜粋です。ご了承下さい。(会場でWordPress.tvにアップされたらそこで観てね。)

toc

この記事の目次

今回の資料

今回の要点をいくつか

まずは総括

今回お伝えしたかったことは、普段の生活の中にもヒントがたくさんあって、そこから引き出しを増やせるんだよと言う事でした。

世の中のいろいろなサイン(看板的なモノや案内など)って、いろいろと既にいろいろと考えて作られているので、それを「なんでこうなったの?」って見ていくとヒントが見つかるよねって事なんです。もちろん、「どうしてこうなった」って言う物も有るんですけど、それはそれで引き出しになるハズなんです。

折角世の中に目にする物が有るので、それを使ったら勉強になるんじゃない?ってことです。お金をかけて勉強するのも良いけど、こういうのって、経験が物を言うのでお金をかけて勉強すると言うよりも、日々をインプットにした方が良くないか?って事でした。

UXについてクライアントと目線を合わせる

クライアントとお話をするときには、目線を合わせることが重要だなと思っています。どちらかが有位に立ったような話になってしまうと、後々トラブルに繋がるというイメージです。

クライアントさんの知識が弱かった場合、私たちが良かれと思ってアレコレ提案をしても、最終的に「そうじゃない」という話になってしまい、時によってはこちらの意図を説明しても不満が先行してしまって受け入れてもらえなくなると言う現象も起こり得ます。

逆にクライアントさんの知識が高い場合、とはいっても、たいていの場合「クライアントさんの意識が高いだけ」というパターンが多いのではないかと思います。そのときは、こちらから上がっていってあげるのも良いパターンもあるし、相手をズリ下げる方が良いパターンもあると思います。

意識が高いだけなら、「間違ってるよー」とか「本当はこうなんだよー」とかそういう事をお話ししていくと、あちらが勝手に降りてくる感じになると思います。「本当はこうなんだよー」っていう話をするとこういう場合には大抵「でも○○さんはこう言ってますけど」みたいな事も言われると思います。
そうなったら「それも一意見でしょうねぇ。ただ、今回はターゲットがこうで、その人達はこうだから、こうあるべきじゃないですかねぇ?(あなたは)どう思います?」と判断を仰ぎましょう。そうすると何かしらの基準(尺度)で判断してくれます。そしてそこには従っていきましょう。コレで責任を逃れる理由はできました。もし文句を言われても「ほーら言ったじゃん。お金くれるならやるけどどうする?」って言えますよ。やったね!(そのための準備はしておくんだよ?)

UIはUXを達成する1つの要素だよ

UI/UXと言われる事が増えていることもあって、UIとUXって並列に見られがちになってきたのですが、UXを達成する1つの要素にUIがあるんだよって言うことは、見方を合わせていきたいところ。ちなみにその辺についてはこちらの記事でも紹介しています

本当のユーザーは誰か

EC等の場合は特にですが、来訪者をユーザーとして捉えてそこに注力することが多くなる気がしますし、それは間違いではありません。

ですが、最終的に我々の手から離れていく状況を作りたいのであれば、ダッシュボードを利用する人(=たいていの場合クライアント自身)が我々から見た直接的なユーザーとなるので、そこに対するUXを高めておく必要があると思います。割と忘れがちだけど割と重要。

写真を見ながら考える

実際の写真を見ながら気付くべきポイントなどをお話ししていきましたが、今回のお話であげたポイントを上げていきましょう。

  • よく見るところに配置するべき物を考える
  • 色を変えることで判別しやすくする
  • イメージしやすいイラストやアイコンを使う
  • 大きな文字を使うときは細めのフォントを使って見る
  • 自分がやられては困ることはうまく避けてもらえる様なルートを作る
  • 小さすぎる情報は見づらい
  • 薄すぎる色は見づらい

ほら、割とシンプルでしょ? でも、これって空港の中で見える物達なんですよ。

フォント警察さーん!

「フォント警察さん出番ですよ」なんて言って、時間の都合で最後にお話出来ませんでしたが、今回の見出し(英字)に使ったフォントはAvenirというフォントでした。

このフォントは、JALの企業ロゴのベースになっており、長体をかけるとまさにJALになります。折角のテーマなのでこのフォントを選びました。

sli.doで頂いた質問について

Q
CanonからSonyに移ったのはなぜですか?
A

元々EOS Kissから始まり、40D, 60D, 70Dと使ってきたのですが、APS-Cだったのが1つの不満でした。その中でSONYを使って居る知り合いができて、α7Ⅱとα7Ⅲの違いを見せてもらう事ができて、「これ、やばない?」ってなったのでした。昨年末にSONY α7Ⅲに移行しました。レンズはコンバーターでCanon用レンズも使ってます。

Q
新規開発の場合、UXをデザインする際、どのようなフローでUX設計を行なっていますか?
A

なかなか難しいのですが、まずはペルソナを作ります。コレは具体的に書いていくパターンもありますが、そうでは無くてある程度ふわっとした状態で作る事もあります。そこからその人達がどう動くだろうかと言う事を考えて、ワイヤーフレームを立ち上げていくような流れですね。ワイヤーフレームの前に機能整理をする事もあります。付箋重要。

Q
UXを提供するためのUI(操作性)確保された!と確信するための判断基準について、どのようなものを基準にされてますか?
A

コレって、確信するUXデザイナーって居るのかなぁって思ってます。むしろしりたいくらい。

先に出したペルソナ像に合わせたUXを考えて狙っていきます。そこからは効果測定(ベンチマーク)です。違うなぁと思うところを調整していくという作業ですね…。うーん、一発で確保された!って自信を持って言うのは難しいですねぇ。

Q
ワガママなクライアントがゴリ押ししようとするアレなUIをなんとか考え直させたい場合、どうすればよいでしょうか?
A

一旦全部言いたいことを言わせますね。で、一旦視点を揃えるためにペルソナ像の再確認をしていきます。その後、その人達がどう考えるかというところを確認して行きます。そこでズレがある場合はそこを正していきます。そこまでが一致しているのに何かがおかしいのであれば、「こうなんじゃないの?」「誰のための物なの?」とかをやっていく感じです。

イメージとしては、ナイフをぶっさして、えぐるように回してやると言うくらいの気持ちで。ぶっさす材料を用意して、えぐる材料も用意しておきましょう。

Q
クライアントを教育する、という事に関して具体的にどのような手法を使ったのか、聞いてみたいです。
A

一緒にペルソナを考えたり、その人達の考える事とかを整理したりしますね。それ以外には、今回の題材のように「こういうところではこうやっているので、今回の場合では、こうすれば良いと思うんですけどどう思います?」みたいな話をしています。

Q
ダッシュボードを使いやすくするために、どのような事をしていますか?
A

カスタムフィールド・カスタム投稿タイプ・カスタムタクソノミーを使う様にしています。5系だとブロックをカスタマイズしたりですかね。間違った入力をしないようにするとか、コードをいじらないで済むような努力をしますね。

Q
某JRアプリ、UIがかなりリニューアルされ、デザイン界隈と、ユーザー、レビューの声に差異があるようですが、どう思いますか?
A

うーん、私は良い方向に変わったように思います。今っぽいですよね。

最近のUIって、割と情報を纏めて表示すると言う方向よりも、内容を削ってミニマルにすると言う感じが強いように思います。それぞれの画面でやるべき事がハッキリするので割と好きなんですが、好みもあると思うので、何とも言い切れないかな…。私は、機能が整理されて扱いやすくなった気がしました。

ただ、今後のベンチマークでまた変わっていくんだろうなぁと思っています。きっとね。

Q
技術的に無理なもの(例:文章を解析させてうんぬん)しないと実現できないものを提案されたらどうしますか?
A

方法について説明をします。そしてそれは私の技術力の範疇では無いとハッキリ伝えます。そして、必要に応じて断ります。

もともと私の思想が「やれないことはやらないし、やりたくないこともやらない」なので、こういう感じで断っちゃいます。企業だとそうも行かないと思うのですが、なんとかして受けていかないと行けないのであれば、社内調整をするだけですね…。フリーランスなら、「できる見込みのないことは断る」が吉だと思います。

Q
お話しきいてたらもっとux uiの考え方を学びたくなりました。おすすめのサイトや本があれば教えて下さい
A

そうですねぇ。私、本も見ないし、UXとか言う言葉が登場する前から「人に優しいデザイン」みたいな事を言われて育った結果UI/UXをやるようになってきたという感じなので、参考になる物にあまり「コレですね!!」って言える物がないのですが、UX MILKさんとかは割といい内容も書かれているのでは無いでしょうか。たまに「えっ?」って思う物や、「海外だとねぇ…」という翻訳記事もありますが…。

Q
リアル世界のUIの意味を、ブラウザ上だとどのような効果に落とし込めるのかという視点は、とても分かりやすくて面白いです
A

そう言っていただけて良かったです。毎度セッションをし終わった後は「コレで良かったのだろうか」って思うんですよね。たとえ「良かったよ」という意見をもらったとしても、他の人はどう思ったかなぁとかいろいろ考えてしまいます。

誰しも登壇者は不安を抱えると思うので、是非こういう意見は積極的に伝えていただけたら良いなと思います。

ということで

長々書いて参りましたが、ザックリこんな感じです。もっと話聞きたかったなぁとか思う方は、登壇で呼んでもらったりすると嬉しいです。遠慮無くご相談いただけたら幸い。

今回は大田区での開催という事もあって、無理矢理感のある空港ネタをぶっ込みましたが、もっとWordPress寄りの話もできないわけでは無いので、良かったら声かけてくださいませ。

来て頂いた方ありがとうございました。またお会いしましょ。ヽ(´ー`)ノ

この記事を書いた人

ささぴよ

TechAcademy公認エバンジェリスト
株式会社シノビアシ 取締役副社長 兼 CTO

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

TechAcademyでは、Webデザイン / WordPress / UI/UX / Node.js / OSS活動 / デザイン実践ポートフォリオ / フリーランスサポートのコース を担当するメンター。

よく歌って踊っている。