認識や考えを共有しないと同じゴールでもズレが生じてしまう　Yahoo!ショッピングの品質向上に向けた課題解決

Yahoo!ショッピングのUI/UXのデザイナー

関玖瑠未氏：私からは『Yahoo!ショッピングの品質向上に向けた課題解決の取り組み』についてお話ししたいと思います。

まず簡単に自己紹介をさせてください。関玖瑠未と申します。先ほど登壇された笹尾さんの同期で、デザイナーとして入社して現在4年目です。Yahoo!ショッピングの商品詳細ページやカートページのUI/UXのデザインを担当しています。

先ほどの笹尾さんの発表に引き続いてYahoo!ショッピングのiOSアプリに焦点を当てたお話です。まず笹尾さんの発表の振り返りから。自身の考えをしっかり伝えることで相手に解釈を任せないようにするため、デザイナー内の共通認識やガイドラインが必要になってくることについてのお話でした。

私からは、先ほど挙がった課題に対して具体的にどう解決したのか、どう解決していくのかを導入事例と併せてお話ししたいと思います。お話しする内容は先ほどの後半に出てきたこちらの4つの事例についてです。4つの詳細の振り返りと、運用方法のアップデートとデザイン仕様書のアップデート、ガイドラインの導入の3つの軸に分類ができます。

まずは運用方法のアップデートのお話から。運用方法のアップデートを行うにあたって、お見せしているような流れで進めていきました。こちらの詳細を順番に説明していきたいと思います。

マスターデータを作成する

最初はSketchを利用したマスターデータの作成です。

ショッピングアプリではSketchを利用してデータを作成していますが、今までマスターデータというものがありませんでした。こうなった背景として、数人のデザイナーで少ない画面から運用開始していたものが、長い歴史の中で担当者やチームの変更・拡大によって管理しきれなくなっていたことが考えられます。その影響で、透明度がちょっとずれていたりフォントサイズがバラバラ、角丸の大きさが違う、色がずれていたりさまざまな問題が発生。

ほかにも最新のデータや表示のパターンの種類、どのデザインに従って作ったらいいのか。こういった作業内容は個人の解釈に委ねられてしまい、次第に統一感が失われていました。

デザイナー同士ですら共通認識が取れていない状態です。エンジニアとの共通認識をもつというのは夢のまた夢のような話で、現実味のないようなことに思えていました。

今の話を踏まえて課題を整理すると、既存のデータを確認する方法がありません。それによって、作成時のズレや確認作業のコストが増加してしまうことが課題として挙げられます。

これらの問題点を実例を踏まえて具体的に見ていくと、同一ページ内で数字と円の表示バランスが崩れる。ほかにもマスターデータがないので、必要な部分以外はスクリーンショットでの用意が必要になってしまいます。

この例だと真ん中に「売れ筋1位」って書かれている箇所のデザインが目的です。上下の表示が切り貼りしたものなので、詳細の余白やフォントサイズが読み取れません。今回作成するデザインではどのように余白を取るべきなのかがすぐにわからない状態です。

こういった毎回の素材集めや確認作業が総合的に作業コストを増加させていたので、全体の品質にも影響を与えます。こういった問題を解決するためにマスターデータを作成しました。

こちらがSketchを用いて作成したマスターデータです。現在リリースされているページをトレースして、全ページ網羅できるように作成していきました。冒頭で挙げた作成時のずれや作業のコストの増加の問題に対してマスターデータを導入。それによって、デザイナー間の最低限の認識ずれみたいなものを防止して、無駄な作業コストを抑えることができるようになりました。

作成データの扱いについてルールを設ける

次に作ったマスターデータや作業ファイルの管理方法についてです。納品方法の影響などからGitを利用していないので、ふだんは共有フォルダでバージョン管理ができるようにしています。

これまでは作成したデータをとりあえず共有フォルダに保存していました。案件ごとのデザインデータの一括管理や命名規則もなく、欲しいデータがどこにあるのか想像できない状態です。

また最新のデザインデータがどれなのかも把握が難しい状態でした。これではデザインデータを再利用したくても探すのに時間がかかってしまいます。なのでこれらを解決するために共有フォルダの管理方法をアップデートしました。

アップデート後はデザインデータの作業状況がわかるように、常に最新のデータが入っているmaster。作業用のデータを格納するworkspace。納品済みのデータを格納するrelease。ABテスト用のデータを格納するtestという感じでフォルダを分けています。

さらにデザインファイル名にもルールを設けました。どのページの何の案件か。誰が担当したものか。いつのデザインか。このように一目でわかるように設計し直しています。これらのアップデートによって必要なデータや最新のデザインへのアクセスがしやすくなりました。またファイルの作業状況が見えるようにもなったかと思っています。

今は作成したデザインデータの管理方法や運用ルールをガイドラインとしてまとめる作業を行っていて。こちらの画像はイメージ図ですが、こんな感じで誰でも閲覧可能なWebページとして用意してあります。

最後にここまで作成してきたものをデザイナー全体に共有して、実際に運用を開始していきました。運用方法のアップデートのまとめとしては、運用方法を見直すことでデザイナー間の最低限の認識を合わせる基盤を導入したところです。

仕様書のテンプレートを導入する

マスターデータを導入したことで作成時のずれというものは防げました。しかし、エンジニアやデザイナー内での共有はまだ弱い状態です。そこで、納品データの情報を記載しておくためのフォーマットとかを含めたデザイン仕様書のアップデートを実施。

これまではデザイン仕様書の書き方や保存場所に決まりがなくて、各々のやり方で納品をしていました。その影響でデザインの考慮漏れや納品形式のずれ、保存場所がバラバラになってしまうような問題が起きていました。

これまでのデザイン仕様と課題点を整理すると、まず1つ目は毎回一からデザイン仕様書を作成するので考慮漏れが発生してしまい記入項目が人によって違ってしまうことです。

2つ目は、デザイン仕様書の保存先が決まっていないので、自分たちの成果物を管理できずに該当資料を探すのに時間がかかる。保存先の例としては、自分個人の領域やチーム管理の領域、プロジェクトの領域だったり本当にさまざまです。

これらの課題を解決するためにデザイン仕様書のテンプレートを用意して、保存場所を1ヶ所に集約。デザイン仕様書のテンプレートでは誰がいつ見ても理解できるように案件の基本情報を記載する欄を設けました。ほかにもデザインパターンに漏れがないように、必要なデバイス展開のパターンをあらかじめ用意してあります。

テンプレートはボタン1つで作成可能です。誰でも簡単に同じフォーマットでデザイン仕様書を作れます。またデザイン資料の保存場所も自動で統一されるように設計しているので、保存場所がわからなくなることもありません。

冒頭で挙げた一からのデザイン仕様書の作成による考慮漏れや保存先の問題はテンプレートを導入することで、納品時の考慮漏れを防いで保存場所も統一。必要な時にいつでも参照できるようになりました。

カラーパレットを導入する

次にデザイナー内での認識の合わせ方やエンジニアへの共有方法は、これまでお話してきたアップデート方法で今後も改善を行っていきます。最後にUIデザインとしてのデザイン品質とユーザビリティの向上や制作コストの削減を目的として新たにガイドラインの導入を行いました。

ガイドラインといってもさまざまありますが、今回はカラーパレットの導入についてお話したいと思います。これまでの課題点として、今までは好きな色を好きなだけ利用できる状態で、コンポーネントによって色がずれたり類似色がいくつも存在してしまう状態になっていました。

これでは開発環境にも次々に色を追加する必要が出てきてしまいます。エンジニア側の色管理の負担、あと利用カラーが不明確になってしまう問題がありました。

色のずれについて少し具体例をお見せしたいと思います。Yahoo!ショッピングでは基本的に真ん中に表示されているsRGBと呼ばれるカラースペースを使用しているんですけど。この設定を間違えてしまうと、同じカラーコードでもちょっと色にズレが生まれてしまいます。

ちょっとディスプレイによっては見づらいかもしれませんが、少しだけオレンジの色が違っています。設定のほかにもカラーコード自体が微妙に違う色が多数存在していて、どの色を使うのが正解なのか判断がつかない状態です。

こちらはアプリで実際に利用していた色を書き出したもの一部で、現在Yahoo!ショッピングで利用されている色をこんな感じで全部洗い出します。UI作成時に必要となる色を選別してカラーパレットを作成しました。

文字として使用する色から背景として使用する色まで利用想定にも上限を決めていて、過不足のないように設計。ここで定義されている色以外は原則使用を禁止して、色が煩雑になることを防いでいます。

ほかにもUIの品質を担保するため、配色のNGパターン例みたいなものも用意しました。これらの色に関してはデザイナーだけでなく、技術側の環境も合わせてアップデートする必要があります。

なのでiOSの方には開発環境にもカラーパレットと同等のカラーセットを導入していただいて、デザイナーとエンジニアで使用できる色を共通化しました。エンジニアは新しい色を毎回追加する必要がなく、共通の色を利用しているので間違った色でアプリを開発してしまうリスクを削減できたかなと思っています。

これまで好きなように色を使うことでずれが生まれ、管理が負担となっていました。しかしカラーパレットを導入することで利用色のズレを抑えられて、アプリ全体でテーマに沿った色で統一。開発側も色の管理が一元化され、今ではデザイナーと共通の認識をもてるようになったかなと思っています。

今後実施していきたいアップデート

Yahoo!ショッピングで行った4つの事例についてのお話をしてきました。最後に全体のまとめとして、前のセッションでも出てきたように、Yahoo!ショッピングは20人以上のデザイナーが関わる大規模なサービスなので、個人の考えや解釈も人それぞれです。

そのため共通の認識や考えを共有しないと同じゴールでもずれが生まれてしまいます。地道ではあるんですけど、私たちはなぜ解釈がずれるのか、どうすれば共通の解釈ができるのかを一つひとつ整理して実行していきました。

今回お話ししたような運用方法の改善や納品方法、仕様書の作成方法のアップデート、ガイドラインの導入などはこれで終わりではありません。まだまだ改善の余地がありますので、日々取り組み続けていきたいと思っています。

最後にさらなるアップデートとして、これから取り組むことについて3つほどお話をさせてください。1つ目は使用するアイコン画像の共通化。2つ目はタイポグラフィや余白、デザインパターン等のUIガイドラインの拡張をしたいなと思っています。3つ目は新しいガイドラインをマスターデータに反映させ、どんどんアップデートをしていきたいです。

まだまだ足りていないところや改善点はたくさんあるので、デザイナー内のメンバーの意見とかを取り入れながら日々アップデートしていこうと思っています。

私からは以上です。ご清聴いただきありがとうございました。