【良いUXって?】「WebデザインとUX について考える」勉強会に潜入してきた

【良いUXって?】「WebデザインとUX について考える」勉強会に潜入してきた

5月15日に、関西フロントエンドUGが開催する「WebデザインとUXについて考える」勉強会にブログ書く枠で参加してきました。「UX」をテーマに9名の方が登壇され、UXの正解についてガッツリと説明された方もいれば、大学の講義だ。ってくらい内容の濃いセッションや、18禁すれすれのおっぱいトークなどバラエティーに富んだ内容の勉強会でした。

各セッションでの内容を、明らかに足りていませんが3行で簡単にまとめてみて、その後にUXについて1冊本を読んだ程度の知識しかないわたし(id:sakanatech)が、どのようにセッションの内容を解釈したのかについて書いていこうと思います。

 

Session1. おっぱいから見るUI/UXとPELSONA

もう、タイトルからぶっ飛んでるんですが、内容はいたってまともでUXというものが何かを具体的で想像のし易い内容にまとめられていました。

発表者:コンチさん

 

発表を3行で書く

  • おっぱいはUXを説明するのに適している
  • ユーザーの表面的なニーズだけでなく潜在的なニーズを満たしてこそ良いUX
  • UXはWEBの中だけで完結しない。

 

おっぱいに沸く聴講者たち

しょっぱなから突っ込んだセッションでした(もちろん性的な意味ではない)
もちろん、こんなセッションなのでTLは大盛り上がりに。。

https://twitter.com/mellowchanter/status/731365323601903616?ref_src=twsrc%5Etfw

ちなみに、何度「おっぱい」という単語が登場するか数えてみていました。

女性のもつ「おっぱい」をWebサービスのUIに例え、男性がもつ「おっぱい」に対する欲求をWebサービスを利用するユーザーに例えてセッションが進みます。内容は凄く分かりやすく、

ユーザーが期待する結果が得られなかった時=ユーザーは不満を感じる

つまり、このサービスのXUは悪いUXである。

うーん。分かりやすい。おっぱいはUXを説明するのにとても適している(困惑)
「UXとは」を的確に分かりやすい表現方法で説明して下さって、最初のセッションで本当に良かったです。

 

感想

ユーザーが期待する物を裏切らずにユーザーが期待する通りに欲求を満たしてあげることで、ユーザーに対して良いUXであると言えるという事が分かりました。また、それだけではユーザーに感動を与えることができずユーザー自身が気づいていない潜在的なニーズを発見し満たしてあげる事が出来れば、もう一歩進んだ優れたUXであると。
UXをデザインするということは、PERSONAを深く分析し、ユーザーの心の奥底に隠れているニーズを掘り起こして満足させてあげることを追究することなんだな。と感じました。
PERSONAの分析は短期間で何度も更新をして常に最新のPERSONAであることを維持する。というのは初め聞いた時は驚きましたが強い必要性を感じました。

 

Session2. イラスト制作とデザインに共通する表現技法

あの「おっぱい」さんの「おっぱい」セッションの後で非常にやりづらいだろうなぁと思いながら聴講していました。イラスト制作をされる際に本当にチョットしたことを意識するだけでユーザーの満足度を向上させることができるという事を紹介してくださりました。

発表者:Yasui Risaさん

 

発表を3行で書く

  • イラストを含むデザインは連続利用すれば、意味を成さなくなったり飽きられるから意識して注意が必要
  • 少しだけ変化を持たせるデザインは人を惹きつけ、飽きられない
  • 手間ひまかけたものは無理に強調しなくても、ユーザーは注目するのでしっかり作るのはやっぱり大事

 

感想

ユーザーは手抜きを見抜く」というのは響きました。本当にその通りですよね。これはイラストやデザインやコードにも同じような事が言えるのではないでしょうか。ユーザーの観察眼はこのインターネットの海を泳いでいる中で非常に研ぎ澄まされていて、一瞬で「しっかり作っているものなのか」「適当に作ったものなのか」を見抜く力を持っています。その中でいいモノを作って良い影響を与えることを考えてデザインするということはデザインの奥深さや、デザインそのものの難易度の高さを再認識させられる非常に良い機会でした。

 

Session3. 初期導入と記憶の利用

まさに大学の講義でした。ヒトの記憶に関する研究結果に裏付けされた「新しいサービスを記憶に残す方法」について講義してもらいました。このセッションの内容は非常に濃密で、まともに講義しようとすれば、前期1シーズンの時間が必要になるうです(やばい)

発表者:@plum_shigaさん

 

発表を3行で書く

  • 人間の記憶はマジで一瞬で忘れる
  • 意味の整合性を保つことで記憶されやすくなる
  • それでもマジで忘れる

 

感想

記憶に関して専門的に学ばれている方からのセッションで、内容が非常に濃い。
そもそも、わたしたちは記憶というものに関して、学生時代の試験勉強と同様に「繰り返せば記憶できる」程度の理解度と自分自身での解釈しか持ちあわせていなかったのですが、

  • どうすれば記憶しやすくなるか
  • どんな方法が強い記憶に結びつくのか

などについては、特に考えないままサービスの導入についての資料作成や実際にユーザの元に行ってサービスの背景やサービスの使い方について説明を行っていました。

理論や研究成果に基づく記憶について知ることで、今までは「わかりやすい説明を心がけよう」として資料作成していたものに加えて、「どうすれば記憶に残せるか」という新しく非常に重要な観点を気付かせてもらうことが出来ました。
以下はわたしなりに解釈したものですが…。

  • ユーザーに記憶してもらうためには過去の経験と紐付けることができる言葉や行動で説明する
  • 立場や状況によって記憶量に大きな変化はないため、内容を重視する
  • 最初と最後は最も記憶しやすいため一貫して整合性のとれた内容で説明することを心がける

こういう内容が超濃厚な講義を受けると大学に通って本格的に勉強してみたかったなぁと感じるものです。

 

Session4. UI記述言語としてのHTML

HTMLとは、わたしが人生で初めて習得したコンピュータに関する言語であり日本語に次いで長い間付き合っている言語であるため、どうしても「簡単だ」とか「もう知ってる」と思いがちですが、HTMLは単純だけど奥深くまだまだ知らないことがたくさんあるんだなと痛感させられました。

発表者:masuP9さん

 

発表を3行で書く

  • HTMLは使えば使うほど難しいことに気づく
  • < button >タグは可能性の宝庫。様々なユースケースに対応できることはUXの向上に繋がる
  • HTMLを適正に利用することはUIだけでなくUXの向上にも繋がる

 

感想

先入観として、「HTMLは簡単」という思いは少なからずありました。転職の面接時にでも「HTMLとCSSはばりばり書けます」みたいなことを言っていた記憶があるので、そういった思いからこのセッションの中で指摘されるコトに対して「うっ…」と思うことがいくつかありました。

特に

また、sectionタグについて、Jqueryを使って導入することが当然だと思っていた「Accordion」の実装をHTMLだけで行えることが分かり、感動したのと「まだまだHTMLについて知らないことが多い」という事実をつきつけられました。
現在、HTML5のLevel1の認定試験を受けようとしていますが、資格を取得したら終わりではなく、単純な構造のUI記述言語であるHTMLの基礎からしっかりと学び本当に効率的でユーザフレンドリーなHTMLを目指さなくてはいけないな。と意識が高くなりました。

 

Session5. UXを損ねる静的コンテンツ配信アンチパターン7選

「うわぁ…やってる…」というのが多く見つかって早速、改善に取り掛かりました。
それほど、単純だけどついやっちゃいがちなアンチパターンを紹介してくださっています。

発表者:サイボウズ株式会社 大阪開発部 Webアプリケーションエンジニア 岡田勇樹さん

 

発表を3行で書く

  • 画像コンテンツの配信時にサイズ指定せずに出力したらUXが大幅に低下する
  • JavaScriptをそのまま公開したら重すぎて描画時間が大変なことになる
  • なんでもかんでもキャッシュOFFにしたら重すぎる

 

感想

主にサイボウズ株式会社で行っている静的コンテンツのターンアラウンドタイム向上施策の紹介でした。
しかし、さすがに大量の静的コンテンツを自作し公開しているサイボウズだけあって、自社が管理しているサイトの中でアンチパターンに該当するものを探すと「でるわでるわ・・・」怖くなりました。

選ばれし7つのアンチパターン

  1. 大きな画像をサイズ指定で縮小表示
  2. サイズを指定せずに画像表示
  3. Retina対策していない画像表示
  4. JavaScriptファイルをそのまま公開
  5. なんとなくheadにScript
  6. キャッシュを有効化しているのに上書き保存
  7. なんでもかんでもキャッシュOFF

このうち、わたしが所属する会社で制作したサイトにいくつか該当するものがあったので、すぐにリードエンジニアに相談をしました。
特にセッション中に話題になったのは、Scriptの記述位置でした。
Scriptタグといえば、headの中に記述して読込を行っておくのが通例だという感覚がありましたが、大きなJavaScriptファイルをheadで読み込んでしまうとページ表示にかかる時間がトータルで伸びてしまい、ユーザーの離脱率を高めてしまう原因になります。
そうならないために、コンテンツの描画が終わってからScriptの読込を行う< /body >直前に書く方法が流行していますが、その方法以外にも選択肢があると教えて頂きました。< script >タグの中に、”async defer”を追記することでタグの中に記載したとしても非同期に読込を行うためコンテンツの描画を妨げることはありません。

しかし、まだまだ課題点があり、async deferでは非同期読込であるため順序性を担保することができないため予期せぬ挙動をとってしまう可能性が残ります。まだ現状では< /body >直前に< script >タグを書く方法の方が不格好ではありますがデメリットがなく良い方法であると思いました。

 

Session6. 正解のないデザインについて、それでも正解について考えてみる

大変興味深く、また利用者によって見え方や感じ方が変わるデザインの正解について考えてみるセッションでした。

発表者:Kiteさん

 

発表を3行で書く

  • デザインに正解は無いが、昔から普遍的に変化しない正解に限りなく近いデザインはある
  • デザインの正解に極限まで近づくためにはユーザーを理解する(=UXの向上)
  • デザインに対して理由を持つ(=思いをもつ)

 

感想

普遍的なデザイン(アフォーダンスなど)の枠を超えてWebサイトを制作すると、目新しいモノで注目を惹くかもしれませんが、ユーザーの想定を裏切る形になってしまいます。その結果、WebサイトだけではなくWebサイトを公開している企業に対しての印象も悪くなってしまうことにつながっていきます。(≒UXが低い)

そうならないために、どんなユーザーに向けたWebサイトとするのかをしっかりと想定(Persona設計)していくことが、現代のWeb制作に求められているのですが、それだけでは今後、人工知能の発達やWeb制作の半自動化(ジェネレータ)技術の発達により普遍的なデザインを適切に盛り込んだWebサイトが容易に作れる時代に乗り遅れ、いずれWebデザイナーやマークアップエンジニアは職を失ってしまいます。

そうならないためにも、次世代のWebデザインが目指すべきはユーザーの隠れたニーズを引き出し「気付き」や「感動」をWebデザインを通じて与えることが求められるようになり、「UXの向上」を追求した先と同じゴールにいるため、「良いUXとは何か?」の答えを自分の中に持っておき、Webデザインであれ、バックエンドコーディングであれ答えに向かって制作を続けることが重要だと感じました。

 

Session7. 制作側とユーザーの温度差、そしてペルソナのズレ-プロゲーマーと高校生から学んだ例

元、MMO廃人として活躍していたので特に興味深く、ヒアリングに回答したプロゲーマーの意見にうなづける点が多かったです。

発表者:コソバマイさん

 

発表を3行で書く

  • 利用者が限定されているデザインには、一般的な常識とは異なるベストなUI/UXが存在する
  • とはいえ、普遍的なデザインは存在し、特殊なUIは非常に嫌われる
  • 実際の想定ユーザーに対して意見照会することは非常に大事。利用者が想定出来る場合は積極的にすべき

 

感想

プロゲーマーは普通のWEBサーファーとは異なるWEBの使い方をするため世間一般的に優れているデザインでは、プロゲーマーの需要を満たすことができない。人や職業によって素晴らしいUXは異なる。ということを示すいい例ですね。
また、この業界に限らず仕事でのあるあるですが「みんな言っている」は全くアテにならないというのは凄く共感できました。結局実際に使っている人や統計学的に根拠のある母数に対してのアンケート等を実施することで生の声を集めなければなりませんよね。

 

Session8. 人類の進化とデザイン

なんとも壮大なテーマ。そしてさすがデザイナーさんのスライド。イラストが圧倒的に可愛く、そして目に優しく美しい配色を用いたセッションでした。

発表者:角田綾佳さん

 

発表を3行で書く

  • 人類はこの200万年で進化したと見せかけて実は周囲の環境が進化しただけで種としては特に大きく進化していない
  • 大きく進化していないのには、昔から変わらない普遍的なモノがあるから = それはデザインでも同じ。
  • その人のもつ価値観の通りになれば、欲求を満たすことができる。(=良いUX)

 

感想

イラストの可愛さやスライドの美しさに最初は目を奪われていましたがセッションの内容はすごく納得させられるものでした。
良いデザインから感じることができる「美しさ」「心地よさ」「楽しさ」は人類の基本的な欲求でこの中にデザインの進化が隠されているはずだ。その進化の種を見つけるためにいま、WEBを用いて創造しているわたしたちが考えて行動していくことが重要なんだなと感じさせられました。個人的に、セッションの冒頭で参加者に対して質問する形式は非常に好きでセッション慣れされているなぁと印象に残りました。

 

Session9. WebアプリケーションとWebサイトのデザインの違いからみるCSS設計

なんと最後は、現役高校生の発表でした。高校生とは思えない落ち着いたセッションで少し驚きましたがさすがに企業にジョインしてエンジニアとして働いているだけあって、CSS設計に対する思いやあるべき論などについて教えて頂きました。

発表者:@potato4dさん

 

発表を3行で書く

  • CSS設計では変更に強く、保守性に優れたWebアプリケーション設計に用いられる概念が必要になる
  • コードの再利用が必要か否かがCSS設計を行う上で重要な要素になる
  • 例えばWebアプリケーションに長けたエンジニアがCSS設計を考えることでCSSの可読性や保守性が向上する可能性がある

 

感想

なかなかに興味深い内容でした。CSSは複数人で制作を行う場合「場当たり的な」コードが多く生まれがちでしっかりとCSS設計を行わなければ、どうしても可読性や保守性が悪いコードになってしまいます。また明確なコーディング規約を作成しておかなければ、後々の更新時に「!import」祭りになってしまう恐れもあり、どこまでのレベルでスケーラビリティを確保するかは非常に重要な課題で、いまリアルタイムにわたしも課題認識として持っているものの1つでした。
その答えしては、CSS設計をアプリケーションエンジニアが行うという斬新な手法でしたが、実際ではアプリケーションエンジニアがCSS設計に使える稼働時間はあまり無く、どうしてもフロントエンドエンジニアやマークアップエンジニアの経験に沿った設計になりがちとなります。
ここについて、わたしは答えを持ち合わせていないのですが、例えばW3CからCSSの設計に関する草案が出ていたりはしないのでしょうか?
また、CSS設計を行う上でドキュメントは作成する必要はあるのか?無いとしたらどういう考えのもとにCSS設計を行うのか。

すごく根が深く、しっかりと検討・議論した方がいいテーマでした。

 

全体のまとめ

フロントエンドに関する技術は、今現在、そこまで多く持ちあわせておらず、最新の開発手法や開発技術についても数年分の遅れがあるなとわたし自身のスキルレベルの把握や新しい言葉を色々と仕入れることができ、自ら調べるための元ネタを提供していただきました。
またセッション内でいままで「なんとなく」で流していた課題などについて、わたし自身の中で答えを探すきっかけになるなど非常に有意義な勉強会でした。
セッションを聞いていて、わたしも何か発表できるようなものがあればぜひとも発表したいと感じたので機会があれば登壇し、何かしらの知見をご紹介できればなと思っています。
残念ながら、現状ではブラック企業話くらいしかすることができないので、いちはやくフロントエンドだけに限らずWEB制作全般的なスキルを身につけて行動していく必要があるな。と意識が相当高まりました。

 

らいか
UXという言葉がすごく最近はやっていていますが、昔からユーザーにとって良いものを愚直に守り続けてその範囲から大胆に飛び出ない範囲で新しいモノを作るっていう思想がこれから求められるのかもしれませんね
【良いUXって?】「WebデザインとUX について考える」勉強会に潜入してきた

SNSへのシェアはこちらから!

ABOUTこの記事をかいた人

工業高等専門学校を卒業後、NTTグループのSI企業に就職。数々の炎上案件を鎮火するために日本各地を5年間転々とする。2015年に一般ユーザ向けのWebシステム開発案件のチームリーダとして業務に従事し、改めて"Webのものづくりの楽しさ"に気付きWeb制作会社に転職。Web制作やアクセス解析を使ったオウンドメディアの運用改善などを行っていく中で、もっとユーザー目線でWebをただ制作するだけではなく企画や運用まで幅広い領域で仕事がしたいと感じるようになり、Webディレクターのキャリアを目指す。日本中のビジネスホテルに詳しく、犬や猫よりも鳥派。