AI時代だからこそ、ホンモノの技術を。 プログラミング&デザインスクール「prepro(プリプロ)」のロゴ

〜現場で通用するフルスタックな解決力を手に入れる、
プログラミング&デザインスクール〜

#9|オートレイアウトとコンポーネント

⚠️ preproからのお願い

このチャンネルは「修行の場」です。「コピペは原則禁止」。

自分の指でコードを打ち込み、エラーと向き合い、身体で技術を身につけていく。

一見タイパが悪いように見えて、それがジェネラリストへの一番の近道です!

〜デザインからプログラミングまで一人で開発できるジェネラリストへ〜

ICTの技術をトータルで学ぶYouTubeチャンネル「prepro -プリプロ-」へようこそ!

講師の東郷です。

9回目は、UIデザインの効率を劇的に上げるFigmaの最重要機能「オートレイアウト」と「コンポーネント」を解説します 。

デザインの修正に時間がかかっていませんか?
要素が増えても自動でレイアウトが調整される仕組みや、一度作ったパーツを使い回す「コンポーネント」の概念を学ぶことで、プロのワークフローを身につけましょう。

この動画で学ぶことは、後のコーディング工程(HTML/CSS)における構造理解にも直結します。

【この動画で学べること】

  • 基本的なFigmaの使い方
  • オートレイアウトの使い方
  • コンポーネントの使い方
  • コンテナの概念

【タイムスタンプ】

  1. 00:00 今回の内容説明
  2. 00:31 前回の復習
  3. 01:19 オートレイアウトの作成方法
  4. 03:58 余白の調整(パディング:paddingと間隔:gap)
  5. 07:43 コンテナとサイズの関係
  6. 11:28 コンポーネントの作成方法
  7. 12:14 グリッドのオートレイアウト
  8. 13:15 インスタンスの活用とオーバーライド

【preproのカリキュラム方針】

preproでは、特定の言語に特化せず、Webアプリ開発の全体像を学びたい方をターゲットにしています。

本編: 15分でサクサク進むメイン講義

0.5回シリーズ: 習熟度の格差を埋め、しっかり学びたい人のための深掘り講義

この「レベル別階層構造」で、初心者から経験者まで自分のペースで学習を進めることができます。

もっと詳しく知りたい人のための
0.5回シリーズ

今回の本編の間を埋める「深掘り回」は8.5回目でもでてきた「単位」について、しっかり理解を深めていきます。

実は現場でも単位の違いを説明できないデザイナーやエンジニアが沢山います。

それぞれの特徴をしっかり学び、Webのデザインならではの単位とその使い分けを理解することで自分のイメージ通りにコーディングしやすいサイトを作ることができます。

また、pxを使ってはいけないのか?なぜremを使うか? その理由も解説していきます。

【この動画で学べること】

  • ピクセル(px)について
  • レム(rem)について
    エム(em)について
  • どこでどの単位を使うか?
  • なぜpxではなくremなのか?

【タイムスタンプ】

  1. 00:00 今回の内容説明
  2. 00:45 練習用新規ファイルの作成
  3. 01:31 ピクセル(px)の説明
  4. 04:27 レム(rem)の説明
  5. 07:13 エム(em)の説明とレム(rem)との違い
  6. 12:48 エム(em)とレム(rem)の使い分け
  7. 13:50 ピクセル(px)の使い所
  8. 14:08 なぜpxではなくremを使うのか?