【イベントレポ】WebデザインとUX について考えるに参加しました

Posted on by misumi_takuma

2016年5月14日に開催された関西フロントエンドUGの「WebデザインとUX について考える」に参加してきました。

UXはよく分かっていないので、すごく楽しみにしていました。

セッション内容
  1. おっぱいから見るUI/UXとPELSONA
  2. イラスト制作とデザインに共通する表現技法
  3. 初期導入と記憶の利用
  4. UI記述言語としてのHTML
  5. UXを損ねる静的コンテンツ配信アンチパターン
  6. 正解のないデザインについて、それでも正解について考えてみる
  7. 制作側とユーザーの温度差、そしてペルソナのズレ-プロゲーマーと高校生から学んだ例-
  8. 人類の進化とデザイン
  9. WebアプリケーションとWebサイトのデザインの違いからみるCSS設計

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

いきなりこれかと思ったセッション（笑）
おっぱいを例にしたUXの話です。

スライドはこちら

会場内、Twitterのハッシュタグにはおっぱいが連呼され変な雰囲気。
だれもが好きな（?）おっぱいから考えればUXやUI、ペルソナ設計まで理解しやすいというお話でした。

（利用中、利用後と言われると風俗っぽいなと思った）

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

スライドはこちら

イラストもデザインも手間と労力は見てる側に伝わるそうです。

逆に手抜きもバレるので、ただ単調に並べるようなデザインはよくない。
というのを、実際に制作したバナーを元に話をされていました。

UXと聞くと、サイトの設計というかちょっと大きな枠組みのようにイメージしてましたが、
デザインの細かいところまで突き詰めて考えられるようになれるといいなと思いました。

初期導入と記憶の利用

大学の講義かと思ったセッション。
めちゃくちゃ楽しかったです。

結論は「記憶はマジで忘れる」

人はどうしても忘れてしまうという前提で、
どうやったらより記憶に残るかを様々な実験から解説されていました。
専門用語は難しかったですが、Webサービスに置き換えるとすごく活用できる部分がありそうです。

途中Prottを例に、ユーザーに使い方を覚えてもらう手法の紹介もありました。

以前の職場で、ユーザにどう使い方を覚えてもらうかの画面設計などをやっていた時のことを思い出しました。
タイトルでは初期導入とかかれていますが、頻繁にログインしないようなサービスでも活用できるんじゃないかな。

今では無料サービスが多いので、とりあえず登録してみるケースも多く、
初期学習コストが高いとすぐにユーザーが離れちゃうということも聞きます。

Webサービスを使ってもらうためにも、こういったところをしっかり考えることが大事だなと改めて感じました。

あと、ちょろっと話されていた「ストレスは記憶に障害を与える」っていうの面白かったです。
人はマジで忘れるから、じゃあログインするたびに使い方を毎回アラート表示するようなことをしていたら、
うっとおしくなって忘れるそうです。

UI記述言語としてのHTML

HTMLをちゃんと書くとUXが高まる（損なわない）という話。

スライドはこちら

すごく共感できたのはbuttonタグ。
最近メニューを開くボタンなども全部buttonタグにしています。

いろいろなサイト見ていると、確かにメニューのボタンが全部divで作られていたり、
aタグもおかしいんじゃないかなと思ったりしてます。

buttonタグにするだけで以下のようなことが（スライドから抜粋）

  • 押せる見た目に勝手にしてくれる
  • キーボードフォーカスを受け取ってくれる
  • フォーカス時の見た目もデフォルトで付与
  • autofocus属性でフォーカスのコントロールも
  • JS無しでEnterやspaceで実行
  • 読み上げ時に実行可能であることが読み上げられる

UXってデザイナー分野だと思ってましたが、
コーダーでもすぐに取り入れられるものもあるんだなと思いました。

あと、details & summary便利。
使えるブラウザは少ないですが。

See the Pen WwWgdJ by misumi (@mismith0227) on CodePen.

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

画像やCSS,JSの読み込み方法でUXが損なわれるかもしれない話。

UXを損ねる静的コンテンツ配信アンチパターン7選 from 勇樹 岡田

細かい指定の方法で知らないものがあって勉強になりました。

JS読み込み時のasync deferをつけて、非同期で読み込む方法は知りませんでした。便利ですね。
ただ、JSはbody閉じタグ直前を何だかんだで使うかな。

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

正解がないと言われるデザインの話。

WebデザインとUI/UXを人に例えるはすごく分かりやすかった。

デザインは好みがあるけど、UI/UXに関しては限りなく答えに近いものがあって、
ユーザーが使った時どう思うかを考えたら割と正解に近づけるのかなと思いました。

カイトさんのも講義っぽくて面白かった。

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

カイトさんのセッションでユーザー目線で考えるのが大事と分かったけど、
ユーザー目線で考えるときは、制作側だけで考えたらダメだなと思った話です。

制作側では「これがいいだろ、そんなの使いにくい」と思ってたものが、
実はターゲットとしていた層には使いやすかったという経験があったそうです。

「みんなそう言ってる」は信用できなくて、やっぱりちゃんとユーザーの声を聞くのが大事ですね。

人類の進化とデザイン

人類の進化についての話（違

人類の進化とデザイン from Ayaka Sumida

ここ200万年でテクノロジーはものすごく進化してきたけど、
人類は基本的なスペックはあまり変わっていない。

この差を埋めるのはデザインではないかという話。

200年前の人類と最新バージョンの人類を比べて変わらないとこがあったら、
それは人類が本質的に求めているもの、気持ちの良いUXなのかなと。

人類の進化の専門家が話すことは深いです。

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

WebアプリとWebサイトのCSS設計の違いの話

Webアプリは同じコンポーネントの組み合わせ、
Webサイトは各ページ独自のデザイン要素があるという違いから、
BEMやFLOCSSのような設計ってWebサイトに本当に必要なのか？

制作会社では納期があって時間がないのも事実。
この言葉はわりとある気がする。

保守の機会がなさそうなもののCSS設計に悩むよりもっと重要なこともあるのでは？

個人的には綺麗なコードも大切ですが、綺麗に動くコードも同じぐらい大切と思ってます。

触ってて綺麗に動かないサイトとかけっこうありますよね。
修復中ならいいんですが。

適材適所のCSSを考えろと高校生に教えられました。

他に参加されていた方のブログ（見つけ次第追加）

  • WebデザインとUX について考えるに参加してきた
  • 関西フロントエンドUG 「WebデザインとUX について考える」に行ってきた。
  • WebデザインとUXについて KFUG 勉強会 に参加した記録とメモ
  • WebデザインとUX について考えるに参加してきました。
  • 「WebアプリケーションとWebサイトのデザインの違いからみるCSS設計」について
  • 関西フロントエンドUG主催「WebデザインとUXについて考える」に行ってきた。
  • 「人類の進化とデザイン」という話をしてきた
  • UI/UXについて発表してきた
  • 【良いUXって？】「WebデザインとUX について考える」勉強会に潜入してきた
  • 「WebデザインとUXについて考える」参加レポート #frontkansai
  • 関西フロントエンドUG 「WebデザインとUX について考える」についてのまとめのまとめ

こちらの記事もどうぞ

Tweet
このエントリーをはてなブックマークに追加
Pocket

One thought on “【イベントレポ】WebデザインとUX について考えるに参加しました”

  1. ピンバック: 関西フロントエンドUG主催「WebデザインとUXについて考える」に行ってきた。 | ネクストページブログ

Comments are closed.