FD4B: ページのスクロール動作を設定し、アニメーションをカスタマイズ

スクロールと位置の動作

私たちがデザインしたページは非常に長く、通常のデバイススクリーンの高さを遥かに超えています。Figma Designは、ページを縦にスクロールすることを前提としています。しかし、スクロールすると、ページ上のすべてのコンテンツが一緒にスクロールします。Figmaはフレーム全体を一つの大きなコンテンツの塊として扱います。

ナビゲーションバーは、ページを一番下までスクロールしても常に表示されるようにしたいです。これには、スクロール位置を常時表示に設定することで実現できます。

ナビゲーションバーのスクロール位置を変更する

1. ホームフレーム内でナビゲーションバーのインスタンスを選択します。
2. プロトタイプタブで、位置メニューから常時表示を選択します。

ポジションが常時表示に設定されたオブジェクトは、スクロールコンテナの上端に固定されます。この場合、スクロールコンテナはページ全体です。ケーススタディフレームのナビゲーションバーも選択し、その位置を常時表示に変更してください。

キャンバスの積み重ね順を調整

ページのコンテンツがナビゲーションバーの上をスクロールしてしまう場合は、キャンバススタッキングプロパティを調整する必要があります。キャンバススタッキングは、オートレイアウトフレームの最上層または最下層のレイヤーが視覚的に上に表示されるかどうかを決定します。

これは特に、アイテム間に負のギャップを使う場合に便利です。例えば、写真が重なったフェイスパイルのようなコンポーネントで見られることがあり、あるスタッキング順を別の順序より好む場合があります。

デフォルトでは、オートレイアウトフレームのレイヤーは最後が上に配置されます。オートレイアウト設定を開き、キャンバススタッキングを最初が上に設定します。これにより、レイヤーセクション内の最上層レイヤーであるナビゲーションフレームが、他のすべてのレイヤーの上に表示されるようになります。

変更をプレビュー

スクロール動作の変更は簡単にできるので、すぐにプレビューして意図した動作か確認できます。これで、スクロールしてもナビゲーションバーは上部に固定されたままになります。素晴らしい!

セカンダリボタンを作成する

私たちのケーススタディページはかなり長いです。読者がページの下までスクロールした後、簡単にトップに戻れると便利ですよね。ここでは、そのためのフローティングボタンをデザインしてみましょう。

以前のレッスンで作成したボタンコンポーネントのインスタンスを作ることもできますが、そのままだと新しいボタンはこのページの他のボタンと同じ視覚的な重さになってしまいます。そこで、ボタンのデザインを少し調整して、セカンダリボタンのような印象にしましょう。

ボタンのメインコンポーネントを出発点として使うので、最初から作り直す必要はありません。

1. コンポーネントページでボタンメインコンポーネントを見つけます。
2. ボタンコンポーネントを複製してインスタンスを作成します。
3. インスタンスを右クリックしてインスタンスの切り離しを選択します。これを行うと、ボタンはメインコンポーネントとの接続が永久に切断されます。
4. Shift X を押して、ボタンの塗りとストロークを入れ替え、視覚的な重さを軽くします。
5. テキストの塗りの色を黒に変更して、アウトラインと一致させます。
6. 新しいボタンのフレームを選択し、ページの背景色に合わせて新しい塗りの色を設定します: #FFFDF8。
7. ボタンには「トップに戻る」といった短くわかりやすいラベルを付けます。よりミニマルなアプローチにする場合は、キャレットを2つ ^^ とスペース ⎵ を入力すると、Figmaが上向き矢印 ↑ に変換してくれます。
8. 新しいボタンをコンポーネントに変換し、他のプライマリボタンと区別できるようにボタン/セカンダリと名前を付けます。
9. ここにいる間に、元のボタンの名前をボタン/プライマリーに変更しましょう。

セカンダリボタンのインスタンスを追加する

ポートフォリオデザインに戻り、この新しいボタンをケーススタディページにインスタンスとして追加しましょう。Figmaは、新しいボタンを自動的にオートレイアウトのフローに追加します。

デフォルトでは、オートレイアウトフレーム内のオブジェクトは自由に配置できませんが、オートレイアウトを無視してボタンをオートレイアウトフローから除外できます。これにより、オートレイアウトの規則を無視し、オブジェクトをフレーム内に正確に配置できるようになります。オートレイアウトの無視についてさらに詳しく学ぶ。

1. 追加したセカンダリボタンのインスタンスを選択します。
2. 右サイドバーの位置セクションでオートレイアウトを無視をクリックします。
3. 好きな場所にボタンをドラッグしましょう。私たちは、このボタンをフッターの空いているスペースに配置します。

プロトタイプタブで、ボタンの位置を固定に変更します。位置が固定に設定されたレイヤーは、Figmaではスクロールする他のレイヤーの上に、レイヤーパネルの新しいセクションに移動します。

キャンバス上では新しいボタンは見栄えが良いですが、ページをプレビューするとボタンが表示されていないことに気づくでしょう。スクロールしても一番下に行っても、それは変わりません。これはレイヤーの制約によるものです。

固定レイヤーの制約

先ほど説明したように、デフォルトのスクロール動作ではフレーム全体、つまりページ全体が1つの大きなコンテンツとして扱われます。

私たちのボタンはフレームの上部からかなり離れた位置にあり、固定に設定されているため画面と一緒にスクロールしません。つまり、プロトタイプには存在しますが、ただ単に非常に下の方にある状態です。そこでは見えません!

フレーム内でボタンを上に移動させれば、デバイス画面内に表示させることはできます。しかし、画面の高さが異なるデバイスではうまく表示されない問題があります。

代わりに、制約を使ってこれを修正できます。位置が固定に設定されたオブジェクトに制約を使うと、Figmaに対してそのオブジェクトをビューアウィンドウのどの辺に対して配置したいかを指定していることになります。

ボタンをフレームの下端と右端近くに配置したので、ボタンの制約を下と右に変更しましょう。Figma Designでは、それらの橋からのオフセットに基づき、固定位置でボタンが表示されます。

インラインビューアに戻ると、ボタンが右下に表示され、ページをスクロールしたりウィンドウサイズを変更しても固定されたままであることが確認できます。

次は、このボタンにページのトップまでスクロールする機能を追加する時間です。

次にスクロールを追加する

次にスクロールはFigma Designでユーザーを同じフレーム内の特定のオブジェクトに移動させるアクションです。このアクションを使うことで、ボタンをクリックしたときにページのトップまでスクロールさせることができます。このインタラクションを追加する方法はいくつかあるので、ここでは2つの方法を一緒に見ていきましょう:

方法1

1. 追加したボタンを選択します。
2. プロトタイプタブから、新しいインタラクションを追加します。
3. アクションを次にスクロールに変更し、トリガーをクリック時のままにします。
4. このボタンでユーザーをページの最上部に移動させるために、移動先メニューからナビゲーションを選択します。ナビゲーションコンポーネントはページの上部にあるためです。

デフォルトでは、アニメーションは即時に設定されています。インラインビューでプレビューすると、これはスクロールしているように感じられません。瞬きをすると見逃してしまうかもしれません。 

アニメーションを変更することで、この体験を改善できます:

1. アニメーションをアニメーションメニューから選択します。
2. 曲線をイーズアウトに設定します。
3. 所要時間を400ミリ秒に設定します。これは、アニメーションが完了するまでの時間です。プレビュー上にカーソルを重ねると、アニメーションの動きがどのようになるかが確認できます。

方法2: キャンバス上の一致するレイヤーを選択

キャンバス上で直接次にスクロールのアクションを作成することもできます。ページナビゲーションにある「ケーススタディ」テキストリンクを使ってそれを行いましょう。ホームページのリンクをクリックしたとき、ユーザーがケーススタディカード一覧までスクロールするようにしたいです。

このリンクはケーススタディページにも存在しており、ユーザーがそのページからリンクをクリックした場合も、同じ場所へ移動するようにしたいです。

これらのコネクションを一度に両方作成できます:

1. 右サイドバーのデザインタブに切り替えます。
2. ナビゲーションバーの一つの「ケーススタディ」のテキストレイヤーを選択し、その後サイドバーでマッチングレイヤーを選択を選ぶ、またはキーボードショートカットを使用します:
   
   • Mac: Command Option A
   • Windows: Ctrl Alt A
3. Figma Designはこれが異なるフレーム上でも同じレイヤーであることを認識し、現在の選択に他のものを追加します。
4. プロトタイプタブを開き、キャンバス上のプラス記号をクリックします。
5. 各リンクからホームページのセクションタイトルフレームまでコネクションをクリックしてドラッグします。Figma Designは両方のコネクションを一度に作成します。

混在状態

まだ両方のコネクションが選択されているため、一部の値は混在状態を示します。コネクションの選択を解除し、それぞれを1つずつクリックしてプロパティを確認できます。ホームページは 次にスクロールに設定され、前回のスクロールからのインタラクションで設定したアニメーションプロパティをコピーしたことがわかります。他のコネクションは即時に設定され、他の次に移動のコネクションのようになっています。

追加のインタラクションを検討する

プロトタイプを本物のウェブサイトのように感じさせるために、追加で加えるとよいインタラクションをいくつかご紹介します:

• ナビゲーションバーのワードマークを、ホームページに素早く戻れるリンクにします。
• プロトタイプを作る際、読者がケーススタディにアクセスできる追加の方法を用意します。例えば、カードの画像をクリックすると詳細ページに移動するようにします。このようなインタラクションは、商品画像をクリックすると商品詳細ページに移動するEコマースサイトでよく見られます。
• フッターのメールアドレスとワードマークにインタラクションを追加します
• 新しいケーススタディページをゼロから作成し、これまで学んだことを使ってプロトタイプに接続してみましょう

レッスンのまとめ

初めてのプロトタイプの作成おめでとうございます!このレッスンでは、以下の内容を幅広く学びました:

• 重要なプロトタイピング用語
• フレーム間を移動するコネクションの追加方法
• インラインビューアを使用してプロトタイプをプレビューする方法
• スクロール、固定位置、制約がどのように機能するか 

セカンダリーボタンの必要性を発見し、私たちのポートフォリオのユーザー体験を向上させました。さまざまなインタラクションタイプを探求し続けることで、ポートフォリオをカスタマイズ・改善するためのさらなる手法を発見できるでしょう。