FD4B: ブール演算でシェイプを組み合わせる

レッスン概要

このレッスンでは、ベクターレイヤーを編集するいくつかの方法を学び、自分の専門領域を示すスキルリストを作成します。個性を出すために、まずカスタムシェイプを作成し、それをテキストレイヤーと組み合わせてオートレイアウトフレーム内に配置します。最後に、スキルリストをコンテナーフレームに追加し、メインコンポーネントに変換します。

Figma Designは、アイコン、イラスト、ユーザーインターフェイス要素など、スケーラブルなアセットを作成できるベクターベースのデザインツールです。では、ベクターとは正確には何でしょうか?ベクターは、点、線、曲線で構成され、それぞれが数式によって定義されたデジタル画像です。デジタル写真のようなラスター画像とは異なり、ベクターは品質を損なうことなく無限にサイズを変更できるため、さまざまなサイズに対応する必要があるデザインに最適です。

スキルリスト用のカスタムシェイプを作成するためにベクターレイヤーを使用します。このようなユニークな工夫は、ポートフォリオを訪れる人に強い印象を残す素晴らしい方法です。ここでは5つのサンプルシェイプを紹介しますが、自由に試してみてください!

キャンバスに5つのフレームを追加

最初に、シェイプを含むいくつかのフレームを作成します:

1. 48 X 48フレームを作成します。
2. フレームの名前をシェイプ1に変更します。
3. フレームを4回複製します。名前に番号が付いたオブジェクトを複製しているため、Figmaは新しいフレームを自動的にシェイプ2、シェイプ3などと命名します。

 

イモムシシェイプを作成する

最初に作成するシェイプは、丸みのある角を持つ3つの長方形で構成されています。

1. 16 X 46の長方形を追加し、シェイプ1フレームの中央に配置します。
2. 角の半径を24に設定して、ピル型の見た目を作ります。この長方形は小さいため、24に設定するだけで角が完全に丸くなります。もし長方形が大きければ、同じ見た目にするにはさらに大きなコーナー半径が必要です。
3. 長方形を複製し、新しいレイヤーのサイズを15 X 29に変更します。
4. 元の長方形の左側にドラッグし、両方のレイヤーの下端を揃えます。
5. 小さい長方形を選択したまま、修飾キーを押しながらカーソルをドラッグして複製します。
6. 新しいレイヤーを元の長方形の右側にドラッグし、両方のレイヤーの上端を揃えます。3つのシェイプすべての端が接していることを確認します。

このシェイプは一見1つのオブジェクトのように見えますが、実際には3つの別々のレイヤーで構成されており、それぞれが独自のプロパティを持っています。つまり、塗りの更新などの変更を適用するには、各レイヤーを個別に選択する必要があります。また、ストロークを追加すると、シェイプ全体の外周ではなく、各レイヤーの輪郭が個別に描かれます。

シェイプを1つのオブジェクトとして扱うために、統合ブール演算を使ってレイヤーを統合します。

1. Shiftを押しながら3つのレイヤーすべてを選択します。
2. 次に、ブール演算メニューから 統合セレクションを選択します。

レイヤーセクションを見てください。3つの長方形レイヤーは、新しいブールグループの統合の下にネストされ、これでシェイプ全体の塗りを変更できるようになりました。

メインコンポーネントに変換した後もシェイプを整理しやすくするため、それぞれにわかりやすい名前を付けます。このフレームの名前をイモムシに変更します。

ブール演算について

ブール演算を使うと、複数のレイヤーを1つのオブジェクトにまとめ、ブールグループと呼ばれる共通のプロパティを持たせることができます。ブール演算を使用してアイコン、ロゴ、イラストなどを作成できます。

4種類のブール演算があり、対になる2つのグループに整理すると理解しやすくなります: 統合と減算、そして交差と除外です。

統合

統合は、選択したレイヤーを組み合わせます。レイヤーが重なっている場合、新しいオブジェクトの外部パスはすべてのレイヤーの外縁をマージすることによって作成されます。つまり、追加したストロークやエフェクトはオブジェクトの外部パスにのみ適用されます。

減算

統合の反対は減算で、レイヤーのエリアをその下のレイヤーから取り除きます。クッキー型を使うのと同じように、レイヤー階層の上にあるレイヤーは、現在選択している一番下のレイヤーと重なる部分を切り抜きます。生成されたオブジェクトに内側と外側の両方の端がある場合、適用したストロークやエフェクトは両方の端に表示されます。

交差

次は交差で、元のレイヤーが重なる部分から新しいオブジェクトを作成します。重なっていない部分は除去され、すべてのレイヤーが交差する部分だけが残ります。重ならないレイヤーに交差を適用すると、それらのレイヤーはキャンバス上で表示されなくなりますが、重なる場所に移動すると再表示されます。

除外

交差の反対は除外で、重なる部分を削除し、重ならない部分だけを保持します。減算と同様に追加したストロークや効果は新しいオブジェクトの内側と外側の縁に表示されます。

ブール演算を適用する

ブール演算は、シェイプレイヤー、ベクターパス、テキストレイヤーに適用できます。セクションやフレームのようなコンテナ要素にはブール演算を適用できません。

ブール演算を適用するには、少なくとも2つのサポートされているレイヤータイプを選択し、ブール演算メニューから操作を選びます。

ブール演算は非破壊的な操作であり、元のレイヤーを選択、移動、サイズ変更することができます。この柔軟性により、レイヤーをグループ解除したり最初からやり直したりすることなく、デザインのイテレーションを続けることが可能です。ブールグループ内のレイヤーは単一のプロパティセットを共有するため、個々のレイヤーに対するプロパティの変更は、グループから外さない限り影響を与えません。ブールグループを分解してレイヤーを個別のオブジェクトに戻すには、グループを右クリックしてグループ解除を選択します。

ダイヤモンドシェイプを作成

ブール演算について理解が深まったので、これを使って2番目と3番目のシェイプを作成していきましょう。

ダイヤモンドシェイプを構築するには:

1. シェイプ2のフレーム内に、38 X 38の長方形を作成します。
2. 16 X 16の楕円をその上に置きます。
3. 両方の形状の中心を一致させます。
4. 両方の形状を選択し、選択範囲の型抜きブール演算を選択します。
5. 減算レイヤーを選択し、キャンバス上のハンドルまたは右側のサイドバーの回転フィールドを使って45度回転させます。ハンドルを使用している場合、Shiftを押すと、15度間隔でレイヤーを回転させることができます。
6. 角の半径を13に変更して角を丸めます。
7. フレームの名前をダイヤモンドに変更します。

減算ブール演算は、長方形から楕円の部分を切り抜きます。つまり、長方形の背面に配置されたレイヤーは、作成された穴を通して見えるようになります。ブール演算は非破壊的なので、楕円レイヤーを選択して、切り抜き部分のサイズや位置を調整することも可能です。

花形を作成する

次のシェイプでは、複製したレイヤーを統合で結合し、中央部分を減算で切り抜くことで、より高度な形を作成します。

1. シェイプ3のフレーム内の中央に、12 X 46の長方形を追加し、角の半径を13に設定します。
2. 長方形を複製し、新しいレイヤーを45度回転させてください。レイヤーを複製して回転パターンを作れる方法を覚えていますか?ここでも同じ方法を使って作ってみましょう!
3. 複製されたレイヤーを選択したまま、ショートカットを使用してさらに2回複製します。Figmaが自動的に同じ回転を適用することに気づきましたか?
4. 4つのレイヤーすべてを選択し、統合ブール演算を使って花の形にマージします。
5. 花の中心に12 X 12の楕円を追加します。
6. それを選択し、統合ブールグループも選択します。
7. ダイヤモンドシェイプと同じように、減算ブール演算を使って、花の中央に穴を開けます。
8. フレームの名前を花に変更します。

ブール演算をさらに探求する機会

次の章では、ブール演算はひとまず置いておき、カスタムシェイプを作成するために使える他のツールを見ていきます。私たちはまだ表面的な部分しか触れていませんが、ブール演算がデザインワークフローでどれほど柔軟で強力か、少しずつ見えてきたのではないでしょうか。もっと練習したい場合は、初心者向けFigma Designコミュニティファイルに追加のシェイプやアイコンを用意しています。ここで学んだことを使って、ぜひ再現してみてください。実験すればするほど、ブール演算の操作は直感的に使えるようになります。