「AbemaTV」におけるデザインシステムの可能性について考える #OHIW勉強会

「AbemaTV」開発チームでは、私たちはまだまだ進化の途中にあると考え、新機能の開発だけでなく日々 “ダカイゼン(打開と改善)” を繰り返しています。

以前「TGIF勉強会」の様子をご紹介しましたが、同じくフロントエンドチームが最近開催している「OHIW勉強会~俺たちのデザインシステムの可能性について考える~」の様子について今回はレポートいたします。


OHIW勉強会とは

本来の意味では「OHIM(Oh Hell, It's Mondayの略で、花金を指すTGIFとは反対に、また月曜日の始まりだといったような意味。)」という表記が正しいのですが、勉強会の開催日が水曜日であることから転じて「OHIW」勉強会という名前がつきました。
もはや水曜日は週の後半なのでは…という声が上がりつつも、勉強会の名前としてすっかり定着したのでOHIW勉強会と呼ばれています。


OHIW勉強会のテーマは、”デザインシステムの可能性について考える” こと。

AbemaTV開発チームでは、ユーザーに利用してもらう「AbemaTV」のプロダクトだけでなく、番組編成や映像配信を支える基盤システムも開発しているため、当勉強会では両方のデザインシステムの今後について考えます。

勉強会開催に至るきっかけとなったのは、「AbemaTV」のサービス開発期間が長くなるにつれて、デザインフローにおいて属人化している部分が大きくなり始めたことです。AbemaTVでは、すでにWebフロントエンドエンジニアとデザイナーが共同でスタイルガイドを制作していましたが、既存のスタイルガイドでは使われているコンポーネントについては分かっても、どんな意図で使うべきかという点については十分に明文化されていないという課題がありました。

また「AbemaTV」のプロダクトを開発するメンバーは、Atomic Design というコンポーネントベースのデザインコンセプトを利用していますが、コンポーネントの粒度設計にバラつきが出てきているので、再度整理したいという意見が出ていました。
一方で番組編成や映像配信を支える基盤システム開発メンバーにとっては、Google のデザインガイドラインである Material Design を利用しているものの、デザイナー、エンジニア含め Material Design 自体の理解がまだ深くないため、理解していきたいという希望がありました。


サービスの成長に伴って開発組織も拡大していく上で、デザイナー、エンジニアどちらにとってもデザインの意図を理解できる仕組みをつくることがOHIW勉強会の狙いです。



現状のスタイルガイドが抱える課題

今回はOHIW勉強会 第4回目に潜入。第1,2回目では現状のスタイルガイドだけではどういった点が不足しているか課題を洗い出しました。

そこで出た課題の一部を紹介いたします。


<プロダクトサイド>
・ボタン要素にフォーカスがあたっているかが分かりにくく、人によっては気づかない可能性も高い

・(ある機能内の)表示数が多いのではないか?

・コンポーネントリストはあるものの、どのコンポーネントがどこに使われているか分かりにくくなってきている


<基盤システムサイド>
・意味は異なるが色が微妙に似ているボタンがあるので、色でもっと直感的に情報を伝えられるようにしたい

・キーボード操作がきついところがあるのではないか

・コンポーネントの粒度設計やパターンがプロダクトに比べて分かりにくいかも



コンポーネントを役割・目的別にカテゴライズ

第4回目となる今回は、第3回目に引き続きワークショップ形式で行われました。Brad Frost 氏が提案しているInterface Inventory という既存デザインのリデザインを行う際のワークショップを参考にしています。

第3回目ではそれぞれのコンポーネントに対してその役割をメモしていきましたが、今回はそれらメモを参考にコンポーネントを役割・目的別にカテゴライズする作業です。

1時間の勉強会のうち40分はカテゴライズの作業に当てられました。


エンジニアとデザイナーでチームを作り、作業を進めていきます。

Webフロントエンドエンジニアの母良田(左)とクリエイティブディレクターの鬼石の「ホロイシチーム」



ホロイシチームが役割・目的別にカテゴライズ作業した一部例がこちらです。


Webフロントエンドエンジニアの大竹(左)とデザイナーの内田


最後の20分では各チームのアウトプット発表の後、五藤から解説がありました。


・カテゴライズをしてみると、ユーザーにとっては同じ種類のアクションなのに UI の挙動や色が違うことにより、ユーザーを迷わせてしまう部分があることに気付いた

・特定の色が持つ役割の認識がメンバーによって微妙に異なり、それが UI のブレにつながっていることが分かった

・UI が持つ役割は正しくても、その使い方や配置が悪いためにユーザーに役割が誤解されてしまうことがある

・開発者が UI の使い方まで理解できるデザインシステムが必要なことを再確認した


第5回目となる次回の勉強会では上記を更に整理していき、仕組み化していく作業に入ります。


仕組み化できないコアバリューのデザインに、より時間を割けるように

この取り組みの最終的なゴールは、デザインを生成するための “人に依存しない仕組み” を自分たちで考え、生み出すことです。現在AbemaTVではAtomic Design や Material Design など、ある特定分野のデザイン課題を解決するフレームワークをいくつも使用していますが、サービスが提供する価値はそれぞれのサービスごとに異なるため、「AbemaTV」自体のデザインは自分たちで仕組み化していくことが大切です。

そのためには現在のデザインで整理されていない部分を洗い出し、サービスのデザインフローについて UX からフロントエンド実装まで一貫して見直すことが欠かせません。


デザインの意図と技術的な要件について誰でも理解できる仕組みを作ることで、AbemaTVのような大規模プロジェクトにおける開発でもデザインにブレが起きないようにすること。そしてその分、仕組み化できないコアバリューとなる部分のデザインにより一層時間を割けるようにAbemaTVでは今後もデザインシステムの仕組み化を進めていきます。

株式会社AbemaTV's job postings
Anonymous
A622aa12 ed5f 423e baa9 2f679d58e5b9?1542672707
Anonymous
D0dd41d0 3713 4038 bab9 778fd70025f8?1553049348
197204 448959881806800 249325326 n
B8cbb21f 5816 415c b58f 97d4428ac021
11 Likes
Anonymous
A622aa12 ed5f 423e baa9 2f679d58e5b9?1542672707
Anonymous
D0dd41d0 3713 4038 bab9 778fd70025f8?1553049348
197204 448959881806800 249325326 n
B8cbb21f 5816 415c b58f 97d4428ac021
11 Likes

Weekly ranking

Show other rankings

Page top icon