「テキストボックス」を作成しながら「ステートベースドデザイン」の考え方を理解しよう

はじめに

前回と前々回では、画面サイズとカラーデザインの方針を決めてヘッダーとフッターを作成しました。これからこの2つに挟まれる中身の部分を作っていくのですが、今回はそこで使うコンポーネントの「テキストボックス」を作成しながら「ステートベースドデザイン」について理解します。

コンポーネント

一般に、画面に配置するUI要素をコンポーネントと呼びます。FigmaのコンポーネントはFigma特有の機能ですが、ここで言うコンポーネントは一般的な呼び名なので混同しないでください。どのようなコンポーネントを使うかはターゲット業種やアプリケーションごとに異なるため、デザインの実作業に入る前に使用するコンポーネントを整理しておく必要があります。

表1は業務システムでよく使われるコンポーネントです。これまでに「ボタン」「アイコン」「フッター」「ヘッダー」を作成してきましたが、今回は入力系コンポーネントの「テキストボックス」を作成します。

スタイルとバリアブルの追加

新しいコンポーネントを作成する際に、バリアブルやスタイルを追加することはよくあります。これまでヘッダー/フッターとボタンしか作っていないので、テキストボックスの作成作業に入る前に、そこで使用するカラーバリアブルとエフェクトスタイルを追加しましょう。

カラーバリアブルの追加

本連載では、ボタンなどのUI要素の種類ごとにコレクションを作る方針としています。テキストボックス用のコレクション「インプット」を追加して、図1のようなカラーバリアブルを作成します。

1. バリアブル編集ダイアログ
   キャンバスのプロパティの「ローカルバリアブル」横の編集アイコンをクリックしてバリアブル編集ダイアログを表示します。
2. コレクション「インプット」を作成
   左上の「･･･」アイコンをクリックして「コレクションを作成」を選び、コレクション名を「インプット」にしてください。
3. バリアブルの作成とスコープの設定
   表2を参照しながらバリアブルを作成し、スコープタブで使用する箇所を限定してください。

   表2：バリアブルで作成するカラーのエイリアストークン

   コレクション	バリアブル名	ライブラリ指定	スコープ
   インプット	back/primary	white	☑ フレーム
   	back/disabled	soft gray	☑ フレーム
   	back/hovered	very light gray	☑ フレーム
   	border/primary	light gray	☑ 線
   	border/secondary	blue	☑ 線
   	border/hovered	dark gray	☑ 線
   	text/primary	dark gray	☑ テキスト
   	icon/primary	medium gray	☑ シェイプ
   	icon/secondary	blue	☑ シェイプ

エフェクトスタイルの追加

第8回でボタンの立体感を醸し出すためにドロップシャドウを使ったエフェクト「button」を作成しました。インプットは逆に凹んだ感じを出したいので、表3のようにインナーシャドウを使ったエフェクトスタイル「input」を作成します。

1. エフェクトスタイル作成ダイアログ
   キャンバスのプロパティ「ローカルスタイル」のエフェクトスタイル横にある追加アイコンをクリックして「新しいエフェクトのスタイルを作成」ダイアログを表示します。
2. エフェクトスタイルの名前
   名前は「input/default」とします。
3. ドロップシャドウを定義
   デフォルトでドロップシャドウが1つ作成されるので、設定アイコンをクリックして表3に示すドロップシャドウを定義してください。

   表3：エフェクトスタイル「input」のシャドウ設定

   種類	X	Y	ぼかし範囲	広がり	色	不透明度
   インナーシャドウ	0	1	2	0	#555555	5%
   ドロップシャドウ	0	1	3	0	#555555	10%

4. インナーシャドウの設定
   プロパティ横の追加アイコンをクリックし、もう1つ今度はインナーシャドウを作成します。設定は表3を参照してください。ドロップシャドウがUI要素の外側に影を付けて立体感を出すのに対し、インナーシャドウは内側に影を付けて凹んでいる感じを出す効果があります。

設定が終わったら、青い「スタイルの作成」ボタンを押して完了です。私はときどき押し忘れることがあるのでご注意ください。これで標準化(デザイントークンの準備)はばっちりです。

土台のフレームを作成

現在、キャンバスとしている「コンポーネント」フレームの塗りは#FFFFFF(白)です。前回、テキストボックスを配置するボディコンテナの色を#F5F5F5(ライトグレー)とする方針にしたので、テキストボックスの部品を作成する土台もその色にして色のコントラストを確認したいところです。そのため、白い「コンポーネント」キャンバスの上に#F5F5F5のキャンバスを用意します。

ツールボックスのフレームアイコンをクリックし、白い「コンポーネント」キャンバスの上に図3左のように#F5F5F5の「ボディ」フレームを作ってください。この上でテキストボックスを作っていきます。

テキストボックスの作成

インプットは、四角いボックスに直接値を入力するコンポーネントです。入力するデータタイプにより「テキストボックス」「数値入力ボックス」「日付入力ボックス」などがあります。今回は「テキストボックス」を作成します。

テキストボックスの作成

作成するテキストボックスのプロパティを表4にまとめたので、これをもとにデザインしていきましょう。

1. フレームとカラー設定
   ツールパネルのフレームアイコンをクリックして、「ボディ」フレームの上に200W×40Hのテキストボックス用のフレームを作成してください。塗りは「インプット」コレクションから「back/primary」を選択し、線は「border/primary」を指定します(図4)。
   

   図4：テキストボックスの作成

2. エフェクトの設定
   エフェクトには、スタイル適用アイコンをクリックして、先ほど作成したエフェクトスタイル「input」を選択します。
3. 角の半径
   ボタンの半径は8pxにしましたが、こちらは4pxくらいにしておきます。
4. 名前を変更
   レイヤーパネルを見ると「ボディ」フレームの中に「Frame 1」というフレームが作成されていますね。これを右クリックして、フレームの名前を「テキストボックス」としてください。

テキストの追加

1. テキストの挿入
   このテキストボックスに文字を入力しましょう。ツールパネルのテキストアイコンをクリックして、テキストボックスの中央に直接「入力テキスト」という文字を書いてください。
2. テキストのプロパティ
   テキストを選択してプロパティパネルで「タイポグラフィー」と「塗り」を次のように設定します。コレクションを間違わないように注意してください。
   • 塗り：text/primary
   • タイポグラフィー：input/default (16/24)
3. テキストボックスの確認
   ここまでの設定で図4左下のようなテキストボックスが作成されたでしょうか。レイヤーパネルの親子関係も図4の通りになっているかを確認してください。

アイコンの準備

インプットで使用するアイコンを入手しましょう。今回必要なのはテキストボックスのピッカーですが、ついでにセレクタと日付入力ボックスのピッカーアイコンもゲットします。今回もまたプラグイン「Material Design Icons」の中から検索しましょう。

1. 3つのアイコンを取得
   ツールボックスのアクションアイコンからプラグイン「Material Design Icons」を表示し、「search」「triangle」「calendar」というキーワードで検索して図5の3つのアイコンをアイコンフレーム上に落としてください。
   

   図5：「Material Design Icons」から3つのアイコンを取得

2. アイコンの名前を変更
   最初の2つをテキストボックスのピッカーとセレクタ、3つ目を日付入力ボックスの日付ピッカーに使うので、名前も変更しておきます。レイヤーパネルで3つのアイコンフレームを順に右クリックして、次のような名前にしてください。
   • text-search-variant ⇒ ピッカー
   • triangle-down-outline ⇒ セレクタ
   • calendar-month ⇒ 日付ピッカー
3. アイコンのプロパティ
   「ピッカー」と「日付ピッカー」アイコンのVectorを一緒に選択して「塗り」を「icon/secondary(青)」に変更してください。「セレクタ」アイコンの方は「icon/primary(グレイ)」に変更します。アイコンのサイズはデフォルト(24×24)のままでOKです。

テキストボックスのコンポーネントを作成

さて、アイコンの準備ができたので、テキストボックスのコンポーネントを作成していきます。

テキストボックスにアイコンを挿入

「ピッカー」アイコンをコピーして、テキストボックスの右側にペーストしてください。レイヤーパネルで確認して「テキストボックス」フレームの配下に「ピッカー」と「入力テキスト」が並んでいればOKです。

オートレイアウトの設定

テキストボックスフレームにオートレイアウトを設定しましょう。レイヤーパネルの「テキストボックス」を右クリックして、「オートレイアウトを追加」してください。

フレームのプロパティ

親要素となるフレーム「テキストボックス」のプロパティを設定しましょう。親要素と子要素の配置を図6のような関係にしていきます。

1. サイズ
   オートレイアウトを設定した際に、サイズは自動的に164W(内包)×40H(内包)に変わっています。これを200W(固定)×40H(固定)に戻してください。
2. 左右の間隔とパディング
   ボタンのデザインでは左右の間隔とパディングは両方とも12PXにしました。テキストボックスは少し小さくして、どちらも8pxにします。

テキストのプロパティ

続いて、子要素の「入力テキスト」のプロパティを設定します。

1. サイズ
   横幅を「コンテナに合わせて拡大」にしてください。図6のようなサイズの関係になるので、テキスト幅は自動的に152W(拡大)となります。縦も「高さを固定」にして24Hにします。
2. 配置
   テキストの配置は、左詰めにしてください。

フレームサイズの再設定

アイコンのプロパティは変更ありません。サイズは24W×24H固定となっています。この状態で、もう1度親要素のフレームのサイズを再設定します。

1. サイズを内包に変更
   図7のようにサイズを固定から内包に変更してください。子要素の横幅との関係から、内包にしても200Wのままになっています。
   

   図7:最大値と最小値の設定

2. 最小幅と最大幅
   オートレイアウトにすると、子要素や親要素との関係でサイズが自動変更されます。何も設定しないとどこまでもサイズが変わるのですが、あまり大きく(小さく)なるとデザインが間延び(窮屈に)するので、変更に制限を付けることにします。 a.最大値の設定
   サイズ変更横幅のプルダウンをクリックして「最大値を追加」してください。ここでは、最大値として画面の幅(1440px)の1/4に相当する345pxを指定します。キャンバスを見ると、ここまで拡大しますよという仮想線を表示してくれます。
   
   b.最小値の設定
   続いて「最小値を160pxに設定してください。テキストが小さくなっても、ある程度の横幅を確保できるようになります。

ステートベースドデザイン

ステートベースドデザイン(State-based Design)とは、UIの状態(State)に応じてデザインを変える手法のことです。最近のアプリケーションでは、通常(Default)の表示だけでなく、フォーカス取得時(Focused)や無効の場合(Disabled)などで異なるスタイルを適用して、ユーザーの視認性や操作性を向上させるデザインが主流です。

ステートの種類

操作中にデザインスタイルを変える状態(ステート)は次の5つが一般的です。「必須」と「推奨」は私のリコメンドですが、ユーザービリティも重要な品質なので5つとも実施すべきと考えています。

• Default：通常時(必須)
• Focused：フォーカス取得時(必須)
• Disabled：無効時/編集不可時(必須)
• Hovered：マウスホバー時(推奨)
• Active：クリック中(推奨)

ステートに応じたプロパティ

見た目の変更はCSSの設定で簡単に行うことができます。表6は、上記のテキストボックスに対してステートベースドデザインを適用した場合の例です。

エフェクトスタイルの追加

先ほどDefaultのエフェクトスタイルを作成しましたが、まだFocusedとActiveのエフェクトは作っていません。表7にその2つの定義を追記したので、エフェクトスタイルを追加しましょう。

あれ、表7の色がHEX直接指定になっていますね。せっかくプリミティブトークンを用意しているのに、それを使っていないのには理由があります。実は、現状のFigmaのエフェクトスタイルでカラーバリアブルを指定した場合、図8のように透明度欄が隠れてしまい100％になってしまうのです。

これを回避するためには、図8右のようにプリミティブトークンを作成する際に透明度付きのカラーバリアブルを4つ用意する方法があります。ただ、透明度ごとにトークンを作るのは面倒なので、今回は(ルールを破って)直接指定にしているのです。

ステートメントデザインの作成

準備ができたので、5つのステートメントデザインを作成して見た目の違いを確認してみましょう。

1. テキストボックスをコピー
   これまで作成してきたテキストボックスがDefaultです。テキストボックスの左側にテキストで「Default」という説明を付けてください。
   
   続いて、説明文とテキストボックスを4つコピーして縦に並べて、テキストの説明文を図9のBeforeのように書き換えてください。また、5つのテキストボックスの名前も図9左のレイヤーパネルのように変更しておいてください。
   

   図9：テートメントデザインの作成

2. プロパティの適用
   表6を参考に追加した4つのテキストボックスのプロパティを設定してください。適用が終わると図9のAfterのような色合いに変わると思います。後は造像力です。Defaultの状態からマウスをホバーしたらどう変わるかを頭の中でイメージしてみましょう。

5つのテキストボックスをバリアント化

テキストボックスをコンポーネントにして、5つのバリアントとしてまとめましょう。個別に作成されたUI要素をあとからバリアントする際は次のような手順となります。

1. 個別にコンポーネント化
   5つのテキストボックスを順番に右クリックしてコンポーネント化します。続いて、[shift]キーを押しながら5つのコンポーネントをまとめて選択してください。
2. バリアントとして結合
   この状態でプロパティパネル上部を見ると「バリアントとして結合」というボタンが表示されています。これをクリックすると、5つのバリアントからなるバリアントグループが作成されます。プロパティ名は「state」としてください。「バリアントとして結合」は、なぜか右クリックメニューにないので注意してください。
3. バリアントグループ名を設定
   レイヤーパネルでバリアントグループ名を「state」に変更します。
4. プロパティ値を設定
   5つのバリアントを順番に選択して、プロパティの値を設定してください。今回はバリアント名と同じく、default、focused、disabled、hovered、activeという値にします。
   

   図10：5つのテキストボックスをバリアント化

まとめ

今回は、以下のような内容について学びました。

• デザインを行うにあたり、システムで使うコンポーネントの種類を整理する必要がある
• Windowsアプリではコントロールと呼んでいたが、Webアプリではコンポーネントと呼ぶ
• ボタンなど立体感を出すエフェクトはドロップシャドウを使うが、凹んだ感じを出す場合はインナーシャドウを使う
• Figmaのページのデフォルト背景色が#F5F5F5なので、グレー系基調に画面をデザインする際は白いキャンバスを用意する
• オートレイアウトで最大値や最小値を設定しておくと、デザインが間延びしたり窮屈になったりすることを防止できる
• 最近のデザインでは、UIの状態に応じてデザインを変えるステートベースドデザインを採用することが多い
• デザインのステートとしてはDefault、Focused、Disable、Hovered、Activeなどのモードがある
• Figmaのエフェクトスタイルでカラーバリアブルを指定する場合は、透明度別にカラーバリアブルを作成しておく必要がある
• HEXの色指定は6桁であるが、透明度も含めて8桁で指定する場合もある
• UI要素をあとからバリアントにする場合は、UI要素すべてをコンポーネント化した後で「バリアントとして結合」を行う

さて、今回まで12回にわたってFigmaによるWebシステムのデザインについて解説してきましたが、本連載は今回でひと段落とします。まだまだ解説するべき内容はたくさんありますが、続きは本連載をまとめた書籍にて解説したいと思います。

本連載を参考に、ぜひみなさんご自身でもFigmaのさまざまな機能を試してみてください。