【20分マスター講座】Figmaオートレイアウト機能！
WEBデザインツール Figma（フィグマ）の「オートレイアウト」機能の使い方に特化して解説しています🥳♪
オートレイアウトを使うとデザインの効率アップに繋がるので、是非積極的に使ってみてください😆❗️
🔽「Figmaの基本的な使い方」はこちら
• 【2024最新】30分マスター講座 Figm...
「コンポーネント」機能の動画作成中です...🙇
🎥 この動画の構成 🎥
00:00 Figma（フィグマ）オートレイアウト機能の使い方
00:52 1. 基本的な使い方
01:36 - 整列させる方向と位置
01:58 - 間隔と余白
02:22 - フレームのサイズ調整
03:26 - 要素の折り返し
04:19 - ギャップの自動調整
05:05 - 3つの詳細設定
06:11 2. レイアウトの組み方
07:28 - 最小幅・最大幅
08:43 3. パーツの作り方（カード型記事）
11:14 - 長文を考慮する
11:46 - 要素同士の間隔
12:07 - オススメプラグイン紹介（Ratios）
13:59 4. レイアウトに組み込む
✅ ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
kzread.info?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
/ hirocodeweb
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
---- パソコン ----
✅ 【 Apple 13インチMacBook Pro 2022 】
amzn.to/3bDPYmU
"最新M2チップ搭載！初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン？
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
#WEBデザイン #Figma #XD
Пікірлер: 15
webスクールのfigma動画の説明より分かりやすい... 今ちょうどオートレイアウト勉強してるので助かります！
@hirocode
Ай бұрын
そう言っていただけて嬉しいです😆❗️ありがとうございます🙇
急遽サイトデザインをすることになり、慌ててやり方を調べたところこの動画に辿り着きました。 figma様々で、素人でもそこそこの完成度でやり切ることができました。 作業を効率的に行えたのはHIROさんの紹介している複数のfigmaの使い方動画のおかげです。ありがとうございます！ コンポーネントについての動画もお待ちしてます！ （既にある程度自分で調べて使ってしまってはいますが！）
@motachino
23 күн бұрын
ひとつ質問なのですが、グループ化するとき「cmd+G」と「cmd+opt+G」を使い分けられてた気がするのですが、どういった違いがあるのでしょう？
@motachino
23 күн бұрын
「フレーム化」と「グループ化」の違いですね！ 自己解決しましたm(__)m
@hirocode
19 күн бұрын
すごいですね🤯❗️参考にしていただけて僕としても嬉しいです😆❗️
以前、僕のコメントの返信から推測するに、この使い方を聞いた者です。こういう応用編はタメになります、僕は初心者なので、まだ固定と可変、コンテナに応じた拡大を、場面場面で判断するのはできません。しかし、こういう例を挙げて頂いたおかげで、理解が進んだと思います。まだまだXDから乗り換えて間もなく、実践力に乏しいのですが、ひろさんの動画で春までにはFigmaマスターに慣れるよう精進します！
@hirocode
5 ай бұрын
嬉しいコメントいただきありがとうございます😭❗️ Figma使いこなせるよう応援してます😆❗️
ありがとうございます。
@hirocode
Ай бұрын
こちらこそありがとうございます🙇❗️
すみません、Reactでのcssの当て方について質問させていただきたいです！ cssモジュールが素のcssぽくて好きなのですが将来廃止予定らしいのです 今学習中の教材でchakraUIを学びましたがソースコードがごちゃごちゃするし謎のキーワードばかりで最新cssを駆使したヒロさん風cssが当てられる気配がしません、、tailwindは自由度の点ではまだましですが似た理由で嫌いです 今の所styled-componentsが一番ましなのかなと思ってますがヒロコードさんはReactでcssをどのようにあてていますか？
@hirocode
4 ай бұрын
すみません、Reactやってたの2年前くらいなので今のReactについていけてません😭💦 ただ、僕的にも概念や保守性考えるとstyled-componentsが理想的っぽいように思ってます！
いつもためになる動画をありがとうございます…！私はweb制作を学んでる者で、お聞きしたいのですが(この動画に関係なくてすみません💦)作るスキルを身につけたあと、ポートフォリオがあっても実績がないとなかなかお仕事もらいにくいのかなっておもうので、もし可能でしたら仕事の取り方のコツとかありましたら解説動画をリクエスト致します🙇 私はまず副業で仕事を請けたいと思っています。
@hirocode
2 ай бұрын
コメントありがとうございます☺️❗️ その辺動画にできそうか検討してみます😆❗️
@mimi-uy7bv
2 ай бұрын
@@hirocode ご検討ありがとうございます。これらも楽しみに拝見します！