UXデザイナーとして4ヶ月で学んだこと

初めまして、NSSOLにてUXデザイナーをしている1年目のhamazonと申します。
今回縁あってQiita Advent Calendarに投稿させて頂くことになりました。
本記事の要件は以下になります。

###### 目的
新卒配属からUXデザイナーとして、約4ヶ月で取り組んできたことと所感の共有
###### 想定している読者
Qiita Advent Calendarの参加メンバー、Qiitaの閲覧者。あわよくばUXデザイナー/NSSOL/サービスデザイン部に興味がある就活生も。
###### 読者の方々に伝えたいこと
UXデザイナーがどんなことをしているのかを理解し、面白い！と思ってもらう。また、自分がこれまでの取り組みから得た学びを実践してもらう。

# 目次
[1.自己紹介](#1-自己紹介)
[2.11月までにやったこと](#2-11月までにやったこと)
[3.これまでに得た学び](#3-これまでに得た学び)
[4.おわりに](#4-おわりに)

それでは記事の内容に入ります。
# 1. 自己紹介
まずお主誰じゃ、というツッコミが入るかと思うのでサラッと自己紹介します。自分は現在NSSOLのDXIC（Digital Transformation & Innovation Center）という事業部の、サービスデザイン部に所属しています（新卒1年目）。趣味は旅行、食べログランキング上位のお店巡り、読書、サウナ、韓ドラの視聴です。大学では材料科学の分野を専攻していました。入社時のITスキルはというと、[Progate](https://prog-8.com/dashboard)を触ったり基本情報技術者試験の勉強をしたぐらい。デザインの事も[ノンデザイナーズ・デザインブック](https://www.amazon.co.jp/%E3%83%8E%E3%83%B3%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%82%BA%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%96%E3%83%83%E3%82%AF-%E7%AC%AC4%E7%89%88-Robin-Williams/dp/4839955557/ref=sr_1_1?adgrpid=106298944518&gclid=Cj0KCQiAkZKNBhDiARIsAPsk0WhqMLEuyP65rVs1aXZZwq9iCtujn-ps_S3DLWHgwHdBofARCEpy1QwaAq57EALw_wcB&hvadid=553844470485&hvdev=c&hvlocphy=1009333&hvnetw=g&hvqmt=e&hvrand=4267757774705509149&hvtargid=kwd-826292930375&hydadcr=27493_14478962&jp-ad-ap=0&keywords=%E3%83%8E%E3%83%B3+%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%82%BA+%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3+%E3%83%96%E3%83%83%E3%82%AF&qid=1638189186&sr=8-1)を、興味本位で読んだことがあるぐらいのまっさらな状態でした。
ではなぜUXデザイナーを志望したか、理由は2つあります。
1つ目は、好奇心が強く色々なことをしてみたいと思ったからです。かなりのミーハーなので、新しいもの・面白そうなものがあったら飛びついてしまうんですね。SI業界を選んだのも、同様の理由です。
2つ目は、人の体験に関わるような事をしてみたかったから。これまでの人生を振り返ると、自分の人生を豊かにしてきたのは「モノ」よりも「体験」だと感じていました。外車に乗るとか、良い時計を付けたいなどの野心的な物欲があまりなく、それよりも旅行やスポーツなどを通じ、自分の記憶に残るような体験を毎日したいと考えていました。それが転じて、自分のみならず人の体験を豊かにできるような仕事をしたいと思うようになったのだと思います。

# 2. 11月までに取り組んだこと
次に自分が4月から現在（11月末）までに取り組んできたことをざっくり紹介します。

- 4~6月：全体研修（ビジネススキル、WF開発の進め方、Java・基盤系の基礎）
- 7月上旬〜7月中旬：デザイン＆アジャイル研修（デザイン思考とアジャイルのマインドを身につける）
- 7月下旬〜9月上旬：サービスデザイン部に本配属され、社内サービスをスクラムで開発していくPJに参加。UXデザインで具体的にやったことは以下になります。
    - ユーザインタビュー
    - ペルソナの作成
    - OOUI（オブジェクト指向UI）の概念の学習
    - Material Designの読み込み
    - スタイルガイドの作成
    - Adobe XDを使って画面をデザイン
- 9月中旬〜9月末：内定者向けの事業部紹介資料をリデザイン
    - 資料の用途や目的、ターゲット及びターゲットに起こして欲しいアクションの整理
    - DXICの所長や、各部署の部長にインタビュー（緊張しました！）
    - スタイルガイドの作成
    - インタビュー内容を元に、各スライドの中身をメッセージが強調されるよう修正
- 10月〜11月末（現在）：模擬PJに復帰
    - Reactを用いて実装（HTML/CSS/JavaScript）
    - 開発しているサービスのブランディング

途中で色彩検定/基本情報技術者試験/応用情報技術者試験/認定スクラムマスター研修などの資格も取得したり、10月末にDesignshipというイベントに参加したりもしましたが、やってきたことは大体こんな感じです。

https://design-ship.jp/

# 3. これまでに得た学び
さて、ここからの内容は自分がこれまでに得た学びになります。
### チームワークがめちゃ大事
これは自分がスクラムチームに参加してから強く感じ、かなり衝撃でした。なにせ自分の中ではデザイン/エンジニア/リモートワークという言葉からは、黙々と個人作業を進めていくイメージが想起されていたからです。ところが現在行っているスクラム開発では、スクラム/アジャイル的にこの考え方・振る舞いはどうか？チームとして問題解決に取り組めているか？と、__チームやメンバーの動きに関する議論__が非常に多く交わされています。

スクラムやアジャイルに関するドキュメントは下記を参照。

https://agilemanifesto.org/iso/ja/manifesto.html

https://scrumguides.org/docs/scrumguide/v2020/2020-Scrum-Guide-Japanese.pdf

就活時に__「チームで働くのが好きな人はSIerに向いている」__と聞いていましたが、こういうことなのかなと実感しています。実案件でスクラムに取り組んでいる先輩方の話を聞いていても、技術的な問題よりもスクラムとして成立しているかどうかがPJの成否を分けると耳にするので、スクラムやアジャイルの価値観を大事にしてチームとして動いていこうと思います。

### 使いやすいものの裏にはデザインの営みがある
Googleの公開している、「Material Design」をご存知でしょうか？これはGoogleが提唱しているデザインのガイドラインのことで、__「見やすく、直感的に操作できるWebページ・サービス」__を作ることを目的としています。ユーザビリティの高いアプリやサイトは、このMaterial Design、ないしはAppleの公開している「Human Interface Guidelines」に準拠して作られています。


https://material.io/

https://developer.apple.com/design/human-interface-guidelines/

世の中の使いやすいWebサイトはこれらのガイドラインに沿って作られているという事を知り、自分が画面のデザインをする際にはMaterial Designを辞書の如く参照するようになりました。使いやすさの裏にはこのような共通した法則というか、ガイドラインがあるのですね。

### 皆が惹かれるモノの裏にもデザインの営みがある
これはDesignShipでマツダのデザイナー、[前田 育男](https://xtrend.nikkei.com/authors/18/maeda_ikuo/)さんがお話されていた事になります。前田さんは車のデザインをアートに昇華すべく、美しいクルマづくりに挑戦されています。マツダの車といえば高いデザイン性が特徴として挙げられますが、その裏にはこんな取り組みがありました。

マツダでは車を、ヒトと心を通わせ一体となれるような生き物のようにしたいと考えていました。そこで、「クルマに命を吹き込む」ために野生動物の躍動感ある写真のスケッチを行い、それを抽象化した立体である「御神体」を1年がかりで作成。そしてそれを作成してからそれをクルマのフォルムに落とし込む段階では、全てをCADのようなデジタルツールで行うのではなく、必ずクレイ（粘土）モデルを作り、感触を確かめながら手で削って形を作っていくそう。こうした取り組みから生まれた車体には独特のフォルムに絶妙な陰影が付いており、その美しさは世界的に高い評価を受けるようになりました。

https://www.td-media.net/report/design-surf-2019-ikuo-maeda/

https://blog.mazda.com/archive/20140820_01.html

1台のクルマが生まれるまでにここまで徹底したデザインのプロセスがあることに感服し、世の中のモノを見る視点が変わりました。__美しいと感じるもの、何故か心惹かれるものの裏にはデザインという仕掛けがある__。自分もデザインというプロセスを通じて、そういうものを作っていきたいですね。

### デザインと実装の二刀流がシナジーを生む
えっ、デザイナーってプログラミングするの...？と思われた方もいらっしゃるかと思います（自分もそうでした）。スクラムチームでは、スクラムマスター/プロダクトオーナー/開発者という3つの役割があるのですが、「開発者」にはエンジニアもデザイナーも関係なくひとくくりにして含まれています。機能横断的なチームがあるべき姿なので、__自分はデザインしかやらない！基盤しかやらない！なんてことはありません__。なので自分も実装をするようになりました。
ちなみにスクラムに限らず、今後はデザイナーとエンジニアの境目がどんどん曖昧になると言われています（下記の記事を参照）。

https://blog.btrax.com/jp/designer-engineer/

とはいえ自分はデザインも初心者だったのでまずはデザインを学ぼう、ということで9月まではAdobe XDを用いて画面を描いていましたが、実装はほとんどしていませんでした。先輩から__「実装をした方がUIも描けるようになる」__と言われていましたが、その意味をこの時点では理解出来ず。しかし10、11月と実装をしてみて、デザインと実装の両方を経験する以下のメリットに気づきました。

#### 挙動をイメージできるようになる
当たり前ですが、デザインツールを用いて画面を描く際は画面は動きません（画面遷移などをプレビューできるプロトタイプ機能ぐらいはありますが）。しかし実際に作るものは__「動くソフトウェア」__なので、画面の各要素の挙動を想定してデザインをする必要があります。実装を経験したことで、必須項目が入力されていない時のエラーメッセージはどのように表示されるか、画面幅を縮めた際にはレイアウトがどう変わるか、文章が長い場合は「...」で表示するか、などを想定してデザインするようになりました。
#### divが見える
これは実装をしてみてのアハ体験でした。実装の際には各セクションをdiv（ないしは他のHTMLタグ）で区切って要素を配置しますが、それを一度経験すると画面上のdivの区切りが見えてくるようになります。例えば左下の図を見ただけでも、脳内には右下のようにdivがうっすらと浮かびます。

![スクリーンショット 2021-11-30 9.01.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685411/26b4d614-2af4-4254-cbbe-d084998f83c2.png)

divを意識するようになったことで、デザインをする際に親要素のdiv幅内に子要素を配置するなど実装上無理のないUIをデザインできるようになりました。__「実装をした方がUIも描けるようになる」__とは、まさにこの事ですね！

#### ユーザ目線でのレビューができる
前述のMaterial Designを一読した上で自分で一度デザインをすると、要素同士の間隔は4or8の倍数になっているか、ユーザが入力する箇所のフォントサイズは16pxで指定されているか、などCSSの指定をかなり細かくチェックするようになりました。実装だけをしていると実際に書かれたコードを見て、コードの可読性や処理の書き方に注目するあまりユーザ目線が抜けがちですが、ユーザにとって価値があるのは「動くソフトウェア」なのでこの視点は忘れないようにしたいです。
#### 複雑性を担う覚悟が生まれる
UXデザインをする上で意識すべき1つの法則として、「テスラーの法則」というものがあります。これは、__「どんなシステムであってもそれ以上シンプルにすることのできない固有の複雑さがあり、その複雑さはユーザか開発側のどちらかが担わなければならない」__というものです。

https://lawsofux.com/teslers-law/

https://blog.btrax.com/jp/ux-10-laws/

例えばメールアプリでは、差出人と宛先の2つの情報が必要になり、これらはいずれも必要不可欠な複雑性になります。この複雑性をユーザに担わせないために、最近のメールアプリでは差出人（自分）を予め入力しておくこと、また過去のメールや連絡帳から宛先を予想し候補を表示してくれます。つまり、__差出人と宛先の入力という複雑性を、ユーザに代わって引き受けるようなメールアプリをデザイン・実装することで、メールを書くことを楽にしてくれている__のです。

このようなことを開発側として実際にやろうとなると、なかなか面倒に感じました。ユーザにとってあったら嬉しいけど必須じゃないし、の割に実装やデザインがややこしかったりするし...イチ開発者としては、できればやりたくない！と思うこともありました。デザイナーもエンジニアも、自分たちで複雑性を担うのってかなりの覚悟が必要なのだなと。
なのでGoogleやAppleの提供するようなシンプルでUI/UXの優れたサービスは、エンジニアとデザイナーがユーザの代わりに複雑性を担ってくれている賜物で、サービス提供側の本気度の表れなんだと尊敬の念を抱くようになりました。と同時に、__デザイナーがエンジニアに対して何でこのデザインにするのか、そのこだわりについて語れなければUI/UXの優れたサービスは実現できない__、と感じました。開発者に納得してもらえるよう、誰よりもユーザを中心に考えこだわっていきたいです。

#### 予防線を張らない

これはDesignshipで、HI(NY) design というデザイン会社の渡邊デルーカ 瞳さんがお話されていた内容になります。

https://hinydesign.com/

渡邉さんは過去にNYのSVAという美大に留学した際に、アメリカの学生よりも日本の学生の方がアウトプットの質は高いが、ストーリーテリングが上手いのはアメリカの方だと感じたそうです。正直作品のクオリティは高くないのに、自信満々に自分の作品をプレゼンする。そんなアメリカの学生を見て、__「予防線を張るような発言をしてしまうと作品の良さが半減する。批判されるのは当たり前と思って、その作品の良さを最大限伝えよう！」__と考えるようになった、とお話されていました。
自分も「あんまり自信がないですが」「ちょっと初めてだったので」のように、成果物を見せる際に予防線を張ってしまう事は多々ありました。謙遜の意味合いの場合もありますが、自信があるからこそ批判されて傷つきたくないがために予防線を張ってしまう事がほとんどだったので、このお話を聞いてハッとしました。作品の価値を落とさないために、予防線は極力貼らないように気を付けています。
# 4.おわりに

4ヶ月で多くの学びを得ましたが、スキル的にはまだまだ見習いの域を出ません。本職のデザインの力を伸ばすにもまずは実装の基礎体力をつけるべく、年内はReactの勉強に注力します（今は下記の本で勉強中）。

- [モダンJavaScriptの基本から始める　React実践の教科書](https://www.amazon.co.jp/gp/product/B09BV2HGN3/ref=ppx_yo_dt_b_d_asin_title_o05?ie=UTF8&psc=1)

そんなにロジカルな人間ではないので実装に向いてるとは思いませんが、新しい知識を習得したときや、あれこれ試行錯誤して動くソフトウェアができた時の喜びを大切にしていきたいです。年明けごろにはデザインの勉強にシフトして、[Google UX Design Certificate]((https://ja.coursera.org/professional-certificates/google-ux-design)
)の習得を始めたいですね。

最後になりますが、まさか自分がこんな分野の事を勉強しているとは学生の頃には想像がつきませんでした（DesignshipもReactも、名前すら聞いたことがありませんでした）。
自分の好きなUXデザイナーの[安藤　剛](https://twitter.com/goando?s=20)さんが、以前Youtubeで「技術的なキャッチアップは組織に所属していなくても可能だが、文化的なキャッチアップは組織に所属していないと難しい」とお話されていましたが、まさしくそれを実感しています（動画は下記リンク）。

https://www.youtube.com/watch?v=D9X_02WP6h0

今の時代はネットや本から技術は学べるものの、アジャイルやデザインの文化・トレンドを学べるのは組織に所属している人の特権ですよね。自分は組織に所属しているメリットを最大限に活かし、技術と文化をこれからもアップデートしていきたいと思います！
ここまで読んで頂き、ありがとうございました。