WebデザインとUXについて KFUG 勉強会 に参加した記録とメモ

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

UI/UXとは

• UI…User Interface 目に触れるすべての部分
  →おっぱいの 魅力 を感じさせる、女性が行う部分

• UX…User Expelience サービス利用の上での感情
  →おっぱいを見て感じた 感情 など男性が感じる部分

PERSONA（ペルソナ）とは

• 全員の普通を文章や形にして全員で共有できるようにするための 架空の対象

UI/UX/PERSONAのサイクルを回す

• 基本的にすべてのサイクルを通るので、どこから回してもかまわない
• オススメは三人でそれぞれの位置をスタートとして三つの意見をぶつけ合う形

UXのプロセス

• ユーザの欲求 をリストアップ
• ユーザの欲求を満たせなかった場合 もリストアップ
• サービス利用期間外時のユーザの欲求 （サービスを使った 感想 などを 共有 する行為・共有したいと思うこと）もリストアップ

UIのプロセス

• ユーザが 使いやすい形 を想像し、画面として実現する
• 同業のものをストックしておくことで、ユーザの利用しやすさを考慮しやすい
• UIをテストする→テストはリスクの少ない方法で行う

PERSONAのプロセス

• システムを利用する 人間像 を考える
• 最初に決めた簡単なPERSONAで 更新を止めてはならない → 更新を行わないとリーダの主観がメインになってしまうため
• UI/UXをもとに考えられた小さな変更をまとめて、 一度に「よいしょ！」とペルソナを更新 する

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

抽象的と具象的

• 抽象的 …ただの赤い丸、白い筒など様々なことを考えることができる形状
• 具象的 …リンゴの写真、たばこの写真など抽象的なものよりも想像できる範囲が狭くなったもの
• 抽象的なものの繰り返しはまだ 考える余地（想像できること） があるため、 面白い と感じる
• 具象的なものの繰り返しはそれ以上に 考えることが難しい ため、 単調 と感じる → サイズの変更・色の変更・形の変更で防ぐ
• 単調ではないことを行う（少しの工夫）ことで魅力的で、伝わりやすくなる

まとめ

• 単調でないもの・手間暇がかかっている（工夫が凝らされている）もの を人は魅力的に感じる

初期導入と記憶の利用

題材

• 記憶はすぐに忘れる
• 意味的関連付けで強化させる
• これを意識してサービスを作る

サイト（アプリケーション）の使い方のわかりやすい説明

• 動画説明など→ 場合によって使えない場合がある

過去に学ぶ（利用方法の説明の重要ポイント）

• 学習容易性
• 記憶容易性 →今回はこの二つの重要性について話す
• 効率性
• エラー対応
• 主観的満足

記憶とは？

もしも人に記憶がなかった場合

• 過去が消える
• 過去から推測する未来が消える → 時間の概念が崩れる

記憶には種類がある

== 記憶の長さでの分類 ==

• 短期記憶
  • 作業・処理 を行うのに使われる記憶
  • 2,30秒 で消える
  • すぐに使える（活性的）
  • まとまり（チャンク）で覚える。このほうが覚えやすい
  • 復唱し続ければ維持できる
  • 短期記憶は意味的な処理（文章の中の単語であるかを確認するなど）をすれば短期記憶でも通常の短期記憶よりも記憶期間（質）は長くなる。
  • しかし、意味ではなく形式（単語は大文字でできているか）などの単純な記憶の方法だと記憶を取り出すまでの時間が短い。

== 記憶の情報での分類 ==

• 符号化
• 外部から情報を取り込んで、記憶と結びつけるまでの情報のこと

※しつこく記憶させようとすることに対して

→ストレスが多すぎると記憶に対して障害を与え、 記憶しなくなる

認知処理の量とUI/UX

• 短期記憶の意味記憶するほどでないもの（その画面でのみ使うような説明など）は 隣にヒントを与える程度 でかまわない

処理水準仮説の解説

• 前半部は音韻的処理（形式記憶の次のレベルの軽い処理）のおかげで記憶に残る
• 後半部は深い意味（単語の連続に意味を見出してくる）での意味的処理を行うので記憶に残る

質問に対して（精緻化）

• 意味的な関連があると記憶に残りやすい ということが分かる
• また、意味の 整合性 が取れているほうが記憶に残りやすい
• 記憶は質問のテストため、お金のためなどの 目的がある・なしに関係しない
• 記憶は意味的記憶が最も記憶に残りやすい

UI記述言語としてのHTML

buttonタグ

• submit…送信する
• reset…中身を消す
• button…汎用

トリガー として使える要素
→めんどくさいこと（JSやCSSで指定しなければならないこと）をbuttonを使うだけで勝手にやってくれる

labelタグ

UI の キャプション のための要素

details & summaryタグ

アコーディオンメニュー を簡単にできるHTML5タグ

menu & menuitemタグ（現在はFirefoxのみ）

右クリックメニューから発火させられる イベントを簡単に を作ることができる

まとめ

• きちんとしたタグを使うことで、JS・CSSに頼らなくても 汎用性の高いUI を作ることができる →これはUXの向上にもつながる
• 汎用性の高いUIを簡単に作れることで コンポーネント化 もしやすい

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

はじめに

localhost環境では気にならなかった問題も本番環境に持ち込むことで 劣化・予想とは違う動き をすることがある。

開発環境と本番環境のギャップ

• 大きな画像をスタイルサイズ指定での縮小表示 →サイズをきちんと変換してからサーバにアップする
• スタイルでサイズを指定せずに画像表示 →きちんとスタイル指定しておく（あとから画像が読み込まれたタイミングで リンクの位置がズレる 問題などがあるため）
• Retina対策していない画像表示 →画像を2倍・3倍のサイズで保存しておきながら、表示指定を行う →html5の srcset属性 を使う
• 巨大なサイズのJSファイルをそのまま公開する →ライブラリなどを使ってmin.jsを作る（圧縮する）
• なんとなくheadの中にscriptインポート・記述 →JS読み込みを後ろ（body閉じタグの直前など）に置く →async defer（非同期読み込み）を使う →その他のやり方（参照：JavaScriptパターン）
• キャッシュ有効化してるのに上書き保存（キャッシュが利用されてしまう） →バージョン情報をQueryStringを書く →ファイル名を変える →キャッシュを使わない（HTTPリクエストを減らすのをあきらめる）
• なんでもかんでもキャッシュOFF（毎回ダウンロードされる） →動的コンテンツファイルだけをキャッシュOFFにするなど

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

WebデザインとUI/UXについて

• 狭義の Webデザインには正解がない といわれていることが多い
• それ以外の部分には正解（正攻法） がある…？

WebデザインとUI/UXを人にたとえる

• Webデザイン…人の見た目 →人によって多種多様で好みはそれぞれ
• UI/UX…人の性格・おもてなしなど →ある程度方向・分類ができ、好き嫌いもある程度分類できる

普遍的な正解とは？

• アイコンにあった色
• 画像や図形のシャープなエッジ
• 整列と間隔（オブジェクトの位置関係・場所）
• 一貫性（色・マージン・言葉遣い）
• 視覚階層（文字の太さや見た目のわかりやすさ）
• アフォーダンス（見た目で機能を判断できる・それのヒントを与える）
• リンクとスクロール（別ページのリンクにするか、スクロールにするか）
• タイポグラフィー（横幅・縦幅・段落付けなど）
• テキストエリア（文字量の変動を考慮する）
• テキストの整列（キャップheightとディセンダー、xheight、キャップheightとxheight）
• 三角形の整列（三角形の重心をセンターぞろえする）※ツールの自動そろえを信じすぎない
• 画像（画像のアスペクト比・サイズ）

※PIXEL PERFECT PRICISION(?) PIXEL PERFECT PRECISIONより

正解のない部分に対しては？

• 阿部寛のHPが理想なのか？ →阿部寛だから潔くてよい

• なぜデザインに正解がないといわれるのか？
  →最終的には好み
  →結果を 計測しにくい

• ではどうするのか？
  →目的を明確にする（デザインに凝る・使いやすさ・作りたいかどうか）
  →ユーザの視点 に立つ（誰が使うのか・使う人が使いやすいのか）
  →デザインの理由 を持つ（なんとなくではなく、理由を答えられるように）

まとめ

• リリースされたら終わりではない（リンスタートアップなどを使って何度も ブラッシュアップ する）
• 人間以上に 中身が必要（かっこよさよりもコンテンツの充実。しかし、デザインが必要ないわけではない）

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

使いやすいサイトって？（プロゲーマー向けの場合）

• デザイナ側
  • いろんな情報を表示
  • ゲームに近い感覚
• ユーザ側
  • ゲームしながら片手間にみるため、ごちゃごちゃしなくていい
  • サイズをレスポンシブにしてほしい
  • ページ遷移してはならない
  • 必要な時だけホバーで情報を表示する →デザイナの考えた像と かなり異なった

使いやすいサイトって？（高校生の場合）

• デザイナ側
  • SNSなども使えるように
  • 文字が多くても読めるのでは
  • 画像などを使ってわかりやすく
• ユーザ側
  • SNSから問い合わせを行う →デザイナの考えた像と 少し異なった

まとめ

• 調査が足りていなかった
• 調査だけでは足りない（ 調査をもとに考える ）
• 調査の意見やデザイナの意見は世間・みんなではなく、 個人の意見 である（太宰メソッド）

どのようにするの？

• 他のサイトなどでユーザも慣れている・調教されている →他のやり方を参考にする
• 行動をすべてひっくるめて考える →人間の生活はそのページやサイドだけで完結はしない
• 使いにくいものに慣れている場合もあるので、 作っている側の使いやすいもので考えるのはよくない
• しかし、普遍的なもの・最低限のレベル などはあるので、そこは押さえる必要がある

人類の進化とデザイン

進化とは？

• キリンの首はなぜ伸びた？ → 高いところの草を食べられる個体が生き延びたので、子孫を残すことができた

人類の進化とテクノロジ・文化の進化のギャップ

== 人類 ==

• 嘘をつく
• コミュニケーションをとる
• 道具を作る

== テクノロジ ==

• 世界中の人とのコミュニケーションができる
• 長生きできる
• すごいことができる

デザインの役割

• 人類の進化（生まれたての赤ちゃん）が文化・のテクノロジの進化（現在の社会）に追いつくための手助け

• 逆にデザインを使ってテクノロジを 人類の想像した通りに動かしてあげる と、心地よく感じる→UXの向上につながる

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

WebアプリケーションとWebサイトの都合は全く違う

== Webアプリケーション ==

• コンポーネント化して、再利用をする
• 再コーディング をする前提で作る

== Webサイト ==

• 細かいコンポーネントの組み合わせで、再利用よりも見た目・現状重視 である
• 納期が短いなどで、 再コーディングの余地が少ない

よく見るCSS設計のパターン

Webアプリケーション向き のことが多い

Webサイト制作で求められる要件

• 素早いコーディング
• CSS設計の固すぎる部分との折り合いの付け方
• 現状知識でのコーディングできるのか

Webアプリケーション寄りエンジニアがWebサイトを作るときは

• Webアプリケーション制作の バットノウハウの中にもベストプラクティスはある のでは？
• 適材適所のCSSが必要なのでは？