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

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


Warning: foreach() argument must be of type array|object, false given in /home/xs610620/prepro.jp/public_html/wp/wp-content/themes/prepro/single-movie.php on line 11

#5.5|Figmaの基本操作


Warning: Undefined variable $youtubeEmbedCode in /home/xs610620/prepro.jp/public_html/wp/wp-content/themes/prepro/single-movie.php on line 35

⚠️ preproからのお願い

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

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

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

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

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

講師の東郷です。

今回は、前回(#5|Figmaの基本操作とイラスト作成)で作成したものに続く3つ目のイラスト、「爆弾カード」のデザインに挑戦します。

単に形を作るだけでなく、エンジニアが使いやすいアセット(素材)にするための「グループ化」や「レイヤー名の整理」など、現場で必須となるFigmaの作法についても詳しく解説。

また、作成したデザインを画像として書き出す「エクスポート」についても説明。

実際にWebで使うための準備をします。 初心者の方でも、動画を見ながら一緒に手を動かせば、Webサイトで使えるオリジナルのイラストが作れるようになります!

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

  • Figmaの基本図形を組み合わせて少し複雑なイラストを作る方法
  • デザインに柔らかさを出す方法(先端を丸型に変える)
  • エンジニアが困らないための「グループ化」と「レイヤー命名」の重要性
  • 作成したデザインをPNG画像として書き出す(エクスポート)手順

【タイムスタンプ】

  1. 00:00 今回の内容説明
  2. 00:36 爆弾イラストの作成開始
  3. 01:32 シェイプ(図形)を組み合わせたイラストの作り方
  4. 5:11 デザインに柔らかさを出す方法(先端を丸型に変える)
  5. 07:41 均等配置ツールの使い方
  6. 12:08 整列と錯覚を考慮した微調整
  7. 13:10 ⚠️ 超重要:グループ化と画像の書き出し(エクスポート)
  8. 15:55 レイヤー名がファイル名になる!効率的な素材整理術

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

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

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

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

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