初心者向けFigmaの使い方：Webデザインをトレースしてみよう
ฝัง
- เผยแพร่เมื่อ 19 พ.ค. 2021
- 時間と場所にとらわれない「クリエイティブで自分らしい働き方」を手に入れませんか？
クオリティの高いWebデザインスキルを軸に、フリーランスとして安定的に稼ぐためのスキルを学ぶ、６ヶ月間のオールインワンプログラムはこちらから。プロのデザイナーから直接フィードバックやを受けたりコーチングを受けながら、最短で実力派フリーランスWebデザイナーになることを目指します。
⬇️ Web Design Bootcampへはこちらからエントリー
designup-academy.com/wdb-apply/
--
Webデザイン未経験、初心者の方へ向けてFigmaの基本的な使い方を日本語で説明しています。実践としてWebサイトをトレースしながら基本操作を身につけてくださいね。
※ショートカットはMac向けに説明していますが、Windowsユーザーの方は基本的に⌘をControlに変えるだけで大丈夫だと思います。
🔽デスクトップ版Figmaのダウンロードはこちら
www.figma.com/ja/downloads/
🔽動画内で使われているロゴや画像のアセットはこちらからダウンロード
designup-academy.com/2022/06/...
🔽動画内のFigmaファイルへのリンク
(ファイルを開くと、画面上部中央にあるファイル名の横のアイコン﹀をクリックし、Duplicate（複製）で自分のドラフトへコピーしてからご使用ください。)
www.figma.com/file/RuplmNtxSj...
◽️◽️◽️◽️◽️◽️
💻 フリーランスWebデザイナーになるためのロードマップを無料ダウンロード。
designup-academy.com/roadmap/
💻 Figmaのショートカット表を限定公開中。今すぐ無料ダウンロード↓
designup-academy.com/figma-sh...
◽️◽️◽️◽️◽️◽️
使用ツール一覧：
designup-academy.com/tools/
ニュースレター登録：
designup-academy.com/newsletter/
Instagram：
/ mayuko_design
👉 About Mayuko | フリーランスデザイナー（Branding/Web/UI/UX）
時間と場所にとらわれない「クリエイティブで自分らしい働き方」を手に入れたい人たちをサポートしています✨
🇺🇸 NYで7年+のデザイナー歴
🌎 世界中のクライアントとフルリモートでお仕事中
🎓 Udemy受講生330名+
*いくつかのURLにはアフィリエイトリンクが入っています。有益な無料コンテンツを作成し続けるためにサポートをよろしくお願いします。
#Figma
#Figmaとは
実践的なデザインレクチャーとショートカットキーのご教授、ありがとうございました！実務に即したやり方、大変ためになりました！！！
よかったです！ショートカットキーをぜひ体になじませてみてください。作業が爆速します🙌
内容も分かりやすく、
話し方も自信がある感じで、
活舌もしっかりされていて、
これだけ長いのにあまり嚙まないで
素晴らしいと思います。
大変参考になりました。
嬉しいお言葉ありがとうございます😊
figma初心者です。知らないショートカットや機能がたくさん出てきて作業が効率的にできるようになってきました…！！本当にありがとうございます。
嬉しいです！作業の効率化のお役に立ててよかったです✨
最近figmaを勉強し始めました！とっても分かりやすく、声も聞き取りやすく、動画アップロードしてくださり感謝いたします🙇♀️ありがとうございます！がんばります！
コメントありがとうございます。わかりやすいと言っていただけてよかったです！Figmaがんばってください✨
すごくクオリティの高いチュートリアル動画でとても参考になりました！
他の動画も楽しみにしています！
ありがとうございます！他の動画もぜひ作って行きたいと思います！
素敵なデザインですね！
実際にどうやって使っているのかやってみせているのが好感度高いです。応援しています。
とても勉強になりました。ありがとうございました！
よかったです！ご感想ありがとうございます✨
おすすめでこの動画出てきたのがめちゃくちゃ助かりました〜。ありがとうございます〜！
お役に立ててよかったです〜✨
とても分かりやすかったです。
ご感想うれしいです！ありがとうございます。
figma は右も左も分からない状態でしたが、一緒に手を動かすことでイメージ掴めました。ありがとうございます！
そう言っていただいて嬉しいです！
めっちゃいい声…
デザインもfigmaも初学者です！
参考になるので、見返したりしています。
嬉しいです！参考になってよかったです✨
figmaの使い方がわからなかったのですごく参考になりました ありがとうございます
初めてfigmaでトレースしました。私にもできました！！
よかったです！ご報告ありがとうございます！
そがさん
聞き取りやすく、ショートカットキーを駆使されていて非常にわかりやすかったです！
ありがとうございます。
１点質問なのですが、レイアウトグリッドを作成するときは、どういった基準で作成されているのでしょうか。
基本PC版は16列 SP版は４列なんでしょうか。
参考になりました。仕事の範囲は何処までなのかと思いました。例えばReactに使えるコード生成とかです。
参考になりよかったです。私はFigmaではデザインでしか使わないのでちょっとコード生成などはわかりませんね。。。
初心者には早いのでスローにして視聴させていただきました。
初めまして！
いつかwebデザインもコーディングも出来るフリーランスになりたいと思っている未経験者です！
この動画をみて同じものを模写しました。
次にコーディングもしてみたいと思っているのですが、コーディングしたものをポートフォリオに使用させていただく事は可能でしょうか？
こんにちは！「Design: Mayuko Soga」と「こちらの動画のURL」をクレジットとしてポートフォリオに明記してくだされば大丈夫です！コーディング頑張ってください✨
動画を参考に勉強させていただいています。
26:10あたりのレクタングルと3つのカードリストをオートレイアウトするとき、レクタングルもリストと同様にレイアウトし直されてしまい、上手く背景としてその場に残ってくれません。リストと同様に垂直方向や水平方向にレイアウトし直されてしまうという感じです。
私はWindows版のデスクトップアプリで作業していますが、オートレイアウトのショートカットキーは同様にShift+Aです。仕様が異なるのでしょうか？なにか考えられる問題点があれば教えていただきたいです。
背景の長方形の要素もセレクトしてしまっていませんか？ロック（command+shft+L）すれば大丈夫だと思いますのでお試しくださいませ。
はじめましてエンジニアです。figmaを始めたばかりです。
Heroのところでcropして移動するとグレー部分も一緒に動くはずですが、Mayukoさんは動いていないので背景とか設定されているのでしょうか?
はじめまして！Hero画像のFrameは背景も何も設定していません。写真のグレー部分も動いているはずですが、シンプルな写真なので、動いてないように見えるのかもしれません。。
最初のオートレイアウトの際に画像と黄緑のレクタングルが離れて変な並びになるのですが、解決策などはありますか？
コメント失礼します。
figmaのデスクトップバージョンをダウンロードすることができなくて困っております。
Macにダウンロードしたものを開こうとするとmove to applications folderと出てきて開くことができません。
改善方法を知っていれば教えていただきたいです。
ダウンロードはできていますので、Macの「アプリケーション」フォルダーへFigmaのアイコンを移動させてください。
とってもわかりやすくありがとうございます😊
ちなみに作成したものをsnsに、掲載しても大丈夫なのでしょうか？
トレース作成したよ、ということでSNS掲載するということでしょうか？それでしたらこちらの動画へのリンクを貼っていただけると大丈夫です！
@@MayukoSoga ありがとうございます😊
載せる際はリンクも掲載させて頂きますね！
WINDOWS版が欲しかったです
6:40 グループ作る
レイヤーグリッドの設定は、なぜその数値なんでしょうか？
私が普段使っているグリッドの数値で、これでないとダメというわけではありません。Googleマテリアルデザイン や他のデザインシステムと似たような感じにしています。デスクトップは12コラムが汎用性が高いので使っていますが、２、３や４コラムで初めていいと思います。真っ白のキャンバスにデザインしていくのは難しいので、ある程度このような基本のグリッドを設定してからデザインをし始めることをおすすめしています。
グリッドの表示・非表示はshift + Gでした。
Mac使ってるんですね。失礼しました。
@@user-um4pu1jq2z MacはShftでもControlでもどっちでもいけるっぽいです！