レッスン概要
このレッスンでは、セクションを使用してメインコンポーネントを整理します。次に、インスタンスを使用してポートフォリオウェブサイトのページレイアウトを構築します。
コンポーネントページをセクションで整理する
ファイルのコンポーネントページから始めます。コース全体を通じて、主要なコンポーネントをこのページに移動してきましたが、それ以上の整理はしていません。セクションを使って主要なコンポーネントを整理しましょう。
KaitieとLaurenからセクションについて少し学びました。フレームのように、セクションは他のレイヤーを整理するために使えるコンテナレイヤーの一種です。関連するデザイン要素をグループ化するのに最適で、コラボレーターが必要なものを見つけやすくなります。
セクションを作成するには:
- ツールバーからセクションツールを選択するか、Shift Sを押します。
- カーソルをクリックしてドラッグし、キャンバスにセクションを追加します。
セクションには、それにラベルをつけるためのタイトルフィールドがあります。フィールドをダブルクリックして名前を変更します。最初のセクションをボタンと名付けます。ここに追加する要素が何か、きっとわかりますね。ボタンのメインコンポーネントを選択してセクションにドラッグします。
ヒント: オブジェクトの上でクリック&ドラッグしてセクションを作成し、その中に配置することもできます。
複数のレイヤーを同時にセクションに追加することもできます。2つのヒーロー要素、自己紹介と目を引くテキストブロックは似た役割を持つため、同じセクションに追加しましょう。
- 自己紹介と目を引くテキストブロックのメインコンポーネントを選択します。
- 選択したセクションを右クリックして、新しいセクションで囲むを選択します。このセクションの名前をヒーローに変更します。
ヒント: コンポーネントをセクションに配置すると、アセットタブでも整理されます。
ナビゲーションバー、フッター、カスタムシェイプの個別セクション、そして残りのコンポーネントのための大きなセクションを追加します。別の組織構造を使うのも自由です。先に進む前に、すべてのコンポーネントがセクション内にあることを確認してください。
セクションの背景色を変更すると、アセットタブ内のコンポーネントのサムネイル背景も更新されるため、この操作も検討するとよいでしょう。これを活用して、色のコントラストを改善し、コンポーネントをより見やすく、見つけやすくしましょう。
コンポーネントから背景の塗りを削除
一部のコンポーネントを作成する際に、類似の理由で白い背景を追加しました。ナビゲーションコンポーネントを除き、すべてのコンポーネントから白い背景の塗りを削除しましょう。
ナビゲーションバーコンポーネントの背景塗りを変更する
プロトタイピングの段階では、コンテンツがナビゲーションバーの背後でスクロールするようにしたいので、背景の塗りを残しておくとコンテンツが透けて見えなくなってしまいます。ナビゲーションコンポーネントの塗りを、FFFDF8のような暖かくニュートラルな色に変更します。これにより、後でデザイン全体に単一の背景色を適用するのも簡単になります。
ポートフォリオページを組み立てる
主要なコンポーネントが整理されたので、ポートフォリオのホームページとケーススタディページのデザインを組み立てる準備ができました。
デザインはデザインページで作成します。このページのキャンバスは今のところ真っ白ですが、すぐにそうではなくなります!
ポートフォリオサイト用の2ページを作成する予定で、それぞれに共通する3つの部分があります。ナビゲーションバー、スキルリスト、およびフッターです。
これらのコンポーネントのインスタンスをアセットタブからドラッグアウトしてキャンバス上で配置しましょう。次に、これらを選択して、Shift Aを押してオートレイアウトフレームに追加します。フレームの背景色をナビゲーションバーと同じFFFDF8に設定します。
新しいフレームの幅のサイズ調整を固定幅の1440に設定します。高さのサイズ調整はコンテンツを内包にに設定して、ページに要素を追加しても自動で高さが調整されるようにしましょう。間隔とパディングの値は両方とも0 (ゼロ)である必要があります。
ポートフォリオには2ページあるため、このフレームを複製しましょう。1つのフレームをホーム、もう1つをケーススタディと名付けます。
コンポーネントがまだフレームの幅全体に広がっていなくても心配しないでください。後で更新します。ただし、今覚えていればすぐに更新しても構いません!
ホームページを構築する
さあ、ページレイアウトの作成という楽しい部分に入ります!ホームページから始めます。
自己紹介メインコンポーネントのインスタンスをホームページフレームにドラッグし、ナビゲーションバーとスキルリストの間に配置します。新しいコンテンツに合わせて自動で調整される様子を確認できます。
これまで作成してきたビルディングブロックのおかげで、ドラッグ&ドロップがスムーズに行えるようになっています。チームで共同作業をしている場合を想像してみてください。チームメンバーはこれらのコンポーネントに費やされた作業を活用できるため、自分たちのページを作成する際もはるかにスピーディーに進められます。
ホームページに残りのコンテンツを追加しましょう。セクション見出しやいくつかのプロジェクトカードも含めます。新しいインスタンスをアセットタブからドラッグするか、アクションメニューで検索するか、既存のインスタンスを複製することで、追加のカードを追加できます。どの方法を使っても、フレームは新しいコンテンツに合わせて自動で高さが調整されます。これは 高さのサイズ調整がコンテンツを内包に設定されているためです。
ページの異なるフローを試したい場合は、フレーム内でクリックしてドラッグするか、一つ選択して矢印キーを使って要素を並べ替えることができます。
ホームページが形になってきましたが、次に進む前にもう一つステップが必要です。
ホームページフレームを選択し、キーボードのEnterを押してすべての子レイヤーを選択します。その後、幅のサイズ調整をコンテナに合わせて拡大に変更します。
これにより、画面サイズが異なっても、すべての要素が常に親フレームの幅いっぱいに表示されるようになります。
なぜ以前の動画でこれを行わなかったのか気になる場合は、コンテナに合わせて拡大オプションは、他のフレームの中にネストされている場合にのみ利用可能だからです。名前が示す通り、コンテナに合わせて拡大は、レイヤーの幅または高さを親の利用可能なスペースいっぱいに広げることができます。
ホームページのレイアウトに満足したら、ケーススタディのページに進みましょう。
ケーススタディページを構築する
ケーススタディページを構築するプロセスは、ホームページと非常に似ていますが、使用する正確なレイアウトは伝えたいストーリーによって異なります。
まず、目を引くテキストコンポーネントのインスタンスを、ナビゲーションバーの下、ページの上部に追加します。
続けて、段落テキストブロック、セクション見出し、画像、引用ブロックなどを組み合わせて配置します。自分のストーリーに合ったコンポーネントを選んでください。どんなストーリーを伝えたいか迷っている場合は、一度立ち止まって考えてみても構いません。また、FigmaのブログShortcutに掲載されているケーススタディを参考にするのもおすすめです。
ヒント: プロダクトデザインが初めての方は、Shortcutブログの「機会獲得: 初のプロダクトデザイン職に就くためのガイド」をチェックしてみてください。
ページのレイアウトは固定されておらず、必要に応じて要素を簡単に削除したり新しいものを追加したりできます。
ページの形を整えることに満足したら、ケーススタディフレームを選択し、Enterキーを押してすべての子レイヤーを選択し、幅のサイズ調整をコンテナに合わせて拡大に変更します。
あ、待ってください。画像ブロックのコンポーネントがまだ中央揃えではなく左揃えになっています。何が起きているのか確認してみましょう。
インスタンスを右クリックして、メインコンポーネントに移動を選択します。配置が上揃え(左)に設定されているようです。それを中央揃え に更新しましょう。その後、インスタンスに戻る をクリックして、デザインページにすぐに戻ります。
これで画像ブロックのインスタンスも中央揃えに設定されるはずです。インスタンスが更新されない場合は、インスタンスメニューからすべての変更をリセットを選択してください。
ずっと見やすくなりましたね!このワークフローは非常に役立ちます。小さな調整を加えたい場合や、思った通りに動作していない微細な部分に直面したときに特に便利です。最初から完璧な人はいません。これはすべてプロセスの一部です。
インスタンスをカスタマイズする
ポートフォリオのすべての部分が整い、ページレイアウトも素晴らしく仕上がりました!これで、プレースホルダーテキストや画像を自分のコンテンツに置き換える作業を始められます。魅力的なポートフォリオを作るには時間がかかるので、ここで一度立ち止まり、どんなストーリーを伝えたいか考えても大丈夫です。
インスタンス内のテキストを編集するには、ダブルクリックして入力を始めます。コンテンツの長さは自由に調整してください。残りのレイアウトはオートレイアウトが対応してくれます。
画像を追加したいですか?画像プレースホルダーをダブルクリックして、実際のコンテンツに置き換えます。Figma DesignやFigJam、Figma SlidesなどFigmaの他の製品をプロジェクトで使用した場合は、作業内容をPNGとしてコピーし、画像プレースホルダーに貼り付けてスナップショットを追加できます。PNGとしてコピーする方法を詳しく学びましょう。
ポートフォリオは完成するものではなく、インスピレーションが湧いたときにいつでも見直せる生きたプロジェクトであることを覚えておきましょう。個人プロジェクトや仕事でのプロジェクトを進める中で、さらに多くのケーススタディを書いてサイトにページを増やすことも考えてみてください。あるいは、思い切ってまったく新しいページを作って別の内容を載せるのも良いでしょう。繰り返し改善し、更新し、微調整を続けましょう。ポートフォリオが成長するほど、デザインスキルも向上します。