【Webデザイン初心者向け】超参考になるサイト・本13選を一挙ご紹介

Webデザイン初心者にオススメの本３選

ノンデザイナーズ・デザインブック

Amazonリンク

• 著者：Robin Williams
• 出版社：マイナビ出版
• 出版年月日：2016/6/30
• 単行本価格：2,354円
• Kindle価格：2,180円

デザインの基礎の基礎がわかりやすく網羅されていることで、ロングセラーとなっている本書。何からはじめればいいの？という人にとりあえず読んでほしい一冊です。デザインの原則を頭に入れているだけで、「がんばったのに、なんだかダサい」から一歩脱却できますよ。

レビューより

他にもデザインの本を読みましたが、この本がダントツでわかりやすいです。webデザインに応用できる部分がたくさんあると思います。

Amazonレビューより引用

Webのみならず、「そもそもデザインとは何？」という定義から知りたい人には必須。

Amazonレビューより引用

HTML5&CSS3標準デザイン講座

Amazonリンク

• 著者：草野あけみ
• 出版社：翔泳社
• 出版年月日：2015/11/6
• 単行本価格：2,678円
• Kindle価格：2,480円

Webサイトの作り方がやさしくゼロから学べるテキストとなっている本書。HTML5とCSS3の解説が特に詳しく書かれており、中級者でも参考になる点が多い良書となっています。実習課題に沿ってサンプルを自分で作成し、理解を深めていけるような構成です。

レビューより

CSSでレイアウトを組むのが苦手だったがこの本を読んで完全に理解できた。 CSSレイアウトの部分だけでも価値がある。

Amazonレビューより引用

初心者には結構難しい内容もあると思いますが、そこは読み飛ばしても大丈夫だと思います。 初めての人だけでなくこれまで完全独学でやってきた人の知識の整理としても利用できる内容だと思いました。

Amazonレビューより引用

いちばんよくわかるHTML5&CSS3デザインきちんと入門

Amazonリンク

• 著者：狩野祐東
• 出版社：SBクリエイティブ
• 出版年月日：2016/10/27
• 単行本価格：2,678円
• Kindle価格：2,678円

初心者向けのやさしい構成や平易な言葉づかいがうれしい、敷居の低い本です。しかしながら、スマートフォンでの閲覧が増えている昨今の現状に合わせたレスポンシブWebデザインについて、基礎からきちんと学べる内容になっており、最新の流行について知りたい中級者にも役立ちそうです。

レビューより

現在web制作の現場では主流になりつつある（もうなっている？）flex-boxのコーディング方法がとても丁寧に解説されています。全体的に初心者向けの言葉を選びながらわかりやすく解説されています。

Amazonレビューより引用

学ぶ過程で誰しも疑問を抱えつつ進んでいきそうな部分がしっかりと解説されています。

Amazonレビューより引用

Webデザイン初心者にオススメの無料Webサービス7選

[デザイン力アップ！] 81-web.com

81-web.com

素敵なWebサイトをデザインするためには、まずたくさんの素敵なデザインを知ることから始めましょう！こちらのサイトは、日本に特化した、優れたデザインのWebサイトを集めたリンク集です。日々追加されているセンスの良いデザインサイトは、見ているだけでも楽しいですよ。サイト作成の学習のため、写真や文字の配置を真似てみるのも、よい練習になるのではないでしょうか。

[デザイン力アップ！] MUUUUU.ORG

MUUUUU.ORG(ムーオルグ）

縦に長い最近の流行りデザインに特化した、クオリティの高いサイトを集めたギャラリーサイトです。こちらも見ているだけでセンスがアップしそう。業種ごとに分かれているので、同業他社のチェックの際にも使えますね。

[デザイン力アップ！] WPDesign Gallery

WP Design Gallery

WordPressを利用したサイトを作りたい人は必見の、WordPressに特化したWebサイトのギャラリーです。デザインの参考にしたり、自分の作りたいサイトのイメージを膨らませるのにも使えますね。表示カラム数で絞り込めるようになっているのが、便利です。

[画像作成力アップ！] Adobe ラーニング

Adobe ラーニング

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

Photoshop,illustratorについても、基本の各工程が動画にて説明されています。とても親切ですね！

[プログラム力アップ！] Codeprep

Codeprep

デザインや画像処理は好きだけれど、HTMLなどのプログラムに苦手意識のある方も多いかと思います。そんな方には、HTMLやCSSをゲーム感覚で学べる、プログラミングが楽しい！と思えるように、というコンセプトで作られた学習サイト、CODEPREPをおすすめします。

穴埋め式のプログラム練習画面で、クイズのように課題を解いていくつくりのため、飽きずにテンポよく学習を進めることができますよ。プログラムの醍醐味である、「手を動かしながら試してみる」が味わえるので、苦手意識があった人でも、これなら「楽しい！」と思えるかもしれません。毎週のように新しい講座が追加されており、講座内のディスカッションも活発なのが魅力です。学習サイトのデザインも可愛らしさがあり、圧迫感がないので気楽に取り組めますよ。

[プログラム力アップ！] ドットインストール

ドットインストール

手軽さとコンテンツの豊富さから、Webデザインの入門者の間で人気となっている学習サイトです。入門者向け講座の多くが無料で提供されています。3分動画講座を連続してこなしていく形式の講座となっており、隙間時間での学習にもぴったりです。

初心者向けの、HTML入門やCSS入門をはじめとして、Webサイト作成に関連した様々な講座がアップされています。Webデザインの入門者に特にオススメなのは実践！ウェブサイトを作ろうやWordPress入門の講座です。とても実践的で、手順に沿って課題をこなしていくと、自分で1からサイトを作る手順が理解できますよ。

[総合力アップ！] Webクリエイターボックス

Webクリエイターボックス

プロのWebデザイナーであるMana氏が日々デザインのコツや流行のデザインについての解説などを綴っているブログです。初心者向けの記事も充実していますが、最新技術の解説やセンスよく見せるための小技は上級者でも大変役に立ちます。Webデザインを学習する方は、ブックマークしておいて損はないサイトです。

Webデザイン初心者にオススメの有料Webサービス3選

[プログラム力アップ！] ドットインストール(有料版)

• 受講期間：設定なし（月額制）
• 授業形式：動画
• 受講料：月額980円(税込）
• 課題添削：なし
• テキスト：なし
• 質問：有料会員のみ、試験的に受付中（回答保障なし）
• 対象言語・ソフト：HTML,CSS,Bootstrap,JavaScript/jQuery,PHP,Ruby,WordPressなど

プレミアム会員として登録すると、無料版の機能に加えて中上級者向けレッスン動画やデモ確認、説明されているソースコードを閲覧することなどができます。言語ごと、ステップごとにコンパクトにまとまった講座と、PHP,JavaScriptなどの最近流行りの技術については作りたいサンプル別になっているため、飽きずにどんどん受講していくことができます。手軽に学べる価格も魅力ですね。

[総合力アップ！] Schoo

画像出典：Schoo

デザインコース　Webデザイナー

• 受講期間：2ヶ月間（60日間）
• 授業形式：動画(44.5時間）
• 受講料：99,800円(税込）（学割あり）
• 課題添削：あり（７回）
• テキスト：なし
• 質問：無制限（メール）
• 対象言語：HTML,CSS,JavaScript/JQuery

こちらのWebデザイナーコースは、動画に合わせて自分で課題をこなしていき、提出するというスタイル。デザインの基礎から、Webデザインの制作プロセス全体を学ぶことができます。「Webサイトの公開」の講義にて、初心者が詰まりがちなレンタルサーバーの使い方も内容に含まれているのは親切ですね。

[総合力アップ！] Codecamp

画像出典：Codecamp

デザインマスター

• 受講期間：6ヶ月（安心プラン）
• 授業形式：マンツーマン個人レッスン（毎日朝7時～23時40分まで)
• 受講料：298,000円（税抜）
• 課題添削：随時
• テキスト：あり
• 質問：無制限
• 対象言語・ソフト：Photoshop,illustrator,HTML5,CSS3,JavaScript/jQuery,Bootstrap

こちらCodecampでは、現役エンジニアがマンツーマンで個人レッスンをしてくれるという変わった形式をとっています。マンツーマンなら、独学でわからない箇所があって詰まってしまう、質問ができずに学習がすすめられない、などの心配はありませんね。

現在、１コマの無料体験レッスンが受けられるようになっている太っ腹のキャンペーン中です。個人レッスンってどんなもの？と思われている方は、試しに受講してみてはいかがでしょうか。