WEBデザイン
Figma -完成編-
INDEX
目次

0. できるようになること

  • WEBサイト・WEBアプリ・ロゴ・名刺・ポスターなどをプロのクオリティでデザインできるようになります！
  • デザインを作る上でFigmaをうまく使いこなせれば、基本的に何でも作れるようになります！

1. 学習のポイント

  • Figmaの操作は非常に直感的なので気楽に動かしながらやっていきましょう。まずは「Figmaの基本操作を学ぶ」で動画を見ながら実際に動かしてみましょう。
  • Figmaは直感で操作しやすいので、「とりあえず触ってみる」精神でやっていくのがおすすめです。
  • 困ったときは、Googleで「Figma XXXX」(XXXXにはキーワード)を入れるとほとんどの場合、解決策が出てきます。
    • WEBサイト開発を始めとするプログラミングにおいては「ググり力」が極めて重要なのでそこを鍛えていきましょう！
  • また、YouTubeで大変参考になる教材も多くあるので、困ったときにはYouTubeもうまく活用できるとよいでしょう！

2. Figma導入編

a. Figmaの概要

  • 世界各地のデザイン関係者約3,000人に聞いた「2022年に最も使いたいツール」のアンケートで1位となりました。 この「Figma」という無料で使えるデザインツールを完全習得していただきます。

b. 今後の学習の進め方

  • このページでは、まずFigmaの基本的な操作を網羅的に学習し、操作方法の理解をしてもらいます。
  • さらにショートカットキーを学ぶことで実際のデザイナーと同等のレベルまで作業効率を上げてもらいます。
  • Figma -ショートカット集- にショートカットキーが網羅的にまとまっているので、適宜辞書のような形で活用するとよいでしょう
  • その後 課題：ポートフォリオサイト構築 と 課題：LPデザイン制作 からより実践的なアウトプットを行い、一気に案件獲得が可能なレベルまでデザイン能力を引き上げます。

c. Figmaにログインする

早速ですが、「習うより慣れろ」が大事なので、Figmaにログインしましょう！ これから学ぶ教材もFigmaを実際に動かしながら作業を進めた方が効率が良いので、以下のページを参考にFigmaを開きましょう！

3. Figmaの基本操作を学ぶ

Figma操作が網羅的にまとまっている非常に良い教材です。

反面、網羅的にまとまっているからこそ動画を見るだけではすべてを活用できるようにはなりません。必ずセクションごとに動画を止めながら手を動かして身につけていきましょう！

使用教材①

【Figma初心者向け】わずか50分で基本的な使い方をマスター!(超入門講座)

via www.youtube.com
Figmaの紹介から、基本的な機能・操作方法を簡潔にすべて説明している非常に良い教材です。ショートカットキーは少なめに、直感的な操作方法で行なっているので、まずはこちらから確認しましょう！

使用教材②

初心者向けFigmaの使い方：Webデザインをトレースしてみよう

via www.youtube.com
一つのサイトを実際に作成する過程で基本的な操作を網羅しながら説明しています。

使用教材①よりも網羅性は劣りますが、ショートカットキーや便利機能を多く活用しているため、使用教材①で基本操作を網羅し、使用教材②で作業効率を上げていきましょう

どちらの教材も見ることで反復学習になるので、手を動かしながら見ましょう！

学習時の注意

  • 動画を見るだけになってしまうと効果がかなり減少します。
  • 動画を止めたりしながら必ず手元でFigmaを動かし、同じようなWEBサイトデザインを作りながら進めていきましょう。
アウトプットを増やすことが実践的なスキルを身につける最短ルートです！必ず同じサイトをFigma上で作成しましょう！

✅ 学習理解度チェック

チェックリストでわからないことがある場合には、再度動画に戻って不明点を解消しましょう。

適宜Q&Aもご用意していますので、その内容も確認するといいでしょう！

チェックリストでわからないことを完全に無くしてから次に進みましょう！
  • チーム機能
  • メンバーを招待して閲覧・編集権限を譲渡させることができる
  • Pages
  • 目的・用途に応じてページを変えることができる
  • Frame ショートカット
Q. Frameを出すショートカットキーは何ですか？
A. FキーまたはAキーでショートカットできます。
  • Layout Grid
  • Gridを設定することができる
Control + Gで表示 / 非表示が変更可能です。ショートカットを多用して作業を効率化しましょう！
  • 配置機能
  • 位置はドラッグまたはサイドバーで数値指定できる
  • WidthとHeightはドラッグまたはサイドバーで数値指定できる
Q. WidthとHeightとは何ですか？
A. 図形や写真等の横と縦の長さのことです。
Q. 図形の縦横比をそのままに大きさを変えたいのですが、どうすればよいですか？
A. サイドバーから比率をそのままに数値を変えるか、操作を”move”から”scale”に変更してからドラッグすることでできます。
  • 角度をドラッグまたは数値指定で変更できる
  • 図形の角に丸みを帯びさせることができる
  • テキスト
  • フォント変更をできる
  • フォントの太さを変更できる
  • フォントサイズを変更できる
  • 行間（文章同士の距離）を変更することができる
  • 文字間隔（隣り合う文字同士の距離）を変更することができる
  • 左揃え / 右揃え / 中央揃えを自由に変更できる
  • 上揃え / 中央揃え / 下揃えを自由に変更できる
  • 複製
  • Optionを押しながらドラッグで複製できる
  • Command + Dで複製できる
  • Command + Cでコピー / Command + Vでペーストできる
  • 移動
  • ドラックまたはサイドバーの数値指定で位置を変更することができる
Q. 平行に動かしたいときにはどうすればよいですか？
A. Shiftを押しながら移動させることで平行に移動させることができます。
  • AutoLayoutの使い方
  • Shiftを押しながら選択して複数アイテムを選択できる
  • Shift + AでAuto Layoutの表示を出すことができる
  • グループ化
  • グループ化をすることができる
動画内でもグループごとに名前をつけていたように、名前をつけることで編集・保存等が楽になります！
Q. グループ化をショートカットでやるにはどうすればよいですか？
A. Command + Gでグループ化ができます。
Q. グループ化の解除をショートカットでやるにはどうすればよいですか？
A. Command + Shift + Gでグループ化を解除できます。
  • Community機能
  • Unsplashをインストールした
  • プラグイン機能
  • Community > Pluginからプラグインを設定できる
  • Image
  • Fill・Fit・Tile・Cropを使い分けることができる
  • その他便利機能
  • 1つのアイテムを選択した上でOptionを押しながら他のアイテムにカーソルを合わせることでマージンがわかる
  • Control + Cでスポイトでカラーを抽出できる
  • コンポートネント機能を使用することができる
親コンポートネントのデザインを変更すると子コンポートネントのデザインも変更される便利な機能です！活用しましょう！
  • ペースト
  • command + C → command + Vで普通の貼り付けができる
  • Option command + C → Option Comamand + Vでスタイル（フォント・色）の貼り付け
  • WEBサイトデザインを作るときは必ずPC版とスマホ版の双方を作成すること
  • WEBサイトをスマホ版とPC版で作る必要がわかる
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH