#5｜Figmaの基本操作とイラスト作成
⚠️ preproからのお願い
このチャンネルは「修行の場」です。「コピペは原則禁止」。
自分の指でコードを打ち込み、エラーと向き合い、身体で技術を身につけていく。
一見タイパが悪いように見えて、それがジェネラリストへの一番の近道です！
〜デザインからプログラミングまで一人で開発できるジェネラリストへ〜
ICTの技術をトータルで学ぶYouTubeチャンネル「prepro -プリプロ-」へようこそ！
講師の東郷です。
第5回からは、いよいよデザイン制作のフェーズに突入します！
「プログラミングになぜデザイン？」と思うかもしれませんが、ユーザーにとって使いやすく、魅力的なアプリを作るためには、デザインの基礎知識は欠かせません。
今回は、プロの現場でも広く使われている無料のデザインツール「Figma」を使って、爆弾ゲームに使用するカードのデザインを一緒に作っていきましょう！
【この動画で学べること】
- Figmaの概要とアカウント登録方法
- 図形ツール（長方形・楕円）の基本的な使い方
- カラーコード（16進数）による色の指定と、便利な「スポイトツール」
- テキストの入力とタイポグラフィの設定
- オブジェクトの整列、グループ化、クリッピングマスク
【preproのカリキュラム方針】
preproでは、特定の言語に特化せず、Webアプリ開発の全体像を学びたい方をターゲットにしています。
本編： 15分でサクサク進むメイン講義
0.5回シリーズ： 習熟度の格差を埋め、しっかり学びたい人のための深掘り講義
この「レベル別階層構造」で、初心者から経験者まで自分のペースで学習を進めることができます。
もっと詳しく知りたい人のための
0.5回シリーズ
今回は、前回（#5｜Figmaの基本操作とイラスト作成）で作成したものに続く3つ目のイラスト、「爆弾カード」のデザインに挑戦します。
単に形を作るだけでなく、エンジニアが使いやすいアセット（素材）にするための「グループ化」や「レイヤー名の整理」など、現場で必須となるFigmaの作法についても詳しく解説。
また、作成したデザインを画像として書き出す「エクスポート」についても説明。
実際にWebで使うための準備をします。 初心者の方でも、動画を見ながら一緒に手を動かせば、Webサイトで使えるオリジナルのイラストが作れるようになります！
【この動画で学べること】
- Figmaの基本図形を組み合わせて少し複雑なイラストを作る方法
- デザインに柔らかさを出す方法（先端を丸型に変える）
- エンジニアが困らないための「グループ化」と「レイヤー命名」の重要性
- 作成したデザインをPNG画像として書き出す（エクスポート）手順