• Subscribe to RSS

ふわっと学ぶ UIデザイン

2021.08.31

なち

フロントエンドエンジニアが、デザイナーと一緒にUIデザイン勉強会に参加して感じたこと、学んだことを紹介します。

目次

  1. はじめに
  2. 読書会
  3. OOUIワークアウト
  4. これから

1. はじめに

みなさんはUI(ユーザーインタフェース)という単語を声にしたことはありますか?たとえば、「UI的に考えて...」「このUIはいいね」などです。

ちなみに私はありません。少しも知識がないわけではないですが、その知識は調べたテキストの内容にとどまっており、実際にどのような過程を踏んでデザインに反映されているのかは知らない状態だったので、UIに踏み込んだ発言ができませんでした。

私の知識の無さとは反比例して、ニューロマジックではUIという言葉を頻繁に聞くようになりました。主にデザイナーや、UIデザイナーと呼ばれている人の間で言葉が飛び交っているのを横目に、いつも通りの仕事をする日々を送っていました。

そんなある日、ニューロマジックのデザイナー主導でUIデザイン部が発足したのです!

これを聞いた時、「なんだかすごそう」と、若干遠目での感想が最初に浮かびました。その次に、「これはチャンスでは?」という気持ちが浮かび上がってきました。

UIデザインを勉強している人と同じ目線で考えられるようになれば、UIに関する発言ができるようになり、私自身の活躍の場が広がると考えたのです。たとえば、クライアントの抱えている問題点を一緒に考えることもできるでしょう。その解決策の提案だってできるはず。

そんな自分になるために、私はUIデザイン部の活動に参加することを決めたのでした。

UIデザイン部の活動は主に、読書会とOOUIワークアウトレビュー会の2つを行なっています。このブログではフロントエンドエンジニアの私がこの2つの活動を通して、思ったこと、考えたことを紹介します。

2. 読書会

読書会はコアタイム前の1時間を使って、週1で開催しています。最初の課題図書は『はじめてのUIデザイン』でした。この本では、なぜUIデザインが大切なのかということから、アウトプットに関することまでを網羅的に解説しているので、初学者にぴったりでした。内容もわかりやすく、考えながら読むのに適する本でした。

読書会の方法

  1. 30分で所定の場所まで読んでいる間に、各章で気づいたことや考えたこと、疑問などをざっくばらんにNotion(ドキュメントツール)に記載する。
  2. 残りの30分で、各自がメモした文章を読みながら、ディスカッションをする。

まずは、この読書会の方法がすごくよかったということを伝えたいです。有識者を交えて行ったことで、疑問の回答がすぐに得られたり、より深い知識、関連内容を毎回知ることができました。自分が書いたコメントに共感があったり、議論になったりと、一人で本を読むだけでは絶対に得られない体験と知識があふれていました。本の内容や、読書会を行うメンバー構成にもよるとは思いますが、今回はとてもマッチした方法だったと思います。

さて、読書会の中で私が印象に残ったのはAtomicDesignが紹介されているところでした。UIに関するWebサイトの記事を読んでいる時に、たびたびAtomicDesignが載っていることがありました。気になっていたので、AtomicDesignの考え方でサイトのモジュール分けをしてみたことがあります。すでにデザインされたページを分解するのは難しく、AtomicDesignの考え方を使うのであれば最初の設計からモジュールを分けておかないといけないな、というのがその時の感想でした。

AtomicDesignはモジュールの考え方の1つなので、これに固執して制作をする必要はありません。けれども、デザインがらコーディングにかけて一連で使える考え方があることを、デザイナーと一緒に話す機会になったのがよかったです。

読書会を通して、UIデザインは人の認知心理学が深く関わっていることを知り、認知心理学にも興味を持ち始めました。有識者の方に認知心理学の関連書籍を、読書会の中で随時教えてもらったので、気になったものから読んでいこうと思います。

3. OOUIワークアウト

読書会と並行で行われているのがOOUIワークアウトのレビュー会です。これは『オブジェクト指向UIデザイン』の本に載っているワークアウトを実践し、互いにレビューを行うという会です。

OOUIワークアウトをしていく中で、私に2つの変化がありました。

1つ目は課題を行うための「ツール」です。最初は手書きやパワーポイントを用いてワークアウトを進めていたのですが、考えるアプリの機能が増えていく中でやりづらさを感じたため、最近はFigmaで見た目を整えるようになりました。

オブジェクト指向UIデザイン:P.185 商品管理アプリケーション レベル7 課題
(オブジェクト指向UIデザイン:P.185 商品管理アプリケーション レベル7 課題)

Figmaはワイヤーを引くという目的に対して、必要なオブジェクトがそろっているため、パワーポイントで行なっている時とは比べ物にならないくらい作業効率が上がりました。調べるとプラグインがたくさんあるようなので、OOUIワークアウトとは別に試してみたいと思っています。

2つ目の変化したことは、「課題から読み取って考える範囲」です。最初は課題に沿って、各要素を並べていました。しかし、レビューを重ねる中で、ふと「このアプリは誰が使うのだろうか」と考えました。使う人を想像して設計をしていなかったことに気づき、その次からは「どんな人が使うのか」を考えてから設計するようにしてみました。

最初に人物像を設定することで、その人がしそうな操作、困りそうなことまで考えるようになりました。考える視野が広がった気がして、うれしいです。

OOUIワークアウトは、方法論を学ぶものと思って始めたのですが、Figmaを試す機会になったり、考える視野を広げるきっかけになりました。方法論とは別のところでも得るものがあり、やってみて成長につながったと思います。

4. これから

読書会は2冊目『誰のためのデザイン?』に入り、OOUIワークアウトは基礎編の終わりの方に入りました。どちらも一人で勉強するだけでは得られない知識を会得することができて楽しいです。

今回、勉強していく中で感じたのは、UIデザインは新しいものというよりもこれまで気にせずに考えていたことに名前がついていくような感覚でした。よくよく考えてみると、UIを少しも考えないデザインというのはなく、考えられてはいるけれども、私がUIという言葉につなげていないだけでした。勉強する前を振り返ってみると、これまでの業務の中でも勉強機会はあったのにもったいないことをしました。

今ならデザインを見て少しは推測したり考えたりできます。これを積み重ねて、UIデザインの意図を読み取ることができ、発言もできるフロントエンドエンジニアを目指していきたいと思います。