Webデザイン初心者がスキルアップする!おすすめサイト7選・本3選

Webデザイン

最近学ぶ人が増えているWebデザイン。「Webデザインとはなんぞや?」状態の初心者が独学でWebデザイナーを目指すのは、はっきり言って並大抵のことではありません。

だからこそ、基礎をしっかり固めるのは大事です。そこで今回は、実際にわたしが使っているサイトから、初心者におすすめのサイトや本をご紹介します。

SHElikesのWebデザイン講座に興味がある人はこちら↓

独学に役立つサイト7選

デザイン編

⑴ サラッと読めて分かりやすい【Webデザインのセオリー】

こちらは、福井工業高等専門学校にて行われたセミナーで使われた公開スライド。サラッと読めて分かりやすいので、「デザインについてまだよくわからない」という人にオススメ

  • デザインの4原則
  • 情報設計の仕方
  • ユーザーの視線の流れ
  • 黄金比や白銀比

など、色やフォント、レイアウトのデザインのセオリーをスライドで学べます。

⑵ すきま時間にPhotoshopを学べる【Adobe TV】

Photoshopやillustratorの使い方がわからない人にオススメしたい、Adobe TV。こちらのサイトでは、Adobeツールの使い方を動画で学習することができるのです。

動画であれば、通勤や移動中のすきま時間に見られますよね。チュートリアルには「初心者講座」もあるので、ぜひ活用してみてください!

⑶ Web制作には欠かせない【PhotoshopVIP】

Photoshopやillustratorの機能や使える素材、テンプレートなどをまとめたPhotoshopVIP

かなり頻繁に更新されていますし、素材などの最新コンテンツを手に入れたい時にはこちらのサイトをチェックすればOK! HTMLやCSSのコピー可能なスぺニットなども紹介されているので、Web制作に重宝するはず。

デザイントレースに使えるWebサイトの見本を探している人は、こちらの記事をご覧ください。

⑷ Google Chrome【拡張機能】まとめサイト

みなさんもご存知の通り、Webデザインをするうえでは拡張機能が必要不可欠ですよね。「まだ1つも拡張機能を入れていない人」や「Webデザインに使える拡張機能をもっと入れたい人」は、ぜひ以下のサイトをご覧になってくださいね。

コーディング編

⑸ ゲーム感覚でプログラミングを学べる【Progate】

プログラミングを学べるオンライン学習サービス、Progate。なんとユーザー数は56万人、レッスンの総演習回数は72万回。その人気の理由の1つに「ゲーム感覚で学べるところ」が挙げられます。

実際にわたしも使っていますが、説明は丁寧で分かりやすく、合格するとレベルが上がるので、楽しみながらプログラミングの知識を身につけられるのです。HTMLやCSSはプログラミング言語ではありませんが、Progateで学ぶことができます。

⑹ 初心者でも大丈夫!エンジニアに質問できる【teratail】

Webデザイン初心者がHTMLやCSS、そのほかJavaScriptやjQueryを1人で学ぶ際、必ず壁にぶつかります。しかし周りに質問できる講師や仲間はいませんよね。そんな時に使いたい、無料でエンジニアに質問できるサービスteratail

初心者マークを付けて質問できるので、怖がらなくて大丈夫です。実際にわたしも使ったことがあるのですが、とあるエンジニアさんがとても丁寧に教えてくださいました。壁にぶつかったら質問して、分かる質問には答える。みんなで切磋琢磨していける、素敵なオンラインサービスです。

⑺ 3分の動画でプログラミングを学べる【ドットインストール】

3分間の動画でプログラミングを学べるオンライン学習サービス、ドットインストール

HTML入門は全15回、CSS入門は全17回に分かれており、ウェブサイト公開の仕方を教えてくれる動画もあります。JavaScriptなどのプログラミング言語も動画で学べるので、復習をしたい人やすきま時間に学びたい人にもおすすめです。

初心者におすすめの本3選

⑴ UIUXへの理解は必要不可欠【インターフェースデザインの心理学】

Webデザインをする上で、UIやUXデザインへの理解は必要不可欠。

UI=ユーザー・インターフェースとは、人と機器(製品やサービス)の繋がりを指します。ユーザーが快適にサービスを使えるようにデザインすることを、ユーザー・インタフェース・デザイン=UIデザインと呼ぶのです。

不適切なUIは使いにくく、ユーザーのUX(ユーザー・エクスペリエンス。製品やサービスを通して得られる体験)の低下に繋がります。

人間の思考や行動にマッチした製品を作るために、こちらの「インターフェースデザインの心理学」はとてもおすすめです。

⑵ 手を動かしてトレーニング【デザインの教室】

本で文字を追っているだけでは、デザインは出来るようになりません。実際に手を動かすことが1番大事なのです。

こちらの「デザインの教室」は、文字や色などの平面構成からレイアウトまで、実際に手を動かして学ぶことのできるトレーニングブック。付属のCD-ROMには、各レッスンのillustratorの素材と完成ファイルを収録してあります。

⑶ ‘‘あとで困るコード’’書いてない?【CSS設計の教科書】

初心者が書きがちな、‘‘あとで困るコード’’。もちろん最初から読みやすく分かりやすく、修正しやすいコードを書くのは難しいですよね。

そこでおすすめしたいのが、「Web制作者のためのCSS設計の教科書」。コンポーネントやCSSプリプロセッサを意識した設計、実際によくあるコードの組み方など丁寧に解説してくれます。

初心者におすすめの本はまだまだたくさんあります。こちらの記事では、デザイン・HTML&CSS、JavaScriptとjQueryごとに紹介しているので、ぜひご覧ください。

まとめ

「独学は続かない」「独学は大変だ」と言われがちですが、今回ご紹介したようにオンライン学習サービスなども増えていますから、きっと大丈夫。初心者からでも十分にWebデザイナーを目指せますよ。

もしもSHEのWebデザイン講座に興味が湧いたら、いつでもいらしてくださいね。

【執筆】

SHEshares編集部 めくばせ
2016年、服飾の専門学校に進学するも「わたしの人生で大切なものではない」と気づき、2017年1月に中退。同時期にライターを開始。現在はshares編集部としてライターさんのフォローなどをしている。
昔からモノづくりが好きで、2018年4月にはSHElovesでWebデザインを受講。ピアス制作やWeb制作にも注力中。
生粋の天秤座女で、常にフラット・バランス命。すべてを肯定し愛せる人間になりたい。
Twitter(@_____ilil_
おすすめ執筆記事
服飾学校を中退→Web業界へ。やさしい言葉で人々を救う‘‘保健室の先生’’が選んだ「自分を幸せにする」生き方
【私を救ったコトバたちvol.4】「あなたは大丈夫。人生はめちゃくちゃ魅力的だ。」

関連記事一覧

ライター育成します