FD4B: ナビゲーションバーとフッターを作成する

レッスン概要

このレッスンでは、これまで学んだすべてを応用し、ポートフォリオサイトのナビゲーションバーとフッター要素を構築します。コースを進める中で、オブジェクトを複製することで、デザインプロセス全体の時間と手間を節約できる方法を学びます。

ナビゲーションバーを作成する

まず、ナビゲーションバーを作成します。ポートフォリオを訪れる人々の主要なナビゲーションメニューとして、ナビゲーションバーにはワードマークを置くスペース、サイト内のページにリンクするメニュー項目、そして問い合わせページやメールフォームを開くボタンを含めます。

ナビゲーションバーのフレームを追加

ナビゲーションバー要素を保持するフレームを作成することから始めます。

1. フレーム ツールを選択し、1440 X 80のフレームを作成します。
2. フレームの名前をナビゲーションに変更します。

ワードマークを作成する

フレームができたので、ワードマークを作成できます。ワードマークとは、個人やブランドを識別するためのスタイライズされたテキストベースのロゴのことです。ウェブサイトのナビゲーション要素にワードマークが目立つ形で配置されるのは一般的で、ブランド認知を高めるとともに、訪問者がホームページに戻るための便利な手段としても機能します。

テキストレイヤーを使用してワードマークを作成します:

1. ナビゲーションフレームの中に新しいテキストレイヤーを作成します。
2. 名前を入力し、テキストレイヤーをフレームの左側にクリック&ドラッグで移動します。赤いガイドラインを使って、テキストレイヤーをフレームの縦方向の中央に配置します。間隔については気にする必要はありません。後ほどオートレイアウトを使って調整します。
3. ワードマークにはデフォルトのInterフォントを使用しますが、他のフォントを試して自分のブランドに合ったものを見つける絶好の機会です。
4. ナビゲーションバーの他のコンテンツの中でワードマークを目立たせるため、タイポグラフィのプロパティを調整して視覚的な重みと階層を強化します。テキストレイヤーを選択し、フォントウェイトをBlackのように重く、フォントサイズを20に変更します。

メニュー項目を追加する

素晴らしいです! では次に、ナビゲーションバーにメニュー項目のリンクを追加しましょう。

1. ナビゲーションフレームにもう1つテキストレイヤーを追加し、仮のプレースホルダーとしてリンクと入力します。ラベルは後ほど更新します。
2. ワードマークよりも目立たせたくないので、リンクのスタイルを軽めに設定します。フォントの太さをMediumに設定し、フォントサイズを16に設定します。
3. テキストをナビゲーションフレーム内で垂直に整列させてください。
4. フレームの右側に配置します。正確な位置は重要ではありませんが、ナビゲーションバーの他のコンテンツのために少し余白を残しておきましょう。

このコースでは、追加のページとして1つのリンクだけにしてシンプルにしていますが、ポートフォリオが成長するにつれて、複数のページが必要になることもあります。では、先を見越して計画してみましょう。将来のナビゲーションバーに備えて、いくつか追加のメニュー項目を加えておきましょう。心配はいりません。このレッスンの後半で、必要になるまでこれらの追加レイヤーを非表示にする方法を説明します!

新しいテキストレイヤーを作るためにテキストツールを使う代わりに、先ほど追加したテキストレイヤーを複製することができます。

オブジェクトの複製について

オブジェクトを複製すると、コピー&ペーストの手順を1つにまとめられるため、レイヤー、フレーム、セクション、インスタンスなどのオブジェクトを簡単かつ迅速に複製できます。

オブジェクトを複製する主な方法は2つあります: 修飾キーを使う方法と、キーボードショートカットを使う方法です。

修飾キーを使ってオブジェクトを複製するには、オブジェクトを選択し、キーを押しながらカーソルをドラッグします:

• Mac: ⌥ Option
• Windows: Alt

複製したオブジェクトは、キャンバス上の好きな場所に配置できます。

キーボードショートカットでオブジェクトを複製するには、オブジェクトを選択して次のキーを押します:

• Mac: ⌘ Command D
• Windows: Control D

ショートカット方法を使ってシェイプ、テキストレイヤー、コンポーネント、子フレームを複製すると、複製されたオブジェクトは元のオブジェクトの真上に配置されます。その後、クリックしてドラッグすることで新しい位置に移動できます。トップレベルのフレームやセクションを複製した場合、複製されたオブジェクトはキャンバス上の空いているスペースに、元のオブジェクトの右側に表示されます。

複製したオブジェクトにすぐにキーボードショートカットを使うと、Figmaは最初のオブジェクトと2番目のオブジェクトの間に使った距離をそのまま維持します。同様に、オブジェクトを複製して複製したオブジェクトを回転させた後、ショートカットで複製を続けると、新しいオブジェクトは回転角度を維持します。これは、繰り返しパターンやカスタムシェイプを作成するのに便利な方法です。

メニューアイテムの追加

両方の複製方法を使って、さらにメニュー項目を作成します:

1. テキストレイヤーを選択し、修飾キーを押しながらドラッグして、複製したレイヤーを元の右側に配置します。
2. 新しいレイヤーを選択し、キーボードショートカットを使って再度複製します。Figmaはパターンを認識し、3番目のレイヤーを2番目の右側に配置します。
3. Shiftを押しながら3つのテキストレイヤーをすべて選択します。
4. 垂直方向の中央揃えをクリックして、すべてが整列されていることを確認します。
5. ShiftAを押して、それらをオートレイアウトが適用されたフレームに追加します。
6. 左右の間隔を24に設定します。
7. フレームの名前をリンクに変更します。

オートレイアウトフレームで使用されていないレイヤーを非表示にする

ここで少し立ち止まり、オートレイアウトの柔軟性について話しましょう。先ほどデザイン要素の将来対応について触れたのを覚えていますか?オートレイアウトを取り入れることで、デザインがさまざまな構成に適応できるようにしています。

もしさらにメニュー項目を追加したい場合は、新しいテキストレイヤーを作成してリンクフレームにドラッグすることができます。または、既存のテキストレイヤーを選択し、先ほど学んだショートカットで複製することも可能です。どちらの場合でも、オートレイアウトフレームはこれらの変更に合わせて自動的にサイズを調整します。

もしメニュー項目を削除したい場合は、追加のレイヤーを削除することもできます。この方法でも可能ですが、変更は恒久的になります。後でナビゲーションバーのインスタンスを追加した場合、メインコンポーネントを変更しない限り、追加のメニュー項目を加えることができなくなり、ファイル内のすべてのインスタンスに影響が出ます。

代わりに、すぐに使わないレイヤーを非表示にすることができます。レイヤーを非表示にすると、そのレイヤーはフレームから削除されずに表示・非表示を切り替えられます。オートレイアウトは非表示レイヤーも考慮し、あたかもレイヤーが削除されたかのようにフレームを調整します。

レイヤーを非表示にするには:

• レイヤーパネルで表示アイコンをトグルします。複数のレイヤーをまとめて切り替えたい場合は、クリックして下方向にドラッグすることもできます。
• または、キーボードショートカットを使うことも可能です。
  • Mac： Command Shift H
  • Windows: Control Shift H

後で必要に応じて個々のインスタンスでレイヤーを再表示させることができ、オートレイアウトは新しく表示されたレイヤーに合わせて調整されます。レイヤーの表示・非表示の切り替えについて詳しく学ぶ。

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

ナビゲーションバーが少しずつ形になってきました!次に、ボタンを追加しましょう。左サイドバーのアセットタブに移動し、ローカルアセットを選択します。以前に作成したボタンコンポーネントを覚えていますか?それをナビゲーションバーにインスタンスとして追加しましょう:

1. ボタンのインスタンスをクリックして、ナビゲーションフレームにドラッグします。
2. リンクフレームのすぐ右側に配置し、ガイドを使用して中央に配置します。
3. ボタンと リンクフレームの両方を選択し、Shift Aを押します。これは、ボタンをリンクフレームに追加するのではなく、メニュー項目とボタンの間のスペースを独立して制御できるように、新しいフレームを作成しています。
4. 左右の間隔を40に調整します。
5. 両方のサイズ変更プロパティをコンテンツを内包に設定します。
6. フレームの名前を追加コンテンツに変更します。

最後の仕上げを加える

ケーススタディページの要素を作成したときのことを覚えていますか?最大幅を1000に設定したので、ページ上で全てが揃ったままになります。ナビゲーションバーのコンテンツ(ワードマーク、メニュー項目、ボタン)を他の要素と揃えつつ、ナビゲーションフレームはウェブサイトの幅いっぱいに広がるようにしたいです。そのためには、ワードマークのレイヤーをナビゲーションバーの他のコンテンツと接続する必要があります。

1. ワードマークレイヤーと追加コンテンツレイヤーを選択します。
2. Shift Aを使用してオートレイアウトを追加します。
3. 新しいフレームの名前をコンテンツに変更します。
4. フレームの最大幅を1000に設定し、高さのサイズ変更プロパティをコンテンツを内包に設定したままにします。
5. 左右の間隔を自動に設定します。

オートレイアウトをナビゲーションフレームに追加する

次に、オートレイアウトをナビゲーションフレームに適用します。

1. ナビゲーションフレームを選択し、Shift Aを押します。
2. オートレイアウトセクションで、高さのサイズ変更を固定に設定し、値が80に設定されていることを確認します。
3. 水平パディングを24に設定し、垂直パディングを0(ゼロ)に設定して、フレームの配置を中央にします。

現在、コンテンツフレームは親フレーム内にあり、オートレイアウトが適用されています。幅のサイズ変更を更新できます:

1. ナビゲーションフレーム内のコンテンツフレームを選択します。
2. 幅のサイズ変更がコンテナに合わせて拡大設定になっていることを確認します。
3. 最後に、コンテンツフレームの配置を中央に設定します。

フッター要素を作成する

ナビゲーションバーはよく仕上がりました!次はフッター要素を構築します。最終デザインを見ると、フッターがナビゲーションバーと非常によく似ていることに気づくでしょう。時間を節約するために、ナビゲーションフレームをフッターの基礎として使いましょう。

1. ナビゲーションフレームを複製します。
2. 複製されたフレームの名前をフッターに変更します。
3. ナビゲーションバーとは異なり、フッターにはボタンを必要としません。レイヤーセクションでボタンレイヤーを見つけて削除します。
4. リンクフレームはそのまま残し、追加コンテンツフレームはもう不要なので削除します。追加コンテンツフレームを選択し、右クリックしてグループ解除を選択します。フレームのグループ解除はそれをキャンバスから削除し、その子レイヤーをレイヤー階層で上位にプッシュします。
5. このスペースをお問い合わせ情報のために使用するので、リンクフレームの名前をお問い合わせに変更します。

ナビゲーションバーをカスタマイズする

ナビゲーションバーとフッターのコンテンツをすべてのページで同じにしたいので、コンポーネント化する前にテキストを更新しましょう。こうすることで、追加したインスタンスごとにテキストを更新する必要がなくなります。

1. ナビゲーションフレームで、メニュー項目ラベルの1つをケーススタディに更新します。
2. 現在は1つのリンクしか必要ないため、他の2つのテキストレイヤーは一時的に非表示にします。
3. ボタンのラベルを「一緒に仕事をしましょう」のように、強い行動喚起になるように更新しましょう。

フッターをカスタマイズする

1. テキストレイヤーを更新して、自分のメールアドレス、電話番号、その他の連絡先情報を含めます。
2. 3つ目のテキストレイヤーは、ひとまず非表示にしましょう。

各要素をコンポーネントに変換する

ナビゲーションバーとフッターのカスタマイズが完了したら、両方をコンポーネントに変換します。その後、コンポーネントページに移動させます。

レッスンのまとめ

素晴らしい出来です!ナビゲーションバーとフッター要素をテキスト、フレーム、インスタンス、オートレイアウトを使用して構築しました。そして、それらをコンポーネントに変換し、ウェブサイトのすべてのページで再利用できるようにしました。

次のレッスンでは、ブール演算、ベクター編集モード、円弧ツールをオートレイアウトと併用し、潜在的な雇用主にスキルを紹介する要素を作成します。