Figma制作ルールマニュアル・ガイド

対象

• 対象は、Figmaでデザインを作るページ（トップページ、LPなど）。
• 内部ページは、原則としてFigmaを作らない。内部ページ レギュレーションとデザイン規定の部品見本に従って作る。

迷ったときの優先順位

1. レギュレーションサイト（このサイト）の規定
2. 案件ごとの個別の指示
3. このページ

規定と個別の指示が食い違うときは、推測で決めずに確認してください。

制作の基準

• PC版は必ず作る。スマートフォン版のデザインを作るかどうかは、案件ごとに決める。作る場合は390pxで作る。
• 中身の最大幅1280pxは、共通CSS（.l-fixbox）の値と同じ。
• PCの枠1440pxでは、左右に80pxずつ余白ができる。
• スマートフォンの左右の余白（画面の端から中身まで）は18pxを基準にする。

表示が切り替わる幅

全案件共通で、次の3か所で表示が切り替わります（レスポンシブ対応）。

768pxなど、これ以外の幅で切り替えるデザインは作りません。

確認する幅

すべての幅のデザインを作るのではなく、Auto Layoutで枠の幅を変えて、崩れないかを確認します。

広い画面

1920px

基準

1440px、390px

切り替わる境目

1280pxと1279px、1025pxと1024px、601pxと600px

小さい端末

375px、320px

1920pxでは、メインビジュアル・背景・装飾が切れたり、間延びしたりしないかを見ます。

大きさ

• 文字は、PCで16px以上にする。例外は、読ませない飾り（著作権表記、NEWなどのバッジ、矢印などのアイコン）だけ。
• 表、写真の説明文、注記、パンくず、メニューも対象。小さくしたくなる文字も、読ませる文字として扱う。
• 本文の標準は18px、行間は1.6倍。
• 見出しの標準は次のとおり。案件のデザインで変えてよい。

h1

40px

h2

32px

h3

26px

h4

24px

h5

22px

h6

20px

スマートフォン版の大きさ

実装では、画面の幅が1279px以下になると、文字の基準が10pxから9pxに下がります。PCで18pxの文字は、スマートフォンでは自動的に16.2pxになります。

• スマートフォン版は、実際に見える大きさで作る。Figmaで16pxと作った文字は、スマートフォンで16pxに見える。
• Figmaの数値を単位（rem）に直す計算（9で割る）は、実装のときにAIが行う。デザインを作る人は、換算を気にしなくてよい。
• スマートフォン版の文字は、14.4px以上にする（PCの16pxに当たる大きさ）。きりのよい数字で作るなら15px以上。

書体

• Webフォントとして配信できる書体（Google Fontsなど）だけを使う。パソコンに入っているだけの書体は使わない。
• 見出しの書体と本文の書体を、制作の最初に決める。

並べ方

• 本文の段落は中央寄せにしない。スマートフォンで改行の位置が乱れるため。
• 中央寄せにしてよいのは、見出し、ボタン、1行で収まる短いキャッチコピーだけ。
• 見出しとキャッチコピーは、言葉の途中で改行されない位置で区切る。

Figmaでの管理

くり返し使う文字の設定は、Text Stylesに登録します。

最初に決める3色

ロゴをもとに、制作の最初に次の3色を決めます。

• コンバージョンカラーは、お問合せ・申込みなどのボタン専用にする。本文のリンク、飾り、見出しには使わない。あちこちで使うと、ボタンが目立たなくなる。
• 本文のリンクは、リンク用の色（--color-txtlink）と下線で区別する。

そのほかの色

文字

--color-txt

アクセント

--color-accent

本文のリンク

--color-txtlink

罫線

--color-border

ボタンの文字

--color-conversiontxt

Figmaでの管理

• 色は、必ずFigmaのVariables（色を変数として登録する機能）で作る。実装では、Figmaの色の変数とCSSの変数を1対1で対応させる（スタイルシート(CSS)）。
• 変数にない色を、その場で直接指定しない。必要な色は変数に足す。
• Variablesが必須なのは色だけ。文字の設定はText Stylesで管理し、余白と角丸は数値のままでよい。

Hoverとスライド

• Hoverは、ボタン、カード、メニューの3種類について、代表を1つずつ作る。同じ種類の部品は、代表と同じ動きとして扱う。
• スライダーやカルーセルは、次の1枚に切り替わる動きを1往復分作る。
• お客様にFigmaのリンクを送る前に、Prototypeの再生画面で実際に操作して、動きを確認する。
• スマートフォン版は、Hoverに頼らない。タップで同じ内容が伝わるようにする。

作っておく状態

フォーム

入力前、エラーが出たとき、送信が終わったとき

スマートフォンのメニュー

開いたとき

FAQなどの開閉

開いたとき

文章の量が変わる場所

一番長い場合と一番短い場合

押しやすさ

スマートフォンで押す場所（ボタン、メニュー、リンク）は、縦横45px以上にします。

デザインを作る人が付ける名前

• セクションの親のFrameと、くり返す要素（カード、項目）の親に、日本語で役割が分かる名前を付ける（例：「料金」「制作の流れ」「お悩み」）。
• Frame 123 のような自動で付いた名前を、セクションや部品に残さない。
• 文字のレイヤーは、名前を変えない。原稿がそのまま名前になっている状態でよい。
• HTMLに出さない飾り（見出しの飾り、矢印、背景の模様）は、名前の頭に「装飾 / 」を付ける（例：「装飾 / 見出し飾り」）。

AIがコーディングの前に付け直す名前

デザインが決まったあと、AIが、日本語の名前をCSSのクラス名に付け直します。頭に付ける文字は、どのCSSファイルに書くかで決まります。

• 例：l-header、p-price、p-price__card、p-about__company
• 名前を付けるのは、セクションの親と、くり返す要素の親だけ。見出し、本文、途中の入れ物には付けない。

画面サイズ

• PCは1440pxで作ってある（スマートフォン版を作る案件では、390pxでも作ってある）
• 中身の最大幅は1280pxになっている
• 1920pxで、メインビジュアル・背景・飾りが切れていない
• 1280と1279、1025と1024、601と600、375、320の幅で崩れていない

文字と色

• PCで16px未満の文字がない（飾りを除く）
• 本文の段落に中央寄せがない
• メイン、サブ、コンバージョンの3色が決まっている
• コンバージョンカラーを、お問合せ・申込みのボタン以外に使っていない
• 色がすべてVariablesに登録されている
• くり返し使う文字の設定がText Stylesに登録されている

作り

• Auto Layoutを使っていないFrameがない（重ねて置く飾りを除く）
• 余白のためだけの空のFrameがない
• 文章が入る場所の高さがFixedになっていない
• 部品見本にある部品を、別の形で作り直していない
• 横に並べた画像の比率がそろっている

動きと状態

• ボタン、カード、メニューのHoverが、代表1つずつ作ってある
• スライダーの切り替わりが、再生画面で動く
• フォームのエラーと送信完了、スマートフォンのメニューを開いた状態が作ってある
• スマートフォンで押す場所が、縦横45px以上ある
• PC版の修正が、スマートフォン版にも反映されている

名前と構成

• セクションと部品に、Frame 123 のような名前が残っていない
• 飾りの名前の頭に「装飾 / 」が付いている
• 旧案と参考資料が、正式デザインと別のPageにある