PR|3日で初案件

Figmaグリッド使い方|12カラム設定で案件を3倍速く仕上げる

◆ ◆ ◆

Homeフリーランスの仕事術 › Figmaグリッド使い方|12カラ...

FREELANCE CAREER GUIDE
フリーランスの仕事術
Figmaグリッド使い方|12カラム設定で案件を3倍速く仕上げる
フリ転。
目次

この記事でわかること

Figmaのグリッドは右サイドバーの+ボタン1クリックで追加でき、12カラム設定なら実務のほぼすべてのレイアウトに対応できます。追加手順から列数・余白・ガターの実践設定、フリーランス案件で即使えるプリセットまで解説します。

この記事を読むと、グリッド設定の10秒操作が身につき、案件ごとの設定ミスと手戻りを大幅に削減でき、スタイル化によって新規ファイルの立ち上げ時間を4分以内に短縮できます。

今の仕事について、一番近いものは?

この記事の結論

Figmaグリッドの核心は「フレームに追加した列グリッドを12カラムに設定する」この1点です。グリッド追加は右サイドバーから10秒、設定変更は数値入力で即反映されるため、覚えるべき操作は3ステップだけです。レイアウトグリッド・レイアウトガイド・オートレイアウトの3種を用途で使い分けることで、案件ごとの設定ミスと手戻りを大幅に削減できます。

今日やるべき1つ

Figmaで作業中のフレームを選択し、右サイドバーのレイアウトグリッド欄の+ボタンを押して列グリッドに切り替え、カラム数を12に設定してください(所要時間: 2分)。

状況別ショートカット

状況読むべきセクション所要時間
グリッドを追加したいがどこを触ればいいか分からないFigmaグリッドは3ステップで追加完了3分
列数・余白・ガターの設定値が分からないFigmaグリッドは12カラムが実務の基準5分
グリッド上で要素が動かず困っているFigmaグリッドのトラブルは2手順で解消3分
オートレイアウトとグリッドの違いが分からないFigmaグリッドは用途で3種類を使い分ける4分
設定を案件ごとに使い回したいFigmaグリッドはスタイル化で5分を節約4分

Figmaグリッドは3ステップで追加完了

グリッドをどこで追加するのか分からず、検索することも多いでしょう。操作は3ステップで完結します。

フレーム選択がグリッド追加の前提条件

Figmaのグリッドはフレーム(Frame)にのみ追加できます。長方形やグループには追加できないため、まずキャンバス上にフレームを作成するか、既存のフレームを選択してください。フレームはツールバーの「F」キーまたは「フレーム」ツールで作成でき、選択後は右サイドバーの上部に「フレーム」と表示されることで確認できます。フレーム以外のオブジェクトを選択している場合、レイアウトグリッドの欄自体が右サイドバーに表示されません。「グリッドが見当たらない」という状況の多くは、フレーム未選択が原因です。

右サイドバーの+ボタンがグリッド追加の起点

フレームを選択した状態で右サイドバーを下にスクロールすると、「レイアウトグリッド」という項目が現れます。その右側にある+ボタンをクリックすると、デフォルトの均等グリッド(方眼状)が追加されます。追加直後は赤い均等グリッドが表示されますが、これは設定変更の前段階です。実務で使う列グリッドには、この後に切り替えます。追加したグリッドは印刷やエクスポートには含まれず、あくまで設計用の視覚補助として機能します(Figma公式ヘルプ: レイアウトガイドを作成)。

グリッドの種類切り替えで列グリッドへ変更

追加されたグリッドの左端にある格子アイコンをクリックすると、グリッドタイプの選択肢が現れます。選択肢は「グリッド(均等)」「列(カラム)」「行(ロウ)」の3種類です。実務のレイアウト設計では「列」を選択することで列グリッドに切り替えられ、画面の横幅に対して均等に分割されたカラムが表示されます。列グリッドを選択した直後はデフォルト値(通常5カラム)が入力されており、次のセクションで解説する数値に変更することで実務対応のグリッドが完成します。

「最初はどこを触ればいいか全然わからなかったけど、右パネルのグリッド追加ボタンを押すだけだと分かってから一気にスムーズになりました」と語るデザイナーもいます(Figmaのグリッドレイアウトの使い方と中央揃えのやり方)。

Figmaグリッドに慣れてきたら、作業効率上げる方法として他のツールとの組み合わせも検討するとよいでしょう。

CHECK

▶ 今すぐやること: Figmaを開いてフレームを1つ作成し、右サイドバーのレイアウトグリッド欄の+ボタンを押してグリッドが追加されることを確認する(2分)

Q: フレームを選択しているのにレイアウトグリッドの欄が表示されない場合はどうすればよいですか?

A: 右サイドバーの「デザイン」タブが選択されているかを確認してください。「プロトタイプ」タブを選択中はレイアウトグリッド欄が非表示になります。コンポーネントのインスタンスを選択している場合は、メインコンポーネントに遡って設定する必要があります。

Q: グリッドを追加したが削除したい場合はどうすればよいですか?

A: 右サイドバーのレイアウトグリッド欄に表示されているグリッドの右側にある「-」ボタンをクリックすると削除できます。複数追加している場合は各グリッドに対して個別に削除操作が必要です。

Figmaグリッドは12カラムが実務の基準

列数・余白・ガターの数値を曖昧なまま進めると設計の一貫性が崩れます。最初に基準値を把握してください。

12カラムが実務で標準的な理由

12という数字は2・3・4・6で割り切れるため、2分割・3分割・4分割・6分割のどのレイアウトにも対応できます。Webデザインの実務では、コンテンツ幅が2列・3列・4列に変化するレスポンシブレイアウトが多くを占めるため、12カラムの設定は案件を問わず使い回せます。モバイルサイズのデザインでは4カラムや6カラムが使われるケースが多く、デスクトップとモバイルで別のグリッドを設定するのが実務の標準的な進め方です。デスクトップフレームでは12カラムを起点に設定すれば、案件ごとに設定を考え直す手間を省けます。

余白(マージン)の設定は画面幅に応じて調整する

列グリッドの「余白」は、フレームの左右端からコンテンツエリアまでの距離です。デスクトップ(1440px幅)の場合、余白は80〜120px程度が多く採用されています。モバイル(375px幅)では16〜24pxが一般的です。余白を固定値で設定すると、フレームサイズを変更した際にコンテンツ幅が自動で調整されません。「ストレッチ」アライメントと組み合わせると変更に強いグリッドになります。「左揃え」や「右揃え」ではなく「中央」アライメントを選択すると、フレームの中心を基準にコンテンツが配置されるため、可視性が上がります(kohimoto.com: Figma レイアウトグリッド設定解説)。

ガターはコンテンツ間の間隔でコンテンツ幅に比例して設定

ガターは列と列の間のスペースです。デスクトップ(1440px幅・12カラム)の場合、ガターは20〜32pxの範囲が実務でよく使われます。ガターが広すぎると列幅が狭くなり、テキストや画像が詰まった印象になります。ガターが狭すぎると要素の区切りが分かりにくくなるため、デザインの視認性を確認しながら調整してください。設定後にフレームに仮のコンテンツを置いてみて、列境界とオブジェクトの位置関係を確認するのが最も確実な方法です。

グリッドの色と透明度は背景との差で決まる

デフォルトで追加されるグリッドの色は赤(#FF0000)で、透明度10%前後が設定されています。白背景のデザインでは視認しやすい設定ですが、ダークモードや背景画像の上ではほぼ見えなくなります。白背景では透明度10〜20%の赤または青、ダーク背景では透明度30〜40%の白が推奨されます。「視認できることが最優先」という基準で調整すれば問題ありません。

フリーランスのデザイン業務全体の効率化には、Chrome拡張機能おすすめも参考になります。ブラウザとFigmaを行き来する際の作業効率が大きく変わります。

CHECK

▶ 今すぐやること: 作業中のデスクトップフレームにカラム数12・余白80・ガター24を入力してグリッドを設定し、仮のコンテンツブロックを列に沿って配置してみる(5分)

Q: 12カラム以外の設定はどんな場面で使いますか?

A: モバイルデザインでは4カラム(375px幅・余白16・ガター16)が標準的によく使われます。タブレットサイズ(768px幅)では8カラムが使われることがあります。案件の要件や既存デザインシステムの設定に合わせて選択してください。

Q: グリッドの表示と非表示を素早く切り替える方法はありますか?

A: Shift+Gのショートカットキーで、画面上のすべてのグリッド表示を一括で切り替えられます。作業中にグリッドが邪魔に感じる場面で活用してください。

Figmaグリッドのトラブルは2手順で解消

グリッドを設定しても要素が思った位置に動かない状況は、多くのデザイナーが経験します。原因は2つに絞られるため、順番に確認すれば解消できます。

スナップが有効かどうかを先に確認

Figmaではグリッドに要素を吸着させる「スナップ」機能があります。スナップが有効な状態では、オブジェクトをドラッグすると自動的にグリッドの線に近い位置に吸着します。スナップが無効になっている場合はグリッドが表示されていても要素が自由配置となり、グリッドに沿わない位置に置かれます。スナップの有効・無効はメニューバーの「表示」から「グリッドにスナップ」で切り替えられます。細かいピクセル調整が必要な場面では意図的に無効にして作業する方が正確です。

グリッドを追加してもオブジェクトが自由に動いてしまう問題を経験したWebデザイナーが、スナップ設定をオンにしたところ解決したと報告しています(Figma スナップに関するコミュニティ投稿)。

オートレイアウトの自動配置が要素移動を制限している

オートレイアウトが適用されたフレーム内では、子要素を手動でドラッグして位置変更することができません。これはオートレイアウトの仕様であり、バグではありません。「要素が動かない」という症状がこれに該当する場合は、右サイドバーのオートレイアウト設定を解除するか、対象の要素をオートレイアウトフレームの外に出すことで自由移動できるようになります。解除した後も再度オートレイアウトを適用できるため、「配置を確認したい場面だけ一時的に解除して元に戻す」という使い方も有効です。この2手順で解消しない場合は、フレームが入れ子構造になっており、親フレーム側にオートレイアウトが設定されているケースを疑ってください。

CHECK

▶ 今すぐやること: 動かない要素を右クリックして「オートレイアウト」の表示があるか確認し、あれば一時的に解除して位置変更できるかテストする(2分)

Q: スナップをオンにしてもグリッドに吸着しない場合はどうすればよいですか?

A: 「グリッドにスナップ」ではなく「オブジェクトにスナップ」だけが有効になっているケースがあります。メニューバーの「表示」から「グリッドにスナップ」にチェックが入っているかを個別に確認してください。

Q: オートレイアウトとグリッドは同時に使えますか?

A: オートレイアウトを適用したフレームに対してレイアウトグリッドを追加することは可能です。ただし、要素の位置はオートレイアウトのルールに従って決まるため、グリッドはあくまで視覚的な補助として機能します。

事務作業に時間を取られている方へ

フリーランスの働き方をLINEで受け取る

3日で初案件

登録1分・情報収集だけでもOK・ブロック自由

タップするとLINEの友だち追加画面が開きます

未経験から45日

フリーランス
Webデザイナーへ

無料セミナーに参加する →

所要60分・オンライン

PR提供: 日本デザインスクール(デザスク)

Figmaグリッドは用途で3種類を使い分ける

レイアウトグリッド・レイアウトガイド・オートレイアウトのグリッドフローは名称が似ており、どれを使えばよいか迷いやすいものです。3種類の違いを用途で整理すると、選択に迷わなくなります。

レイアウトグリッドはデザインの整列補助ツール

レイアウトグリッドは、フレーム上に表示される視覚的な補助線です。要素を自動で整列させる機能は持っておらず、あくまでデザイナーが目安として使うガイドラインです。印刷物・Web・アプリを問わずレイアウトの一貫性を保つために使われており、実務では最初に設定してから要素を置いていく「先出しグリッド」として運用します。出力には含まれないため、クライアントへの納品データにグリッドが残っていても問題はありません。

レイアウトガイドはスタイル化して複数ファイルで再利用

レイアウトガイドは、レイアウトグリッドの設定をスタイルとして保存し、プロジェクト内で使い回す機能です(Figma公式ヘルプ: レイアウトガイドを作成)。フリーランスで複数の案件を同時進行している場合、案件Aの12カラム設定をスタイル化しておくと、新規ファイルに同じ設定を素早く適用できます。スタイル化の手順は、グリッド設定後に右サイドバーの4つの正方形アイコン(スタイルボタン)をクリックし、「+」から名前を付けて保存するだけです。チームライブラリとして公開すれば、複数メンバーが同一の設定を参照でき、デザインの統一性が保たれます。

オートレイアウトのグリッドフローは要素の自動整列に特化

オートレイアウトのグリッドフローは、コンテンツを格子状に自動配置する機能です。フレームにオートレイアウトを適用後、フロー方向を「グリッド」に切り替えると使用できます(Figma公式ヘルプ: グリッドオートレイアウトフローを使用する)。レイアウトグリッドと異なり、追加した要素が自動的にグリッドのセルに流し込まれるため、カード一覧やギャラリーUIの作成に適しています。トラックサイズは「自動」と「固定」から選べ、カードの幅を揃えたい場合は固定値、可変にしたい場合は自動を使います。この3種類を「整列の補助にはレイアウトグリッド、設定の再利用にはレイアウトガイド、要素の自動配置にはグリッドフロー」と整理しておくと、用途に迷わず選択できます。

CHECK

▶ 今すぐやること: 現在使っているフレームにどのグリッドが設定されているかを右サイドバーで確認し、用途に合っているかを照合する(3分)

Q: レイアウトグリッドとレイアウトガイドは別機能ですか?

A: レイアウトグリッドはフレームに直接追加する設定そのもので、レイアウトガイドはその設定をスタイルとして保存したものです。機能的には同じグリッドを指しますが、再利用性の有無が異なります。

Q: オートレイアウトのグリッドフローはいつから使えますか?

A: Figmaのオートレイアウトにグリッドフローが追加されたのは2024〜2025年のアップデート以降です。デスクトップアプリまたはWebアプリの最新バージョンを使用していれば利用できます。古いバージョンでは表示されないため、アップデート後に確認してください。

Figmaグリッド操作は5つの方法で効率化

フリーランス案件では設定の速度と再現性が収益に直結します。実務で差が出る5つの方法を紹介します。

方法1: スタイル登録で同一設定を素早く呼び出し

【対象】: 複数案件を同時進行するフリーランスデザイナー

【手順】: グリッドを設定したフレームを選択し、右サイドバーのレイアウトグリッド横の4つの正方形アイコンをクリックします(30秒)。「+」をクリックしてスタイル名(例:「Desktop 12col」)を入力して保存します(30秒)。新規フレームに適用する際は同じアイコンからスタイルを選択し、設定を呼び出します(5秒)。

【ポイントと理由】: スタイルとして保存して呼び出すことで、設定時間を削減できます。入力ミスによる設定の不統一がなくなり、チームワークの案件では他のメンバーも同一設定を使えるため、後工程のフィードバック修正が減ります。スタイル化こそが品質担保の手段です。

【注意点】: スタイル名に「デスクトップ」「モバイル」など用途を含めないと、後から見たときにどの設定か判別できなくなります。「12col」などカラム数を含めた命名規則を最初に決めておくことを推奨します。スタイルを削除すると適用先のグリッドも外れるため、使用中のスタイルを安易に削除しないよう注意してください。

方法2: 複数グリッドの重ねがけで整合性チェックを同時実行

【対象】: グリッドとコンポーネントの整合性を確認したいデザイナー

【手順】: フレームを選択した状態でレイアウトグリッドの+ボタンを2回押し、列グリッドと行グリッドをそれぞれ追加します(1分)。列グリッドを12カラムに、行グリッドを基本単位8pxに設定します(2分)。両グリッドが重なった状態で要素を配置し、縦横両方の整列を一度に確認します(随時)。

【ポイントと理由】: 列グリッドと8px行グリッドを重ねることで、ボタンの高さ・コンポーネント間のスペース・テキストのラインハイトがすべて8の倍数に揃います。これはGoogleのMaterial Designなど主要デザインシステムが採用している「8ptグリッドシステム」と同じ考え方で、エンジニアへの実装渡しでの解釈ミスが減ります。

【注意点】: グリッドを重ねすぎると画面が見づらくなります。作業フェーズに応じてShift+Gで表示を切り替えながら使ってください。3種類以上のグリッドを常時表示しておく必要はありません。

方法3: コンポーネント複製でカードUIをグリッド配置

【対象】: カード一覧やギャラリーUIを素早く作成したいデザイナー

【手順】: カードコンポーネントを1つ作成し、フレームに配置します(事前準備)。フレームにオートレイアウトを適用し、フロー方向をグリッドに変更します(1分)。カードをCommand+DまたはCtrl+Dで複製すると、グリッドセルに自動で流し込まれることを確認します(30秒)。

【ポイントと理由】: グリッドフローを使った複製は、カード複数枚の整列を短時間で完了できます。グリッドフローはカードを追加するたびに自動リフローするため、カード数の増減が後から発生しても手動整列が不要です。カードの幅はトラックサイズで「自動」にしておくと、フレーム幅の変更にも自動対応します(techblog.asia-quest.jp: FigmaオートレイアウトでFlex/Grid実践例)。

【注意点】: グリッドフローは列数を「自動」にすると画面幅によって列数が変わるため、カラム数を固定したい場合はトラックサイズに固定値を入力する必要があります。固定値を使う場合はフレームサイズを変更した際に列幅の再調整が必要になるため、リサイズ頻度が高い場面では自動の方が扱いやすいです。

方法4: 余白ゼロ設定で全幅レイアウトを素早く実装

【対象】: ヒーロー画像や全幅バナーをグリッドで管理したいデザイナー

【手順】: 列グリッドの設定パネルで「余白」の数値フィールドをクリックし、0を入力します(10秒)。「ストレッチ」アライメントを選択してグリッドがフレーム全幅に広がることを確認します(10秒)。全幅レイアウトの確認後、コンテンツエリア用の別グリッドを+で追加して両方を同時運用します(1分)。

【ポイントと理由】: 余白ゼログリッドとコンテンツグリッドを2層で運用すると、全幅要素と中央配置コンテンツを同一フレームで管理できます。グリッドを外してしまうと全幅エリアとコンテンツエリアの境界線を再設定するコストが発生します。2層運用であれば境界が常時可視化されており、視覚的な判断速度が上がります。

【注意点】: 2層グリッドを運用する場合、スタイル化する際はそれぞれ別のスタイルとして保存する必要があります。1つのスタイルに複数のグリッドをまとめることはできません。

方法5: モバイルと共通プリセットで切り替えを短縮

【対象】: デスクトップとモバイルを並行してデザインするフリーランス

【手順】: デスクトップ用スタイル(12カラム・余白80・ガター24)とモバイル用スタイル(4カラム・余白16・ガター16)をそれぞれ保存します(各1分、合計2分)。モバイルフレームに切り替えた際にスタイル一覧から「Mobile 4col」を選択して適用します(30秒)。両スタイルをチームライブラリで共有し、ファイルをまたいで使えるように設定します(5分・初回のみ)。

【ポイントと理由】: 用途別に専用スタイルを用意することで、デバイスを切り替えるたびの設定変更が不要になります。モバイルに80pxの余白を使うと画面の大部分が余白になり、コンテンツ表示領域が圧迫されます。デバイスサイズに応じたプリセットを最初に用意しておくことで、画面サイズ設計の判断コストが下がります。

【注意点】: チームライブラリの公開はFigmaのプロプラン以上で利用可能です。スタータープラン(個人無料プラン)では共有範囲がファイル内のみに限定されます。フリーランスで1人作業の場合は、ファイル内スタイルでも十分運用できます。

CHECK

▶ 今すぐやること: 現在作業中のデスクトップフレームのグリッド設定をスタイルとして保存し、「Desktop 12col」という名前を付ける(2分)

Q: スタイル化したグリッドは他のFigmaファイルでも使えますか?

A: チームライブラリとして公開すれば、同一ワークスペース内の他のファイルで使用できます。ファイルを開いた状態でライブラリを有効化し、スタイルの一覧から選択して適用します。

Q: 方法1〜5のどれから始めるのが効率的ですか?

A: 方法1(スタイル登録)から始めてください。他の方法の効果をスタイル化して保存することで、すべての方法が相乗的に活きます。

Figmaグリッドはスタイル化で5分を節約

設定を1つ保存すれば、以降の全案件に使い回せます。

グリッドスタイルの保存手順は3ステップ

グリッドを設定したフレームを選択した状態で、右サイドバーのレイアウトグリッド欄右側にある4つの正方形のアイコンをクリックします。表示されたパネルの右上にある「+」をクリックすると名前入力フィールドが現れます。「Desktop 12col」「Mobile 4col」のような識別しやすい名前を入力してEnterを押すと、スタイルとして保存されます。保存後は同じアイコンから一覧表示されるようになり、別のフレームを選択した状態でアイコンをクリックするとスタイルを適用できます。フリーランスの開業資金の準備と同様に、初回の設定に時間をかけても、スタイル化後は同一設定の適用を素早く完了できます(Figma公式ヘルプ: レイアウトガイドを作成)。

チームライブラリへの公開でファイルを横断して活用

保存したグリッドスタイルは、チームライブラリとして公開することで同一ワークスペース内の全ファイルで参照できるようになります。公開手順は、左上のFigmaメニューから「ライブラリ」を選択し、スタイルが保存されたファイルを「ライブラリとして公開」するだけです。公開後は他のファイルのレイアウトグリッドスタイル一覧に表示されます。フリーランスで同じクライアントの案件を複数ファイルで管理している場合、グリッド設定の統一に役立ちます。

既存スタイルの更新は全適用先に自動反映

スタイルの設定値を変更したい場合、右サイドバーのスタイル一覧から該当スタイルを右クリックして「スタイルを編集」を選択します。変更を保存すると、そのスタイルを適用している全フレームのグリッド設定が自動で更新されます。「12カラムを16カラムに変更する」といった大規模なグリッド変更を1箇所の操作で全フレームに反映できます。スタイルを削除すると適用先のグリッドが外れるため、削除の前に適用先のフレーム数を確認してください。

グリッドスタイルを使うようになってから新規ファイルの立ち上げ時間が短縮されたと語るフリーランスデザイナーもいます。定期クライアントの案件で毎回同じ設定を使い回せることが、作業効率を大きく改善した理由だといいます(fumufumuui.com: Figma新機能グリッドの使い方まとめ)。

こうした時間管理アプリとの組み合わせも、フリーランスが生産性を高める上で有効な手段のひとつです。

CHECK

▶ 今すぐやること: デスクトップ12カラムとモバイル4カラムの2種類のグリッドスタイルを保存し、それぞれ「Desktop 12col」「Mobile 4col」と命名する(4分)

Q: スタイルを誤って削除した場合は復元できますか?

A: Figmaには削除したスタイルを直接復元する機能はありません。バージョン履歴(Ctrl+Alt+S / Cmd+Option+S)から過去の状態に戻すことで復元できます。重要なスタイルを変更・削除する前にバージョン履歴のコメントを付けておくと安全です。

Q: スタイル名の変更は後からでもできますか?

A: 可能です。右サイドバーのスタイル一覧で対象スタイルを右クリックして「スタイルを編集」を選択し、名前フィールドを書き換えてEnterを押すと変更されます。適用済みのフレームに対しても問題なく名前変更が反映されます。

Figmaグリッドを使いこなす:12カラム設定で案件の手戻りをゼロにする

Figmaグリッドの核心は「フレームに列グリッドを追加して12カラムに設定する」この1操作です。レイアウトグリッド・レイアウトガイド・グリッドフローの3種を用途で使い分け、スタイル化で設定を再利用することで案件ごとの設定時間を最短化できます。

グリッドの仕組みを一度理解すれば、設定に迷う時間はなくなります。今日中に1つのスタイルを保存することが、以降のすべての案件への先行投資になります。

状況次の一歩所要時間
これからグリッドを初設定したいフレームを作成してレイアウトグリッドの+ボタンを押す2分
12カラム設定を確認したいカラム数を12、余白を80、ガターを24に入力する3分
設定を再利用できるようにしたいグリッドスタイルを保存して「Desktop 12col」と命名する4分
モバイル用も準備したい4カラム・余白16・ガター16のスタイルを別途保存する3分

Figma グリッド 使い方に関するよくある質問

Q: Figmaのレイアウトグリッドは無料プランでも使えますか?

A: 無料のスタータープランでもレイアウトグリッドの追加・設定・スタイル化は利用できます。スタイルを他のファイルと共有するチームライブラリ機能はプロプラン以上が必要です。個人作業であれば無料プランで十分です。

Q: Figmaグリッドの設定はエクスポート時に画像に含まれますか?

A: 含まれません。レイアウトグリッドはデザイン作業中のみ表示される視覚補助であり、PNGやSVGとしてエクスポートした際には一切表示されません。クライアントへの納品データにグリッドが残っていても問題はありません。

Q: 実務で12カラムと8カラムどちらを選ぶべきですか?

A: 汎用性の高さから12カラムを推奨します。8カラムは2分割・4分割には対応できますが、3分割(1/3レイアウト)に対応できません。記事ページやランディングページなど3分割が発生するWebデザインでは、12カラムの方が設計の自由度が高くなります。

【出典・参照元】

Figma公式ヘルプ: グリッドオートレイアウトフローを使用する – オートレイアウトグリッドフローの公式解説

Figma公式ヘルプ: レイアウトガイドを作成 – レイアウトガイドのスタイル化・再利用の公式解説

kohimoto.com: Figma レイアウトグリッド設定解説 – 余白・中央アライメント設定の解説記事

techblog.asia-quest.jp: FigmaオートレイアウトでFlex/Grid実践例 – グリッドフローを使ったカードUI配置の実践解説

Figmaのグリッドレイアウトの使い方と中央揃えのやり方 – グリッド追加操作の体験談

Figma スナップに関するコミュニティ投稿 – スナップ設定のトラブルシューティング体験談

fumufumuui.com: Figma新機能グリッドの使い方まとめ – グリッドスタイル活用の体験談

事務作業に時間を取られている方へ

フリーランスの働き方をLINEで受け取る

3日で初案件

登録1分・情報収集だけでもOK・ブロック自由

タップするとLINEの友だち追加画面が開きます

未経験から45日

フリーランス
Webデザイナーへ

無料セミナーに参加する →

所要60分・オンライン

PR提供: 日本デザインスクール(デザスク)

フリ転編集部 jpndesft
フリーランス専門メディア「フリ転。」編集部。独立・案件獲得・税務など、フリーランスが直面する課題をわかりやすく解説することを使命としています。

フリーランスデザイナーのためのキャリア・案件・税務情報をお届けしています

お問い合わせ →

人気キーワード

フリーランスの案件・単価を調べる

フリーランス求人を探す週1〜2日・リモートOKの案件を毎日自動収集職種別の単価相場を見る48職種の月額単価を実データから集計実務ツールを使う見積・請求書・税金計算など51種を無料で

カテゴリから記事を探す

フリーランスの独立術フリーランスの資金術フリーランス職種図鑑