「スタイル」機能で「フッター」を設計してコンポーネント化する

はじめに

前回はAtomic Designの考え方におけるAtoms(原子)要素としてアイコンを用意し、Molescules(分子)要素として「ボタン」コンポーネントを追加作成しました。今回は、Templates(テンプレート)およびPages(ページ)要素としてレイアウトを標準化し、その中に含めるOrganisms(有機体)要素として「フッター」をデザインしていきます。

画面サイズの基本方針

利用者のペルソナを考慮する

画面サイズやレイアウトを設計する際にまず考えなければならないのは「ユーザーがどのようなデバイスを使ってアプリケーションを操作するか」です。例えば、eコマースなどのB2Cサービスではモバイルファーストの考え方が基本となり、スマホに最適化されたデザインを優先します。一方で、業務システムのようなB2Bサービスであれば、デスクトップの広い画面に多くの情報を一度に表示して、効率良く操作できるデザインを優先することが求められます。

本連載のテーマは「業務SaaS」なので、主な利用デバイスとしてデスクトップを基準に考えます。現在、最も普及しているモニターの解像度はフルHD(1920W×1080H)なので、この解像度をターゲットとしましょう。

ただし、最近はノートPCを使うユーザーも増えており、こちらの解像度も考慮する必要があります。試しに私の使っているPCを確認してみると、自宅のノートPC(Chromebook)も会社で使っているノートPC(Windows)もフルHD対応で、拡張モニターもすべてフルHDで使っていました。注意すべきはデフォルトです。自宅のPChromebookは2194W×1234Hと高解像度なのに、デフォルト(推奨値)は1536W×864Hと低めに設定されていました。多くのユーザーはデフォルト表示のまま利用するので、デフォルトが1536W程度であってもカバーしたいと思います。

画面サイズの設計基準

マルチにウィンドウを開いたときに、ウィンドウを画面の横幅いっぱいに広げて使っている人はいませんね。つまり、フルHDが1920W×1080Hだからと言って、画面のサイズをピッタリにするわけではありません。一般的には横幅をフルHDの2/3(1280W)〜3/4(1440W)くらいにすることが実用的でしょう。

解像度が低いモニターを使っている人も考慮する方針であれば1280Wが無難ですが、今回は広めの1440Wでデザインします。フルHDのアスペクト比(16対9)を保つなら高さは810Hですが、業務システムでは縦スクロール前提の設計も多いため、多少余裕を持たせて900Hを基本とします。つまり、次のような方針とします。

• デバイスの解像度：1920W×1080H(フルHD)
• 画面のサイズ：1440W×900Hをベースにコンポーネントを配置する
• 横幅：リキッドデザイン ウィンドウを広げると追従して拡大する(白い余白がでない)
• 縦幅：サイズ 900Hに入らない場合は縦長サイズにしてスクロール対応

レスポンシブデザイン

レスポンシブデザインとは

「レスポンシブデザイン」とは、アプリケーションがPCモニターだけでなく、タブレットやスマホなどさまざまなデバイスの画面サイズに自動的に適応するWebデザイン手法のことです。

レスポンシブデザインが登場する前は「固定レイアウト方式」が主流でした。この方式では、画面サイズが異なるデバイスで使用した場合に表示が崩れて見づらくなることが多かったという課題があったため、従来はデバイスごとに個別のデザイン(HTML)を作成する必要があったのです。

レスポンシブデザインはこの課題を解消し、1つのWebアプリでさまざまなデバイスに対応できるようにする技術です。現代ではユーザーがさまざまなサイズのデバイスを使い分けることが一般的であり、レスポンシブデザインはWeb開発に欠かせない標準技術となっています。本連載では業務システムというB2Bモデルを対象としているため、B2Cほどスマホやタブレットでの利用を重視する必要はありませんが、それでも最低限の対応を考慮しておく必要はあります。

基本的な動作

レスポンシブデザインは、スタイルシートの一種であるCSS(Cascading Style Sheets)を活用して、画面サイズに応じたレイアウトやスタイルの変更を実現します。CSSはHTMLで記述された内容を「どのように見せるか(装飾・配置など)を制御するための技術で、例えば表1のような動作を設定します。

試しに今、この記事の画面サイズを徐々に狭めてみてください。ところどころでパッと表示が切り替わって、表1のような動作をすることが確認できるはずです(フォントサイズまでは変えていませんが)。この画面はレスポンシブデザインに対応しているので、このように画面サイズが変わってもコンテンツがきちんと表示されるのです。

レスポンシブデザインの仕組み

レスポンシブデザインの仕組みを図式化したものが図2です。コンテンツを表示するHTMLファイルは同じですが、表示されるデバイスの幅に応じてCSSを切り替えて適用します。そして、どこで切り替えるかの基準が「ブレークポイント」(breakpoint)です。ブレークポイントは「画面幅がこの値を超えた/下回った」という場合に、スタイルを切り替える閾値になります。

図2では、PC用CSSからタブレット用CSSに切り替えるブレークポイントを1200px幅としています。PCで1440Wでデザインした画面幅を小さくしてゆくと、途中までは要素の幅を小さくしたり、文字を折り返したりで耐えながら、1200W以下になるとパッとタブレット用のデザイン(要素の配置を縦並びにする、一部のコンテンツを非表示にするなど)に切り替わります。先ほど画面サイズを狭めた際に「ところどころでパッと表示が切り替わって」いたのは、このような仕組みだったわけです。

レスポンシブ対応におけるデザインの方針

レスポンシブデザインの仕組みを理解した上で、今回の業務システムデザインにおける方針を定めましょう。

最もシンプルな方針は「レスポンシブ対応を行わない」というものです。この場合はPC向けにCSSを1つ作成すれば事足ります。現代はリーンスタートアップ開発が主流なので、PC操作が主体の業務システムであれば、割り切ってこの方針で初期リリースを目指しても良いと思います。

少し踏み込んで「レスポンシブ対応を行う」とした場合は、上記のようにCSSを複数用意してブレークポイントで切り替えることになります。その場合にFigmaのデザイン作業は図3のような2通りの方針が考えられます。

1つは「PC基準でデザインし、スタイルガイドで補完する」という方法です。業務システムのようにほとんどのユーザーがPCで操作するようなアプリケーションなら、割り切ってこの方針で良いでしょう。

頑張るなら「デバイス毎にFigmaで個別デザインを作成する」ことになります。この場合は、レイアウトやコンポーネントの大きさ、タイポグラフィーなどをデバイス毎に切り替えてデバイスに応じたデザインを示します。Figmaではオートレイアウトのようにコンポーネント自体がレスポンシブ対応となっていたり、バリアブルのモード機能(有料版)を使ってデバイスごとの設定を標準化するなど効率的にデザインできます。

本連載では「レスポンシブデザインを行わない」というシンプルな方針とし、PCを基準としたデザインのみを作成してゆきます。

フッターの作成

さて、画面デザインのサイズは1440W×900Hと定めました。後半は、この横幅いっぱいで画面の下部に配置するフッターを作成していきます。

フレームの作成

ツールパネルからフレームを選択し「コンポーネント」フレーム(キャンバス)の上に1440W×72Hのフレームを作成してください。

フレーム名の変更

レイヤーパネルを見ると、Frame1という名前で作成されていますね。これを右クリックして名前を「フッター」に変更しましょう(図4)。

ボタンインスタンスのコピー

現在、バリアントグループには6つのバリアント(コンポーネント)があり、その外に1つの「ボタン」インスタンスが配置されている状態です。ここでは、この「ボタン」インスタンスをコピーして、フッター内に組み込みます。

コンポーネントをコピーしたものがインスタンスになり、インスタンスをコピーしたものもインスタンスになるのでしたね。バリアントグループ内のコンポーネントをコピーしても同じことなので、今回はインスタンス「ボタン」を[ctrl]キー＋[D]キーでコピーしてインスタンスを作成します。

インスタンスをフレーム内に移動

コピーしたインスタンスをドラッグして、フッター内に移動しましょう。レイヤーパネルを見ると「フッター」フレームの配下に「ボタン」インスタンスが入ったことを確認できます(図5)。

ボタンを見えるようにする

図5では、フレームの上に移動したボタンが見えなくなっています。これはどういう状態なのでしたっけ。はい、第2回で説明したように「レイヤーの上側が前面、下側が背面」というルールなので、「ボタン」が「フッター」の背面に隠れているのですね。この位置関係を入れ替えましょう。レイヤーパネルで図6のように「ボタン」を「フッター」の上側にドラッグで移動すると見えるようになります。

オートレイアウトを追加

「フッター」フレームを右クリックして「オートレイアウトを追加」してください。フレームが「Frame 1」という名前のオートレイアウトに変わり、その中にボタンが含まれています(図6)。レイヤーパネルを見ると「Frame 1」という名前で作成されているので、これを右クリックしてもう一度「フッター」という名前に戻してください。

配置を右に設定

「フッター」を選択して、プロパティパネルでオートレイアウトを設定しましょう。配置がデフォルトで配置が「左上」になっていたら、これを図7のように「右寄せ」に変更して「ボタン」を「フッター」の右端に配置するようにしてください。

パディングを調整

「パディング」とはフレーム両端のスペース(余白)のことでしたね。デフォルトだと大きすぎるので12pxにしてください。これらの設定値を数値バリアブルで標準化することもできますが、この連載では直接数値を設定する方針で行きます(私はこのスタイルです)。

レイアウト方向の設定

現在はボタンが1つなので変わりませんが、後でボタンを増やすことを想定して方向を「横に並べる」にしておいてください。

ボタンのプロパティ設定

最後にボタンを選択して「用途」プロパティの値を「閉じる」にします。これでバリアントが「閉じる」仕様に自動で切り替わります。

コンポーネント化の是非

このフッターは今後さまざまな画面で再利用するため、これをコンポーネントにして、そのインスタンス(分身)を部品として使う構想が良さそうです。しかし、Atomic Designにおけるモジュール(比較的大きなUIパーツ)をコンポーネント化するかは、少し慎重に考える必要があります。

インスタンスに対する制限

その理由は、一度コンポーネント化すると、その分身(インスタンス)を使う画面でUI要素を自由に追加・削除できなくなるからです。例えば、今回作成したフッターをコンポーネント化し、そのインスタンスを各画面に配置すると、そのインスタンス内にある「閉じる」ボタンの横に「登録」ボタンなどを追加することができなってしまいます。

ここでコンポーネント化についておさらいしましょう。UI要素をコンポーネント化するのは、いろいろな画面で共通部品として利用するためでしたね。コンポーネントをコピーしたものがインスタンスであり、各画面ではコンポーネントではなくインスタンスを利用します。このインスタンスに対するデザイン変更の可否を整理すると、次のようになります。

• UI要素の組み合わせが凍結されているため、後からUI要素を追加・削除できない
• UI要素を「張り付けて置換」することもできない
• UI要素のカラーやタイポグラフィー、パディングなど一部のプロパティは変更できる
• バリアントを作成すれば、プロパティで変更することはできる

インスタンスでの制限を検証する

実際にコンポーネントを作成して、インスタンスに対する上記の制限を確かめてみましょう。

①フッターのコピー
[alt]キー＋ドラッグ(Windowsの場合)で「フッター」の下側にコピーを作成し、レイヤーパネルで名前を「フッター実験」としてください。オートレイアウトをコピーしただけなので、この時点ではまだコンポーネント化されていません。

②コンポーネント化
「フッター実験」を右クリックし、「コンポーネントを作成」でコンポーネント化してください。フレームの選択線が青から紫に変わり、レイヤーパネルのアイコンがオートレイアウトからコンポーネントに変わります。

③ボタンを増やす
「フッター実験」のボタンを選択し、[ctrl]キー＋[D]キーでコピーしてください。「閉じる」ボタンの右に「閉じる」ボタンが追加されます。先ほどオートレイアウトの方向の設定を「横に並べる」にしていたので、左右に自動配置されていますね。左側のボタンを選択して、プロパティ「用途」を「登録」としてください。この作業はコンポーネント本体に行っています。このように、コンポーネントには自由にUI要素の追加や変更を行えます。

④インスタンスを作成する
コンポーネント「フッター実験」を[alt]キー＋ドラッグして下側にさらにコピーを作成してください。レイヤーパネルを見ると、コンポーネント「フッター実験」の上にインスタンス「フッター実験」が作成されたことが分かります。このインスタンスを実験素材として、デザインの変更可否を確かめてみます。

⑤UI要素の追加は不可
インスタンス「フッター実験」の「閉じる」ボタンを選択し、[ctrl]キー＋[D]キーを押すとボタンのコピーが作成されますが、レイヤーパネルで見るとインスタンス「フッター実験」の外側(上側)に追加されている状態が確認できます(図10)。レイヤーパネルでこれをドラッグしてインスタンス内に移動しようとしても入ってくれないことを試してみてください。つまり、インスタンスにUI要素を追加することはできないのです。

⑥UI要素の削除は不可だが非表示はできる
インスタンス「フッター実験」の「登録」ボタンを選択し、[delete]キーを押してください。「登録」ボタンは見えなくなりますが、レイヤーパネルで見るとUI要素は残ったまま非表示アイコンが表示されていることが分かります。UI要素の追加と同様に削除はできませんが、非表示ならできるのです。確認を終えたら、非表示アイコンをクリックして表示に戻しておいてください。

⑦貼り付けて置換も不可
便利な「貼り付けて置換」はどうでしょうか。バリアブル「ボタン」にある「削除」ボタンをコピーしてインスタンス「フッター実験」内にある「登録」ボタンを選択し、右クリックして「貼り付けて置換」してみてください。「現在の選択範囲内での貼り付けは実行できません。」というメッセージが表示され、置換できないことが分かります。

⑧インスタンスの外側のボタンは置換可能
ちなみに先ほど[ctrl]キー＋[D]キーでインスタンスの外側に追加された「ボタン」に「貼り付けて置換」を実行すると、図10のようにちゃんと置換できます。

⑨プロパティの変更
インスタンス「フッター実験」を選択し、プロパティパネルで次のような操作を行ってみてください。

• a. サイズの変更(1300Wに変更する) ◯
• b. 方向の変更 ×
• c. オブジェクト間隔やパディングの変更(間隔を20にする) ◯
• d. 配置の変更(左にして右に戻す) ◯
• e. 塗り(背景色)の変更(塗りをF8BBD0にする) ◯
• f. 線の変更(線 ＃000000を追加する) ◯

◯を付けた操作が変更可能です。オートレイアウトの方向(左右か上下か)以外は、変更できることが確認できましたね。インスタンスにはUI要素を追加できませんが、プロパティはだいたい変更できるということを覚えておいてください。

インスタンスに変更を加えたい場合

デザイン作業を進めていると、インスタンスのUI要素を変更したくなることがあります。その場合に、どのような対応方法があるか見ていきましょう。

インスタンスの切り離し

最も手軽な方法は「インスタンスの切り離し」です。上記の「フッター実験」インスタンスを右クリックし、図11のようなメニューから「インスタンスの切り離し」を行うと、インスタンスではなく普通のフレームとして扱えるようになります。これにより、UI要素の追加や削除、構造変更などが自由に行えるようになります。ただし、切り離した時点でオリジナルのコンポーネントとは赤の他人になります。つまり、コンポーネント側に変更を加えても、この切り離したフレームには反映されなくなります。

バリアントを作成する

UI要素の変更がパターン化できる場合は、コンポーネントをバリアント化してプロパティで切り替えることができます。例えば、フッターのデザインパターンがボタン数の違いだけなら、ボタン数の違いでバリアントを作成し、プロパティ「ボタン数」で切り替える方法が便利でしょう。

このとき注意したいのは、バリアントの設定はあくまでもメインコンポーネント側で行うという点です。インスタンスに直接バリアントを追加することはできません。なお、元となるコンポーネントが別ページや別ファイルにある場合もあり、どこにあるか分からなくなることがあります。そのような場合は右クリックして「メインコンポーネントに移動」を選ぶと、一発で本体の位置にジャンプできます。

フッターのバリアントを作成

コンポーネントとバリアントの関係を理解したところで、今回は「フッター」をコンポーネント化し、ボタン数に応じたバリアントを作成することにします。

不要なUI要素の削除

まずは、実験で使った要素を整理します。上記で試したコンポーネント「フッター実験」、インスタンス「フッター実験」、ボタン(赤い削除ボタン)をすべて削除してください。これで実験前のオートフレーム「フッター」だけが残ります。

コンポーネントを作成

レイヤーパネルのフレーム「フッター」を右クリックし、「コンポーネントを作成」してください。フレームの選択線が青から紫になり、レイヤーフレームのアイコンがオートレイアウトからコンポーネントに変わります。

バリアントの追加

「フッター」を右クリックして「バリアントの追加」を行うとバリアブルグループ(紫の点線枠)が作成され、その中にバリアント2が追加されます。

バリアントを3つに増やす

さらに、バリアントグループの下に表示される「＋」ボタンをクリックして、合計で3つのバリアブルを作成してください。レイヤーパネルを見ると「デフォルト」「バリアント2」「バリアント3」という3つのバリアントが作成されています。

プロパティの設定

「デフォルト」バリアントを選び、プロパティパネルの上部のプロパティを「ボタン数」にしてください。値はデフォルトから「1」という文字に変更します。同じ要領でバリアント2のプロパティ値を「3」、バリアント3のプロパティ値を「4」とします。レイヤーパネルを見ると、バリアントの名前が1、3、4に変わっていますね。ちなみに、今回はボタンが２つだけのフッターは存在しないものとしています。

ボタンの配置

バリアント「3」を選び、ボタンを2つ追加して3つにしてください。続いて、バリアント「4」は4個のボタンを配置します。ボタンを増やす場合は、ボタンを選択した状態で[ctrl]キー＋[D]キーを操作すると増えていきます。

ボタンのプロパティ

これで「フッター」のバリアントが3つできましたが、そこに含まれている「ボタン」インスタンスもバリアント化されており、プロパティでボタンの種類を変更できます。それぞれのボタンを選択し、プロパティを設定して図13のようなボタン構成にしてください。このように、バリアントの中にバリアントを含める構成はFigmaでも有効に機能します。

まとめ

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

• 画面デザインは、ターゲットとするデバイスや解像度を決めてそれに適用するように考える
• 現代のWebアプリケーションでは、レスポンシブデザインを考慮することが重要である
• レスポンシブデザインは、CSSのブレークポイントを基準にスタイルを切り替えて実現される
• コンポーネント化するとインスタンスにUI要素の追加、変更ができなくなる。モジュールのコンポーネント化は慎重に
• インスタンスのプロパティは、ある程度の範囲で変更可能である
• 「インスタンスの切り離し」を行えば、UI要素を追加、変更できるようになる
• 「メインコンポーネントに移動」により、インスタンスから本体にジャンプできる
• バリアブルの中にあるバリアブルはプロパティ切り替えが有効に機能する

今回は「フッター」の作成を通して、オートレイアウト・コンポーネント・バリアントの基本を学びました。次回は「ヘッダー」の作成に進み、ボタン以外のUI要素も取り入れたデザイン手法を解説していきます。