サイト名変更・お引越しのお知らせ

【初心者・入門者向け】WEBデザイン学習におすすめのサービス・サイト・本まとめ

WEBデザイン入門者・初心者向けに現役デザイナーおすすめのサービスやサイト、本をまとめました!

こんな方におすすめ
  • 学習を始めたが学習方法について悩んでいる
  • 多くの学習サイトやサービスがあるが故に悩んでしまう
  • WEBデザイナーになりたいので学習方法について知りたい

モグモグさん

悩みすぎずに、まずはこのサイトで紹介しているリソースで

手をどんどん動かして学習していきましょう!

WEBデザイナーに必要なスキルとは

まず最初に、WEBデザイナーにはどんなスキルが必要なのかを整理していきましょう。

  1. デザインの基本知識
  2. PhotoshopやIllustratorなどのデザインツールでのデザイン制作スキル
  3. UIデザインツールを使ってアプリ画面などの制作スキル
  4. HTML・CSS(JavaScript)などの基本的なコーディングスキル

WEBデザイナーになるためには、基本的にこれらの最低限のスキルを身につけておく必要があります。

モグモグさん

1つずつそれぞれのスキルに合わせたおすすめサイトや本を紹介していくよ!

デザインの基本知識

デザインの基本知識としては、WEBデザイナーの基本中の基本ともいえる、

「4つの基本原則」等のデザイン知識を理解して実際に使えるようになりましょう。

モグモグさん

このあたりを知ることで「初心者っぽいデザイン」から卒業することができるよ。

なぜこのデザインになっているのか」を考えられることが大切。

おすすめの本2冊を紹介します。

ノンデザイナーズブック

WEBデザイナーの中で知らない人はいない程有名な1冊です。

少し分厚めな本ですが、「デザイナーじゃない人でもデザインが理解できる」ように分かりやすくデザインの基本原則について説明されています。

著者が外国の方で、少しユーモアも交えながらデザインについて解説がされているため、初めてデザインの勉強をする方にはとてもおすすめの本です。

この本を読んだ後に身の回りのデザインに目を向けてみると、必ずどんなデザインにも4つの基本原則が使われていることに気付くことができます。

モグモグさん

デザイナーだけではなく、ビジネスマンやエンジニアの方などにも

おすすめだよ!

「なんかダサいなあ」というデザインから脱することができます。

なるほどデザイン

かわいらしいイラストが表紙の「なるほどデザイン」は、イラストや写真が多く使われているため、視覚的、感覚的にデザインを勉強したい人におすすめの1冊です。

こちらの本は、デザイン4つの基本原則の他にも配色やフォントなど幅広く解説されているため、一気に広範囲に勉強したい人にはぴったりです。

デザインの基本だけでなく、デザインの考え方も同時に学べることができるとても面白い本です。

本を普段あまり読まない人は「なるほどデザイン」から勉強を開始してもオッケーです!

学習のポイント

ポイント

まずは上の2つの本を読んでデザインの理解を深めましょう

その後は毎日1つでもサイトや日常から原則を見つけてメモやノートをつけることで自分のデザインでも自然と取り入れられるようになっていきます

モグモグさん

読んで終わらずに、実際に自分の頭で考えて地道に継続しよう!

デザインツールでのデザイン制作スキル

続いてはデザインツールを用いてのデザイン制作スキルについてです。

Adobe(アドビ)のPhotoshopIllustratorなどのデザインツールは、Webデザインをする人は誰でも使える必要があります。

デザインツールは、たくさん触ったり、デザインを制作したりしながら勉強するのが一番早く習得することができます。

モグモグさん

でも…こんな悩みあるあるですよね

  • 最初はそもそもどうやってツールを触ったらいいか分からない
  • どんなものを作ったらいいのか分からない
  • サイトや本が多くあるがどれから手をつけるべきかわからない

Adobe公式チュートリアル

そんな方におすすめなのが、Adobe公式から学べるチュートリアルサイトです。

公式のチュートリアルがかなり充実しているので、他のサイトに手を出さず

愚直に地道に公式のチュートリアルで学習していくのがオススメです!

重要!

とにかく手を動かす!

Photoshopチュートリアルで学習

Illustoratorチュートリアルで学習

PhotoshopやIllustratorは、様々な機能や使い方があるため、最初はかなり慣れるまで難しいですが、チュートリアルを1つずつこなしていけば、徐々に慣れつつスキルを身につけることができます

Adobe公式オンライン講座

チュートリアルの他にも、オンライン講座を無料で視聴することもできます。

動画のが学習がしやすい方はこちらもオススメです!

Photoshopオンライン講座で学習

Illustratorオンライン講座で学習

サンプルデータも無料でダウンロードできて、動画もわかりやすく解説がされているので、初心者の方でも安心して勉強をすることができます。

資格(おまけ)

モグモグさん

あくまでおまけ!

時間がある方は挑戦してみてもいいかもという程度です!

もっとデザインツールを勉強して極めていきたいという方は、

資格もあるのでこの機会にチャレンジしてみるのもいいかもしれません。

Photoshop資格をみる

Illustrator資格をみる

スキルも身につけて、資格も取得できて一石二鳥です。

学習のポイント

ポイント

まずは、上記公式のチュートリアルをコツコツ学習していきましょう。

その後、基礎はできているので自分の作りたいものを作って応用していくようにしましょう!

UIデザインツールでのアプリ画面などの制作スキル

続いてはUIデザインツールを用いてのアプリ画面制作スキルについてです。

UIとは、ユーザーインターフェイスと言って、一般的にユーザーと製品やサービスとのインターフェース全てのことを意味します。

例えば、アプリだったりサイトだったりをスマホで見たとき、画面上で見られるフォントやデザインなどの全ての情報がUIと呼ばれています。

詳細はこちらの記事も参考にしてみてください。

アプリやサイトをデザインするときには、

XDFigmaなどがよく使われており現在主流です。

それぞれのおすすめのサイトをご紹介します。

Adobe XD

こちらも先ほど紹介したPhotoshopやIllustratorと同じ企業のAdobe社の製品のため、同じように公式サイトからチュートリアルが公開されていますのでそれで学習していきましょう。

補足

公式のチュートリアルは、常に最新になっていますし機能も網羅されているので

本や他サイトよりも安心して学習できます。

XDチュートリアルで学習

モグモグさん

やはりデザインツールはたくさん触れば触るほど

スキル向上に繋がっていくので、まずはチュートリアルでツールに慣れていくことから学習していこう!

Figma

Figma(フィグマ)とはDylan FieldとEvan Wallaceが共同開発した、初のリアルタイムコラボレーションができるデザインツールです。

複数人が同じデータに同時にアクセスをすることが可能なので、UIデザインを行うときにFigmaを使っている企業も多くあります。

Figmaは、Udemy(オンラインで勉強できる)というサービスでFigmaコースというカテゴリがあるので、そこで学習していくのがオススメです!

Udemyで学習

Udemyはコースによって料金も異なるので、レビューなどを見ながら自分にあったコースを選んでみましょう。

学習のポイント

ポイント

まずは、上記のサイトでツールに慣れていきましょう。

その後、基礎はできているので自分の作りたいものを作って応用していくようにしましょう!

XDもFigmaも両方使いこなせるようになれば、どのデザイン会社でも通用できるスキルを身につけることができます。

コツコツ手を動かして学習していきましょう。

WEBサイトの基本的なコーディングスキル

最後に、HTML/CSS(JavaScript)を用いてのWEBサイトのコーディングスキルについてです。

デザインを作るだけでなく、実際にサイトに実装するためにはコーディング知識が必要となります。

補足

コーディングは専門的な知識も多いため、会社によってはデザインとコーディングで部署を分けているところもあります。

学習するメリットも大きいので学習をおすすめします!

学習する意味
  • スキルの幅が広がる(コーディングもデザイナーがやる場合も多いです)
  • コードも含めたデザインをデザイン段階でイメージできる (コーディングがしやすいデザインにできる)
  • エンジニアと会話ができる
  • 自分でサイトを作ることができる

コーディングを勉強するには、本から基礎を学ぶのがオススメです!

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

デザイン初心者の方でコーディング知識を身につけたい方へおすすめの一冊です。

活字が少ないので、読書が苦手な方でも学習しやすいです。

HTML5&CSS3デザインブック

Webサイトを制作する流れに沿って解説がされているため、実際にサイトを作成しながら進めていきたい方におすすめの一冊です。

また、レスポンシブについても記載がされているので、どんな風にレスポンシブのサイトを制作したらいいのか分からない方にもぴったりです。

学習のポイント

ポイント

まずは、上記2つの本でHTMLとCSSを理解していきましょう。

その後、実際にいくつかのサイトのクローンサイトを作成してみましょう。

そうすることで、今回紹介した4つのスキルを総合的に高めることができます。

まとめ

デザイナーに必要なスキルは大きく分けて4つ。

  1. デザインの基本知識
  2. PhotoshopやIllustratorなどのデザインツールでのデザイン制作スキル
  3. UIデザインツールを使ってアプリ画面などの制作スキル
  4. HTML・CSS(JavaScript)などの基本的なコーディングスキル

それぞれ学習の参考になるサービスやサイト、本を紹介しました!

どれもオススメなので実際に手を動かしつつ学習を進めてみてください!

モグモグさん

何より継続と自分でどんどん応用して作っていく姿勢が大切なので

楽しみつつたくさん創造していきましょう!