BOOK☆WALKER Design Lab #1 イベントレポート

こんにちは！デザイナーの大林です。 今回は2月に弊社にて開催した勉強会、「BOOK☆WALKER Design Lab」についてお伝えします！

BOOK☆WALKER Design Labとは
LT.1 UIデザイナー M.Sさん
LT.2 UIデザイナー K.Mさん
LT.3 UIデザイナー M.Aさん
最後に

BOOK☆WALKER Design Labとは

株式会社ブックウォーカーが主催する、デザインに焦点を当てた勉強会です。 この勉強会はデザインに関する学びを深め、共有することを目的としております。 今回のテーマは「UIデザイン」。弊社内で活躍する3名のデザイナーがUIデザインに関するLT発表を行いました。
また勉強会の終了後には、参加者同士が気軽に交流できる懇親会が開催されました。

LT.1 UIデザイナー M.Sさん

1番目の登壇者は、UIデザイナーのM.Sさんです。
「WebデザイナーからUIデザイナーへ」をテーマにお話してくださいました。

なぜWebデザイナーからUIデザイナーに?

M.Sさんのキャリアの始まりは、受託制作のWebデザイナーでした。「作るのが楽しい、良いものを作るぞ」という気持ちから段々「作ったデザインの成果が気になる」という思いに変わり、事業会社のWebデザイナーに。
そこでさらに「ユーザー理解をもっと深めたい」という意欲に変わり、現在ブックウォーカーでUIデザイナーとして活躍しています。

M.Sさんが感じた両者の違い

WebデザイナーとUIデザイナーを経験したことで感じた、両者の違いとして制作物や重要視するポイント、求められるスキルなどを挙げられていました。

制作物
- Web：閲覧目的が多いWebサイト
  - キャンペーンランディングページ
    プロモーションサイト
    コーポレートサイト/採用サイト
- UI：操作目的が多いWebサービス
  - 電子書籍サービス
  - マッチングプラットフォーム
  - メッセージングアプリ
重要視するポイント
- Web：装飾美
  - Webデザイナーの時は表層のデザインを重要視し、見た目の美しさやアニメーションをどう見せるかに注力していた
- UI：機能美
  - UIデザイナーになってからは、見た目の美しさはもちろんですがWebデザイナーの時以上に目的や使いやすさに注力するようになった
スキル
- Web：「伝わること」「人を動かすこと」に重きを置き、世界観をビジュアルに落とし込むスキルが多い
- UI：「課題解決」と「ユーザー価値」を両立させる、ユーザー体験提供のために必要なスキルが多い

UIデザイナーとしての反省と学び

実際に業務で起こったリアルな経験談をお話しいただきました。 またWebデザイナーとUIデザイナーは違う部分があるけれど、問題解決のためのコミュニケーションの大切さは変わらないと強調されていました。

まとめ

M.SさんはWebデザイナーからUIデザイナーになることで 元々のスキルにUIデザイナーとしての知識と経験が加わり、デザイナーとしての幅が広がったとお話してくださいました。

LT.2 UIデザイナー K.Mさん

2番目の登壇者は、UIデザイナーのK.Mさんです。
K.Mさんは「機能改善を進めるにあたってのデザインプロセス紹介」をテーマにお話してくださいました。

これまでのブックウォーカーの成り立ち

K.Mさんがブックウォーカーに入社した頃、まだUIデザイナーが一人もおらずデザインプロセスが整備されていない状態でした。その後徐々にUIデザイナー、UXデザイナー、Webデザイナーが増え、サービスデザイン部が創設されました。

旧プロセスについて

デザイナー不在の組織だったことから、プロジェクトは機能開発中心のウォーターフォール型開発を行っていました。UIに十分な時間を割くことが難しく、K.Mさんはこの状況を改善するために新しいプロセスを導入しました。

新しい試みとしてのワーク紹介

キックオフ
調査
コンセプト
ムードボード
ペルソナ
オブジェクトモデル図
ワイヤーフレーム
UIデザイン
開発

プロジェクトを「依頼元」や「依頼先」ではなく「チーム」として捉え、共に動くことが重要であるとK.Mさんは強調しています。

これらの新しいプロセスを経て、以下の点が改善されました。

チーム全員で意見出しと認識統一が行えるようになった
目指す方向が明確になり、ぶれがなくなった
レビュー時の評価軸が明確化された
開発インプットを平行して進められるため、開発のスタートも平行して行えるようになった

まとめ

Kさんは最後に、「良いプロダクトを作りたい！そのゴールは同じはずだからデザイナーはデザインを作るだけではなく、エンジニアはコードを書くだけではなく、互いに理解し共創できるよう日々のプロセスから模索している」とお話してくださいました。

LT.3 UIデザイナー M.Aさん

3番目の登壇者は、UIデザイナーのM.Aさんです。
M.Aさんは「アプリ改善で行ったユーザーテストとオープンテスト」をテーマにお話してくださいました。

ユーザーテスト・オープンテストとは?

ユーザーテスト
- 仮説を元にテスト被験者を選定し、事前に設計したシナリオ通りにテストユーザーに製品やサービスを使ってもらいます。その過程で、テストユーザーの思考や心理、実際の行動に関する質疑応答を通じて仮説を検証していく手法。
オープンテスト
- アプリのテスト版を一般のユーザーに配布し、フィードバックをもらう手法。

BWアプリで社内ユーザーテストとオープンテストを行った経緯

社内ユーザーテスト
- アプリのデザイン開発を続けていると、開発メンバー内では仕様や仕組みを理解しているため、客観的な視点でデザインを評価することが難しくなります。そのため、BWアプリの知識があまりない社員から、多方面の視点や意見をもらうために社内ユーザーテストを実施しました。 
オープンテスト
- 普段からBWアプリを利用しているユーザーに、新しいデザインやUIの使い勝手について意見をもらうためにオープンテストを行いました。これはBWアプリに関する知識を持っているユーザーから、デザインやUIの「変化」についての意見を収集するためです。

ユーザーテストの方法

ファシリテート担当者がユーザーテストのシナリオを作成します。
シナリオに沿ったプロトタイプをFigmaで準備します。
実際にユーザーにプロトタイプを使ってもらいます。
テストはZoomなどの表情がわかるツールを利用して行います。
全てのテストが終了した後、ユーザーの意見やつまずいたポイントを確認します。

テストの際、ファシリテーターはヒントを与えすぎないことが重要だとエムさんは強調していました。

ユーザーテストの結果

テストの結果を踏まえ、改善ポイントをUIに反映しました。

オープンテストの方法

テスト配布
- 既存のBWアプリをほぼ毎日利用しているヘビーユーザーに、ランダムにリニューアルアプリを配布し、普段通りに使用してもらいます。iOSとAndroidユーザーからそれぞれ約30人ずつフィードバックを集めます。
- デプロイゲートを使ってテストを配布します。
フィードバック収集
- アンケートフォームを通じて使い勝手などの意見を収集します（回答期限あり）アンケートには必ず聞きたい項目を追加します。
- フリーテキストの記入欄を設け、詳細なフィードバックをもらいます。これによりユーザーの温度感が高い回答を得ることができます。