WebサイトやWebアプリケーションの制作に携わる人であれば「UIコンポーネント」という言葉を聞いたことがある方も多いと思います。BAではこのUIコンポーネントをとても重要視しており、この概念を身につけるための社内研修も実施しています。
今回はこの社内研修についてご紹介したいと思います。

BAはなぜフロントエンドエンジニアにUIコンポーネントの社内研修を行うのか

UIコンポーネントの役割

Webサイトがその役割を果たすためには一貫したUXの提供が重要です。しかし、ビジネスと共に成長するWebサイトが、その規模の拡大と高いUX品質を両立させることは常に困難をともないます。
これを実現する手段の一つが、UIコンポーネントシステムの構築です。

箇条書きや表・複数のハイパーリンクのグループなど、さまざまなUIを分類し統一されたUIデザインを提供するための仕組みがUIコンポーネントシステムです。

役割ごとに設計・制作されたUIコンポーネントシステムは、コンポーネント同士の組み合わせによってさまざまなコンテンツを構成することが可能なため、Webサイトの維持・拡張を容易にします。

このように、ビジネスオーナーにとってもUIコンポーネントシステムは大きな利益となります。そして、UIコンポーネントシステムを構築可能なフロントエンドエンジニアを増やすことは、BAにとっても大きなメリットとなります。

そのため、私たちはフロントエンドエンジニアがUIコンポーネントシステムの構築スキルを習得することを積極的に推し進めています。

フロントエンドエンジニアがUIコンポーネントを理解するメリット

UIコンポーネントシステムは対象のWebサイトのUI全てを網羅します。
つまり、Webサイト全体のコンテンツを表現できるUIパターンを設計するスキルが必要となります。こうしたコンテンツのUIパターンや構造を学ぶことで、情報設計（IA）に関する理解も深めることができます。

フロントエンドエンジニアがUIコンポーネントの研修で学ぶ内容のご紹介

多彩なコンテンツを構築できるUIコンポーネントシステムの設計にはさまざまな知識が必要となります。BAではこのような知識を順序だてて習得するための研修を行っています。
ここでは、どのような研修を行っているのかをご紹介します。

研修のゴールはUIコンポーネントシステムの構築

フロントエンドエンジニアがUIコンポーネントシステム構築スキルを身につける効率の良い方法の一つは実践です。
BAでは、フロントエンドエンジニアが手順に従って実際にUIコンポーネントシステムを構築することで、その理解を深める研修を行っています。

手順1 クライアント設定

まずは仮のクライアントを設定します。Webサイトはクライアントのビジネス課題を解決するツールです。UIコンポーネントシステムも、同時にクライアントのビジネス課題を解決するために設計することが必要となります。
そのため、この研修では始めにクライアントの設定を行っています。

手順2 UIコンポーネントシステム設計

クライアントを設定したら、いよいよUIコンポーネントシステムの設計を始めます。
UIコンポーネントはいくつかの種類に分けることができます。

• コンテンツ共通要素：ヘッダーやフッターのように全コンテンツ共通で使用するUIコンポーネントを「コンテンツ共通要素」として設計します
• レイアウトシステム：段落と段落を分ける上下のマージンや、左右に分割してレイアウトする、いわゆる「グリッド」をルール化したUIコンポーネントを「レイアウトシステム」として設計します
• UIコンポーネント：コンテンツのパターンを整理し、UIコンポーネントとして設計します。Webサイト内のコンテンツの大半を、ここで設計したUIコンポーネントを使って構成します

手順3 検証・修正

手順2で設計したUIコンポーネントが、Webサイト制作に耐えうる機能を持っているのかを検証するため、いくつかのコンテンツを実際に制作します。設計したUIコンポーネントのみを使ってコンテンツを制作し、想定通りのレイアウトや機能を実現できるかを検証します。

この手順で問題点を明らかにして、UIコンポーネントを修正することで、より強靱なUIコンポーネントシステムへと進化させます。

ここまでWebサイトの全てをUIコンポーネントで表現するかのように書いてきましたが、みなさんもご承知の通り定型のUIコンポーネントのみで全てをまかなうのは非常に困難です。
そのような理由から、実際のプロジェクトでは「何でも入れられるコンポーネント」を用意して対応することも多いです。

まとめ

ここまで見ていただいた内容は、BAで行っているフロントエンドエンジニア向けのUIコンポーネントシステム研修の一部です。実際の研修ではこれよりもっと詳細な内容をお伝えしています。
フロントエンドエンジニアがこうしたUIコンポーネントシステム構築手法を体系立てて学ぶ機会は、そう多くないのではないかと思います。BAではそんなUIコンポーネントシステム構築の学習機会を提供しています。

ご紹介した内容に興味を持ったフロントエンドエンジニアの方、BAではUIコンポーネントシステムに興味のある人材を求めています。採用フォームからぜひエントリーしてみてください。