UIUXの授業ログ
本題の前に ―議事録の書き方―
議事録を書くうえで重要なのは「後で使う」という点。
つまり、後で使えるような「私の立場として重要な情報」をしっかり記録しておく必要がある。
ここで核となるのは「私の立場」という所。「私がそれをやる上でどんな情報が自分と関係があるか」をよく考えてミーティングに臨むことで自然と情報の取捨選択ができるようになるはずだ。
例えば、UIデザイナーであれば、バックエンドのプログラマのタスクなどはあまり気にしなくてもいいかもしれない。
逆に、フロントエンドの実装とUIは密接に関わる。であれば、フロントエンドのスケジュールやタスク割は把握しておくほうが良いのかもしれない。
また、自分が関わるタスクの期日にはよく気を払うべきだ。期日を守れないと信頼を失う。信頼はお金では買えず、失ってから取り戻すのも難しい。
余談：AIで議事録は書けないのか？
今ホットな技術でAIがある。私もChatGPTを使わない日は無い。
これらのAPIを用いたり自社開発した議事録ツールは多く存在するが、私は現状役に立たないと考える。
理由は上に書いた内容が関わってくる。
議事録は「私の立ち位置」から見た内容であることが重要だ。均一に記録された議事録ではこの「各々異なる立場」には対応できない。
また、AIの記録はログのような形を取る。そのままでは読むのが非常に面倒な文章になる。
かといって要約をすると、誰が何を言ったのか、またそのニュアンスが失われてしまう事が多い。
今後、技術が進んでいくことでこれらの解決策が示されるかもしれないが、現状は使えないと言わざるを得ない。
用語解説
フロントエンド：
Webのページなどの「使う人が見える部分」を作るプログラミングの作業領域。
マクドナルドのお店で例えるなら店のレジカウンターがフロントエンドになる。
バックエンド ：
Webページやサービスなどの「使う人が見えない部分」を作るプログラミング領域。
マクドナルドのお店でいうなら厨房がバックエンドと言えるかもしれない。
デザインとセンス
デザインとセンス。この2つは分けて考えることが出来る。
手元にカメラがあるとしよう。あなたは、ある景色を見てそれに何かしらの意味を見出し、その意味を伝えるための映し方を考え、最後にシャッターを切る。
この例における「景色に意味を見出す」部分がセンスの求められる部分だ。
センスとは「五感が感じ取った情報から、何かしらの意味を抽出して頭の中で空想すること」とも言いかえられるかもしれない。
そして、その空想を他者に伝える上で必要になるのがデザインだ。
「景色に意味を見出す」ことが出来ても、そのままではただの空想だ。
空想を現実へ引きずり出すためにデザインは必要になる。
UIとUX ―関係性で捉える―
この2つは字面こそ似ているが、それぞれ異なるものを指す。
マクドナルドの例で言うなら「店の中で経験すること」と「メニュー注文画面」に置き換えて考えることができる。
この2つが異なるものを指すことはわかると思う。「店の中で経験すること」と「注文画面の見やすさ」は違うものだ。
この例においてUXは「店の中で経験すること」に当たる。そして、UIは「メニュー注文画面」など「注文画面の見やすさ」に当たる。
つまり、「UIはUXの構成要素」ということだ。
まずは外枠となる「UX」から見ていこう。
UXとは
UXとは和訳すると顧客体験と言われ、「そのモノ・コトを客が使う際の体験そのもの」を指す。
マクドナルドのハンバーガーは安く、提供が早く、そこそこ美味い。
だが、仮に価格が今の2倍以上だったらおそらく皆満足できない。
つまり、マクドナルドは「価格」「提供速度」「そこそこの美味さ」の3つ以上の要素の総合点が高いので客の満足度が高く、リピートユーザーが多いということだ。これは体験のバランスが取れている故だろう。
UIとは
一方でUIは「ユーザーインターフェース」といい、「顧客と接する場所」とでも言い換えられるものだ。
先程のマクドナルドの例でいうと、如何に上述3つの要素が良くても、注文画面やメニュー表が見にくくて使いづらかったら、一気に体験の質は下がってしまうだろう。
これがUIはUXの構成要素の一つという説明の所以だ。
デザインの流れ
ここからは上のUI、UXをどのような手順で作成していくべきかについて説明をしていく。
大前提：デザインは「情報を伝えるツール」である
情報を誰かに伝えようとする時、デザインは重要になる。
「私はあなたに何を伝えたいのか？」と徹底的に問い、その答えをデザインによって形にしなければならない。
これは使う側にとって良いデザインを提供する以上の価値がある。
良いデザインは人の関心を引く。多くの人がそのデザインを見ると誰かが「粗」に気づく。それが報告され、デザイナーは更にデザインを洗練させる。
この流れが繰り返されることによって、デザインは洗練されて行く。
なので、この流れのキッカケを作るためにも最初に世に出すデザインはしっかりと検討されていなければならないのだ。
このことを踏まえ、具体的なデザインの流れを以下に示そう。
ただし、この流れは人によって異なるため、あくまで参考程度として欲しい。
デザインの手順 I ―ラフ―
この段階では考えているコト、アイデアをとりあえず書き出して目に見える形にすることが一番の目的になる。
実際に書き出してみることで、わかっていること(既知)、わかっていないこと(未知)、曖昧な部分などがより鮮明に見えてくる。
また、ラフは紙に書き出したり、FigJamのようなカジュアルなソフトでざっくりと「ビジュアル化」する工程でもある。
なので、他者と視覚的なアイデアの共有が出来る点もメリットと言える。
デザインの手順 II ―方向性チェック―
ラフのアイデアを最小限の作業で一度形にしてみる。この段階ではFigmaなどを使うと良い。
このステップは修正前提なので、画像等の素材はすべて仮置きでいい。
この配置を見て問題点を探っていくのがこの方向性チェックの役割だ。
この簡易デザインに手持ちのアイデアを足し引きしていくことで、「目指す方向性」に近づけていく。
そして、この方向性を決定付ける材料を得るために「使う人がどんな人か？」という問いが重要になる(ペルソナ分析、ユーザビリティ、情報アーキテクチャetc...)。
余談だが、この工程は「ゾーニング」と呼ばれたりもする。
デザインの手順 III ―細部―
方向性チェックで形になった内容を元に、「そのままデザインとして使う」くらいの気持ちでデザインを作り込んでいく。
修正箇所がなければこのまま最後の「ブラッシュアップ」に進んでも良い。
デザインの手順 III ―ブラッシュアップ―
この段階では最終調整が行われる。
注意すべきことは色々あるが、特に誤字脱字は気をつけなければならない。
このブラッシュアップのあとに待つのは「依頼主への納品」だ。誤字脱字があるデザインを見た時、依頼主は「チェックもせずに納品するいい加減なやつ」とあなたを判断するだろう。それはあなたにとって損だ。
また、一度引いてみることも大事だ。
物理的に距離をとってもいいし、作り手から使い手に精神的な距離を変えてみてみるのも良い。大事なのは俯瞰することだ。
おまけ
全体の作業割合はラフが7割ほど。
よく考えてからデザインを始めたほうが、リテイクなどの手間を減らす意味でも効率的だ。