リーダーズ講座「ソフトウェアを扱う人々のためのUIデザイン」
023/8/30(水)リーダーズ講座「ソフトウェアを扱う人々のためのUIデザイン」のレポートになります。
今回もオンラインで参加させていただきました。
デジLIG卒業生のともです。
デジLIGを知らない方の為に下記がデジLIGの公式サイトになります。
ご覧ください。
リーダーズ講座、これまでは受講生・卒業生の方限定のクローズド開催でしたが、2023年7月より一部講座に限り、一般の方にも有料にて参加可能になりました。今回このレポートでご興味が湧いた方は次の講座を有料で参加することもできます！
今回の講師は株式会社グッドパッチソフトウェアデザイナー/ アーキテクト / デベロッパーの丸 怜里（まるさとり）さんです。
丸さんの講座を受けさせていただいた際に初めにうけた衝撃は、「説明のスライドが滑らかに動く・・・！！？」でした。スライド式で次をめくった際に動くという仕組みではなく、webサイトのように滑らかにスライドが動いていて私達受講生を飽きさせない作りになっておりました。お見せできないのが残念でしたが、素敵なスライドです・・・！
調べてみたらパワーポイントで作ることができるみたいでした。新たな発見した。ご参考までにURLを貼ります。
話は戻りまして、本編のお話になります。
講座は質が高くたくさんの情報を講座に盛り込んでくださり、パンクするくらいすごい講座でした。UI UXのお話がメインになります。少し簡略してレポしております。といっても結構長いです。（汗
＜テーマ＞
「ソフトウェアのUIデザインで要となるキーワードと考え方を知る」
4つの項目についての講座になります。
①IT業界の仕事 ←仕事について
②概念理解：用語解説 ←基本の解説
③ソフトウェアUIデザインの基本プロセス ←作り方・進め方
④ソフトウェアUIデザインで大切なこと ←大切な観点
①IT業界
IT業界にはたくさんの会社がありますが、東京渋谷駅、六本木駅、五反田駅周辺の３箇所にIT企業は集まっているとのことです。ただコロナ禍を境に縮小や移転があった為、今はまた変わっているともおっしゃっていました。
ソフトウェアとその環境を作り運用をする仕事
ソフトウェアには「ソフトプロダクト」「開発環境」「組織」「保守運用」とさまざまな領域があり、その仕事の中でも「自社プロダクト事業」「クライアントワーク事業」「SES事業」「エンジニアリング」「U Iデザイン」「UX調査」「PJ管理」とさらに分かれているそうです。
ソフトウェアを作る、デザインの支援として上記の内容があり、丸さんの会社（グットパッチさん）ではこれらの分野における「クライアントワーク」が中心事業とのことです。
クライアントワーク事業とは？
他社のソフトウェア開発・デザインの事業や組織構築などを受託し、お手伝いする仕事
・モバイルアプリケーションの設計・開発
・webアプリケーション、SaaSプロダクトの設計・開発
・webサイトの設計・開発
・クライアント企業におけるDXプロジェクトの支援
・デザインコンサルティング
クライアント事業の例をあげてくださいました。
残念ながらサービス終了してしまった、宮崎県産野菜・新鮮食品のデリバリーサービスやワンキャリアクラウドとして使用できる採用人事向けSaaSのアプリなど開発されていらっしゃったそうです。
次にIT仕事について。
ITとひとくちにいっても色々な仕事があるのだと改めて気付きました。
見慣れない仕事だとQAエンジニアさんです。知識として覚えました。
・エンジニア
・デザイナー
・プロダクトデザイナー
・QAエンジニア
・UIエンジニア
・UIデザイナー
・UXデザイナー
・プロダクトマネージャ（PdM)
・プロジェクトマネージャ（PM）
・カスタマーサクセス
・営業
どちらが良いデザイン？
２種類から選んでください。
①調理器具
②レモンスプレー
画像がなかったので適切な記事を貼りました。
１枚目と２枚目の写真をご覧ください。
どちらが良いデザインか？という質問ですが、私は②のレモンスプレーかと思いました。商品を作るためには色々なステップがあり、作成するための理由がないと作れないはずでず。
この商品のニーズと便利商品としてプロダクトデザインをしたと想像しました。格好良いというより機能性、生活が快適になる商品という意味で私は②を選択しました。
丸さんのお話の続きになります。
「デザイン家電」と呼ばれる言葉があるように、単にオシャレに見えるものが「デザイン〇〇」と呼ばれやすいのでは・・・？
と話されていました。
また「見た目」は左の方が格好良く見えるけれど、本当に左の方がデザインが優れているのか？というと、それは違うそうです。
「見た目」 → 「スタイル」に関すること
「スタイリング」
そもそも設計（デザイン）されていない工業製品は存在し得ない
見た目に関する事柄のみを切り取り、「デザイン」を語るのは視野が狭すぎると続いてお話されていました。
もちろん、スタイルを設計することも「デザイン」のうちとの事です。
どちらの製品も「デザインされている」と言える
「コンセプト」が異なるというだけ
「ほとんどの人は、デザインとは見た目のことだと勘違いしています。見た目や感じ方だけではありません。
デザインとは、どのように機能するかということです」
※スティーブ・ジョブスさんの言葉を引用
丸さんとしての結論
「ある状況において、うまく機能している仕組みや製品は「良いデザインのもの」と言えるのではないだろうか」
私「という事は、どちらも良いデザイン！」
個人的に「どちらが」というミスリードがあったので、めちゃくちゃ悩んでしまいました。どっちも製品として設計されていると思ったので、どちらか選ばないといけないのかー！と考えて、惑わされました。笑
＜デザイン＞
・「デザイン」とは見た目だけの意味ではない
・見た目が多少悪くても、総合的に良いデザインとみなせる製品もある
・ある状況において、うまく機能する仕組みが「良いデザイン」とも言える
・デザインは、製品づくり（もの、サービス等）に携わるすべての製作者たちに関係する
＜デザイナーの役割＞
デザインの制作と品質に責任を持つこと
「設計」「表現」「機能」「評価」
＜UI UXについて＞
最近話題になっているUIUX ですが、丸さんは厳密にUXを考えるならUIとは区別して扱う必要があるとおっしゃっていました。
UI ＝ ユーザーのために設計されたインターフェイス
UXは・・・UX自体がわかりにくいのも原因との事です。
原因①定義というものが存在していない②世界の専門家が議論してもまとまらず各々が独自に解釈しているのが現状
との事で黒須正明さんの「UX原論」という本が暫定的定義ではないかと考えていると話されていました。
主体がヒトで人間が人工物に関わる際に時間軸を通じて生じる
個人的かつ主観的な、心理的プロセス＝UX
※これも解釈の１つ
またUXは個人的な主観なので同じものを見ても「良い」「悪い」「普通」
と意見が分かれるそうです。
「UX」は人間の心のことだから、人間の数だけ存在するそうです。
そのため「ユーザーひとりひとりの心理的プロセス」と解釈できるとの事でした。
それを聞いて、なるほど！と納得しましたがそれと同時に個人的にUXは定義というものが存在していないということも驚きました。
②概念理解
iPhone ＝ とても「ソフトウェア的」な製品
・UI的要素はほとんどはソフトウェアで表現
・物質的なUIはいくつかのボタン、端子、ガラス面
・ユーザーの操作に応じて画面に反応がある
・擬似的な「直接触っているような感触」が生じる
iPhoneのアイコンは「プログラムっぽさ」を表に見せていない
HTMLなどの文字列を使用したプログラムっぽさのことをおっしゃっていて、アイコンの見た目と機能の大切さを感じました。
アイコンはUIデザインといえます
形の見えにくいソフトウェアを人間が直接認識できるようにする→適切なUIを与えてソフトウェアが見えるようにする
③UIデザインの基本的なプロセス
具体的
↑
↑ 表層（表現に関わる設計）
↑ 骨格（構造の具体化）
↑ 構造（構造設計）
↑ 要件（要件定義）
↑ 戦略（コンセプトと目標の定義）
↑
抽象的
具体的になるにつれて、デザインの形を決めていくなど細かく突き詰めていくことになります。
以前「具体と抽象」という本を読んだことがあるのですが、ディレクターなどの仕事がコンセプトなどの抽象化する仕事で、現場で実作業として手を動かしていく仕事になるにつれて具体性を持った（例デザインなど）仕事になると書いてあったのですが、まさに丸さんからご説明通りの事だなと思いました。
基本設計のための情報収集・設計指針の策定
・環境調査（どんな需要でどのような技術で実現可能か）
・コンセプト定義（どういった指針・思想で製品を作るのか）
基礎設計
・概念定義（製品のUIに現れる「概念」を定める）
・ユースケース定義（どのような使い方・用途を検討できるか）
表示や出力内容の設計
・ナビゲーション構造設計（UIのナビゲーション構造を設計）
・ビュー構造設計（UIのビュー構造「画面構成」を設計）
・表現設計（UIのビュー構造に肉付けする/音や振動などを使った演出）
出力と操作方法に関わる設計
インタラクション設計（UIを実際に操作する方法を設計）
プロトタイピング試作 ←→ 評価
上の工程で試作と評価を行い設計を吟味
④UIデザインで大切なこと
①使いやすさ
②到達しやすさ
③生産性
①使いやすさ
過去の経験則や取り巻く環境の様子から、ユーザビリティを高める設計を常に検討されている
①が出来ていないと、表現がバラバラでアイコンがチグハグ、ユーザー環境を無視した作りをしていたり操作が難しくなっていないか？などが発生する
②到達しやすさ
ユーザーが情報に到達しやすいかどうかを測る
例：iPadのペン
このペンがない場合、iPadは操作できるか？
・マウスで動かす
・タッチパネルで指でなぞる
・音声入力を用いるなど
どうすれば操作（情報達成）できるか？
・適切な構造で組まれた情報
・適切な表現が行われた情報
・過不足のない情報量
・インタラクションコストの程度
・操作性のしやすさ
・万人にとって不足のない操作手段・表示手段
③生産性
生産的なソフトウェアであること＝目的を達成しやすい
・用途が明確→複雑にならない
・インターフェイスが使いやすい→シンプルなUI
・必要な機能が揃っている→過不足ない機能設計
・使用にあたってコストがかからない→無駄をなくす
UIが機能するにはなめらかである必要はないが親和性を感じられるようになり、魅力が増す
なめらかとは「物理的」「文化的」「人間的」
サービス終了してしまいましたが、オンライン御朱印帳に似ている地域スタンラリーのアプリをご紹介してくださいました。
本物の御朱印帳と同じような感覚で使って欲しいという想いがあり、和暦・元号や日本語の縦書きや朱印的な表現、などこだわりを説明していただきました。特にデジタル朱印が押印された瞬間のこだわりがとても素敵でした
・「紙」全体が少しだけ奥に押し込まれたように動く
・iPhoneの振動機構を利用し、押印と同時に端末が震える
・朱印を押し切った際に音を鳴らす
映像と振動、音を同期させて手元のデジタル手帖にあたかも本当にスタンプが押されたような感覚があるようにデザインされているというご説明に御朱印帳を再現するために様々なアプローチ方法があるのだと勉強になりました。
今回の講座でUIUXについての理解が深まっていったと感じました。
講師の丸さん、ありがとうございました！
この記事が気に入ったらサポートをしてみませんか？