デザインを無料で勉強するなら、まずAdobeの公式チュートリアルやドットインストール、Schooなど日本語のサイトで基本の操作と考え方を学び、次にSharpenやThe Bézier Gameといった練習サイトで手を動かす、という順番が始めやすい方法です。グラフィックデザインは「知識を読む」だけでは身につきにくいため、勉強サイトと練習サイトを組み合わせることがポイントです。この記事では、2026年9月29日に各公式ページで存在と無料の範囲を確認できた14のサイトだけを紹介します。
何から始めればいいかわからない方向けの進め方もあわせて解説します。料金や無料の範囲は変わることがあるため、利用前に各公式サイトでも確認してください。
デザインの勉強・練習サイト14選の比較表
| サイト名 | 種類 | 言語 | 無料の範囲（2026年9月時点） |
|---|---|---|---|
| Adobe公式チュートリアル | 勉強（Photoshop・Illustratorなど） | 日本語 | 無料（ソフトは別途必要） |
| PhotoshopVIP | 勉強（Photoshopのテクニック） | 日本語 | 無料 |
| Schoo | 勉強（デザイン・UI/UXの授業） | 日本語 | 生放送は無料（録画の見放題はプレミアム） |
| ドットインストール | 勉強（Figma・HTML/CSSなど） | 日本語 | 一部無料 |
| Udemy | 勉強（講座ごとの動画） | 日本語の講座あり | 有料講座が中心（無料レッスンもあり） |
| Progate | 勉強（Webデザインのコーディング） | 日本語 | 一部無料 |
| Figma Learn | 勉強（Figmaの使い方） | 日本語 | 無料 |
| Canva Design School | 勉強（グラフィックデザインの基本） | 英語 | 無料 |
| Sharpen | 練習（お題を出してくれる） | 英語 | 無料で使える |
| Daily UI | 練習（UIデザインのお題） | 英語 | 無料 |
| The Bézier Game | 練習（ペンツール） | 英語 | 無料 |
| Kern Type | 練習（文字の間隔） | 英語 | 無料 |
| Can’t Unsee | 練習（デザインの違いを見抜く） | 英語 | 無料 |
| Adobe Color | 練習（配色） | 日本語 | 無料 |
練習サイトは英語のものが多いですが、操作はシンプルで、説明文が読めなくても遊びながら使えるものがほとんどです。
デザインの勉強は何から始める？サイトで独学する4ステップ
- 作りたいものを決める：チラシやバナーなどのグラフィックデザインか、WebサイトやアプリのWeb・UIデザインかで、使うソフトと学ぶ順番が変わります
- ソフトの基本操作を覚える：グラフィックならPhotoshop・Illustrator、Web・UIならFigmaが代表的です。公式チュートリアルやドットインストールで、基本操作を一通り触りましょう
- デザインの基本（配置・文字・色）を学ぶ：揃える、近づける、余白をとる、文字の大きさに差をつける、色の数をしぼる、といった基本は、どんなデザインにも共通します
- 練習サイトのお題で作る：お題に合わせて作品を作り、作ったものは見返して直します。完成した作品は、将来ポートフォリオ（作品集）の材料にもなります
デザインで使うソフトの種類や料金は「デザインソフトとは？デザイナーが使うおすすめ一覧」で詳しく比較しています。
グラフィックデザインの勉強におすすめのサイト
Adobe公式チュートリアル（Photoshop・Illustratorなど）
Adobeの公式サイトには、「Photoshopを学ぶ」「Illustratorを学ぶ」など、アプリごとの日本語のチュートリアルがまとめられています。初級向けのものも多く、短い動画や手順で基本の操作を学べます。チュートリアル自体は無料ですが、手を動かして練習するにはアプリ（無料体験版を含む）が必要です。
公式サイト：Photoshopを学ぶ（Adobe）
PhotoshopVIP
2009年から続く、Photoshopやイラスト、Webデザインの情報をまとめた日本語のサイトです。文字の加工や写真の加工などのテクニック記事が多く、「こういう表現はどう作るのか」を調べながら学ぶのに向いています。フォントや素材の紹介記事もあります。
公式サイト：PhotoshopVIP
Schoo（スクー）
社会人向けのオンライン学習サービスで、「デザイン」「UI・UXデザイン」などのカテゴリーに授業があります。
- 無料の範囲：生放送の授業は無料で受けられ、録画は生放送終了後30日間無料で見られます。無料で見られる授業も1,000本以上あります
- 有料：プレミアム会員（月額980円、年額9,800円）で録画授業が見放題。7日間の無料体験があります
公式サイト：Schoo
Udemy（ユーデミー）
講座ごとに購入して動画で学ぶサービスです。グラフィックデザインのカテゴリーには、Photoshop・Illustratorの操作から配色・タイポグラフィ（文字のデザイン）まで、さまざまな講座があります。有料講座が中心ですが、無料で見られるレッスンもあります。
公式サイト：Udemy（グラフィックデザイン）
Canva Design School
デザインツールCanvaの公式の学習サイトで、グラフィックデザインの基本やSNS用の画像づくりなどの講座・動画を無料で公開しています。ページは英語ですが、「デザインの基本を短い講座で学びたい」人に向いています。
公式サイト：Canva Design School
Webデザイン・UIデザインの勉強におすすめのサイト
ドットインストール
1本3分前後の動画で学べる学習サイトです。デザインツールFigmaの「Figma入門」シリーズ（基本操作編・レイアウト編・コンポーネント編・実践編）や、HTML・CSSのレッスンがあります。
- 無料の範囲：「Figma入門 基本操作編」（全20回）は#01〜#05が無料公開中です
- 有料：プレミアム会員は月額1,080円（税込・12か月一括払いの場合）〜、月々払いは月額1,480円（税込）
公式サイト：ドットインストール（Figma入門 基本操作編）
Figma Learn
Figmaの公式ヘルプセンターで、日本語の「開始」ガイドや、コース・チュートリアルがまとめられています。Figmaは無料のStarterプランから使えるので、ソフト代をかけずにWeb・UIデザインの練習を始められます。
公式サイト：Figma Learn
Progate
スライドで学び、ブラウザ上でコードを書いて確認できる学習サイトです。Webデザインを形にするためのHTML・CSSを、初歩から学べます。無料プランで初歩的なレッスンの一部を学べ、すべてのレッスンを学ぶには有料のプラスプランが必要です。
HTML・CSSを学べるサイトをもっと知りたい方は「HTML勉強サイト8選｜初心者が無料で学べる学習サイト」も参考にしてください。
グラフィックデザインの練習サイト（無料）
基本を学んだら、実際に手を動かして練習しましょう。ここで紹介するサイトは、どれも無料で使えます（2026年9月時点）。
Sharpen（お題を出してくれる）
ボタンを押すと、「〇〇のためのロゴ」「〇〇のアプリ」のようなデザインのお題をランダムに出してくれるサイトです。「何を作ればいいかわからない」ときの練習に向いています。
公式サイト：Sharpen
Daily UI（UIデザインのお題が届く）
メールアドレスを登録すると、UIデザインのお題が平日に1つずつ届く、100日間の無料チャレンジです。ログイン画面や設定画面など、アプリやWebでよく使う画面を順番に作れます。
公式サイト：Daily UI
The Bézier Game（ペンツールの練習）
IllustratorやFigmaで使う「ペンツール」の操作を、ゲーム形式で練習できるサイトです。見本の形をなぞりながら、曲線の描き方に慣れることができます。
公式サイト：The Bézier Game
Kern Type（文字の間隔の練習）
文字と文字の間隔（カーニング）を調整して、見本との違いを点数で確かめるゲームです。ロゴや見出しの文字をきれいに見せる感覚を養えます。
公式サイト：Kern Type
Can’t Unsee（デザインの違いを見抜く）
2つの画面デザインを見比べて、より正しいほうを選ぶクイズです。余白や文字のそろえ方など、細かい違いに気づく目を鍛えられます。
公式サイト：Can’t Unsee
Adobe Color（配色の練習）
カラーホイールで基本の色を選ぶと、補色・類似色などのルールに合わせた配色を作ってくれる無料ツールです。画像から色を取り出したり、文字と背景のコントラストを確かめたりもできます。
公式サイト：Adobe Color
デザインをサイトで勉強するメリットと注意点
| メリット | 注意点 |
|---|---|
| 無料や少ない費用で始められる | 作品を見てもらい、意見をもらう機会が少ない |
| 時間や場所を選ばず、すきま時間に学べる | 一人だと続けるのが難しいことがある |
| 自分に合うか、お金をかける前に試せる | 仕事で求められる進め方（依頼を受けて直すなど）は経験しにくい |
注意点を補うには、作った作品をSNSや学習仲間に見てもらう、練習サイトのお題を「誰のためのデザインか」まで考えて作る、といった工夫が役立ちます。本やサイトを使った独学の進め方は「デザインを独学で勉強する方法」でも紹介しています。
英語でWebデザインとITを学ぶという選択肢
練習サイトやFigma・Adobeの最新情報、海外のデザイン事例は、英語で発信されているものが多くあります。英語が読めると、学べる教材も参考にできる作品も大きく広がります。
Kredo IT留学は、フィリピン・セブ島でITレッスンをすべて英語で受ける留学です。1日8時間（英語のマンツーマンレッスン4時間＋ITのグループレッスン4時間）で、1ヶ月のWeb Basicコースでは、HTML・CSSでWebページの構造とデザインを作る基礎からオリジナルのWebサイト制作までを学びます。公式サイトによると、受講生の92%が英語もITも未経験です（2026年9月時点の掲載）。興味がある方は、まずはKredo IT留学の無料カウンセリングで相談してみてください。
デザインの勉強サイトについてよくある質問
デザインは無料のサイトだけで勉強できますか？
基本の操作や考え方は、この記事で紹介した無料のサイトでも学べます。ただし、PhotoshopやIllustratorを使う場合はソフトの費用がかかります。まずはFigmaやAdobe Colorなど無料で使えるツールで練習し、必要になってから有料のソフトを検討する方法もあります。
無料のデザインのオンラインスクールはありますか？
デジハリ・オンラインスクールのようなデザインのオンラインスクールは有料が基本で、料金は講座によって違います。無料のセミナー動画や説明会を用意しているスクールもあるので、受講を考えるときは各スクールの公式サイトで確認しましょう。お金をかける前に、無料の勉強サイトで自分に合うか試してみるのがおすすめです。
スマホアプリでデザインの勉強はできますか？
CanvaやAdobe Expressなど、スマホで使えるデザインアプリで簡単な画像を作ることはできます。ただし、細かい操作やWebデザインの練習はパソコンの方が進めやすいため、スマホは空き時間の練習用と考えるとよいでしょう。
デザインの資格は必要ですか？
デザインの仕事に資格は必須ではありませんが、学んだ知識を整理したり、未経験から応募するときの説明材料になったりします。種類や選び方は「デザインの資格おすすめ一覧」をご覧ください。
まとめ：勉強サイトと練習サイトを組み合わせて手を動かそう
デザインは、無料のサイトでも十分に始められます。まずは作りたいもの（グラフィックかWeb・UIか）を決め、Adobe公式チュートリアルやドットインストールで基本操作を覚えたら、SharpenやDaily UIのお題で作品を作ってみましょう。ペンツール・文字・配色の練習サイトを毎日少しずつ使うだけでも、デザインを見る目は変わっていきます。
英語でIT・AIを学べるKredo
英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？
当メディアを運営しているKredoは、英語×ITをオンラインで学ぶ「Kredoオンラインキャンプ」と、フィリピンのセブ島で英語とIT・AIを学ぶ「KredoIT留学」「KredoAI留学」を提供しています。これまでの卒業生は3,000名以上。卒業生の多くが、国内外のIT企業への転職、フリーランスなどへのキャリアチェンジを実現しています。これからの時代に必要な英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？
