FD4B: カードとコンテナシステムを作成する

この章では、オートレイアウトを使って、ポートフォリオのランディングページ用のレスポンシブカード要素を作成します。その後、前のレッスンで作成した要素を再確認し、オートレイアウトを適用してポートフォリオ用のコンテナシステムを構築します。最後に、すべての要素を再利用可能なコンポーネントに変換してまとめます。

カード要素を作成する

カード要素の構築から始めます。カードは、コンテンツを小さな塊に分けて表示し、詳細を確認するためにユーザーが操作したくなるように設計されています。「カード」という名前は、トランプのような物理的なカードに似ていることに由来します。

この用語に馴染みがなくても、ストリーミングサービスを利用したり、オンラインで買い物をしたり、SNSをスクロールしたりする際に、日常的にカード要素と触れ合っているはずです。そのモジュール性と柔軟性のおかげで、カードは現代のプロダクトデザインにおいて、急速に人気のあるデザインパターンとなっています。

このカードは、過去の制作実績を紹介し、読者がプロジェクトの詳細を確認できる別ページへの入口として使用されます。

カードには以下が含まれます:

• 私たちの作品を視覚的にプレビューするための画像
• プロジェクト名のための見出し
• プロジェクトの短いテキスト説明
• 行動を促すボタン

カードのタイトルと説明を作成する

カードのタイトルレイヤーの作成から始めましょう:

1. 新しいテキストレイヤーを作成します。
2. タイトルのプレースホルダーテキストとしてプロジェクトタイトルを入力します。
3. 以下のプロパティを調整してください:
   • フォントファミリーをInterに設定します。
   • フォントの太さをセミボールドに設定します。
   • フォントサイズを25に設定します。
   • 行の高さを38に設定します。
   • 配置を左寄せに設定します。

次に、カードの説明を作成します。

1. 作成したレイヤーを選択し、キーボードショートカットを使用して複製してください:
   • Mac: ⌘ Command D
   • Windows: Ctrl D
2. 新しいテキストレイヤーをタイトルの下に移動します。今のところ、正確な間隔は気にしなくて大丈夫です。
3. 以下のプロパティを調整してください:
   • フォントウェイトを中に
   • フォントサイズを20に
   • 他のプロパティはそのままにして
4. 説明のための短いプレースホルダーテキストを追加します。

ボタンのインスタンスを追加

では、ボタンを追加しましょう。メインコンポーネントを使用するのではなく、そのコンポーネントのインスタンスをキャンバスに追加します。

コンポーネントのインスタンスを作成する方法はいくつかあります:

• キャンバス上のメインコンポーネントを選択し、キーボードショートカットを使用して複製します。
  • Mac: ⌘ Command D
  • Windows: Ctrl D
• 修飾キーを押しながらメインコンポーネントをクリック&ドラッグして複製します。
  • Mac: ⌥ Option
  • Windows: Alt
• 左のサイドバーにあるアセットパネルを開き、コンポーネントをキャンバスにドラッグしてください。

どの方法を選んでも、インスタンスを説明テキストレイヤーの下に配置し、レイヤーが左揃えになっていることを確認してください。レイヤー間の間隔は完璧である必要はありません。オートレイアウトを使用して修正します。

画像プレースホルダーホルダを追加

次に、画像プレースホルダーとして使用する長方形を作成します。

1. 長方形ツールを使ってクリック&ドラッグして他のレイヤーの左に四角形を作成します。
2. 高さを350に変更します。幅については今は気にしなくて大丈夫です。
3. プロパティパネルの塗りセクションで色のスウォッチをクリックしてカラーピッカーを開きます。
4. 上部の画像を選択します。
5. レイヤーの名前をサムネイルに変更してください。

カード要素にオートレイアウトを追加する

カード要素のすべてのピースが揃ったので、オートレイアウトを使用してそれらをまとめる時が来ました。

説明にオートレイアウトを適用します。

1. テキストとボタンのレイヤーを選択します。
2. Shift Aを押して、それらをオートレイアウトフレームに追加します。
3. この新しいフレームを説明にリネームします。
4. 方向が縦 に設定されていること、垂直間隔 が16に設定されていることを確認します。他のオートレイアウトプロパティはそのままにしておいてください。

レイヤーを親フレームに追加します。

すべてのレイヤーを親フレームに追加する必要があります。

1. 説明フレームとサムネイルレイヤーを両方選択します。
2. Shift Aを押して新しいオートレイアウトフレームを作成します。
3. フレームの名前をコンテンツに変更します。

なぜテキストとボタンレイヤーをそれぞれのフレームに追加し、一つの親フレームに含めなかったか疑問に思うかもしれません。オートレイアウトフレームは一方向にしか流れません。しかし私たちのカードコンテンツには、横と縦の両方に流れる必要のある要素があります。オートレイアウトフレームを他のオートレイアウトフレーム内にネストすることで、異なる方向に流れる要素を持つ多次元レイアウトを作成できます。

このネスト構造により、オブジェクト間の異なるパディング値を設定することもできます。すでにテキストとボタンレイヤー間の垂直パディングを設定したので、次はサムネイルと説明フレーム間の水平パディングを設定しましょう:

1. コンテンツフレームを選択
2. 水平ギャップを32に変更します。

既存のレイヤーにオートレイアウトを追加する際、子レイヤーがキャンバス上に配置されている方法によってオートレイアウトのプロパティが決定されます。テキストとボタンレイヤーにオートレイアウトを適用した際、レイヤーが縦に積み重ねられていたため、Figmaはフレームの方向を縦に自動設定しました。サムネイルと説明レイヤーが並べて配置されているため、Figmaはコンテンツフレームの方向を水平に自動設定しました。

子レイヤーのキャンバス上の位置は、オートレイアウトが適用されたときに親フレームの配置が設定される方法を決定します。説明フレームがサムネイルレイヤーの横方向の中央に整列していた場合、整列は左揃えに設定されるかもしれません。コンテンツフレームの整列が 上揃え(左)に設定されていることを確認してください。

親フレームに最大幅を与える

また、コンテンツフレームにも最大幅を与え、カード要素がポートフォリオデザイン内の他の要素と同じ水平方向のスペースを占めるようにします。

1. コンテンツフレームを選択してください。
2. オートレイアウトセクションで、幅のサイズ調整ドロップダウンメニューを開きます。
3. 最大幅を追加を選択します。
4. 最大幅フィールドに1000を入力します。これは、コンテンツ内の内容に関わらず、フレームが幅1,000ピクセルを超えることができないことを意味します。

テキストレイヤーの長さによっては、説明フレームがコンテンツフレームの境界ボックスを超えて広がることがあります。それを修正しましょう。

1. 説明フレームを選択し、幅のサイズ調整をコンテナに合わせるに変更します。
2. 高さのリサイズはそのままにしておいてください、まだ調整の必要はありません。
3. サムネイルレイヤーについても同じことを行います。これにより、説明文は伸縮可能になりつつ、テキストコンテンツの幅が画像の幅と一致するようになります。
4. サムネイルのアスペクト比もロックして、その寸法が比例してスケールできるようにします。

コンテナシステムを作成する

ポートフォリオのランディングページに複数のカードを追加したいと思いますので、カードをコンポーネントに変えます。ただし、それを行う前に、作成したものを完成したポートフォリオデザインと比較してみましょう。

私たちの最終デザインのコンテンツフレームは、オートレイアウトが適用された他のフレーム内にネストされています。続けて見ていくと、ランディングページのヒーロー、テキストブロック、画像ブロックなど、多くの他のポートフォリオ要素にも同じことが言えます。なぜこのように構造化したのかを探ってみましょう。

要素の周りに追加のフレームを追加することにより、ポートフォリオのコンテナシステムを作成できます。コンテナシステムは、各要素を離散的なブロックに変換し、デザインを構築する際にブロックを追加、並べ替え、交換するのが簡単になります。

個々のブロックの内容を更新したり、背景の塗りを追加したり、上下のパディングを調整したりしても、ページ上の他のコンテンツに影響を与える心配はありません。

コンテナシステムを使用する利点をよりよく理解するために例を見てみましょう。いくつかのカード要素を含むレイアウトを想像してください。訪問者の目を引きたいコンテンツを強調するために1つのカードの背後に背景塗りを追加したいとしましょう。

背景塗りを直接コンテンツフレームに適用する場合、塗りはフレームの境界までしか広がりません。要素をコンテナフレームに追加することで、要素のレスポンシブ性やページ上での配置に影響を与えることなく、背景の塗りがページ全体の幅に広がるようにできます。

コンテナシステムについて理解が深まったので、先ほど作成した要素を再確認し、オートレイアウトを適用していきます。各要素をコンポーネントに変えて、最終ポートフォリオデザインを構築するときに備えます。

カード要素を完成させます。

前章で作業していたカード要素を完成させることから始めましょう。

1. フレームツールを選択します。
2. コンテンツフレームの周りに新しいフレームをクリック&ドラッグして作成します。左サイドバーのレイヤーセクションでコンテンツフレームが新しいフレーム内にあることを確認します。
3. 新しいフレームの名前をプロジェクトカードに変更します。
4. ShiftAを押してオートレイアウトを追加します。
5. 以下のオートレイアウトプロパティを変更してください:
   • 配置を中央に設定します。
   • 水平パディングを24に設定します。
   • 垂直パディングを56に設定します。
   • 高さのサイズ変更をコンテンツを内包に設定します。
   • 幅のサイズ変更を固定に設定したままにしておいてください。最終デザインを作成する際にこれをコンテンツに合わせるに設定します。

他の要素を再確認します

さて、ポートフォリオの残りの要素をコンテナに追加する時間です! 過去の作業を振り返るのは少し繰り返しのように感じるかもしれませんが、デザインはイテレーションが肝心です。今ここで費やす時間と労力は、後で最終的なデザインをまとめるときにきっと成果として返ってきます。

次のセクションで各要素を更新すると、同様のパターンに従ったオートレイアウト設定に気づくでしょう。大部分の要素は最大幅が1000で、水平パディングが24、垂直パディングが56に設定されます。

ただし、いくつかのキー要素はいくつかのわずかな調整があり、これには以下が含まれます:

• ランディングページヒーロー
• セクション見出し
• 目を引くテキストブロック
• 引用ブロック

これを念頭に置いて、今デザインした他の要素にこのコンテナシステムを追加する方法を説明します。

ランディングページのヒーローを更新する

まず、ランディングページヒーローを見直します。

1. ランディングページヒーローフレームを選択し、ShiftAを押してオートレイアウトを追加します。
2. 最大幅を1000に設定します。
3. 上下の間隔を24に設定します。
4. 両方のパディングオプションを0 (ゼロ)に設定します。

次に、コンテナフレームを追加します。

1. フレームツールを有効にして、ランディングページのヒーローフレームを囲む新しいフレームをクリックしてドラッグします。
2. この新しいフレームの名前を自己紹介に変更します。
3. フレームを選択してオートレイアウトを適用します。
4. 配置を中央に変更します
5. 水平パディングを24 に、垂直パディングを104に設定します。余分な垂直パディングが自己紹介の重要性を強調し、他の要素からそれを際立たせます。
6. ランディングページヒーローフレーム(迷っている場合は内側のフレームです)を選択し、幅のサイズ調整をコンテナに合わせて拡大に変更します。

セクション見出しを更新

次にセクションの見出しに取り組みます。

1. セクション見出しのテキストレイヤーを選択してShift A を押します。
2. 新しいフレームをセクション見出しに名前変更します。
3. フレーム内のテキストレイヤーを選択します。
4. レイヤーに最大幅1000を指定します。
5. 両方の調整プロパティをコンテナに合わせて拡大に設定します。

セクション見出しとそれに続くコンテンツとの間に強い視覚的関係を構築するために、フレームの上部と下部に異なるパディング値を使用します。

1. セクション見出しフレームを選択します。
2. オートレイアウトセクションで個別パディングを選択し、パディング値を設定します:
   1. 左右のパディングを24にします。
   2. 上部パディングを72に設定します。
   3. 下部のパディングを0 (ゼロ)にします。

段落テキストを更新

順調に進んでいます!

1. 次に段落テキストレイヤーを選択し、Shift Aを押します。
2. 新しいフレームの名前をテキストブロックに変更します。
3. フレーム内のテキストレイヤーを選択し、最大幅を1000に設定します。
4. 幅調整をコンテナに合わせて拡大に設定します。
5. テキストブロックフレームを選択します。
6. 水平パディングを24に、垂直パディングを56に設定します。

引用ブロックを更新する

これまでのところ素晴らしい出来です!次に引用ブロックを更新します。

1. 引用テキストレイヤーを選択し、Shift Aを使用してオートレイアウトを追加します。
2. フレームの名前を引用ブロックに変更します。
3. テキストレイヤーを選択し、最大幅を570に設定します。このテキストレイヤーに特定の幅570を与えたのを覚えているでしょうか。それは引用ブロックをページ上で視覚的な休止として機能させたいからです。
4. 幅のサイズ調整をコンテナに合わせて拡大に設定します。
5. 引用ブロックフレームを選択し、水平パディングを24、垂直パディングを56に変更します。

画像を更新

残り2つの要素まできました!

1. 画像レイヤーを選択し、Shift Aを使用してオートレイアウトを追加します。
2. 新しいフレームの名前を画像ブロックに変更してください。
3. 水平パディングを24、垂直パディングを56に変更します。
4. ネストされた画像レイヤーを選択して、最大幅を1000に設定し、幅のサイズ調整をコンテナに合わせて拡大にします。

目を引くテキストを更新する

もう少しで終わりです!この最終要素に関しては、すでにウェブサイトの全幅に広がるように設計されているため、実際にはコンテナシステムを使用しません。しかし、まだいくつかのステップがあります:

1. 目を引くテキストフレームを選択し、Shift Aでオートレイアウトを追加します。
2. 水平パディングを24に、垂直パディングを128に変更します。自己紹介要素と同様に、この余分に太い垂直パディングがこの目立つ要素をページ上の他のコンテンツから際立たせるのに役立ちます。

複数のコンポーネントを作成

私たちのポートフォリオ要素は見た目だけでなく、レスポンシブにもなっています。ここからが楽しい部分です。それらをコンポーネントに変えることです!

個々のコンポーネントを作成する代わりに、一括でコンポーネントを作成できます。一度に最大100個のコンポーネントを作成でき、今がその使い時です。

1. すべての要素を選択します。
2. 右のサイドバーにあるコンポーネント作成の横にある矢印をクリックします。
3. 複数のコンポーネントを作成を選びます。

コンポーネントをコンポーネントページに移動する

ファイルを整理するために、メインのコンポーネントをコンポーネントページに移動します。これを行うには:

1. 先ほど作成したすべてのコンポーネントと、以前作成したボタンコンポーネントを含めてすべて選択し、クリック&ドラッグします。
2. 選択を右クリックし、ページに移動にカーソルを合わせ、コンポーネントを選択します。
3. 1.  

要素を移動したので、以前追加したケーススタディデスクトップフレームプリセットは空のはずです。この要素は再利用しないので、削除するか、今後の自分用の実験のために保存しておくことができます。

レッスンのまとめ

素晴らしい出来です!オートレイアウトを使用したカード要素のデザインに加え、他のポートフォリオ要素を見直してコンテナシステムに追加しました。レッスンを終了し、ポートフォリオ要素を再利用可能なコンポーネントに変更し、それらを専用のコンポーネントページに移動しました。

次に、学んだオートレイアウトとコンポーネントを用いて、ウェブサイト用のナビゲーションバーとフッター要素を構築します。