デイトラ デザイン 初級編 Day6 動画解説のまとめ
デイトラ デザイン 初級編 Day6では
デザイン力の向上において大変重要な
トレース（模写）について解説されています。
このページでは
LPトレース、名刺トレースについての
動画解説をまとめました
■トレース練習の意義、目的とは！？
なぜすごく大変で、面倒くさい
トレースという勉強方法を行う必要があるのか？
1.Figmaの使い方に慣れる
2.余白の取り方や文字、画像のサイズ感を学ぶ
3.トレースするサイトを隅々まで、見てサイズや余白の取り方の法則を学ぶ
⇒トレース練習をすると実際に自分がデザインする時に
参考にして活かす事が出来る
※トレースをこなして慣れてくるといちいち数値を見なくても
感覚的にどの程度のサイズ感や余白を取るのが適切か分かる様になってくる
この感覚はちゃんと手を動かしてトレースをこなさないと身につかない
■LPトレース練習の流れ
1.お手本となるサイトを探す
※東フリ公式サイト
2.ページ全体のスクリーンショットを撮る
※Chrome拡張機能 GoFullPageでPNGで取得
3.PNGをFigmaに読み込む
4.PNGの大きさでアートボードを作成する
5.PNGをコピペして不透明度を50%程度に設定したものを
アートボードの最下層に配置する
6.透過配置したPNGを参考にアートボードにガイドラインを引く
※コンテンツ幅など
7.透過配置したPNGを非表示にする
8.ロゴや画像などの素材をダウンロードする
※アイコンはプラグインのIconifyから挿入してもOK
9.上から順にトレースする
※まず先に要素を全て配置する
10.透過配置したPNGを表示してロックする
※PNGは最下層に配置しているので隠れて見えない場合は
適宜、背景オブジェクトなども一旦透過させる
11.要素を調整する
※透過PNGを参考に各要素の配置、サイズ、色などを細かく調整する
12.透過配置したPNGを非表示にする
※透過した背景オブジェクトの不透明度も戻す
13.トレースを見本と組み比べて抜け漏れがないかチェックする
14.完成したトレースを分析する
※文字や画像サイズの法則、余白の取り方など
統一したルールを見つけ出す
■名刺トレース練習の流れ
1.、見本となる名刺をFigmaに読み込む
2.読み込んだ名刺データと同じ大きさでアートボードを作成する
3.読み込んだ名刺データを複製し不透明度を
50%程度に設定したものをアートボードの最下層に配置する
4.透過配置したPNGを参考にアートボードにガイドラインを引く
5.透過配置したPNGを非表示にする
6.ロゴや画像、アイコンなどの素材をインポートする
7.上から順にトレースする
※まず先に要素を全て配置する
8.透過配置したPNGを表示してロックする
※PNGは最下層に配置しているので隠れて見えない場合は
適宜、背景オブジェクトなども一旦透過させる
9.要素を調整する
※透過PNGを参考に各要素の配置、サイズ、色などを細かく調整する
10.透過配置したPNGを非表示にする
※透過した背景オブジェクトの不透明度も戻す
11.トレースを見本と組み比べて抜け漏れがないかチェックする
12.完成したトレースを分析する
※文字や画像サイズの法則、余白の取り方など
統一したルールを見つけ出す
■トレース練習に必要なFigmaの使い方
・アートボードではなくFigma自体の表示が小さくなってしまった場合は
一旦ログアウトして再度ログインし直すと改善する
・Ctrl+Dでコピペした要素を複製できる
・ラインのショートカットはL
※Shiftを押しながらドラッグで垂直水平に描画する
・背景はオブジェクトツールで作成する
・テキストはフォントファミリーを検証して入力するか、
長文はコピペする
・メニューなどの上下均等配置は整列ツールが便利
・何回も繰り返し使う色はパレットにスタイルとして登録すると効率的
・ラインの先端を円形にするにはCapをRoundにする
・四角オブジェクトのショートカットはR
・角丸は四隅オブジェクトのRadiusをドラッグするかCornerRadiusを入力
・同じパターンのまとまり要素は2つ目からは
まとめてコピペして中身を変更する方が効率的
・まとまり要素はグループ化してから複製すると後で分かりやすい
※ショートカットはCtrl+G
・まとまり要素はコンポーネント化してから複製しておけば
マスターを修正すると複製分もまとめて一括で修正される
・まとまり要素のコンテンツを修正してフレームに余白が出た場合は
Resize to fitボタンを押すと自動修正される
・ボタンやタグなど背景と文字がセットになった要素は
Add auto layoutを設定すると便利
・中央揃えのテキストは中央揃えを設定してから入力すると
センターラインに沿って入力される
・曲線図形や複雑な図形オブジェクトの作成は
ペンツールでパスを作成する
Figmaでマスターコンポーネントを見つける方法
1.子要素右クリック
2.Mein component→Go to maincomponent
Figmaでのガイドラインの引き方
1.Main menu→View→Rulersを表示する
2.ルーラーからアートボードにドラッグする
FigmaでのPNGの表示範囲の変更の仕方
1.PNGをダブルクリック
2.プルダウンのFill、Fit、Crop、TileからCropを選択
3.ドラッグして表示範囲を修正する)
Figmaでのマスクによる型抜き色変更のやり方
1.切り抜きたい対称の上にオブジェクトを作って乗せる
2.乗せたオブジェクトの透過値を適宜変更する
3.切り抜きたい対称と重ねたオブジェクトを両方選択しマスクボタンを押す
Figmaでの半円の作り方
①円の％を操作する
1.円オブジェクトを作成
2.右端のArcをドラッグ
※Sweapに直接数値を入力しても可
②マスクをかける
1.円オブジェクトを作成
2.四角オブジェクトを丸に半分被せて重ねる
3.円と四角を選択してマスクボタン
③パスを調整する
1.円オブジェクトを作成
2.円オブジェクトをダブルクリック
3.四隅のパスを調整する
■初心者がやりがちな3つの失敗パターン
・とにかく余白を埋めようとする
例：テキストが短い、画像が充実していない場合に
意味のないあしらいや背景の飾りを入れて
結果的にサイト全体がごちゃごちゃしてしまう
⇒ユーザに本当に伝えたいメッセージが伝わりにくくなる
・文字、画像を大きくしすぎる
余白を埋めようとすることとも関連するが
サイトの中で文字や画像の占める割合が大きくなる
⇒すべての要素が大きいと見た目がダサくなり
本当に伝えたいメッセージも分かりにくくなる
・カタマリを意識できていない
例：画像とテキストで一つのカタマリ（要素）なのに
バラバラに見える配置にしてしまう
※デザイン4原則の「近接」が出来ていない
■参考サイト
Figmaで簡単にテキストや図形を斜めに変形する方法（イタリック体）
https://wentz-design.com/post/figma-skewdat-plugin/
Figmaのメニューを日本語に翻訳してみました。
https://labs.neuromagic.com/entry/000055/