1. 概要
今回はLayout Gridを作成する内容となります。前回のサンプルを削除し、真っ白にしてフレームから作成していきます。
- PC
- Tablet
- Mobile
2. フレームの作成
2-1. フレームを選択
2-2. PC
2-2-1. Desktopを選択
- Design – Frame – Desktop -Desktop
2-2-2. Frameが表示
- 1440 × 1024
2-2-3. Frame名を変更
- 「Desktop – 1」⇒「PC」
2-3. Tablet
2-3-1. Tabletを選択
- Design – Frame – Tablet -iPad mini 8.3
2-3-2. Frameが表示
- 744 × 1133
2-4. Mobile
2-4-1. Phoneを選択
- Design – Frame – Phone -Android Large
2-4-2. Frameが表示
- 360 × 800
3. Layout Gridの作成
3-1. PC
3-1-1. Layout Gridを作成
- Design – Layout grid – 「+」をクリック
- Layout Grid Settingsをクリック
- 下記を変更
- 「Grid」⇒「Columns」
- Count「12」
- Color「5」%
- Type「Center」
- Width「64」
- Gutter「32」
- 下記を変更
3-1-2. このPC版のみLayout Gridをもう一つ追加
- Layout Grid Settingsをクリック
- 下記を変更
- 「Grid」⇒「Columns」
- Count「Auto」
- Color「10」%
- Type「Left」
- Width「32」
- Gutter「0」
- 下記を変更
3-1-3. スタイルとして登録
- Design – Layout Grid – Stylesをクリック
- Grid styles – 「+」をクリック
- Name「Layout-grid-PC」入力後、Create style
3-2. Tablet
3-2-1. Layout Gridを作成
- Layout Grid Settingsをクリック
- 下記を変更
- 「Grid」⇒「Columns」
- Count「8」
- Color「5」%
- Type「Center」
- Width「64」
- Gutter「24」
- 下記を変更
3-2-2. スタイルとして登録
- Grid styles – 「+」をクリック
- Name「Layout-grid-Tablet」入力後、Create style
3-3. Mobile
3-3-1. Layout Gridを作成
- Layout Grid Settingsをクリック
- 下記を変更
- 「Grid」⇒「Columns」
- Count「4」
- Color「5」%
- Type「Center」
- Width「64」
- Gutter「16」
- 下記を変更
3-3-2. スタイルとして登録
- Grid styles – 「+」をクリック
- Name「Layout-grid-SP」入力後、Create style
4. 3つのレイアウトグリッド
- PC
- Tablet
- SP
5. Layout gridを確認
5-1. Layout gridの確認（表示）方法
- 「Shift」＋「G」を同時に押す
- Toggle
6. 備考
今回はLayout Gridを作成する内容でした。
7. 参考
- Figma: The Collaborative Interface Design Tool
- Material Design
- Introducing Material Design Guidance for Large Screens – Material Design
- Start Here: 5 Exercises to Prepare Your App for Large Screens – Material Design
- Understanding layout – Material Design
- グリッドを使用したよくあるレイアウトの実現 – CSS: カスケーディングスタイルシート | MDN (mozilla.org)
- WEBデザイン・プログラミング関連の情報発信を手掛ける STAND4U (stand-4u.com)
投稿者プロフィール
-
開発好きなシステムエンジニアです。
卓球にハマってます。
