ランサーズ(Lancers)エンジニアブログ > もくもく会 > 2023/9/1週 もくもく会-UXデザインの教科書,デジタル庁のウェブアクセシビリティ導入ガイドブック,Adobe Premiere Pro実験

2023/9/1週 もくもく会-UXデザインの教科書,デジタル庁のウェブアクセシビリティ導入ガイドブック,Adobe Premiere Pro実験

tanifumiya|2023年09月01日
もくもく会

ランサーズでは自己学習の場として毎朝1時間程のもくもく会を開催しています。
もくもく会を開催しようと思ったきっかけは、こちらで紹介しています。
以下は今週の取り組みになります。

今週のもくもく会

  • フロントエンドテスト入門を読む
    • 5-5 UIコンポーネントのテスト
      • UIコンポーネントはテキストやロールでしか要素を判定できない(DOMが使えない)
      • なので、割とトリッキーなことをして要素の判定をしないといけない
      • フロントエンドのUIコンポーネントのテストエンジニアっていう職種が出てもおかしくない知識量がいる
      • 出来たら画像差分で直感的な確認をしたい
  • UXデザインの教科書を読む
    • 体験の期間で異なって知覚されるUX
      • 体験の種類
        • 予期的UX
          • 製品やサービスを実際に使用する前の体験
          • ユーザーが製品やサービスを使った体験を想像することなど
        • 瞬間的UX
          • 製品を使っている最中の体験
          • 状況に応じて刻々と変化する
          • ユーザーの反応は感情的なものになる
        • エピソード的UX
          • サービスを使った後に振り返るときの体験
          • 製品を自分なりに使った結果、うまく出来なかったという体験や思いの外良い結果が得られたという成功体験など
          • エピソード的UXは瞬間的UXを内包する
        • 累積的UX
          • 試用期間全体を振り返るときの体験
          • 累積的UXはエピソード的UXを内包する
      • 一連の体験の中のある期間を区切ることで、UXが明確になりユーザーがどの様な評価や印象を抱いたかを把握しやすい
    • 使う意欲と利用態度
      • UXに影響するモチベーション
        • 同じ製品でも、人によって製品・サービスに接する態度は違うし、使い方や使う頻度も異なる。 (個人差と言ってしまえばそれまでだが、)どうしてこの様な差が生まれるのか。
        • UXはその製品に対するユーザーのモチベーションによって影響を受ける
          • インタラクティブ操作を伴う製品は使うのを敬遠したり、最小限の使い方に留めるユーザーも存在
        • インタラクティブ製品のUXに強い影響があるモチベーションとして以下の2つがある
          • 製品利用の自己効力感(SE:self-efficacy)
          • 製品関与(PI:product involvement)
      • 自己効力感とは
        • 「課題を成し遂げる為の能力に対する個々の信念」(日本語が難しい)
        • やれるかどうかではなく、やれるように頑張れると思うか
        • 例えば、目の前のインタラクティブな製品を扱うために発生する以下の様なことに対してのモチベのこと
          • 自分で操作する
          • 説明書を読む
          • トラブルに合った場合に、自分自身が対応する
        • 製品の操作が苦手だという人は、自己効力感が低く
        • 製品の操作が得意な人は、自己効力感が高い
      • 製品関与
        • ユーザーの個人的な目的や価値観と対象となるインタラクティブ製品に対する関係の度合い
        • 製品利用の自己効力感と製品関与は、強い関係があるものの異なる側面の利用意欲。
        • オンライン音楽配信サービスの場合
          • インタラクティブ製品に対する自己効力感が高く操作が得意な人であっても、音楽そのものにあまり興味がなく音楽配信サービスそのものに製品関与が低い場合は、そのサービスを使いこなそうと意欲は湧きにくい。
          • 逆に自己効力感が低くても、製品関与の意欲が高い場合、サービスを使いこなそうとする意欲は湧きやすい。
        • 製品利用の自己効力感(SE:self-efficacy)、製品関与(PI:product involvement)のそれぞれの高低の組み合わせで分ける分類法をSEPIA法と呼び、簡易的なペルソナを作る際のフレームワークとして、UXデザインにも活用されている。(利用意欲で分かれる4つの利用態度)
        • 利用行動や評価への影響
          • 利用態度は、利用行動の違いに影響を与えると同時に製品評価にも影響が確認されている。
          • 特に「期待先行ユーザー」は、積極的に利用したい気持ちがあるのにうまく使えないというグループの特性が反映される傾向がある。
          • 製品の満足度が比較的高いと同時に不満足度も高い特徴が得られた。
          • ユーザーとサービスとの関わりを扱うUXでは、ユーザーの意欲や態度を把握することがUXをより詳細に理解することにつながる。
    • 利用文脈
      • 英語ではContext of Use となるので、「コンテクスト」「コンテキスト」と表現されることもある。
      • ユーザーがサービスを使用する際の状況やその背景、あるいは使用する前後で起こる様々な出来事のつながりを指す。
      • コンテキストは人によって違うこともあり得るし、いつも同じ文脈になるという保証もない。
    • 文脈効果
      • 前後の刺激を受けて対象となる刺激の知覚過程が変化すること
      • 人間の過去の経験に基づいたもので、こうした働きのおかげで人間は素早く全体を理解することが出来る。
        • 例えば、車の中にあるカーナビは、運転中に操作するのもディスプレイを見つめることも難しいため、ユーザーは、特に考えることなく車を発信させる前に操作しようとする。
      • 文脈とは、物の使い方に自然とルールをつけるもの。
    • さまざまな利用文脈の捉え方
      • 人間中心デザインの国際規格としてISO 9241-11, 9241-210があるが、やや複雑なため、もう少し分かりやすく説明したものがある。
      • 山岡俊樹氏の提案の人間工学の観点から物のデザインを「人間とシステムとの調和を考えること」とし、人間 – 機械インターフェース(Human Machine Interface:HMI)が重要と述べている
    • HMIの5側面
      1. 身体的側面
      2. 頭脳的側面
      3. 時間的側面
      4. 環境的側面
      5. 運用的側面
    • ATMを例にすると
      1. 身体的側面→ ハードウェアの形状がユーザーにフィットしているか。健常ユーザーは扱えるが、車椅子ユーザーには扱えない。
      2. 頭脳的側面→ 操作画面がわかりやすいか、見やすさが関係する。
      3. 時間的側面→ 作業や操作にかかる時間的な面での適合性。反応時間が適切でないと、誤操作を招いたりする。
      4. 環境的側面→ ATMが置かれている店舗空間について、照明器具のせいで画面が見にくくないか、操作音が聞き取りやすい環境か。等
      5. 運用的側面→ サポート体制やユーザーへの操作案内など
    • ISOの利用文脈の捉え方は、ユーザーやユーザーの仕事に重点をおいた捉え方であったが、山岡のHMIの5側面は人工物に重点を置いた捉え方

磯野

  • デジタル庁のウェブアクセシビリティ導入ガイドブックを読む
    • アクセシビリティの対応度は3つある
      • 準拠、一部準拠、配慮
        • 準拠の基準厳しすぎ問題
          • 試験を行い、達成基準を満たしなおかつその試験内容を公開する
    • ウェブアクセシビリティ対応やるなら、プロジェクト始める前から工数に組み込んでおかないときつそう
      • 途中から導入の場合は、1ページずつとか小さいスコープに分けての対応が良さげ
    • ウェブアクセシビリティを達成するためにやっちゃダメなこと
      • 動画・音声の自動再生
      • 光の点滅
      • スライドショーもダメ(自分で操作できるやつはOK)
      • 操作に制限時間を設けるのもダメ
    • ウェブアクセシビリティを達成するためにやるべきこと
      • リンクを適切に表現(詳しくはこちらではわかりづらい)
      • テキストを拡大・縮小しても文字が読み取れる
      • 代替テキストに適切な情報を入れる
    • PDFとかにもアクセシビリティ対応が必要
  • MentaのPre環境で起こったバグ調査
    • Pre環境のみ
    • iOSのみ?(Androidは未確認)
    • 原因
      • 今回の事象が起こっているところは、マークダウンにパースしている部分
      • Pre環境では本番の値をマスキングして使っている
      • マスキングに*の値を使っているので、これをパースすると<stong>に置き換えられる
      • マスキングの値が多くなると一部要素がクラッシュする

太田

  • Adobe Premiere Proを色々触った
    • やりたかったこと
      • 1つの動画の指定範囲(時間及び画面)を複数動画に書き出したい
        • 時間指定はとりあえずイン・アウトを設定した。
          • 恐らくシーケンスを全て用意しても良いが、書き出した後に管理することはなかったのでそこまでやらない
        • 画面の一部を書き出す
          • Adobe Media Encoder側で独自のプリセットを用意したらいけた。
    • AIの文字起こしを試してみる
      • 動画のセリフをAIが自動で文字起こし&キャプション作成までしてくれる
        • かなり有能だった。動画作成にかなり活かせるんじゃないかと思う。

今週の報告は以上です。
週毎に取り組みを掲載していきますので、ご期待下さいませ。