Next.js App Router触る
wadakenji趣味制作の殴り書きです。
目的：RSCやNext.js App Routerを触る
作る：筋トレ記録アプリ
使う：Next.js, supabase, tailwind
repository :
figma :
wadakenjiデザイン
まずはfigmaで簡単にデザインを作りたい。
wadakenji画面構成
配色
この辺のサイトに頼りながら決める。
フォント
あまりわからないので、とりあえずNoto Sans JPを置いていく。
もう1種類くらいかっちょいいものを使ってみたい。
wadakenjiデザイントークン
colorやtext styleを中心にデザイントークンを決める。
これを作っておくことで後々開発が楽になる。
とはいえやったことがないので行き当たりばったりに。
デザインを作りながら適宜variables, styleを追加していく。
variables
まずblack, whiteなど基本的なcolorを設定した。
font-sizeやspacingについては、tailwindcssを使うので、それに即したものを設定しておくと便利そう。
numberとして text-base = 16 spacing-1 = 4 などを一通り設定した。
基本的にvariablesとして設定した値しか使わないようにする方針。新たな値が必要になったときはvariableを設定する。
という面倒なことをしなくても既存のdesign fileに揃っている物があった。（非公式）
tailwindのcolorやspacingの値をvariablesにしてくれている。
variablesはvariablesの値を参照できるので、既存のvariablesを基礎としてエイリアスを作成していくことでセマンティックトークンまで作成できそう。（参考）
ちなみにstylesのエイリアスを作成する方法が見つけられなかった。
font-size等はvariablesを使わずstylesで直接指定しているので、この辺は自分でvariablesを設定する必要がありそう。
公式のdesign file
公式のdesign fileはvariablesは使っておらずすべてstylesで完結されている。エイリアスが使えないようなので取り扱いづらいと感じた。
階層構造
variablesはgroupという単位でまとめることができ、さらにcollectionという単位でgroupやvariableをまとめることができる。
依存方向
variablesのcollectionをプリミティブトークン用とセマンティックトークン用に分けたうえで、以下のように使用することにする。
野良の数値は使わない。
プリミティブトークン
↑
セマンティックトークン
↑
styles, コンポーネント
↑
ページデザイン
wadakenji必要なvariablesを設定し終えたところで、デザイントークンを決めていこうと思ったが、どういうトークンが必要になるか見当がつかない。
先に必要な画面を洗い出してみる。
画面構成
- 認証関連
- ログイン
- 2FA
- 設定関連
- 設定一般
- 部位追加・編集
- 種目追加・編集
- 記録閲覧系
- 日付別
- 月別（カレンダー的な）
- 部位別
- 種目別
- グラフ
- 記録編集系
- 登録モーダル
- 編集・削除モーダル
wadakenjiワイヤーフレームをざっくりお絵かき帳に書く。
それをもとにコンポーネントを洗い出す。
必要そうなコンポーネント
ナビゲーション
- ヘッダー
- ハンバーガーメニュー/ボタン
タブバーでもいいかも 🤔 - 登録モーダル開くボタン
タイポグラフィ
- ページ見出し
- カード見出し？
- 通常テキスト
- 目立たないテキスト？
フォーム
入力
- テキストインプット
- ラジオボタン（部位選択用）
- セレクト（種目選択用）
サーチ機能欲しい - 数値インプット（重量・レップ数用）
+/-ボタンを置いて入力を簡単にしたい - 日付インプット
ラベル
- ラベル
ボタン
- ボタン
データ表示
カード
- 日付別カード
折り畳めたい- ラッパー
- カード間の日数表示
- 種目別カード
セット表示
- セット表示
- セット間のインターバル表示
チャート
- 折れ線グラフ
レイアウト
- コンテナ
- モーダル
ローダー
- スピナー
wadakenjiアイコン
Font Awesome から拝借。
フリーのアイコンはSVGのコードがコピーできる。
SVGコードをコピーしてfigmaに貼り付けるとVectorとして貼り付けられた。
wadakenji何から手を付けていいかわからなくなってきた。
とりあえずfigmaでコンポーネント作ってみる。
コンポーネント作るとなると結局色とか決めないと進めづらいな…
（全体像もないのに色決めるの難しいなデザイナーの人どうやってんだろ）
とりあえずなんとなくでvariableだけ作って全体できてきたらvariableをいじって調整することにしよう。
色のtokenを作ってて思ったけどセマンティックトークンにもいろいろなレイヤーがありそう。
レイヤーの分け方と依存方向決めておかないと後々扱いづらくなりそう。
一旦以下のように決めよう。
プリミティブトークン（gray-400 など）
↑
サイト全体に対する意味レイヤー（primary など）
↑
具体的な部分（コンポーネントとか）に対する意味レイヤー（header-background など）
wadakenji想定するデバイスは自分のスマホ（iPhone SE 2）のみ。
iOSのfigmaアプリでプロトタイプをみて感じを確認しながら、粛々とデザインを進める。
wadakenji色の調整（寄り道）
なんとなくいい感じの色の組み合わせだな〜というのを このサイト で見つけた。
それぞれの色について、薄めや濃いめのバリエーションを増やしてカラーパレットを作りたくなった。
しかしどういう基準で色を変化させるといい感じにグラデーションになるのかわからない。
Tailwindのカラーパレットを参考にしようと明度と彩度の変化を分析してみた。
結果、明確な関数とかは見つけられなかった。人の感覚で決まっているのかな？
傾向としては、薄い領域では彩度の変化量が大きく、濃い領域では明度の変化が大きいようだ。
彩度が単純増加ではないパターンが少なくないことに驚いた。
ということで結局、自分も感覚でバリエーションを作ることになった。
カラーパレットのように10色ほど並べるのは大変だしやる必要がなさそうなので、必要になったら逐一作ることにする。
wadakenji先にかっちりtokenやcomponentを作ってからページを組むのは自分には無理そう。
なんとなくざっくりページを組んでみて、そこでいろいろな色なりfontなりを試しながら、それらをtoken, componentに落とし込んでいくのが進みやすいことに気づいた。