【保存版】Figmaの初期設定とデザイン基準まとめ｜Webデザイン初心者にもわかりやすく解説

こんにちは！
カチコムでデザインを担当しているりゅうちゃんです！

Figma（フィグマ）は、チームでのWebデザイン制作に欠かせないツールです。
しかし、最初に設定を整えておかないと、後々のデザイン崩れやサイズ調整のズレにつながります。

まだFigmaをインストールしていない方は以下の記事を参考にインストールをお願いします！

【2025年】『Figma』デスクトップ版アプリのインストール方法

初期設定：ナッジ（移動量）を10→8に変更しよう

まず最初に設定しておきたいのが、ナッジ（Nudge）設定です。
ナッジとは、オブジェクトを矢印キーで移動させるときの“移動距離”のこと。

Figmaのデフォルト設定では10px単位ですが、実務では少し粗く感じることも。
細かいレイアウト調整を行いやすくするために、8pxに変更しておくのがおすすめです！

そうすると「無題」というファイルが作成され、編集画面が表示されます。
初期設定を行うために、左上の「Figma」から「基本設定」→「ナッジ」と選択していきます。

「ナッジ」の設定を変更します。
小さな調整：１　←そのまま！

大きな調整：１　　→ 　８

この「8pxグリッド設計」は、多くのプロジェクトで採用されているデザインシステムの基本でもあります。

レイヤーサイズとコンテンツ幅を統一しよう

次に、Webデザインで重要なのが「アートボード（レイヤー）サイズ」と「コンテンツ幅」の設定です。
これを統一しておくことで、実装段階でのズレや中央寄せのズレを防げます。

💻 PCデザインの場合

・レイヤー（アートボード）サイズ：W1440px

・コンテンツ幅（メインエリア）：W1200px

ブラウザの一般的な最大幅（フルHD対応）に合わせつつ、左右に120pxずつ余白を取る構成です。
視認性とデザインバランスが最も安定する設定といえます。

📱 スマホ（SP）デザインの場合

・レイヤー（アートボード）サイズ：W375px

・コンテンツ幅：W345px

iPhoneSEのサイズに合わせた設計です。
両端に15pxの余白を持たせることで、テキストや画像が詰まりすぎない印象になります。

文字サイズ設定：見出しと本文の黄金比

文字サイズは、デザインの読みやすさと印象を左右する最も重要な要素です。
PCとスマホでそれぞれ最適なサイズを設定しておきましょう。

💻 PCデザイン

・見出し：24px〜32px

・本文：16px〜18px

16pxはWebでの標準読みやすさサイズ。
24〜32pxの見出しにすることで階層が明確になります。

📱 スマホ（SP）デザイン

・見出し：24px〜32px

・本文：14px〜16px

スマホでは画面が狭いため、16pxを上限に。
14pxだとコンパクトに収まり、読みやすさとレイアウトのバランスを両立できます。

まとめ｜最初の設定が“プロ品質”を決める

Figmaの初期設定を整えておくことで、
・デザイン全体の統一感が生まれる
・実装担当とのやり取りがスムーズになる
・修正や追加デザインがしやすくなる
という大きなメリットがあります。

☑️今日からできるポイントおさらい

ナッジ設定　8px
PCレイヤー幅　1440px
PCコンテンツ幅　1200px
SPレイヤー幅　375px
SPコンテンツ幅　345px
PC本文サイズ　16〜18px
SP本文サイズ　14〜16px

初期設定を整えることは、安定したデザインづくりの第一歩です。
小さな準備が、仕上がりのクオリティを高めてくれます！

またFigmaについての記事を書いていこうと思っているのでお待ちください！
では！