Framer + RemixでWebサイトをつくる #2 - Frameをつかう

これはAdvent Calender 2021 #Framer 2日目の記事です。
1日目の記事はこちら

2日目 - Frameをつかう

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

• 紹介
  - 会の目的
  - 会の雰囲気・やってること
  - 会のルール
  - 参加方法

サイトのアウトライン

会の目的と会の雰囲気・やってることをコンポーネントをFramerでつくる

会の目的の内容は以下の感じ。

#　この会の目的

鎌倉を中心として土曜日午前中からゆるく有志で集まってもくもくと
自習したり、新しい技術を試したり、個人開発したりと色々なことをしようという会と
Meetupで交流をはかることが目的です。

# この会の雰囲気とやってること

もくもく会としていますが、
OMO（オンライン・オフライン両方ありな）もくもく会の開催や時々ビアバッシュなどのMeetupの開催もあります。

リアル（オフライン）もくもく会は疫病・災害がなければ鎌倉で開催しています。
リアル開催の時はランチを鎌倉の地元向けや観光客向けのお店へ行ける人でいくおまけもあります。
鎌倉ランチ・鎌倉観光ついでに都内から参加される方もいます。

目的と雰囲気・やってることを抽象化すると構造的にはこんな感じすね。

• セクション(Section)
  • 見出し(Heading)
  • 本文(Body)

とてもシンプルですがこれをFramerでデザインしてみましょー

---

Frameでレイアウトをつくる

Framerには「Frame」という矩形のデザインオブジェクトでレイアウトを表現し、それらの組み合わせで全体をデザインしていきます。ちなみにFramerのFrameはFigmaでいうとFrameではなくRectangleに相当しています。

今回は「目的」セクションから作ることにします。目的セクションには見出しと本文が入るので適当なサイズ（後で調整します）でそれぞれのFrameを追加してみましょう。

Frameアイコンをクリックして、任意の場所にドラッグ＆ドロップで縦横サイズを適当に決めて配置します。

今回はScreeの横サイズいっぱいにドラッグして、高さは一旦適当に決めてます。

Frameでおおよそのレイアウトができたし、見出しも本文もテキストで表現されるのでテキストを入れましょー。Textアイコンをクリックして、任意の場所にドラッグ＆ドロップで縦横サイズを適当にきめて配置します。

不要な背景をとる

背景色はデフォルトでは青系の色が設定されているので一旦背景色を全て無色にします。

オブジェクトの横幅を可変にする

現在のテキストオブジェクトの横幅はScreenの横幅と同じ 390px です。
当然ScreenサイズやSectionのFrameオブジェクト、HeadingやBodyのFrameオブジェクトの横幅を変更してしまってもテキストオブジェクトは 390px と固定されたままです。

この辺、後々のサイズ変更などに備えてテキストオブジェクトの横幅を可変にします。
Widthプロパティの横にセレクタがあるのでそこから Relative を選択します。　Relative　の値は整数ではなくパーセンテージになるのでここを 100% にしましょー。

ちなみに、FigmaだとRectangleのConstrainsで Left and right を選択するものと同じです。横幅の値を可変にしたいという目的に対してFramerの方がよりCSSに近いアプローチです。

Width/Height プロパティのその他値について

縦と横には先ほど紹介した Fixed, Relative, Fraction, Auto と4種類あります。それぞれ紹介しておきます。

種類	型	説明
Fixed	Int	固定サイズ、整数で入力
Relative	Perecentage	可変サイズ、パーセンテージで入力
Fraction	Int	次の記事で紹介しますが、Stackで幅の割合を決めるものです
Auto	Int	内容物（テキストの場合は文字数）に合わせて可変

---

その他、Frameのプロパティを紹介

今後のデザイン調整などの前にFrameのプロパティについて紹介しておきます。詳しい使い方は追々。

Position

x, y 値の設定です。 親のオブジェクトに対して次のどれかを基準に

値	説明
T	Top、上辺のこと
L	Left、左辺のこと
R	Right、右辺のこと
B	Bottom、下辺のこと

各辺の棒をクリックすると青い棒になります。この青い棒が基準。
つまり、左と上に棒があるということは親のオブジェクトの左上からそれぞれ指定のpx値分のところにオブジェクトが配置されます。

Size

Width/Height

前述もしましたが縦横サイズです。

アイコン	説明
	縦幅をautoにする
	縦幅を固定にする
	横幅をautoにする
	横幅を固定にする

MinWidth/MinHeight, MaxWidth/MaxHeight

CSSの min-width, min-height, max-width, max-height と同じです。

Styles

背景色、透明度、角丸、回転、枠線、影を調整できます。

値	説明
Opacity	透明度、CSSの opacity と同じ。小数点（0-1）で入力
Visible	表示・非表示、CSSの visibility: hidden/visible と同じ
Radius	角丸、CSSの　border-radius と同じ。上下左右それぞれ、または全部に適応できる
Rotation	回転、CSSの transform: rotate() と同じ。角度を入力
Fill	背景色、CSSの background と同じ。SOLID（単色）, Linear（水平・垂直のグラデーション）, Radial(円形のグラデーション), image(画像背景）
Border	枠線、CSSの　border と同じ
Shadows	影、CSSの box-shadow と同じ。複数設定可能

という感じで、各種プロパティはFigmaに比べるとCSSに近い命名・値になっているのでCSSを触っている人ならわかりやすいはず。

そんなわけで3日目はTextに関するプロパティを紹介します。

3日目の記事はこちら