初心者向けFigmaの使い方：Webデザインをトレースしてみよう
時間と場所にとらわれない「クリエイティブで自分らしい働き方」を手に入れませんか？
クオリティの高い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とは
Пікірлер: 49
実践的なデザインレクチャーとショートカットキーのご教授、ありがとうございました！実務に即したやり方、大変ためになりました！！！
@MayukoSoga
3 жыл бұрын
よかったです！ショートカットキーをぜひ体になじませてみてください。作業が爆速します🙌
内容も分かりやすく、 話し方も自信がある感じで、 活舌もしっかりされていて、 これだけ長いのにあまり嚙まないで 素晴らしいと思います。 大変参考になりました。
@MayukoSoga
Жыл бұрын
嬉しいお言葉ありがとうございます😊
すごくクオリティの高いチュートリアル動画でとても参考になりました！ 他の動画も楽しみにしています！
@MayukoSoga
2 жыл бұрын
ありがとうございます！他の動画もぜひ作って行きたいと思います！
figma初心者です。知らないショートカットや機能がたくさん出てきて作業が効率的にできるようになってきました…！！本当にありがとうございます。
@MayukoSoga
2 жыл бұрын
嬉しいです！作業の効率化のお役に立ててよかったです✨
最近figmaを勉強し始めました！とっても分かりやすく、声も聞き取りやすく、動画アップロードしてくださり感謝いたします🙇♀️ありがとうございます！がんばります！
@MayukoSoga
2 жыл бұрын
コメントありがとうございます。わかりやすいと言っていただけてよかったです！Figmaがんばってください✨
実際にどうやって使っているのかやってみせているのが好感度高いです。応援しています。
素敵なデザインですね！
おすすめでこの動画出てきたのがめちゃくちゃ助かりました〜。ありがとうございます〜！
@MayukoSoga
Жыл бұрын
お役に立ててよかったです〜✨
とても勉強になりました。ありがとうございました！
@MayukoSoga
2 жыл бұрын
よかったです！ご感想ありがとうございます✨
figma は右も左も分からない状態でしたが、一緒に手を動かすことでイメージ掴めました。ありがとうございます！
@MayukoSoga
Жыл бұрын
そう言っていただいて嬉しいです！
とても分かりやすかったです。
@MayukoSoga
2 жыл бұрын
ご感想うれしいです！ありがとうございます。
めっちゃいい声…
デザインもfigmaも初学者です！ 参考になるので、見返したりしています。
@MayukoSoga
3 жыл бұрын
嬉しいです！参考になってよかったです✨
初めてfigmaでトレースしました。私にもできました！！
@MayukoSoga
3 жыл бұрын
よかったです！ご報告ありがとうございます！
figmaの使い方がわからなかったのですごく参考になりました ありがとうございます
初心者には早いのでスローにして視聴させていただきました。
そがさん 聞き取りやすく、ショートカットキーを駆使されていて非常にわかりやすかったです！ ありがとうございます。 １点質問なのですが、レイアウトグリッドを作成するときは、どういった基準で作成されているのでしょうか。 基本PC版は16列 SP版は４列なんでしょうか。
動画を参考に勉強させていただいています。 26:10あたりのレクタングルと3つのカードリストをオートレイアウトするとき、レクタングルもリストと同様にレイアウトし直されてしまい、上手く背景としてその場に残ってくれません。リストと同様に垂直方向や水平方向にレイアウトし直されてしまうという感じです。 私はWindows版のデスクトップアプリで作業していますが、オートレイアウトのショートカットキーは同様にShift+Aです。仕様が異なるのでしょうか？なにか考えられる問題点があれば教えていただきたいです。
@MayukoSoga
Жыл бұрын
背景の長方形の要素もセレクトしてしまっていませんか？ロック（command+shft+L）すれば大丈夫だと思いますのでお試しくださいませ。
最初のオートレイアウトの際に画像と黄緑のレクタングルが離れて変な並びになるのですが、解決策などはありますか？
参考になりました。仕事の範囲は何処までなのかと思いました。例えばReactに使えるコード生成とかです。
@MayukoSoga
2 жыл бұрын
参考になりよかったです。私はFigmaではデザインでしか使わないのでちょっとコード生成などはわかりませんね。。。
はじめましてエンジニアです。figmaを始めたばかりです。 Heroのところでcropして移動するとグレー部分も一緒に動くはずですが、Mayukoさんは動いていないので背景とか設定されているのでしょうか?
@MayukoSoga
2 жыл бұрын
はじめまして！Hero画像のFrameは背景も何も設定していません。写真のグレー部分も動いているはずですが、シンプルな写真なので、動いてないように見えるのかもしれません。。
初めまして！ いつかwebデザインもコーディングも出来るフリーランスになりたいと思っている未経験者です！ この動画をみて同じものを模写しました。 次にコーディングもしてみたいと思っているのですが、コーディングしたものをポートフォリオに使用させていただく事は可能でしょうか？
@MayukoSoga
Жыл бұрын
こんにちは！「Design: Mayuko Soga」と「こちらの動画のURL」をクレジットとしてポートフォリオに明記してくだされば大丈夫です！コーディング頑張ってください✨
コメント失礼します。 figmaのデスクトップバージョンをダウンロードすることができなくて困っております。 Macにダウンロードしたものを開こうとするとmove to applications folderと出てきて開くことができません。 改善方法を知っていれば教えていただきたいです。
@MayukoSoga
3 жыл бұрын
ダウンロードはできていますので、Macの「アプリケーション」フォルダーへFigmaのアイコンを移動させてください。
とってもわかりやすくありがとうございます😊 ちなみに作成したものをsnsに、掲載しても大丈夫なのでしょうか？
@MayukoSoga
2 жыл бұрын
トレース作成したよ、ということでSNS掲載するということでしょうか？それでしたらこちらの動画へのリンクを貼っていただけると大丈夫です！
@yu_shirasaki
2 жыл бұрын
@@MayukoSoga ありがとうございます😊 載せる際はリンクも掲載させて頂きますね！
WINDOWS版が欲しかったです
6:40 グループ作る
グリッドの表示・非表示はshift + Gでした。
@user-um4pu1jq2z
10 ай бұрын
Mac使ってるんですね。失礼しました。
@MayukoSoga
9 ай бұрын
@@user-um4pu1jq2z MacはShftでもControlでもどっちでもいけるっぽいです！
レイヤーグリッドの設定は、なぜその数値なんでしょうか？
@MayukoSoga
3 жыл бұрын
私が普段使っているグリッドの数値で、これでないとダメというわけではありません。Googleマテリアルデザイン や他のデザインシステムと似たような感じにしています。デスクトップは12コラムが汎用性が高いので使っていますが、２、３や４コラムで初めていいと思います。真っ白のキャンバスにデザインしていくのは難しいので、ある程度このような基本のグリッドを設定してからデザインをし始めることをおすすめしています。