【完全保存版】Webデザイン入門者におすすめの無料サイト9選

Webデザインとは？

Webサイトについて、見た目の美しさ、情報のわかりやすさ、使いやすさを設計、構築するのがWebデザインと呼ばれるものです。

Webデザインに取り組むためには、幅広い領域の知識が必要となります。たとえば、「デザインや色彩の知識」「掲載する画像を編集するための画像ソフトの知識」「HTMLやCSS、Javascriptなどのプログラミング知識」などです。

Webデザインを学べる無料サイト

schoo

これで無料？！クオリティも流行感度も高いじっくり動画講座

画像出典：schoo

• 受講形態：動画講義の閲覧
• 学べる知識：プログラミング(HTML,CSS,JQuery など)、Photoshop、illustrator

日々最新の技術やコミュニケーションスキルから社会問題まで、幅の広いスキルアップのための動画講座を放送しているschoo。Webデザインについても、HTML,CSS,Photoshop,illustratorの各入門講座は無料公開されています。

画像出典：schoo

特徴は現役スペシャリストばかりを揃えた講師陣。スライドを元に、1〜2時間じっくりと授業を聞く形式です。HTML講座は全3時間、illustrator講座は全6時間と、無料でスクールなみのボリュームの講義が受けらるのはお得ですよ。学習時間をしっかり確保できる方にオススメです。

中級や応用にあたる講座、また過去の生放送授業の録画は月額料金(¥980〜)の有料プランに加入すると閲覧できるようになっており、もうワンステップ進んだ学習がしたい場合にも対応しています。

ドットインストール

３分動画講座でスキマ時間にちゃっかり学習！

画像出典：ドットインストール

• 受講形態：動画講座の閲覧
• 学べる知識：プログラミング(HTML,CSS,JavaScript など)

おもに入門者向けの無料講座を307講座も公開しているドットインストールは、3分にコンパクトにまとまった学習動画で、スキマ時間に学習を進めていける便利なサイト。こまぎれ時間しか取れない忙しい方にもオススメです。ユーザー登録すると、ちゃんと自分がどこまで進んでいるかも管理できちゃいます。

画像出典：ドットインストール

入門者向け講座としておすすめなのは、HTML入門やCSS入門ですね。これらをマスターしたら、 実践！ウェブサイトを作ろう で、自分で1からWebサイトを作ってみましょう。

progate

ブラウザ上でお手軽プログラミングレッスン！

画像出典：progate

• 受講形態：スライド＆プログラミング実践
• 学べる知識：プログラミング(HTML,CSS,JavaScript など)

スライドを見ながら、実際のプログラムをブラウザ上で書ける手軽さが魅力のprogate。まずは環境を整えることが難しい初心者には、すぐに学習を始められるという利点があります。

画像出典：progate

初級コースは全て無料で公開されていますが、有料の実践コースをクリアした方には、クラウドワークスでのお仕事紹介の提携があります。いまから、Webデザインやプログラミングで、手に職をつける！という目標が欲しい方に、オススメです。

CODEPREP

プログラミングの苦手意識をふきとばそう！

画像出典：CODEPREP

• 受講形態：スライド＆プログラミング実践
• 学べる知識：プログラミング(HTML,CSS,JavaScript など)

CODEPREPは、プログラミングが楽しい！と誰もが思えるように、というコンセプトで作られた学習サイトです。穴埋め式のプログラム練習画面で、プログラムの醍醐味である、「手を動かしながら試してみる」が味わえるので飽きずにテンポよく学習が進められます。

画像出典：CODEPREP

講座内で他のユーザーに質問ができる機能もあり、励まし合い、助け合いながら進められますよ。デザインや画像処理は好きだけれど、HTMLなどのプログラミングに苦手意識のある方にオススメです。

SKILL HUB

Webデザインの一連の流れを俯瞰できます

画像出典：SKILL HUB

• 受講形態：動画講義の閲覧
• 学べる知識：デザイン、プログラミング(HTML,CSS)、illustrator

オンラインの企画、デザイン、プログラミング、クラウド、マーケティングのスクールSkillhub(スキルハブ）。基本的には有料のサイトですが、HTML,CSS,illustratorの入門講座は無料公開されています。(Photoshop講座、JavaScript講座は有料プランです)

画像出典：SKILL HUB

無料とはいえ、スライドを使っての講師の解説が動画で閲覧できます。Webサイト制作実践講座は、illustratorで画像を作成し、HTMLでコーディング、作成したサイトをWebサーバーに公開するまでの、Webデザインの仕事の一連の流れが学習できます。知識ゼロからWebデザインの概要全体を知りたいという方にオススメします。

Adobeラーニング

Photoshop,illustratorの本家チュートリアル

画像出典：アドビラーニング

• 受講形態：動画講座の閲覧
• 学べる知識：Photoshop,illustrator

PhotoshopやillustratorなどのAdobe製品の基本的な使い方は、公式サイトのチュートリアルで、とても詳しく解説されていますよ。ひとまず、基本の使い方をマスターしたい方はぜひ読んでみてください。

画像出典：アドビラーニング

とくに、画像編集のソフトを使い始めたばかりの方は「レイヤー」や「ベクター」などの特徴的な考え方にまず戸惑うことが多いと思います。チュートリアルではその概念から、親切な動画で説明してくれていますよ。ひとまずソフトの操作方法を身につけたい方にオススメです。

PHOTOSHOP VIP

Webデザインのキュレーションメディアといえばここ

画像出典：PHOTOSHOP VIP

• 受講形態：ブログ
• 学べる知識：デザイン、Photoshop、illustrator

10年前に作られたWebサイトは、やはり今見ると古いなという印象を受けますよね。そう、Webデザインにも流行があるのです。素敵なWebデザインを目指すなら、流行感度をあげていかなくてはいけません。

そんな時に便利なサイトがこの　PHOTOSHOP VIP です。Webデザイン関連の最新ニュースやデザインテクニックについて、また国内外の流行デザインについての記事が日々更新されています。眺めているだけでセンスがアップしますよ！

81-web.com

日本のWebサイトの流行を知ろう

画像出典：81-web.com

• 受講形態：ブログ
• 学べる知識：デザイン

日本のWebサイトの流行を知りたいなら、こちらをブックマークしておきましょう。日本企業やサービスのWebサイトに特化した、優れたデザインのサイトを集めたリンク集です。眺めて目を肥やすもよし、業種ごとの傾向を探るもよし。いち早く話題のデザインに詳しくなりたい方に、オススメです。

Webクリエイターボックス

Webデザインのプロの視点が得られるブログ

画像出典：Webクリエイターボックス

• 受講形態：ブログ
• 学べる知識：デザイン、プログラム(HTML,CSS)

プロのWebデザイナーであるMana氏が日々デザインのコツや流行のデザインについての解説などを綴っているブログです。最新技術の解説やセンスよく見せるための小技は上級者でも役に立ちますし、初心者向けの記事も充実しています。プロはWebデザインのこういったところに気をつけているのか、ということを知ることができるので、入門者からのステップアップにも役に立つブログです。

画像出典：Webクリエイターボックス

特におすすめしたいのは、Web制作の流れを、ひと通りやさしく解説してくれているこちらの記事実践で学ぶWebサイト制作ガイド。　すこし昔の記事ですが、Web制作を俯瞰したい方にとても役立つ記事です。ぜひ読んでみてください。

まとめ

Webデザインはいろいろな知識が必要ですが、そのぶん、どこから手をつけても自分の力になっていくという楽しさがあります。最近は、プログラミングがブラウザで体験できる学習サイトも増え、プログラムを体験するためのハードルも下がってきていますよ。もっと学びたい、もっと知りたい！と思ったときが始めどきです。ぜひ、昨日より一歩進んだ自分になってみてくださいね。

Codecampでは、マンツーマン個人レッスンを行っています。ご自宅で受講できるオンラインでのビデオ通話形式です。

現在、体験レッスンとして1回分無料で受講が可能となっています。講師はベテラン現役エンジニアなので、ご自分の勉強方法についてのアドバイスや、不明点を質問するチャンス。ぜひ、活用してくださいね。

体験レッスンについて詳しくはこちら