Figmaの使い方【実践編】WEBデザインを作りながら学ぼう！
Тәжірибелік нұсқаулар және стиль
★有料動画講座をリリース！！
＝＝＝＝＝＝＝＝＝
KZreadよりもっと丁寧に、手とり足取り学びたい方へ
デザイン素材をダウンロードして、動画を見ながら一緒にデザイン作成して学べる講座を用意しました！
すでに各講座の受講者は合計5000人を超えて好評頂いてます！
↓お得な割引情報アリ↓
stand-4u.com/lp/video-course-...
＝＝＝＝＝＝＝＝＝
今回は「Figmaの使い方【実践編】WEBデザインを作りながら学ぼう！」という事で
実際にWEBデザインを作る工程を模写形式で見ながら、
「Figmaの基本操作」や「便利な機能の使いどころ」をチュートリアル的に解説します！
この動画一本で、Figmaを使ってWEBデザインをスタートできるので、
チャンネル登録したら、さっそく見ていきましょう！
ーーー
0:00 ダイジェスト
0:34 今回の動画の説明
0:58 今回作るデザイン
1:46 レイアウトグリッドの作成
2:52 ヘッダーの作成
7:26 メインビジュアルの作成
10:46 アイコン・ボタンの作成
15:05 色スタイルの作成
16:27 PNG画像の色を変える裏技
17:46 見出しの作成
19:45 Unsplashプラグインの使い方
22:09 オートレイアウトボタンの作り方
25:58 テキストスタイルの設定
27:47 フッターの作成
28:04 コンポーネントの入れ子
30:02 下層ページの作成
32:29 プロトタイプの作成
34:11 プロトタイプの共有
34:34 Figmaの使い方実践編のまとめ
ーーー
○関連動画
▼【日本語版】Figmaの使い方 ｢完全攻略｣ 基本編を分かりやすく解説！
• Figmaの使い方 ｢完全攻略｣ 基本編を分...
▼figmaコンポーネント機能の使い方！とインスタンスの挙動
• figmaコンポーネント機能の使い方！とイ...
▼figmaオートレイアウトの使い方！レスポンシブパーツの作り方
• figmaオートレイアウトの使い方！レスポン...
▼Figmaの時間短縮できる！オススメプラグイン10選【2022】
• Figmaの時間短縮できる！オススメプラグイ...
▼Figmaの新機能「セクションツール」の使い方と使いどころ
• Figmaの新機能「セクションツール」の使い...
●当動画の関連ブログ記事：「Figmaの使い方」図解でわかりやすく（基本編）
stand-4u.com/web/tool/figma.html
このように当チャンネルではWEBデザイナーやWEB制作者になりたい方に役立つ動画を「初心者の方に分かりやすく」をモットーにアップしますので、チャンネル登録して頂けると励みになりますので、よろしくお願いします！
▼チャンネル登録
/ @ustand-4u209
ーーー
▶ STAND4U ブログ：stand-4u.com/
▶ 公式 Twitter： / stand_4u_
▶ 公式 Instagram： / stand_4u
ーーー
#figma使い方
#figmaWEBデザイン
#figma日本語版
#figmaスタイル
#figmaオートレイアウト
#figmaコンポーネント
#チュートリアル
#figmaレスポンシブデザイン
#webデザイナー
#webデザイン
#模写
#photoshop
#xd
#web制作
#figma実践
Пікірлер: 18
初めまして！内容が有料級すぎてビックリしました！ 本当にありがとうございます☺️！ すみません2点質問なのですが、 ①グリッドレイアウトを作る時の余白は計算して入力してますか？大体ですか？ 初心者でグリッドレイアウトを初めて使うもので💦 ②バリアントについて質問なのですが、バリアントしたコンポーネント（hoverを表現したもの等）は フレーム外に置いておきますか？どこかに保存するんでしょうか？
@ustand-4u209
Жыл бұрын
コメントありがとうございます！ ①余白は基本的に計算しますが、大体でやる時もあります。そのあたりは人によるかもしれません。 ②動画では解説していませんでしたが、コンポーネント自体を、違う「フレーム」や「セクションツール」でコンポーネント置き場みたいなものを作って置いておくと良いかもしれません。このあたりを含めさらに詳しい内容は、概要欄にあるUdemy講座で解説しているので、よかったらサンプルだけでも見ていってください〜！
@hirune_camp
Жыл бұрын
お返事遅れてしまい、すみません！ありがとうございます✨ Udemyもされているのですね！のぞいてみます！本当にありがとうございます！
大変わかりやすくて勉強になります。 ちなみに質問ですが、ミスした場合にミス前の状態に戻るにはどうすれば良いのでしょうか？ パワポのような戻る機能はfigmaには備わっていませんか？
@ustand-4u209
Жыл бұрын
アンドゥ機能の事でしょうか？ Macならcmd + Zで、Winなら ctrl + Zで、一つ前の作業に戻れますよ！
@user-ne7hw4sl9y
Жыл бұрын
@@ustand-4u209 ショートカットキーで対応するのですね。 ありがとうございます。 助かりました！
@ustand-4u209
Жыл бұрын
@@user-ne7hw4sl9y はい、その通りです！頑張ってくださいね！
こちらで使用されている画像やアイコンを共有して頂くことは可能でしょうか？ チュートリアルとして同じ作業をしながら学びたいので、本動画使用されている同じ画像とアイコンを使用しながら学べたら分かりやすいと思いお願いさせていただきました。
@ustand-4u209
Жыл бұрын
コメントありがとうございます！規約上、素材を二次配布することはむずかしいのですが、アイコンは「icooon-mono」というサイトで、写真は「unsplash」というサイトでダウンロードできますので、一度探して頑張ってみてください！
間隔を空けて配置とスクロール位置を固定が 見当たらないのですが、バージョンが違うのでしょうか？？ その場合どうしたら良いでしょうか？
@ustand-4u209
8 ай бұрын
そうですね、アップデートで掲載位置が変わりました。「間隔を開けて配置」という名前はなくなり、プロパティパネルのオートレイアウトの部分の間隔の設定を「自動」を選ぶ事で同様の設定になります。スクロール位置を固定は、プロトタイプパネルの「スクロールの動作」の部分で設定できます。
こんにちは！ また初歩的な質問失礼します（ ; ; ） 14:00あたりのアイコンを複製している所は、ドラッグで複製しているように見えるのですが、普通にコピーアンドペーストでやっているだけですか？それとも何かショートカットキーがありますか？？
@user-tg4wv8oy4m
Жыл бұрын
13:40くらいの所でした！
@ustand-4u209
Жыл бұрын
コメントありがとうございます！ そうですね、動画では説明が省かれていますが、Macでは「optionキー」（Windowsだとaltかな）を押しながらドラッグすると、コピーしながら移動ができるんです。 これはFigmaに限らず、Adobe系ソフトなんかでも同じようにできるので、覚えると便利ですよ！
@user-tg4wv8oy4m
Жыл бұрын
@@ustand-4u209 そうなんですねー！！ありがとうございます♡ やってみます。忙しいのに初歩的な質問にお答え頂きありがとうございます（ ; ; ）
@ustand-4u209
Жыл бұрын
@@user-tg4wv8oy4m いえいえ、これからもいつでもご質問どうぞ！