「ヘッダー」の構造設計と命名ルールを通して「階層管理」を理解する

はじめに

前回は画面のサイズを決めて、その中に配置するフッターのバリアントを作成しました。今回はプラグインを利用していくつかのUI要素を作成し、それらを配置するヘッダーを作成しながらFigmaのテクニックを学んでいきます。

画面のカラーデザインの方針

ヘッダーの作成に取り掛かる前に、画面全体のカラーをどのようなバランスにするか考えましょう。

背景色

業務システムはターゲットユーザーの年齢の幅が広く、ポップで目を引くよりも落ち着いて疲れにくい色調が望ましいです。そこでグレーと白を基調にして、そこにプロダクトカラー(今回は青)をメインカラーとして組み合わせる方針とします。

フッターをライトグレー、ヘッダーをプロダクトカラーにするとして、ボディを白基調にするかライトグレー基調にするかで好みが分かれます。世の中のSaaSアプリの多くもこのどちらかを採用しており、ちょっと悩ましい問題です。

一般に、白とグレーには表1のような特徴があります。全体として白背景はモダンで映えた雰囲気になりますが、明るすぎると疲れやすいという側面もあります。グレー背景は柔らかく落ち着いた印象で目が疲れにくい利点もあるので、今回はボディも(フッターより少しだけ明るい)グレー(#F5F5F5)とします。

枠線色

続いてフッターやヘッダー、ボディなど、コンテナのボーダー(枠線)や画面全体の枠線を付けるかどうかの方針を決めましょう。これも好みが分かれるところですが、私は「枠線を付けるよりも区切りを自然に表現する」デザインが好きです。その方がシンプルでモダンなデザインに仕上がり、視線がスムーズに移動できると考えているからです。最近のアプリケーションの主流もこのような「ボーダレス」となっているので、今回は枠線なしの方針にします。

フッターの「塗り」を指定

上記の方針に沿ってフッターの背景色をグレー(#EEEEEE)に指定します。3つのバリアントを一緒に選択して、図1のようにプロパティ「塗り」で「background/secondary」に指定してください。これでフッターの背景色が白からライトグレーに変更されました。

図1：フッターの塗りを指定

ヘッダーに含めるUI要素

ヘッダーは、全ての画面に共通して表示されるプロダクトの顔です。ここにどのような機能を実装するかを設計した上でデザインを考えていきます。今回は、次のようなUI要素をヘッダーから利用できることとします。

• プロダクトのロゴ
• パンくずリスト
• ログインユーザーのアイコン
• メッセージ通知
• ヘルプ

図2下は、今回作成するヘッダーの完成形です。このデザインを目標としてメインカラー(青)のフレーム上にこれらのUI要素を並べていきましょう。

図2：ヘッダーの完成形

ヘッダーフレームの作成

前回作成したフッターの大きさは1440W×72Hでした。ヘッダーも同じ大きさとしましょう。ツールパネルからこの大きさのフレームを新規作成するのが普通ですが、今回はフッターをコピーしてヘッダーを作成することにします。

1. フッターをコピー
   図2のフッター「バリアント1」を選択し、[alt]キー＋ドラッグでバリアントグループの下側にコピーを作成します。
2. インスタンスの切り離し
   コピーしたものはインスタンスになっていますが、ヘッダーは赤の他人なので右クリックして「インスタンスの切り離し」を行ってください。これで単なるフレームになるので、レイアウトパネルでこれを右クリックして名前を「ヘッダー」に変更します。
3. カラーバリアブルの追加
   ヘッダーはプロダクトの顔なので、プロダクトのメインカラーにしましょう。これまでボタンの背景色しかバリアブルを作成していないので、ヘッダーの背景色のためのバリアブルを追加作成します。
   

   図3：フッターをコピーしてヘッダーフレームを作成

   a. バリアブルのダイアログ表示
   キャンバスのプロパティから、ローカルバリアブル横のアイコンをクリックすると、図4のようなバリアブル編集ダイアログが表示されます。
   

   図4：カラーバリアブルの追加

   b. コレクションを作成
   現在作成済みのコレクションは「プリミティブ」と「ボタン」だけです。コレクションとは、バリアブルを分類するためのグループ名でしたね。バリアブル編集ダイアログ左上の「･･･」アイコンをクリックし、「コレクションを作成」から「ページやダイアログ」というコレクションを作成してください。今回作成するヘッダーのバリアブルは、このコレクションの中に作ることにします。
   
   c. カラーバリアブルを作成
   「＋ バリアブルを作成」ボタンをクリックして「カラー」を選び、名前を「background/header」、値を「blue」としてバリアブルを作成してください(図5左)。スコープは「フレーム」のみOnとします(図5右)。これでヘッダーの背景色に指定する青色のバリアブルが作成されました。
   

   図5：バリアブルの追加

   d. カラーバリアブルの追加
   ついでに、この後のデザインのために表2のようなカラーバリアブルを追加しておいてください。バリアブル名が太字のものが今回追加するバリアブルです。図4のようなバリアブルが作成されればOKです。なお、スコープのシェイプはアイコンのVectorなどの図形を指します。

   表2：カラーバリアブルの作成

   コレクション	バリアブル名	値	スコープ
   プリミティブ	blue	2196F3	なし
   	white	FFFFFF	なし
   	red	D32F2F	なし
   	light blue	E5F6FD	なし
   	light red	FDEDED	なし
   	very light gray	F9F9F9	なし
   	soft gray	F5F5F5	なし
   	light gray	EEEEEE	なし
   	medium gray	AAAAAA	なし
   	dark gray	555555	なし
   ページやダイアログ	background/header	blue	フレーム
   	background/primary	white	フレーム
   	background/secondary	light gray	フレーム
   	background/body	soft gray	フレーム
   	boarder/primary	blue	線
   	boarder/secondary	dark gray	線
   	boarder/danger	red	線
   ボタン	icon/danger	red	シェイプ

   スコープをまとめて設定

   バリアブルのスコープはまとめて設定できます。例えば、図4左の7つのバリアブルをまとめて選択し、編集アイコンからスコープタブを表示して「すべてオフ」とすれば一発でスコープを設定できます。図4右上の7つのバリアブルのスコープもこの方法で一括して「フレーム」のみに設定してください。

4. ヘッダーの背景色を青に
   「ヘッダー」を選択してプロパティパネルを表示してください。図6のように「塗り」を「＋」ボタンで追加し、ライブラリタブから「ページやダイアログ」コレクションにあるbackround/headerバリアブルを設定します。キャンバスを見ると、ヘッダーの背景色がプロダクトカラーであるblueになったことが確認できます。
   

   図6：ヘッダーの背景色をbackground/headerに設定

ロゴの作成

製品ロゴはプロダクトの表札という役割のほか、クリックするとトップ画面に切り替わる働きをすることも多いです。これをヘッダーの左端に設置しましょう。ロゴは重要なので本来はみんなの意見を聞きながらきちんとデザインするものですが、今回はちょこっとシンプルなロゴを作成します。

ChatGPTにロゴを作成するのに役立つFigmaのプラグインを尋ねてみたところ、図7のようなプラグインを用途別に使い分けることをリコメンドしてくれました。今回はこのうちShaperだけを使いますが、他のプラグインもそれぞれ面白いです。興味のある方は試してみてください。

図7：ロゴ作成を支援してくれるプラグイン(ChatGPTの回答)

プラグイン「Shaper」を起動

Figmaのツールパネルの「アクション」アイコンから「プラグインとウィジェット」タブを開き、Shaperを検索してください。Shaperはロゴデザインなどの形状を作成できる便利なツールですが、今回はデフォルトで用意されている形状(Shape)をそのまま使います。

Shaperを起動して、図8のようにBasicにあるcoludをクリックするとFigmaのキャンバス上にCloudという名前のベクターが作成されます。

図8：ShaperからCloudの形を取得

ベクター「Cloud」の編集

Shaperから取得したアイコンを加工して、ロゴを作っていきましょう。

• a. サイズの変更
  Figmaに落とされた雲の図形はvector形式なので、Figmaのベクターツールを使って簡単な編集が可能です。今回はこの形状のまま利用します。デフォルトは261W×163Hとちょっと大きいので、プロパティでサイズを80W×50Hに変更してください。
• b. フレーム「アイコン」内に配置
  cloudアイコンをフレーム「アイコン」の下にドラッグしてください。
• c. 名前の変更
  名前が「Cloud」となっているので、右クリックして「ロゴ」という名前に変更してください。
• d. 塗りの設定
  ロゴは白地に配置する場合と、メインカラー上に配置する場合の2パターンで作成することが多いですが、ここでは1つだけにします。今回はメインカラー(blue)を背景色とした「ヘッダー」にロゴを配置するので、ロゴを白色にします。ベクター「ロゴ」を選択し、プロパティパネルで「塗り」をicon/primary(白)に変更してください(図9)。
  

  図9：ベクター「Cloud」の編集

テキスト「BizPound」を追加

このシェイプの中に“BizPound”という文字(テキスト)を入れましょう。

• a. テキストを追加
  ツールパネルのテキストアイコンをクリックし、cloudシェイプの真ん中に"BizPound”という文字を書いてください。
• b. テキスト色を変更
  図10のようにテキストのプロパティパネル「塗り」のカラーアイコンをクリックし、ライブラリからtext/secondary(青色)を選んでください。
  

  図10：BizPoundのテキスト色を青色に変更

• c. グループ化
  レイヤーパネルのテキスト「BizPound」とベクター「ロゴ」を一緒に選択し、右クリックして「選択範囲のグループ化」を行ってください。Group1というグループが作成され、テキストとシェイプ(図形)が一体化されます。レイヤーパネルでGroup1を右クリックし、グループの名前を「ロゴ」に変更しておいてください。これで図11右のようなロゴが完成します。
  

  図11：テキスト「BizPound」を追加してロゴを完成

ヘッダーの中にロゴを配置

「ヘッダー」と「ロゴ」が準備できたところで、ヘッダーの中にロゴを配置します。現在、ヘッダーの中に「ボタン」インスタンスがあるので、これを削除してからロゴを追加するわけですが、今回は手っ取り早く「貼り付けて置換」を使いましょう。

貼り付けて置換

グループ「ロゴ」を[ctrl]キー＋[C]キーでコピーします。次に、ヘッダー内にある「ボタン」を選択して図12のような右クリックメニューから「貼り付けて置換」を行います。「ボタン」が「ロゴ」に置き替われば成功です。

図12：「ボタン」に「ロゴ」を貼り付けて置換

オートレイアウトの配置

ヘッダーはフッターを基に作ったので、すでにオートレイアウトが設定されています。プロパティパネルで図13のように「配置」を右から左に変更してください。

図13：オートレイアウトの配置

UI要素を作成してヘッダに配置

この調子で、ヘッダーに含めるUI要素を作って配置していきましょう。

パンくずリスト

業務システムはログインするとメニューが表示され、そこから任意の機能に遷移する動線が一般的です。eコマースなどのB2Cと比べて、ニューからアクセスする画面数が多い代わりに、各機能の深さは2〜4層くらいまでという、広くて浅いシンプルなスタイルが特徴です。

メニューが起点となるため、どの画面からでも一発でメニューに戻ることができると便利ですね。この手段として、パンくずリストをヘッダーに表示することにしましょう。

パンくずリスト

パンくずリスト(Breadcrumbs)とは、アプリケーション利用中に現在の位置を示すナビゲーションです。階層形式でヘッダーなどに常に表示されるので、ユーザーは自分がどこにいるのか視覚的に把握できます。また、各階層の要素はリンクになっているので、ユーザーはクリックして直接任意のレベルにジャンプできます。

ホーム＞レベル1＞レベル2＞現在のページ

名前の由来はグリム童話「ヘンデルとグレーテル」で、ヘンデルが森の中で帰りに迷わないように来た道にパンくずを少しずつ落としていったエピソードから来ています。

a. テキストを挿入
ツールパネルからテキストを選択し、「ヘッダー」フレームのロゴの右隣にテキストエリアをドラッグしましょう。図14のように“メニュー＞レベル1＞レベル2＞現在ページ”というテキストを書いてください。レイアウトのサイズ変更は「幅の自動調節」にしておきます。

図14：パンくずリストを追加

b. テキスト名を変更
レイヤーパネルを見ると「メニュー＞レベル1＞レベル2＞現在ページ」という名前のテキストができています。名前が長いので、右クリックして「パンくずリスト」という名前に変更しておいてください。

テキストやプロパティの「名前」と「値」の関係

キャンバス上に“あいう”というテキストを記述した場合、レイヤーパネルのUI要素は「あいう」という名前で作成されています。続いてキャンバス上の文字を“あいうえお”に変更すると、UI要素名も自動的に「あいうえお」に変更されます。

ここでレイヤーパネルのUI要素を「あいうえおA」という名前に変更するとどうなるでしょうか。はい、第4回で解説したように、キャンバス上のテキストの値は“あいうえお”のままですね。そして、このようにいったん値と名前が不一致となった場合は、テキストの値を“あいうえおB”に変更してもUI要素名は連動しなくなります。

「値の内容」で「UI要素名」のデフォルトを作成するこの関係は、プロパティ値とバリアント名でも同じなので覚えておきましょう。

ユーザーアイコン

次は、ログインユーザーアイコンを作成します。クリックしてプロフィールを編集したり、画像をUPしたりできるもので、多くのアプリケーションで用意されているお馴染みのアイコンです。デフォルトは名前のイニシャルで、画像をアップロードして顔写真やアバターに変えるスタイルが多いですね。作業としては、ロゴと同じく「アイコン」フレーム上にUI要素を作ってから「ヘッダー」フレームに入れることにします。

a. 円を作成
ツールパネルの左から3つ目のアイコンで「楕円」を選び、フレーム「アイコン」の上に50px×50pxの円を作成します。

b. テキストを作成
ツールパネルの左から5つ目のテキストアイコンをクリックし、図15のように円の真ん中にイニシャルを記載してください。私は“H.U”としましたが、ご自分のイニシャルで作成した方が良いでしょう。

図15：ユーザーアイコンの挿入

c. 円の背景色
円のプロパティの「塗り」から、背景色を「icon/primary(白)」に指定してください。

d. 文字の色とタイポグラフィー
テキストを選択して「塗り」を「text/secondary(青)」にしてください。タイポグラフィーは「button/label」を選択します。

e. グループ化
レイヤーパネルで円「Ellipse 1」とテキスト「H.U」を一緒に選択し、右クリックから「選択範囲のグループ化」を行ってください。レイヤーパネルでグループ名を「ユーザーアイコン」に変更したら、ユーザーアイコンのできあがりです。

図形とテキスト、フレームとテキストの関係

ロゴや円などの図形は、その中にテキストを入れられないため、図の真ん中あたりにテキストを置いてグループ化しました。でも、先ほどのパンくずリストはフレームの中にテキストを書いたら、自動的にフレームの中に含めてくれましたね。

フレームはキャンバス的要素なので、その中にテキストを書いたら自動で含めてくれるのです。図形とテキストの関係とフレームとテキストの関係は、似て非なることを理解しておきましょう。

f. ユーザーアイコンの挿入
作成したユーザーアイコンを[ctrl]キー＋[C]キーでコピーし、フレーム「ヘッダー」の上でペーストしてください。図15下のようにパンくずリストの横にアイコンが配置されればOKです。実はユーザーアイコンはヘッダーの右側に配置したいのですが、その作業は後でまとめて行います。

メッセージ通知アイコン

業務システムでは「伝票が承認された」「商品が入荷した」などの業務処理で自動的に担当者へメッセージが通知される仕組みを用意します。通知が来たことを知らせて、クリックすると内容が読めるようなアイコンをヘッダーに用意しましょう。

a. メッセージアイコンを取得
ツールパネルのアクションからプラグイン「Material Design Icons」を呼び出してmessageというキーワードで検索してください。ざざっと表示されたアイコンの中から図16aのアイコンをクリックし、「アイコン」フレームに落としてください。

b. バッジ用アイコンを取得
B2Cのアプリでよく使われるバッジは、B2Bの業務システムでもとても便利です。通知が来たことと、いくつ来ているのかを知らせるバッジを通知アイコンに組み合わせたいので、numberというキーワードで再検索して図15bのアイコンを取得してください。

図16：通知アイコンとバッジ用アイコンの取得

c. アイコンのサイズ
通知アイコンのサイズは、ロゴやユーザーアイコンに合わせて50W×50Hにしてください。バッジの方は小さくして16W× 16Hくらいで良いでしょう。

d. 通知アイコンの色
通知アイコンのVectorを選び、「塗り」を#F000000から「icon/primary(白)」にしてください。続いて、バッジ用アイコンのVectorの「塗り」は、上記で追加した「icon/danger(赤)」を選びます。カラーの指定でHEXやPrimitiveトークンを直接使わない原則は貫くことにしましょう。

e. アイコンの組み合わせ
図17のように2つのアイコンを組み合わせると、「メッセージ」フレームの配下にバッジフレーム「numeric-1-circle」が入ります。フレームとベクターの組み合わせなので、2つをグルーピングしなくてもすっきり組み合わさりますね。右クリックで「メッセージ」フレームの名前を「通知アイコン」に変更すれば準備完了です。

f. アイコンの挿入
ユーザーアイコンと同じ要領で通知アイコンをコピーして、フレーム「ヘッダー」の上でペーストしてください。図17のようにユーザーアイコンの右横に配置されればOKです。

図17：通知アイコンとバッジ用アイコンの組み合わせ

ヘルプアイコン

ヘッダーに含める最後のコンテンツはヘルプアイコンです。ヘルプを見るほかに、バージョン情報を確かめるのにも使いますね。これもプラグイン「Material Design Icons」から使わせてもらうことにしましょう。

a. ヘルプアイコンを取得
ツールパネルのアクションからプラグイン「MaterialDesign Icons」を呼び出し、helpというキーワードで検索してください。今回は図18aのアイコンを反転(inverse)して利用するので、クリックして「アイコン」フレームに落としてください。レイヤーパネルでこれを右クリックしてアイコンの名前を「ヘルプアイコン」とします。

b. アイコンのサイズ
アイコンのサイズは、ユーザーアイコンと同じく50W×50Hにします。

c. アイコンの色
このアイコンをinverseして利用するので、アイコンのVectorの「塗り」を#000000から「icon/primary(白)」にしてください。

d. アイコンの挿入
アイコンをコピーして、フレーム「ヘッダー」の上でペーストしてください。図18のようにユーザーアイコンの右横に配置されればOKです。

図18：ヘッダーにヘルプアイコンを入れる

UI要素を左右に配置

現在、ヘッダーのオートレイアウトの配置は、図18右のように「中央左」になっているので、ヘッダーに挿入したUI要素はすべて左側から並べられています。これを、左側に「ロゴ」と「パンくずリスト」、右側に「ユーザーアイコン」「通知アイコン」「ヘルプアイコン」というように左右に分けて配置します。

グループに分ける

左側に配置するものと、右側に配置するものをそれぞれグループにします。第3回で説明したようにまとめる方法にはグループ化とオートレイアウト化がありますが、今回はオートレイアウトを使うことにします。

a. ロゴとパンくずリスト
レイヤーパネルで「ロゴ」と「パンくずリスト」を一緒に選択して、右クリックから「オートレイアウトを追加」してください。Frame 1という名前のオートレイアウトが作成されるので、右クリックして名前を「左側アイコン群」とします。

b. ユーザーと通知とヘルプ
同じ要領で「ユーザーアイコン」「通知アイコン」「ヘルプアイコン」を一緒に選択して、オートレイアウトを作成してください。こちらは「右側アイコン群」という名前にします。

ヘッダーの配置を均等配置にする

フレーム「ヘッダー」を選択して、オートフレームの「配置」を見てください。一見すると9マスのいずれかにしか配置できないように思われますが、実はダブルクリックすることで分散配置できます。

「配置」の中央部分をダブルクリックすると、図19のようにフレームに含まれるコンテンツの「配置」が左、中央、右に分散されますね。上記で2つのグループに分けたので中央には何もなく、「右側アイコン群」と「右側アイコン群」が左右にうまく分かれて配置されます。図19のように並べば、これでヘッダーの作成完了です。

図19：左側アイコン群と右側アイコン群を左右に配置

ヘッダーをコンポーネント化

ヘッダーはどの画面でも共通のレイアウトになるため、右クリックして「コンポーネントを作成」してください。これでヘッダーのデザインが変更になった場合でも、このメインコンポーネントを変更すれば一括適用できます。

まとめ

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

• デザインを行うにあたり、画面全体のカラーデザインの方針を決める必要がある
• カラーデザインはアプリケーションの種類やターゲットユーザーに合わせて考える
• 最近のWebアプリは枠線のないボーダーレスが増えている
• デザインの標準化を維持するには、必要が生じたときにデザイントークン(バリアブルやスタイル)を追加するマメさが大切
• カラーバリアブルのスコープは複数をまとめて設定すると便利
• プラグインの選択や使い方をChatGPTに相談すると、適切なリコメンドがもらえる
• 図形とテキストは兄弟関係なのでグループ化が必要だが、フレームとテキスト、フレームと図形はそのまま親子関係になれる
• オートフレームの「配置」は、ダブルクリックすることでコンテンツを分散配置できる

さて、次回は使用するUI要素(コンポーネント)を整理したうえで、テキストボックスを題材にしてステートベースドデザインについて理解します。