「YouTubeなどで独学でも学べる時代に、わざわざ専門学校でWebデザインを学ぶ意味ってあるの？」——いまWebデザインを始めようとする人が、最初にぶつかる疑問かもしれません。結論から言えば、学校で学ぶ意味はむしろ大きくなっています。学べる情報があふれるほど、「何を・誰のために・どう見せるか」を考える人の力と、基礎を体系立てて積む順番が、これまで以上に大切になるからです。
この記事では、まずWebデザインを学ぶうえで身につけたい基礎をやさしく整理し、そのうえで東洋美術学校 グラフィックデザイン科 Webデザイナーコースの授業「Webデザイン基礎」で、実際に何をどう学ぶのかを紹介します。担当は、Web制作の現場経験が長く、最新ツールの研究にも積極的な 嶋田 智成先生。最後に、いまWeb制作の現場で注目されている最新動向（Figma MCP・Claude Code）にも丁寧に触れます。
そもそもWebデザインとは？学ぶべき3つの土台
Webデザインとは、ただ「きれいな画面をつくる」ことではありません。訪れた人が迷わず、目的を達成できるサイトを設計する仕事です。学び始めるなら、次の3つの土台を押さえると全体像がつかめます。
- サイトの仕組みを知る：Webサイトがどんな要素（ページ・画像・文字・リンク）でできていて、どんな流れで作られ、公開されるのか。
- 設計ツールを使えるようになる：いまの現場では Figma という設計ツールが主流。画面の見た目や操作を、コードを書く前に組み立てます。
- 使いやすさ（UI/UX）を考える：見た目（UI）と、使ったときの満足度（UX）の両方を意識して設計する力。
この3つは、独学だと順番がつかみにくい部分でもあります。専門学校では、これらを体系立てて段階的に学べるのが強みです。
設計ツール「Figma」とは？
近年のWebデザインで欠かせないのが Figma（フィグマ） です。Figmaは、ブラウザ上で動く設計・プロトタイプ制作ツールで、複数人で同時に編集できるのが大きな特徴。いまや国内外の制作現場で“標準ツール”のひとつになっています。
Figmaでできることをかんたんに整理すると——
- 画面のデザイン：文字・色・図形・画像を配置して、サイトやアプリの見た目をつくる
- ワイヤフレーム：「どこに何を置くか」を決める、画面の“設計図（骨組み）”をつくる
- プロトタイプ：実際に触って画面が切り替わる“試作品”をつくり、使い心地を確認する
- 共有・レビュー：URL一つでデザインを共有し、チームや先生から意見をもらう
東美のWebデザイナーコースでは、この Figma を1年次から基礎として学びます。
東美「Webデザイン基礎」で学ぶこと（授業の流れ）
Webデザイナーコース1年前期の授業「Webデザイン基礎」では、Webサイトの仕組みを学びながら、Figmaの操作を一から身につけ、最終的に自分でWebサイトのデザインを形にできるところまでを目指します。授業はおおまかに「基本 → 応用 → 実践」と段階的に進みます。
① Figmaの基本
最初は、Figmaの基本操作から。
- 描画：パスやシェイプ（線・図形）でパーツをつくる
- 色・テキスト：配色や文字組みの基本
- グリッド・レイヤー：要素をきれいに整列させる「グリッド」、重なりを管理する「レイヤー」の考え方
あわせて、Webページがどんな構成要素でできているか、モバイル（スマホ）とデスクトップ（PC）でレイアウトがどう変わるかも学びます。
② 応用：ワイヤフレームからプロトタイプまで
基本操作に慣れたら、より実務的な工程へ。
- ワイヤフレーム：いきなり装飾するのではなく、まず情報の配置（骨組み）を設計する
- ビジュアルデザイン：色や写真、あしらいで見た目を仕上げる
- インタラクション／プロトタイプ：ボタンを押すと画面が切り替わる、といった“動き”を設計し、実際に触れる試作をつくる
- 書き出し・共有：制作したデザインを共有・レビューできる形で出力する
「ワイヤフレームで骨組み → ビジュアルで仕上げ → プロトタイプで検証」という、現場と同じ手順を体験できるのがポイントです。
③ 実践：デスクトップとスマホ、両方のサイトをデザイン
仕上げは実践です。トップページ・一覧ページ・詳細ページといった複数ページの構成や、ページ間の移動（遷移）を、デスクトップ向けとスマートフォン向けの両方でデザインします。最後は最終課題に取り組み、Web UX/UIの考え方、サイト公開までの流れ、Webで扱える画像の種類と特性、動きのある表現（モーション）まで視野を広げます。
コードは「ノーコード」から無理なく
「Webデザインにはプログラミングが必須では？」と不安に思う人もいるかもしれません。東美のWebデザイナーコースでは、Wix Studio や STUDIO といった“ノーコード”ツールを使ってWeb制作を体験します。
ノーコードとは：コードを自分で書かなくても、画面の操作でWebサイトを作れる仕組みのこと。
ノーコードツールで実際にサイトをつくりながら、その裏側で動いている HTML（構造）と CSS（見た目）の基礎的な原理を理解していきます。いきなり全部をコードで書くのではなく、「作れる体験」から入って、仕組みの理解につなげる——初学者が挫折しにくい学び方です。
担当は、現場と最新ツールを知る嶋田智成先生
この「Webデザイン基礎」を担当するのが 嶋田 智成先生です。
嶋田先生は2004年から10年以上にわたりWeb・ITの技術的な仕事に携わり、専門書の執筆や、専門学校でのWebマーケティング指導も行ってきました。2015年には海外旅行メディア「Fish&Tips」を立ち上げ、月間25万PVのメディアに育てた実績があります。さらに、海外の最新ツールをいち早く取り入れ、制作や改善に活かせないかを日々研究しているのが嶋田先生の持ち味です。
「現場で本当に使われている道具を、基礎から正しく」。この姿勢が、東美のWebデザイン基礎の土台になっています。
道具より先に、「設計の基礎」を
Webデザインのツールは年々進化し、便利な機能やAIの活用も急速に広がっています。それでも変わらないのは、「何を・誰のために・どう見せるか」を考える力です。
ツールはあくまで手段。配色やレイアウトの原則、情報を整理する力、使う人の気持ちを想像するUI/UXの視点——こうした設計の基礎があってこそ、新しい道具も活きてきます。東美が大切にしているのは、最新ツールを“使いこなす前提”となる、この基礎力です。
まとめ
- Webデザインは「仕組みの理解・ツール操作・UI/UX」の3つが土台。
- 東美Webデザイナーコースでは、1年次から実務標準の Figma を基礎から学び、ノーコード＋HTML/CSSの基礎まで無理なく進みます。
- 担当の嶋田先生は、現場経験と「最新ツールをいち早く試す」研究姿勢を持つ講師。
- ツール操作にとどまらず、設計の基礎力を重視しています。
実際の授業の雰囲気は、体験入学・オープンキャンパスで確かめられます。
【参考】いま現場で注目の最新動向：「Figma MCP」と「Claude Code」
Webデザインの現場では近年、Figma と AIをつなぐ新しい手法が注目されています。少し専門的ですが、知っておくと「これからのWeb制作の流れ」が見えてきます。
MCPとは？
MCP（Model Context Protocol／モデル・コンテキスト・プロトコル） とは、AIがさまざまなツールやデータと安全にやり取りするための“共通の決まりごと（標準規格）”です。これまでAIごと・ツールごとにバラバラだった連携を、共通の“接続口”でつなげるイメージです。
Figma MCP Server × Claude Code でできること
Figmaが提供する Figma MCP Server を使うと、AIコーディングツールの Claude Code（Anthropic社のAI）などが、Figma上のデザイン情報（コンポーネント・配色・レイアウトなど）を読み取り、選んだ画面からコードを生成できます。さらに逆方向で、できあがったWeb画面を編集できるFigmaのデザインに戻すことも可能です（出典：Figma公式）。
つまり、これまで時間のかかっていた「デザイン → コード化」の往復が、大きく短くなる可能性があるということです。Figma MCP Server は VS Code・Claude Code・Cursor など複数のツールに対応し、現在はベータ期間として無料で試せます。
なぜ学ぶ人にも関係するの？
こうした仕組みが広がると、デザイナーとエンジニアの境界はゆるやかになり、「設計（Figma）からそのまま動くものへ」という流れが一般的になっていくと考えられます。とはいえ、AIが出力したデザインやコードが本当に良いかを判断するのは人。だからこそ、Figmaの基礎やUI/UXの考え方を身につけておくことが、これからますます大切になります。
東洋美術学校のWebデザイナーコースでも、こうした動向に注目しています。ただ、ツールがどれだけ進化しても、その価値を見極めて使いこなすのは“基礎を持った人”。Figmaの操作からUI/UXの考え方まで、確かな土台を体系立てて学ぶ意味は、これからますます大きくなっていきます。
