Figmaの使い方：初心者向けWebデザイン【2022年最新版】
時間と場所にとらわれない「クリエイティブで自分らしい働き方」を手に入れませんか？
クオリティの高いWebデザインスキルを軸に、フリーランスとして安定的に稼ぐためのスキルを学ぶ、６ヶ月間のオールインワンプログラムはこちらから。プロのデザイナーから直接フィードバックやを受けたりコーチングを受けながら、最短で実力派フリーランスWebデザイナーになることを目指します。
⬇️ Web Design Bootcampへはこちらからエントリー
designup-academy.com/wdb-apply/
◽️◽️◽️◽️◽️◽️
Figma初心者の方へ。Figmaの使い方をWebデザインをしながら学びましょう！無料で使える範囲を日本語で説明しています。
Figmaの使い方：初心者向けWebデザイン【2022年最新版】
00:00 - イントロダクション
00:36 - Figmaのダウンロード
01:04 - Figmaのインターフェイスの説明
01:21 - Figmaのコミュニティ
02:27 - Figmaのファイル構造、ネーミング
03:11 - Figmaの無料版の範囲
04:16 - デザインファイルのインターフェイスの説明
07:29 - Webデザインをやってみよう
07:50 - デスクトップの設定
08:34 - レイアウトグリッドの設定
10:43 - ヘッダー、ヒーローセクション
15:06 - オートレイアウト
18:16 - コンセプトのセクション、オブジェクトの結合
19:16 - オブジェクトと画像のマスク
20:20 - ボタンの作り方 従来の作り方 vs オートレイアウト
22:34 - コンポーネント
24:25 - プロダクト/トライアル/フッターのセクション
33:08 - モバイルの設定/レイアウトグリッド
34:42 - Figmaのアプリで実際の大きさを確認しよう
41:09 - モバイルのメニュー
44:16 - 最後にレイヤーを整理しよう
45:27 - コメント機能、チャット機能、URLのシェア
46:39 - 画像の書き出し、エクスポート
◽️◽️◽️◽️◽️◽️
リンク
練習用Figmaファイル：Japanese Cosmetics Web Design
www.figma.com/community/file/...
Figmaのショートカット表を限定公開中。今すぐ無料ダウンロード↓
designup-academy.com/figma-sh...
Figmaのダウンロード（デスクトップ）
www.figma.com/downloads/
Figmaのスマホアプリ（Figma and FigJam)
apps.apple.com/jp/app/figma-a...
◽️◽️◽️◽️◽️◽️
💻 フリーランス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日本語
Пікірлер: 26
Figmaに関して何かご質問や知りたいことがあったら下にコメントしてくださいね👇またなんでもご感想をいただけると嬉しいです✨
初めまして。仕事でFigmaを使用することになって手探りでしたが、こちらの動画で不明確だった部分を丁寧にご説明頂いてとても参考になりました。リピートさせていただきます。本当にありがとうございます。
@MayukoSoga
Жыл бұрын
はじめまして、動画がお仕事に役立ってよかったです〜✨
はじめまして！これからfigmaを使っていきたくて拝見させていただきました。とても分かりやすかったです！！ありがとうございます^ ^
初めまして。12月からデザインの勉強を始め、Figmaを使い始めました。細かなところまで解説いただき、本には載っていないような使い方の流れがとてもわかりやすく何度も見返しました！他の動画も観ます！ありがとうございました✨
@MayukoSoga
Жыл бұрын
お役にたてたようでよかったです！頑張ってください👍
初めまして！こちらの動画でfigmaの勉強をさせて頂きました！説明がすごく分かりやすかったです！ それと、質問なのですがこの動画を通して制作したものをfigmaの制作実績としてクライアントさんに見せても大丈夫でしょうか？ また、このような動画を楽しみにしています！
@MayukoSoga
Жыл бұрын
初めまして！コメントありがとうございます。 デザイナーとして、こちらのトレースしたものを制作実績としてクライアントに見せるということでしょうか？ その場合、こちらは制作実績として成立しないと思いますよ。 デザイナーさんであれば、トレース作品は実績にはせず、自分で0からデザインしたものを制作実績として出すことがいいと思います。 もし、デザイナーではなく、例えばFigmaを使ったことあるよ、ということを証明したいのなら、こちらの動画のリンクをトレース元として明記してくださればOKです。
@ryu4185
Жыл бұрын
ご返信ありがとうございます。 デザイナーというよりかは、figmaの使用経験の証明として使用する予定でした。ご丁寧なアドバイスありがとうございます！
はじめまして。 こちらの動画を通して初めてfigmaの勉強をスタートしました。とても分かりやすい作業工程で使い方の基本が身についます。 ありがとうございます。 ただ、モバイル版の工程に入ったところで難題にぶつかりました。。。 ブランドロゴ（コンポーネント）をコピペしてサイズ変更しようとした時に上手くいきません。 参考動画の画面と明らかに違うのは選択した際のサイズ表記がハグ×ハグになってるせいで、数値入力が出来ませんでした。 色々触った結果、フレームの幅と高さの数値の下にあるところを固定表示にすると数値入力が可能になったのですが、 サイズを変更しても実際の要素の大きさは変わりませんでした。 解決方法があれば教えていただけますと幸いです。 どうぞよろしくお願い致します。
@MayukoSoga
Жыл бұрын
はじめまして。動画が独学に使用できているようで、よかったです！ さて、ご質問に関してですが、プロパティに「ハグ×ハグ」が出ているということは、その要素が「オートレイアウト」になってしまっているということです。ロゴだけ配置する場合はオートレイアウトの機能は必要がありませんので、それを解除しましょう。 それには以下3つの解決方法がありますので、ひとつ選んでお試しください。 ・もう一度最初から「logoだけ」コピペする ・左のパネル「アセット」からローカルコンポーネント>Componentsからロゴの要素をドラック＆ドロップする ・レイヤーがオートレイアウトの入れ子状態になっているはずですので、レイヤーパネルにいき、logoレイヤーだけ移動し、Flameレイヤーを削除してください。 うまくいけば教えてくださいね✨
@sachisasa7803
Жыл бұрын
@@MayukoSoga 早速のご連絡を頂きありがとうございます！ ・左のパネル「アセット」からローカルコンポーネント>Componentsからロゴの要素をドラック＆ドロップする ↑こちらは何度か試していますが、幅、高さの数値入力は可能ですが、紫の枠が新たに作られるだけで サイズを変更しても実際の要素の大きさは変わりませんでした。 フレームの数値入力の横にある「縦横比を固定」のアイコン（「個別の角」のアイコン上）が表示されていないことも気になってます。。。 ・レイヤーがオートレイアウトの入れ子状態になっているはずですので、レイヤーパネルにいき、logoレイヤーだけ移動し、Flameレイヤーを削除してください。 こちらに関しては、私の認識レベルが乏ししく。。。上手く試すことが出来ませんでした。 ・もう一度最初から「logoだけ」コピペする これが一番最短の解決方法でした！ 色々な解決法をご提案頂きありがとうございました。
@MayukoSoga
Жыл бұрын
@@sachisasa7803 解決できたようでよかったです！
Photoshopとfigmaの両方を使えたら、強いですか？
@MayukoSoga
8 ай бұрын
Illustrator とphotoshop は基本としてまだまた使えたほうがいいです。両方使えるのは当たり前という感覚でいるといいかと思います。
36:44あたりからの、「左寄せにして・・・」のところがよく分からないのですが、 ラベンダーの画像（左）とテキスト（右）を選択した状態で、２つともを左に寄せているということでしょうか？ 👆だとすると、なぜその操作が必要なのでしょうか？
@MayukoSoga
Жыл бұрын
幅が広いデスクトップバージョンのフレームから、幅が小さいモバイルのフレームにコピーしているので、テキスト要素がフレーム外に出て、Figma上では見えなくなります。目で要素が見えないと操作しづらいので、画像とテキストを選択し左よせにしてフレーム内で見えるようにしました。
@yuri-yg1ru
Жыл бұрын
@@MayukoSoga なるほどそういうことなんですね。ありがとうございます！ あと、25:11 ~のところでされている、 シュッとドラッグしたした瞬間にそのエリアが拡大されている操作が動画内で度々出てきますが、どうやってされているのでしょうか？
@MayukoSoga
Жыл бұрын
@@yuri-yg1ru zを押しながらドラッグすると拡大できますよ〜
@yuri-yg1ru
Жыл бұрын
@@MayukoSoga すごい！できました✨ どこにも情報が無かったので助かりました。ありがとうございます🙇
初めまして！最近figmaを使い出したのですが、 画像を書き出す時、 なぜか、別々で書き出されてしまいます。 一つのフレームの中の文字や画像などがです。 何か設定などあるのでしょうか？ まとめて一つの画像として書き出したいのですが、どうすればよいでしょうか？
@MayukoSoga
Жыл бұрын
画像をグループ化（⌘G）すればできますよ〜！
@cozy7954
Жыл бұрын
@@MayukoSoga ありがとうございます😊！やってみます🔥
36:09
22:50
19:20