🏇

Framer + RemixでWebサイトをつくる #9 - トップナビゲーションバーとドロワーでメニューをつくる

に公開
Framer
デザイン
GUI
アドベントカレンダー
drawer
idea

引き続き開催しているもくもく会「Kamakura MokMok Hack」のサイトをFramer + Remixでつくっていきます。
サイトの要件などに興味ある方は1日目の記事をご覧ください。

9日目 - トップナビゲーションバーとドロワーをつくる

前回まででスクロールも固定レイアウトもできるようになったのでここまでのテクを使い、サイトメニューをドロワーに入れてトリガーをトップナビゲーションバーとして固定します。

前回までのプレビュー

https://framer.com/share/kamakura-dev-routing--wNee6EG9CZCnoJbohcTO/Ih6d4c8rJ

トップナビゲーションバーをつくる

以下の内容でトップナビゲーションバーを作成します。Scroll Componentの上に被せて配置するので前回の記事でも説明したように固定レイアウトになります。

  • TopNavigationBar（Stack） を作って画面上部へ配置し以下の設定に
    • Direction は たて方向に
    • Gap: 12
    • Padding は Top: 44pxにしてスマートフォン実機で確認した際にノッチに被らないように
    • Distribution を End に
  • TopNavigationBar（Stack） をの中に Navs（Stack） と Separation（Frame) を配置
  • Navs（Stack）　は以下の設定に
    • Direction はよこ方向に
    • Gap: 12, Padding: 0
    • Left(Stack), Title(Stack), Right(Stack) を配置
    • Title(Stack) の横幅は Width: 1fr(Fraction)
    • Left(Stack), Right(Stack) はそれぞれ Width: 60px, Height: Fill
      • Fill は Height: 100% と同じ意味です
  • Left(Stack), Right(Stack) は Direction はたて方向で Distribution: Center　で Gap: 0, Padding: 0
  • Title(Stack) の中にはTextを配置
    • Size: 16
    • Line: 1.2em
    • Align: Center


トリガーのハンバーガーメニューボタン

ちなみにトリガーのハンバーガーメニューはFramerが用意しているHero Icon　Componentをとりあえず配置してます。

Framerが用意しているコンポーネントを使うにはFramerの上部にある「Insert」アイコンをクリックすると色々選べます。

Heroアイコンを使うには、 Graphic > Icons > Hero を選択して、 Insert ボタンをクリックで任意の場所にComponentを配置できます。

Componentには配置すると色々オプションが右のコンパネに表示されます。アイコン類は色々アイコンの種類を選んだり、色や向きを変更するなどできるようになります。


というわけでここまでのプレビューです。

https://framer.com/share/kamakura-dev-top-navigation-bar--c0lPZ07IdofU3GRHXbao/Ih6d4c8rJ


ドロワーをつくる

ドロワーをFramerの純粋な機能だけで作るには以下の手順で作成できます。

  1. ドロワー用のDrawer(Screen)を作成
  2. Screenの背景を削除して透過背景にする
  3. Drawerの本体（今回は BodyWrapper と命名）を適当にFrameかStackで作成する
    • この時、横幅は Width: 70% とかにしておくと良いです
    • たて幅は Height: 100% にする
  4. BodyWrapperの下にはFramerが自動で薄い背景レイヤー（今回はClickableLayer(Frame)）と命名）をつけてくれますが、ScreenサイズでDrawer本体の横幅をRelativeにしたいので透明のFrameを配置
    • 横幅・たて幅はRelativeのそれぞれ100%を設定
    • この背景レイヤーには Transition BackのIntaractionを追加しておく
      • ドロワー閉じるために使います


ドロワーのメニューをつくる

レイアウトの組み方は省略します。が、Layersの構成から読み取っていただければと。
ここではIntractionについて簡単に説明します。

ここで必要な要件があります。

  • ドロワーのメニューは遷移する際にドロワーは閉じられるもの
  • 任意メニューをクリック（タップ）で任意の画面へ遷移する

Intaraction は以下の内容で設定します。

Event On Animate Target
Tap Instant 任意の画面

⚠️「任意画面へ遷移する」というユースケースに例えば Push などの Animate にしてしまうと現在はドロワーの表示が期待したものにならないようです。

というわけで、ここまでのプレビューです。

https://framer.com/share/kamakura-dev-add-drawer--wWDzhp5BVT1NZmzq3W9G/Ih6d4c8rJ


だいぶそれっぽくなってきました。
ここまで作ってきてFigmaやXD, Sketchなど触っているデザイナーの皆さんもReactやVueなどView ComponentライブラリーやFrameworkを実装しているエンジニアの皆さんも薄々感じているとは思いますが、今現在見ただけでも再利用性の高いFrameやStackの塊がいくつかあると思います。

というわけで、次回はいよいよFramerでComponentを作る過程を説明しようと思います。


Discussion