独学・未経験のUIデザイナーがコンポーネント指向を勉強してみた

この記事は、2018年3月30日にクラウドワークスデザイナーブログに執筆した記事です。

はじめまして、デザイナーの小林です。

すっかり暖かくなりましたね。 今日はランチタイムに会社近くの公園で桜を見てきました。毎日春を感じてウキウキしています。「春」といえば、入学や就職など新しい一歩を踏み出す人が多い季節ですよね。

私も最近、プロダクトオーナーからUIデザイナーの道に一歩踏み出しました。 デザインは独学、未経験でUIデザイナーになったのですが、クラウドワークスではリードデザイナーの上田と一緒にデザインガイドラインのブロジェクトを担当しています。

デザインガイドラインのプロジェクトを担当する中で、まずはじめにAtomic Designなどコンポーネント指向から勉強していきました。独学でも勉強していたつもりですが、UIデザインに関する知見をよりスピーディに得ることができたように思います。

そこで、今回は新人UIデザイナーの私がどのようにコンポーネント指向を勉強していったのかをご紹介してみようと思います。 これからUIデザイナーになろうとしている人、新人UIデザイナーの受け入れをされる先輩のみなさんの参考になると幸いです。

コンポーネント指向を理解するためにやったこと

1. Atomic Design を知る
Atomic Designはコンポーネント指向の一つで、UIパーツ・コンポーネントの単位で定義していくデザイン手法です。

デザインガイドラインのプロジェクトの一貫で、コンポーネント指向の手法の一つとして、担当者2名でAtomic Designの勉強会を実施しました。 コンポーネント指向の解説なども読んでいたりしたのですが、Atomic Designは事例紹介や記事なども豊富にあるので、コンポーネント指向を理解する導入にはぴったりだと思います。

私がAtomic Designを通してコンポーネント指向を勉強してみてよかったと思った点をまとめてみました。

コンポーネント指向の概念がスムーズに理解できる
ページや各コンポーネントを構造的にみることができるようになった
サービスにおける共通化されたコンポーネントでデザインする手法を知ることができた
後々、実装を意識したコンポーネントデザインをする上で、実装を意識しやすくなった
実際の勉強会で扱った内容などは省略してしまったのですが、UXデザイングループで実施した社内勉強会の記事でも同じ内容を紹介しているので、ぜひ見てみてください！

2. メジャーなデザインガイドラインを読んでみる
Googleの「Material Design Guidelines」やAppleの「Human Interface Guidelines」などを読んだことのある方は多いと思います。

そのほかにも以下のデザインガイドライン・デザインシステムを読んでみました。

・SalesforceのLightning Design System
・AtlassianのAtlassian Design Language
・TrelloのNachos
・BuzzfeedのSolid
・IBMのCarbon Design Systems
・DropboxのScooter

ただ、デザインガイドラインをはじめから全て読み込もうと思うと、結構ボリュームもあり、日本語ドキュメントがないものも多いので、大変です。最終的に全てに目を通すことを目標にしつつも、まずガイドラインの読み込みで行ったことは以下の3つです。

1. 各デザインガイドラインで定義されているコンポーネントを書き出す
2. 書き出したコンポーネントが、Atomic Design のどのレベルで定義されているか考える
3. 各デザインガイドラインのコンポーネント同士を比較して、共通点・相違点を見つける

こうすることで、コンポーネント一つひとつの作りや作る際に意識されている点がちょっとずつ見えてきます。そして、自分でコンポーネントをデザインするときの参考情報が自分の中に貯まって行くので、経験値の少なさを少しカバーできたんじゃないかな、と思っています。

UXPinが運営するAdeleというサービスで、様々なデザインガイドラインを見ることができるので、ぜひこちらから探してみてください。

3. 自社サービスでInterface Inventoryをやってみる
Interface Inventoryとは、サービスやプロダクトを構成するコンポーネントを収集し、カテゴリごとに分類することで、サービス全体におけるコンポーネントを俯瞰して観察することができるものです。コンポーネントごとではなく、俯瞰してみることができるので、共通したデザインでコンポーネントが使われているか、使用方法に誤った点がないか、などをチェックすることができます。

今回は以下の手順で、Interface Inventoryを実施しました。

1. サービス内で使われているコンポーネントのキャプチャを撮る
2. Googleスライドにカテゴリごとに分類する（ボタン、フォーム、アラートなど）
3. 分類したコンポーネントの使用方法やビジュアルデザインに関して、課題や改善点を書き出す
4. 書き出した課題に対して、改善案を考える
5. 実際にコンポーネントをリデザインしてみる

UIデザイナーになる前から、いろいろなサービスのデザインを模写したり、自分で改善案を考えてリデザインをしてみたりしていたのですが、どうしても個別の画面でどのようにデザインしていくかばかりを考えてしまっていました。そのため、サービス内でのデザインやコンポーネントの統一性などを十分に配慮できていないデザインのアウトプットになってしまっていました。

今回、Interface Inventoryを行ったことで、個別の画面に最適化したコンポーネントにするのではなく、「サービスとして共有化できるコンポーネントをどうデザインするか」「サービス内のコンポーネントの共通化を意識しないとどのような弊害があるか」を考えながらデザインする観点が身についてきました。

おわりに

実際の画面やコンポーネントをデザインする前に、コンポーネント指向を理解したことで、以下のようないいことがありました。

・各UIコンポーネントの特徴・使い方を理解できること
・画面がどのように構成されているか自分で分解し考えることができること
・特定の画面に特化したデザインの知見ではなく、ベースになる汎用的なUIデザインの考え方・スキルが身につくこと
・自習で行なっているサービスやアプリの模写やリデザインで得られる気づきが増えたこと

実装を考慮したデザインがうまくできなかったり、カラーやタイポグラフィ、余白など細かな部分では知識が足りておらず社内のデザイナーからフィードバックをもらうこともたくさんあり、日々勉強中ですが、UIデザインに関してはコンポーネント指向を現場レベルで学べたことが、今後のデザインスキルを磨くための基礎になっていくのではないかと思っています。

これからUIデザイナーを目指そうと思っている方、サービスの模写やリデザインなど以外に新しい勉強法を模索している方などの参考になれば幸いです。

最後まで読んでいただき、ありがとうございました。