今回は、これからWebデザインを身につけてみたい方におすすめの独学に役立つサイトをご紹介します。Webデザイナーに必須の技術や知識を無料で学ぶことができる実践的なプログラミングスクールや参考になるサイトを集めました。
おしゃれで使いやすいサイト作れるようになるためにはプログラミング、Photoshop、Illustratorなど複数のツールの使い方やスキルを身につける必要があります。そんな技術をオンラインで好きな時間に学ぶことができる便利なサイトを特集しましたので、是非参考にしてみてください。
Webデザイン勉強サイト10選
Progate
Progateはオンラインでプログラミングを学ぶことができる学習サイトです。無料会員登録をすることでホームページを作成する上で欠かすことのできないHTMLやCSSをはじめ様々なプログラミング言語を学習することができます。
全く知識がない方でも各言語で入門コースが用意されているので安心してはじめることができ、段階的に学習していくことができるのもポイントです。分からない部分はヒントを受け取ることも可能なので、考える力を養いながら作業することができます。月額980円の有料プランにすることでProgate内の全てのレッスンを受けることができるようになります。
有料プランには設計図を元にホームページを作成していく道場コースも用意されているのでProgateでプログラミングをしっかりと学んでいけばWebデザイナーとして活動していく知識やスキルも十分身につけることができます。
シラバス
シラバスはProgateと同じくオンラインでプログラミングを学習することができるサイトです。基本的な機能はどのプログラミング学習サイトも大差はありませんが、サイト自体のデザインや使いやすさなどが違うので好みによって使い分けていくのが良いでしょう。
シラバスでは「Webデザイン編」として実際にWebデザイナーに必要とされるスキルやソフトの使い方が基礎から分かるようになっているのがポイントです。
サイト内に専用のエディタがあるわけではないので自分で用意する必要があるものの何を揃えれば良いのかは全て明記してあるので実行しやすいです。全て無料で利用できるので手軽に始めたい方に最適なサービスです。
ドットインストール
ドットインストールは3分動画というコンパクトで分かりやすい動画を参考にWebデザインに必要な知識を学ぶことができる学習サイトです。プログラミングの基礎から学ぶことができるのはもちろんですが、実際にプログラマーの方が話しながら作業する動画を見ることができるが最大のポイントです。
スキルのないうちは文章や画像の説明ではどうしても理解できない点などがあったりしますが、ドットインストールなら動画を真似て反復練習することができるので、初心者が躓きやすいポイントもスムーズにクリアすることができます。
Webデザイナーに必要なものが全て学ぶことができるだけでなく、月額980円の有料プランにすることで中級者から上級者の方を対象としたコースを受けることもできます。有料プラン限定の動画の文字起こしサービスは非常に便利です。
Markup
Markupは北海道情報大学情報メディア学部の生徒が卒業制作で完成させたCSSに特化した学習サイトです。CSSの機能の中でもレイアウトに特化しており、スライド画像を参考にしながら実際にコードを入力してリアルタイムで確認することができます。
コードが表示されているスライドはコピーできないようになっているので、ズルをしないで作業する環境になっています。各学習素材はダウンロードすることも可能なのでインターネットが繋がらない場所でも作業することができます。
シンプルな学習サイトながら非常に見やすいところや、リアルタイムプレビュー機能がついたエディタが利用できるので快適に学ぶことができます。他の学習サイトも利用しつつCSSに関してはMarkupも利用すると良いでしょう。
Schoo
Schooは動画で学べるオンライン学習サイトです。ドットインストールと同じように動画がメインのサービスですが、Schooはもっと講義よりで本格的な学校のようなイメージになっています。
Webデザインに必要なスキルはもちろん、アプリ開発などのプログラミング言語も学ぶことができ、ストックされている動画以外に、業界の著名人などによる生放送の動画講義をも見ることができます。
無料会員登録をするだけで様々な分野で活躍するトップの方の講義が受けられるのは非常に魅力的でWebデザイナーとしてフリーランスになりたい方にもおすすめのフリーランス講義や企業向けの講義なども用意されています。事前にカレンダーで講義の予定が見れるので空いてる時間を有効活用することができます。
Adobe
PhotoshopやIllustratorなどWebデザイナーになりたい方に必須のツールを数多くリリースしているAdobeでは、各ソフトの使い方やチュートリアルなどが用意されています。
基本的な使い方以外にも各ソフトを応用してできることや、業界の方が常用する機能などが紹介されています。画像や動画の編集はもちろんサイトのレイアウトをデザインするのに非常に便利なAdobe XDなどの使い方の解説なども見ることができます。
各ソフトは月額制となっておりますが、無料体験版のサービスも利用できるので、実際にWebデザイナーが使用しているツールを気軽に試してみることができます。PhotoshopやIllustratorはWebデザイン業界で仕事をしていきたいないなら使い方をマスターしておいて損はありませんので、是非公式サイトを活用してみてください。
muuuuu
muuuuuはおしゃれでセンスの良いWebサイトを集めたサイトです。Webデザインを学習たい方には最適なサービスで世界中のサイトを参考にすることができます。集められたサイトはカテゴリー別に分類されているので、自分が作ってみたいサイトのカテゴリーで絞り込むこともできます。
各サイトはデモではなく実際に運営されているサイトが集まっているので、企業のキャッチコピーやレイアウトなどを分析することもできます。シンプルなサイトから最新技術を駆使して作成されたサイトなどが一覧で見られるので、自信のポートレイトサイトなどを作る際にも非常に便利に活用することができるでしょう。ブ
ラウザのソースコードの検証機能を使えばどのような構造になっているのかも分析することができます。
クリエイターボックス
https://www.webcreatorbox.com/
クリエイターボックスはWebデザインとコーディング関連の情報サイトです。Webデザイナーの方におすすめの便利ツールの紹介やフリーランス関連の情報も沢山あり公式Twitterでも優良な情報が沢山アップされています。
Webデザイナーの方が作成したサイトだけあって、レイアウトやカラーの使い方のセンスが良いのも面白いです。クリエイターボックスでは、魅力的なデザインのWebサイトをギャラリーにアップしており、デザイナー目線で選定されたユニークなサイトを見ることができます。
現役でクリエイター活動をしている管理人さんが作成したワードプレスのテーマの配布なども不定期に行っているので、常日頃からチェックしておいて損はない無料サイトです。
ONZE/BLOG
ONZE/BLOGは洗練されたWebサイトやアプリケーションを数多く生み出している企業であるONZEが運営するブログで、プログラミングやWebデザインに関する豆知識や最新の情報が沢山アップされています。Webデザインを独学する上でも参考になる記事も非常に多く、モチベーションアップにも繋がるでしょう。
サイトをデザインする際に使える要素の紹介なども分かりやすく、学習サイトとしてもおすすめです。製作者が実際に使っているPCやアプリなどを見ることができるのも魅力と言えるでしょう。更新頻度はそこまで多くありませんので、初期の記事から読み進めるのもおすすめです。
開発者目線の内容が多いので一人では気づけなかった大切なポイントなどに気づかせてくれる記事も多いのが特徴です。
teratail
teratailは独学でWebデザインを学んでいきたい方にとって必須のQ&Aプラットフォームです。初心者エンジニアは100%の確立で躓くもの。そんな時に周りに相談できる人がいなくてキャリアを諦めてしまった方は非常に多いものです。
teratailなら自分が行き詰まっているポイントを全国のエンジニアに気軽に質問できます。ヤフー知恵袋のようなサービスですが、プログラマーやWebデザイナーに特化したサービスになっているので、自分で作成したコードを入力できるエディタがありシンタックスハイライト機能までついています。
回答率も9割以上でコメントが帰ってくる時間も早いです。１つの質問に対して複数の方の返答が見られるのも魅力で三者三様のコーディングパターンなども非常に参考になるでしょう。無料で利用できるので絶対に登録しておくべきサービスです。
書籍で学習されたい方は下記の本がおすすめです。書籍は体系化されているため一通り学ぶときに便利ですね。
いちばんよくわかるWebデザインの基本きちんと入門
著者：伊藤 庄平、益子 貴寛 、他br /> 出版社：SBクリエイティブ
発売日：2017/2/24
また、WordPress関連の書籍はワードプレス本11選！レベル別におすすめ本でまとめていますのでご参照ください。
まとめ
Webデザインを独学する際に活用できるサイトを特集しました。インターネット環境とPCがあればすぐにでもはじめることができる無料サービスは独学にはぴったりのサービスになっていました。
段階的にレベルアップしていくことができるProgateやドットインストールなどのサービスはITスキルが全くない方でも安心して始められるので、Webデザインの世界で働きたいと漠然と思っていた方もしっかりとスキルアップすることができます。
空いた時間で集中して学ぶことでWebデザイナーとしてのキャリアをスタートさせることも可能です。どのサービスも無料で始められるので全て登録して使ってみて、自分に合ったサービスで学習すると良いでしょう。