Framer + RemixでWebサイトをつくる #5 - Textの調整とStackでレイアウト

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

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

5日目 - Textの調整をして、Stackでレイアウトを組む

前回がStackの説明で終わってしまった上に、記事を書くまで日が開いてしまったので何をしてたか忘れてしまいそうですが、現在はもくもく会サイトの「会の目的と会の雰囲気」をつくってる際中なのでそこにStackを導入します。

会の目的をつくる

これをに追加していきます。

https://zenn.dev/tyshgc/articles/ec3200139aac81#フォントとフォントスタイルを変更する

#　この会の目的

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

---

Textを調整する

単にHeadingとBodyにあるTextオブジェクトをダブルクリックして文字をコピーしただけです。
HeadingはともかくBodyは複数行の文字列ですがちょっと行間（Line）と文字間（Letter）が狭くて可読性が低いです。現在の行間（Line）は 1.2em で1.6em に、文字間（Letter）は 0　なので　0.4 に変更します。

余談: emについて

em はCSSではお馴染みですがフォントサイズに相対するサイズです。　
例えば以下の様な計算になります。

font-size: 12px;
line-height: 1em; /* =12px */
line-height: 5em; /* =60px */

font-size: 8px;
line-height: 1em; /* =8px */
line-height: 5em; /* =40px */

余談: サイズに決め方

あらゆるサイズについて非デザイナーの皆さんは感覚的に設定されることが多いと思いますが、グラフィックデザインでは基本的に「8の倍数」を使います。WebやUIでは使い勝手を考慮して「4の倍数」を使います。

8という数字は用紙サイズ・デバイスの画面サイズなどが黄金比をもとに構成されていて、その数字をもとに算出されたものです。デザインシステムで使われるデザイントークン（フォントサイズ・行間・margin・paddingなどなどの基礎数値）も8の倍数か4の倍数で構成しておけばよく、デザイントークンない場合でもこれらのルールの元にレイアウトなど組めば「1pxのズレ」みたいなので無駄なコミュニケーションを取らずに済みます。

---

Stackで調整

Gapで要素間のスペースを調整する

現在のレイアウトは画面の上下左右やHeading（見出し）とBody（本文）も隙間がなく視認性がよくないのでこちらはStackを使って調整します。

現在はHeading（Frame）とBody（Frame）を隙間なく配置しただけです。Bodyの現在のPositionのTop=60px に32px を加算するとCSS的に言えばBodyにmargin-top:32pxを追加した形になります。
しかし、例えばHeadingとBodyの間に何かオブジェクトを追加した際にこの計算を都度おこなわなければならず面倒なのでここでStackのGapを使います。

Paddingで画面の左右に余白をつくる

次は、画面左右も隙間なくこのままでは視認性も可読性も低いので余白を設けます。
HeadingもBodyも共通した余白を採用したいので PaddingのLeftとRightにそれぞれ 20px を追加します。

という感じで少しテキストやレイアウトを調整してみました。
あまり一回の記事が長いと辛いので「会の雰囲気」の項目は次回6日目の記事でStackに要素を差し込む辺りの話と一緒にまとめようと思います。

6日目の記事はこちら