パーツのコンポーネント化

THEME

よく使うパーツについてコンポーネント化します。ここまでで登録しているスタイルを活用し、ボタンやヘッダーといったパーツをコンポーネントとして作っていきましょう。

繰り返し出てくるパーツを洗い出す

コンポーネント化を行う前に、よく使うパーツはどれなのかを洗い出します。このLessonでコンポーネント化する部分は以下の３パーツです。

ボタン

ボタンは、サイトを訪れたユーザーが次の行動を決定するために押す重要なパーツです。ただし複数の役割を持つことが多いため、形や大きさが複雑になりがちです。最優先で押したいボタンと、優先順位が２番目のボタンを設定し、役割に応じてボタンを使い分けます。

ヘッダー

ヘッダーはナビゲーションの役割を持つことが多いため、こちらも一貫して同じパーツを使います。ユーザーが迷わないよう、同じデザインと情報を繰り返して表示するとよいでしょう。

フッター

フッターの役割としては、各ページへのリンクを一覧として載せることが多いです。この場合、サイトを案内するサイトマップとして機能します。また、フッターとヘッダーのトーン＆マナーに整合性があると、各ページのデザインにも統一感が出てきます。

図でも確認します。このLessonではPCサイズのコンポーネントから作成していきます。

@div:figure

コンポーネント一覧 @divend

コンポーネントの特性については前述のLessonも合わせて確認します。

コンポーネントの命名についてはいくつか方法がありますが、このLessonではアッパーキャメルケースを使用します。

ボタンのコンポーネントを作る

ボタンのコンポーネントを作る際にはオートレイアウト機能を活用します。

オートレイアウトは「コンテンツの内容や余白などを設定しておくと自動的に調整してくれる」という機能です。ボタンのコンポーネントは、中のテキストの長さや配置する場所によって大きさを調整する必要があります。オートレイアウト機能を使うことでボタンのコンポーネントを効率よく作成・管理できます。

Lesson2-○でもオートレイアウトを活用したボタンについては触れてきましたが、改めてボタンのコンポーネントを作成します。今回は、Webサイトで使用する可変幅ボタンを作ります。

まず、テキストを打ちます。テキストツールを活用して、「テキストラベル」と入力します。このテキストを右クリックしてメニューを呼び出します。

@div:figure

ボタンのFrameを作成 @divend

テキストをオートレイアウトに変換できます。

@div:figure

ボタンのFrameを作成 @divend

オートレイアウトに変換すると、テキストの回りに透明なFrameが追加されました。

@div:figure

ボタンのFrameを作成 @divend

追加された透明なFrameを調整します。塗りはPrimary、角丸8、文字色はWhiteで調整します。また、オートレイアウトの高さは固定にし、48とします。横幅はハグに設定します。

@div:figure

ボタンのFrameを作成 @divend

Frameの名前を「Button」として変更します。右クリックを行うか、もしくはコントロールキー（Mac）を押しながらクリックしてメニューを呼び出します。「コンポーネントの作成」をクリックし、コンポーネントを作成します。青い囲みが紫色の囲みに変換され、コンポーネントとして登録されます。

バリアントを活用する

ボタンのコンポーネントは、機能が多いため色や形といった特徴が変更された「差分」も多くなります。たとえばアイコンが入ったボタンとアイコンが入っていないボタンなど、「似た形だけど特徴が違う」「色が違う」といった例です。

これは、ボタンはユーザーとサイト運営者の接点となるコンポーネントのため、サイズや状態によって見た目を変化させ、一連の行動をなめらかにする必要があるためです。

このデザイン的な差分については、バリアント機能を使うとさらに効率的にコンポーネントを使うことができます。バリアントの作成についてはLesson2でも触れていますが、あらためて手を動かしながら作成しましょう。

@div:figure

バリアント作例 @divend

この作例においてはボタンのサイズでバリアントを作っています。通常サイズ／小さなサイズ／大きなサイズでバリアントを分けています。

設定を参照のうえ、バリアントを作成しましょう。

プロパティを確認してみます。

@div:figure

プロパティ＞バリアントプロパティの編集 @divend

バリアントプロパティの編集を押すと、現在登録されているサイズを確認できます。

Figma Variants Playground (Japanese 日本語)

バリアントを理解するためにコミュニティで配布されているファイルです。公式サイトから配布したものの日本語訳となります。理解を深めるために触ってみましょう。

https://www.figma.com/community/file/918027651143349634

ヘッダーのコンポーネントを作る

@div:figure

ヘッダーのコンポーネント用Frame @divend

ヘッダーのコンポーネントを作ります。横幅1440、縦幅88のFrameを作成します。Lesson5-5で作成したPC用のレイアウトグリッドを反映します。

@div:figure

Frameに部品をはめこむ @divend

グリッドを反映したFrameに、①ロゴ　②ナビゲーション用の項目　③ボタン　を配置します。この際に、レイアウトグリッド内にパーツが収まるように注意します。

@div:figure

ガイドラインを見ながら作成する @divend

Optionキー（Mac）Altキー（Windows）を押すと要素ごとの距離を測ることができます。コンポーネント作成時に活用するとよいでしょう。上下の中央にすべての要素が揃うように調整します。

@div:figure

コンポーネントを整理 @divend

コンポーネントとしての形が整理されたところで、右クリックを行うか、もしくはコントロールキー（Mac）を押しながらクリックしてメニューを呼び出します。「コンポーネントの作成」をクリックし、コンポーネントを作成します。

@div:figure

コンポーネントを作成 @divend

ヘッダーのコンポーネントが作成されました。

フッターのコンポーネントを作る

フッターのコンポーネントを作ります。横幅1440、縦幅487のFrameを作成します。Lesson5-5で作成したPC用のレイアウトグリッドを反映します。

@div:figure

フッターのコンポーネント用Frame @divend

背景色を設定済のスタイルから選びます。「Background+1」を設定します。

@div:figure

フッターのコンポーネントに背景色を設定する @divend

フッター内に何の要素が入るのかを確認します。今回は、ロゴ・住所・SNSアイコン・リンクの要素が入ります。

@div:figure

フッターに入る要素を確認する @divend

要素をFrame内に入れます。この際、グリッドを活用してレイアウトすると整理しやすくなります。

@div:figure

フッターに入る要素を整理してレイアウトする @divend

背景に入る画像を入れます。

@div:figure

背景の装飾 @divend

最背面に入る画像にあたるため、レイヤーの順序を並び替え、最背面に来るようにします。

@div:figure

レイヤーの順序 @divend

その他のコンポーネント

ここに挙げた事例のほかにも場合によってはカード形式やカレンダーといったさまざまな形のコンポーネントが必要になります。既存のデザインシステムを参考にするとよいでしょう。

Ant Design System

@div:figure

Ant Design OPENSOURCE @divend

Ant Design Systemは、中国のAlibaba社が開発するデザインシステムです。このデザインシステムは公式版は有料ですが、オープンソース版として誰でも使える無料のコミュニティファイルが存在します。このファイルでは有志がコンポーネントを管理しており、膨大な量のコンポーネント作例を見ることができます。

@div:figure

Ant Design のグラフ類コンポーネント @divend

たとえばこのような「円グラフや進捗をあらわすコンポーネント」など、機能に合わせたコンポーネントの作例を確認してみましょう。