未経験Figma、最初に覚えるのは全体の2割

前回、「未経験からWebデザイナーになるには、根性じゃなくて順番」という話を書きました。デザイン基礎→ツール操作→ポートフォリオ→案件受注→実務で磨く、という流れと、ツールはPhotoshop(月額3,000円程度)よりFigma(無料プランあり)から始めるのが現実的、というところまでが前回のおさらいです。

今回はその中の「ツール操作を習得する」の部分、つまりFigmaを実際に触るときの順番だけを深掘りします。

Figmaは覚えることが多すぎる問題

Figmaを開くと、正直ちょっと圧倒されます。画面遷移を作る機能、コンポーネントを使い回す機能、複数人で同時編集する機能…できることが多すぎて、「全部覚えないと仕事にならないのでは」と思ってしまう。

でも前回書いた通り、最初のバナーやLP制作という単発案件で必要なのは「バナー制作に使う2割の機能」だけです。ここでいう2割が具体的に何かを、私なりに順番として整理してみます。

覚える順番①〜④(納品までに必要な操作だけ)

**①フレーム(土台のサイズ設定)**
案件では「バナーサイズ1200×628px」のように寸法が指定されます。まず正しいサイズの土台を作れないと、そもそも納品物が作れません。最初に触るべきはここです。

**②テキストと基本のタイポグラフィ**
フォント・サイズ・行間の設定です。前回の「タイポグラフィ(文字の見た目)」の話がここで実際の操作になります。凝った演出は後回しでよく、まずは読みやすい文字を配置できれば十分。

**③シェイプ・色・画像配置**
四角形や円で背景を作り、色を塗り、画像を置く。レイアウトと配色を「実際に手で組む」工程です。ここまでできれば、バナーの見た目自体は完成します。

**④書き出し(エクスポート)**
これを覚え忘れる人が意外といます。作った画像をPNGやJPEGとしてファイルに出力する操作で、これができて初めて「納品」が成立します。デザインがどれだけ良くても、書き出し方を知らなければ発注者に渡せません。

この①→④の順番だけで、バナー1枚を作って納品する、という一連の流れが一通り体験できます。

覚えなくていいもの3つ(私の解釈です)

逆に、最初の案件では後回しでいいと私が考えるものを挙げます。

• オートレイアウトやコンポーネント：同じパーツを複数画面で使い回すための機能。アプリのUIデザインのように画面数が多い案件で威力を発揮しますが、バナー1枚・LP1枚の単発案件では出番がほぼありません。

• - プロトタイピング(画面遷移をつなぐ機能)：ボタンを押したら次の画面に移る、という動きを作る機能です。前回書いた「UI/UXデザイン」の領域で必要になりますが、最初のバナー・LP案件には関係ありません。

• - 共同編集・複数人でのファイル管理：チームで使う前提の機能なので、一人で受注する最初の案件では優先度が低いです。

これらは「いつか必要になる」機能であって、「最初の納品に必要」ではない。ここを混同すると、Figmaの全機能を覚えようとして挫折します。

私の結論:最初の1週間で目指すゴール

前回、「今週Figmaの無料プランに登録して基本チュートリアルを1時間」というのを活用アイデアとして挙げました。今回はもう一歩具体化します。

その1時間で目指すのは、①フレームを作る→②テキストを乗せる→③シェイプと画像でレイアウトを組む→④PNGで書き出す、を一往復すること。これだけで「バナー1枚を作って、納品できる形にする」までの骨組みが体験できます。

慣れてきたら、既存のバナーを見ながら同じ手順で「模写」してみる。これは前回書いた模写の練習と同じで、①〜④の操作を繰り返し体に覚えさせる工程になります。

バナー案件の相場は3,000〜10,000円程度(前回書いた通り)なので、①〜④さえ押さえれば、その相場の中で戦える最低限の技術は揃うことになります。逆に言えば、オートレイアウトやプロトタイピングを覚えるための時間は、最初の受注には直接つながりません。

まとめ

Figmaを触り始めるとき、機能の多さに圧倒されて「全部覚えなきゃ」と思う必要はありません。①フレーム→②テキスト→③シェイプ・色・画像→④書き出し、この順番だけで最初のバナー案件は納品できます。オートレイアウト・コンポーネント・プロトタイピングは、案件をこなしてから必要になったタイミングで覚えれば十分です。

まずは今週、フレームを作ってテキストを乗せて、書き出すところまでの1往復を試してみてください。

このシリーズの元記事はこちら:
→ https://note.com/ai_aichannel/n/n520c93e0eb27 （未経験→在宅Webデザイナー Figma活用術）

今週のAIニュースをまとめて読む

1週間分の重要ニュースと「私たちへの影響」を1本にまとめました。
→ https://note.com/ai_aichannel/n/n64984623f255 （【週刊AIまとめ】Claude Code副業と単価114万円の週）

次に読むならこれ

→ https://note.com/ai_aichannel/n/nf177c1054fb4 （AI副業の学習、スクール30万円は必要?独学3000円で試す）
→ https://note.com/ai_aichannel/n/n9c033411164f （AI副業と本業両立、作業時間30%減らす6ステップ）
→ https://note.com/ai_aichannel/n/n91cfc91aba11 （ココナラで売れない原因は価格じゃない3つの盲点）

毎日のAIニュースはこちら

AIの「いま」を毎日やさしくまとめています。
→ https://ainews.mironcorp.com （AIちゃんねる）