未経験から10週間でエンジニア転職!新年から受講するなら今相談

【Webデザイン初心者必見】役立つ学習サイト・参考書20選

更新: 2019.07.11

>>No.1エンジニア養成プログラム テックキャンプ

10年後も職を失わない人材になれる限定資料を見る

Webデザインを将来のため、新しいスキルとして身につけたい!仕事のスキルアップのために勉強したい!と考えていませんか?でも、何から始めたらいいのか分からないと困っていませんか?

初めの頃はWebデザインについて調べてみても、色々な情報が出てきて、どこから手を出していいか悩みますよね。

そんな初心者のあなたのために、今回はWebデザインの基礎をご紹介します。デザイナーやディレクターなどのノンデザイナーにも役立つ学習サイトや参考書ですので、ぜひご覧ください。

そもそもWebデザインとは?

apple-iphone-books-desk

Webデザインとは、情報やコンテンツをコンセプトやターゲット層に合わせて、機能的にデザインすることです。ただ単に “なんだかカッコイイ”  “いい感じ” といった感覚だけでなく、配色パターンやレイアウトなど基本的な理論があり、PCやスマホなど、デバイスの変化とともに常に進化していくものです。

さらに、HTMLやCSSなどのコーディング分野も学ぶことで、より機能に即したデザインができたり、表現の幅も広がったりします。デザインの基礎やWebの仕組みまで理解した上で、個人のセンスやアイデアが光るのです。

 

独学で上達するためのポイント

独学をする上で、多くの経験者が進めている勉強法が「優れたサイトをトレースすること」です。トレースとは模写のことで、今回は優れたデザインと同じように、自分でデザインしたり組み立てたりすることを指します。

トレースすることで、レイアウトの細部まで注目できたり、ボリュームから制作時間がどの程度かかるのか体感できたりします。

また、これはWeb業界に属するすべての人へ言えることですが、常に学び続けることです。Webが市場や時代によって、進化し続けるこの業界では、トレンドを押さえるのは必須です。

独学だとどうしても、情報収集力が弱くなるので、SNSや専門雑誌を活用してアンテナを張っておくようにしましょう。

デザイン・レイアウトを学びたい人にオススメ

【初心者向け】デザインの基礎をマスターしよう

colors-185425_640

デザインの原理原則がわかる8つの記事

「配色」や「レイアウトと構成」、「余白と文字の使い方」など、デザインの基礎理論について学ぶことができます。

デザインは “感覚的なもの” と捉えがちですが、表現力だけでなく基本的な知識を学ぶことで、より良いデザイン制作ができるでしょう。

【初心者向け】配色について、より理解を深めよう

embroidery-74084_640

配色パターンからWebデザインを考える

もっと詳しく配色について、知りたい方はこちら。配色はデザインにおいて、非常に重要です。同じベースカラーを使用していても、メインカラーやアクセントカラーの組み合わせ方によって、印象はかなり左右されます。

配色パターンについて知識を深めておくと、「高級感」「爽やかさ」「女性らしさ」などの特徴を際立たせたい時にも、とても役に立ちます。

レイアウトについて学ぼう

website-1597382_640

見やすい・使いやすいレイアウトの為に考えるべき事。

レイアウト|伝わるデザイン

レイアウトを考える上で「情報・コンテンツの整理整頓と優先順位」「ユーザー視線の誘導」が重要です。

Webではユーザーが “見づらい・使いにくい” と感じると、サイトやページを見ることなく、離れてしまいます。そのため、コンテンツの重要度に合わせてレイアウトすることは、配色とともに大切な要素となります。

タイポグラフィをゲーム感覚で学ぼう

typography-1069409_640

KERNTYPE a kerning game

Webデザイナーなら知っておきたいWebタイポグラフィの基本

タイポグラフィというと小難しく思えますね。簡単に説明すると「文字と余白」のことです。

『KERNTYPE』では、ゲーム感覚でタイポグラフィを学ぶことができ、表示される文字をドラックや十字キーで直接移動させることで、文字と余白のバランス感覚を養えます。10問出題されるので、全問100点を目指してみてはどうでしょうか。

本当に感覚でタイポグラフィのバランスを整えてるので、最初は難しいですが、目が慣れてくると高得点が採れるようになってきますよ。

Webデザイナーなら知っておきたいWebタイポグラフィの基本』では、具体例を示して解説してくれています。初心者は必読するといいでしょう。

色々なサイトを見てセンスを磨こう

website-1624028_640

io3000

国内外を問わず、幅広くWebデザインを取り扱っているサイト。

縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

最近のトレンドである縦長デザイン専門のサイト。

デザインセンスを磨くには、とにかく色んなタイプのサイトを見て、自分の引き出しの中をいっぱいにしておくことが効果的です。

様々なデザインを知っておくことで、クライアントやディレクターの要望や意図を汲み取れたり、時に斬新なアイデアが生まれたりします。トレンドを押さえるためにも、定期的に見るよう心がけるといいでしょう。

Adobe公式動画でさらにスキルアップをしよう

office-820390_640

Adobe ラーニング

初心者からエキスパートまで、Illustrator CCチュートリアル

初心者からエキスパートまで、Photoshop CCチュートリアル

「Adobeラーニング」というAdobe公式動画があるのをご存知ですか?入門編・基本・最新の新機能に至るまで、無料視聴が可能なんです!

IllustratorやPhotoshopなど、各ソフトごとに豊富なラーニング動画が揃っているので、 “基礎からどんな機能があるのか知りたい!”  “このツールの使い方がイマイチ分かりにくい” という方は、ぜひ利用してみてください。

必見!スマートフォン向けのデザインも知っておこう

videos-1240742_640

Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~

WEBディレクター必見。ストレスのないスマホサイトを作る8つのポイント!

勝てるスマートフォンサイトのユーザビリティ8選

今やPC用サイトだけでなく、スマートフォン用サイトへの対応は必須です。主に画面サイズや操作方法の違いから、気をつけるべき点がPCサイトとは大きく異なります。

まずは、基本を押さえておきましょう。トレンドも移り変わりやすいので、要チェックです。

オンラインでデザインを学ぼう

blogging-336376_640

WEBデザインを学ぶなら参考にしたいITスクール12選

プログラミン系スクールの注目とともに、近年オンラインでWebデザインを学べるオンラインスクールが増加中です。

独学ではカバーしきれない部分を学びたい、空いた時間でより深い内容を学びたい方はオンラインスクールを検討してみてはいかがでしょうか。

トレースでの勉強法を学ぼう

ads-1663031_640

WEBデザインが短期間で上達した方法

Webデザインのスキルを磨こう!Webサイト模写のススメ

ぼっちでも独学でWEBデザイナーになる方法(基礎編)

前述した通り、優れたデザインをトレース(模写)することは、デザインスキルを学ぶ上で有効的な方法です。

グラフィックデザインの再現を通して、デザインツールの新たな使い方を発見したり、様々なデザインを知るきっかけになり、いくつかのパターンを独学で経験しておくことで、仕事ではスムーズに取り組めたりできるのです。

ツールでトレースでの勉強をもっと便利に!

numbers-time-watch-white

ウェブデザインの勉強に!サイトのトレースを爆速化するツール5選!

トレースがデザイン上達への一歩と分かっていても、時間もかかりそうだし、正直大変だなあと思いますよね。

ツールを駆使すれば時間短縮できます!普段の制作に役立つものもあるので、ぜひ導入してみてください。

合わせて読みたい参考本

なるほどデザイン〈目で見て楽しむ新しいデザインの本〉

%e3%82%bf%e3%82%99%e3%82%a6%e3%83%b3%e3%83%ad%e3%83%bc%e3%83%88%e3%82%99

主に新人デザイナーが、デザインをよりよくするヒントを見つけるため役立つように作られた本です。デザインを考えるプロセスがよく分かるようになっており、全ページフルカラー、目で見て学べる本です。

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

417t55ybmul

レイアウトデザインの基本書として有名です。近接・整列・反復・コントラストの基本4原則について説明されていて、エクセルなどでの資料作りにも役立ちます。デザインに関わるすべての人のための本です。

オンラインで無料キャリア相談!無理な勧誘は一切いたしません

テックキャンプ エンジニア転職は、未経験からのエンジニア・WEBデザイナー転職を実現するスクールです。
テックキャンプはオンラインでプログラミング学習が可能。「徹底したサポート」と「やりきらせる学習環境」をオンラインでも提供しています。
転職成功率はコロナ前と同水準の98.7%を維持!
キャリアに悩んだらテックキャンプの無料オンラインカウンセリングでITキャリア相談を受けてみませんか?あなただけのキャリアプランが作れます。
オンラインカウンセリングのやり方は簡単なので、ぜひご利用ください。

 HTML・CSS(コーディング)も学びたい人にオススメ

【初心者向け】WEB制作の基礎について知ろう

pexels-photo-90807

これからWebサイトの制作をしたいけど、何から勉強したらいいの?っていう人のためのガイド

まずは、HTMLやCSSなどの見ために関わるコーディング分野やWebの裏側とも言えるサーバー・データベースといったWebの仕組みを一通り理解しましょう。

【初心者向け】HTML・CSSを学ぼう

code-1557582_640

HTMLとCSSの基本をサルでもわかるようにまとめた【入門・初心者向け】

HTMLやCSSはWebでの見ための表示に必要なものです。Webは色々なものを組み合わせることで出来ていて、その基礎的なものがHTMLとCSSです。

レスポンシブでどんなデバイスにも対応できるようにしよう

responsive-1622825_640

必読!5分でわかるレスポンシブWebデザインまとめ

初心者も分かる!レスポンシブ・デザインの作り方

PCやスマートフォンなど様々なデバイスが登場している昨今、その画面サイズに対応するため、レスポンシブ対応するケースも少なくありません。レスポンシブの特徴を掴んでおきましょう。

Webフォントって知ってる?基礎知識を入れていおこう

keyboard-886463_640

Webデザイン初心者のためのWebフォント基礎知識とフォントサービス5線

Webフォントは種類も豊富で、使用することでSEOも有利になります。設定の仕方やGoogleフォントについて、知っておいて損はありません。

JavaScriptでWEBサイトに華やかな動きをつけよう

coffee-shop-1045065_640

基礎から抑える!初心者のためのJavaScript入門

動きのあるサイトって、華やかでカッコイイですよね。難しいように思えますが、JavaScriptで表現の幅が広がりますし、やはり目のひくデザインを制作できます。他と差をつけるには、必要不可欠な技術です。

【初心者向け】jQueryでJavaScriptを簡単に実装しよう

code-583073_640

jQueryってなに?超初心者向け入門講座

7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座

jQueryを使えば、手間のかかるJavaScriptも簡単に利用できます!時間や日付表示、郵便番号を利用した住所検索もjQueryでお手軽に設定できるんです。どんなことができるか覚えておくことをオススメします。

WordPressを使いこなそう

1977271657-wordpress-589121-zmn7-320x213-mm-100

WordPressのカスタマイズが勉強できる学習サイトは?

WordPressの勉強に役立つ参考サイト20選

カスタマイズ性の高いWordpress。オリジナリティを出せるので、商用ブログでもよく使用されます。プラグインで機能拡充もでき、高機能な使い方ができます。

独学では難しいイメージがありますが、オンラインサイトや参考サイトを活用するといいでしょう。

SEO・アクセス解析を知っておこう

search-engine-optimization-1359430_640

アクセス解析ツール「Googleアナリティクス」とは。導入・設置方法を知ろう

Googleアナリティクスの使い方!初心者が絶対見るべきページ5選

Search Engine Optimization」の頭文字をとって、SEOと言います。検索エンジン最適化、つまりGoogleやYahoo!などで、順位高く表示させるための対策です。

Webサイトを多くのユーザーに閲覧してもらうため、SEO対策は重要なポイントとなります。

意外と重要!SNSボタン

social-network-76532_640

SNS色々ありすぎ!各ソーシャルボタンの特徴を簡潔にまとめてみた

FacebookのOGP設定方法+参考記事6選

多くのユーザーに閲覧してもらうための施策として、情報拡散のためにSNSボタンの設置も意外と大切なポイントです。さらに、SNSに投稿した際のOGP設定も忘れてはいけません。

プログラミングについても理解しておこう

woman-typing-writing-windows

5分で理解!Web開発初心者におすすめするプログラミング言語

今、注目されているプログラミング。Webデザイナーやコーダーであっても、プログラミングまで知っておくと、開発者との連携も取りやすくなります。仕組みや言語だけでも知っておくといいでしょう。

合わせて読みたい参考本

htmlcss%e3%81%ae%e3%81%8d%e3%81%bb%e3%82%93

スラスラわかるHTML&CSSのきほん

小さなサイトを制作しながら、実践的にHTML&CSSの基本が学べます。とにかく、初心者に向けてやさしく説明をすることがテーマになっています。サンプルサイトの制作で、楽しみつつ本格的に学べる本です。

 

htmlcss%e3%83%86%e3%82%99%e3%82%b5%e3%82%99%e3%82%a4%e3%83%b3%e3%81%ae%e6%95%99%e7%a7%91%e6%9b%b8

作りながら学ぶ HTML/CSSデザインの教科書

こちらもサンプルサイトを制作しながら学ぶ、実践的な書籍です。初心者がつまづくポイントや疑問に感じるポイントを押さえられています。

また、画像データや簡単なプログラムにも説明されていて、総合的な知識も得られる本です。

まとめ

Webサイト制作に関する基本的な内容をご紹介しました。デザインだけでも学ぶべき多くのことがあり、各分野ともかなり奥深いものとなりますが、そこが魅力でもあります。

初めは万遍なく基礎を押さえ、全体像をつかむといいでしょう。自身の武器として興味のある分野を極めるのもオススメです。

専門用語も多く、理解するのに挫けそうになったり、制作が上手くいかないこともあると思います。そんな時は、勉強会に参加するなど仲間を見つけるとモチベーションを保てます。

楽しみながらステップアップしていきましょう。

IT業界未経験・知識0でもOK!テックキャンプがエンジニア転職の夢を叶えます

「エンジニアに興味があるけれど、未経験だから不安……」と、悩んでいませんか?
テックキャンプ エンジニア転職は未経験者専用の教育プログラムだから、IT業界未経験・知識0でも大丈夫!
テックキャンプの受講生は、90%以上が非IT業界出身&99%がプログラミング未経験者です。それでも転職成功率は98.7%!
その秘訣は、オフラインでもオンラインでもやりきれる徹底したサポート体制。
まずは何でも相談できる無料オンラインカウンセリングで、あなたの悩みを聞かせてください。
「未経験からのIT転職」その第一歩を踏み出しましょう!

無料カウンセリングの予約はこちら

この記事を書いた人

あなたの理想のキャリアに合わせた、テックキャンプの3つのサービス

Advertisement