Figma

Figma（フィグマ）は、Webサイトやアプリのデザインだけでなく、ワイヤーフレーム・UI設計・画面の構造づくりにも使えるツールです。

ブラウザで動き、誰でも無料で始められるため、Web制作を学ぶうえで欠かせないツールのひとつになりました。

このカリキュラムでは、「見た目をつくる」というよりも、Web制作に必要な「設計」を理解するためのFigmaを中心に学びます。コーダー志望の方、プログラミングを学び始めた方にも役立つ内容を用意しています。

Figmaのカリキュラム一覧

これらを通して、デザインと構造の両方を理解し、“作る前に整理できるデザイナー／制作者” を目指します。

Figmaは、画像や色をつけなくてもワイヤーフレーム（設計図）だけを作ることが得意です。
初心者はここが一番やりやすく、構造理解も進みます。

レイヤー・オートレイアウトは、HTMLやCSSの構造（入れ子・余白・整列）と非常に相性が良いです。

「アプリ」など、入力フォームを含むアプリのUIにもFigmaは強いです。入力 → 結果の流れを視覚化でき、PHPやJavaScriptの学習へ自然につながります。

以下の2つのステップに分かれています。

Figmaの操作に慣れ、ワイヤーフレームを作るための基礎を学びます。

まずはここから学ぶのがオススメです。

学んだ操作を使い、実際に画面構成やアプリUIを設計していきます。

制作に近い内容なので、実務練習にも向いています。

Figmaは練習量がそのまま上達につながるツールです。少しずつ触りながら慣れていきましょう。

Figmaにログイン・インストール・セットアップは下記のページをご覧ください。