WEBデザインで悩んでいる人に、参考になるサイトと作成手順教えます

WEBデザインをどうすればいいのか分からずに悩んでいる人いませんか?このブログでは参考になるサイトと作成手順について解説します。

【無料】初心者向け、独学でWebデザインを学ぶ方法

独学

 

Webデザインについて学びたいけど、どうやって学習すればいいかわからない。


お金をかけずにWebデザインを学びたい。

 


こんな悩みをもっていませんか?
この記事では未経験で知識のない初心者が独学で、Webデザインの知識を学ぶ方法について解説していきます。


スクールやセミナーを否定するつもりはありませんが、オンラインで学習すれば、お金をかけずに技術を身に付けることができます。


独学でWebデザインを学びたいが、どうやって学べばよいか分からないという人には、必ずや役立つ情報だと思います。

 

Webデザイナーに必要な3つのスキルとは

3チェックボックス

 

Webデザイナーとして働く為には、最低限必要なスキルがあります。
それは以下の3つのスキルです。

 

  1. HTML、CSSのスキル
  2. デザイン
  3. デザインソフト

 

それではそれぞれどうやって学んでいけばよいのか、具体的に紹介していきましょう。

 

HTML、CSSの学び方

HTMLとは、Webページを作るための最も基本的なマークアップ言語のひとつです。

 

Webページで表示されている内容は、基本的にHTMLで記述されています。
ブログなどを作成した経験のある人は、基本的なHTMLに馴染みがあるかもしれません。

 

CSSとはWebページのスタイルを指定するための言語です。
HTMLとCSS、どちらとも扱うことができなければ、Webサイトを作成することはできません。

 

HTMLは他の言語と比べると、独学でも学びやすく、比較的短時間で基礎的な知識を身につけることが可能です。
ゆえにまずは無料のWebサービスや書籍で学習してみることを推奨します。

 

Webサービスでは、ドットインストール、書籍では「スラスラわかるHTML&CSSのきほん」が初心者でもわかりやすいという評判のようです。

 

オンラインや書籍で基本的な知識を身につけたら、シンプルなWebサイトを参考に自分でコーディングを再現(模写コーディング)してみることをおススメします。

 

デザインの学び方

デザインを独学で為には、基本的な知識を身につけたうえで、優れたデザインのWebサイトを参考にデザイナーとしての目を養うことをおススメします。
まずは配置・配色などのデザインの知識を身につけましょう。

 

独学でデザイナーとなって活躍している人が「実際に役立った」といっている書籍を2冊紹介しましょう。

 

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

 

20年以上愛されている、デザインの定番書です。
デザインはデザイナーだけに必要な要素ではありません。いまやエクセルやワード、パワーポイントを使って資料を作る際にも重要となります。読みやすいデザイン、伝わるプレゼン資料、わかりやすいレイアウトを作りたい方におすすめの一冊です。

引用:「ノンデザイナーズ・デザインブック

 

なるほどデザイン

 

「デザイン=楽しい」を実感できる新しいデザイン書籍。デザインする上で必要な基礎、概念、ルール、プロセスを別のものに例えて見方を変えてみたり、図解やイラスト、写真などの豊富なビジュアルで解説しています。現場で活躍しているデザイナーがわかりやすく教えてくれる「なるほど!」と思える内容が盛りだくさんです! Chapter 1 デザインに「正解」はない ーー編集とデザイン Chapter 2 デザイナーの7つ道具ーーデザインに必要な基礎知識をいろいろなものに例えて見てみよう Chapter 3 デザインの素ーー文字と組、言葉と文章、色、写真、グラフなどについて 身近にあるわかりやすいものに例えたり図解、イラストにしたり、置き換えて見方を変えたり・・・「どうすればよくなるか」を豊富なビジュアルとともにわかりやすく紐解いた、楽しみながらデザインのあれこれがわかる本です。

引用:「なるほどデザイン

 

次に優れたデザインのWebサイトを見て、優れたアイディアやテクニックを学びます。
こちらはWebデザインをまとめたギャラリーサイトが役に立ちます。 

 

web-design-blog.hateblo.jp

 

デザインソフトの使い方を学ぶ

Webデザイナーが使用しているデザインソフトは様々あります。
その中でもPhotoshopIllustratorを使用する人が大多数です。

 

ひとつソフトの使い方を学ぶとしたら、Photoshopをおススメします。
その理由はデザインソフトとして採用している企業が多いですし、Photoshopが使えるようになれば、ひとまずはWebデザインができるからです。

 

独学で学ぶには、まずはPhotoshopチュートリアルをチェック。
高度な機能が多いPhotoshopですが、Webデザインで使用する機能は実はごくわずかです。


PhotoshopVIPとチュートリアルの2つのWebサイトで学べば、特に参考書は必要ないと思います(余計な出費はしたくはありませんしね・・)

 

無料でWebデザインが学べるWebサービス3選

3

 

最後に無料でWebデザインが学べるWebサービスを紹介しておきましょう。

 

ドットインストール

 

3分動画でマスターできるプログラミング学習サービスです。
レッスン数は425本、動画数は6,316本。

プログラマー入門向けというイメージの強いドットインストールですが、Webデザインを学びたいという人向けの動画も多数あります。
中上級向けの内容を学ぶには、有料版への切り替えが必要ですが、初心者であれば無料版で十分です。

 

PhotoshopVIP

 

多くのWebデザイナーが使用しているPhotoshop
あなたがWebデザイナーを目指しているのなら、その使用方法をマスターすることは、必須といってよいかもしれません。
サイトではPhotoshopを効率的に使いこなせるテクニックを紹介しています。

 

コリス

 

HTML、CSSJavaScriptといったコーディングのノウハウを中心に紹介しているサイトです。
初心者というよりは、既にWebデザイナーとして働いている人が表現方法やテクニックの幅を広げることに適したサイトといえます。
ほぼデイリーで記事がアップされているのもうれしいところ。

 

独学でWebデザインを学ぶ方法まとめ

まとめ

 

独学でWebデザインを学ぶ方法を紹介してきました。
学ぶべきスキルをおさらいしておきましょう。

 

  • HTML、CSSのスキル
  • デザインセンス、テクニック
  • デザインソフト(Photoshopなど)

 

順番としては、HTMLとCSSを学んだあとで、Photoshopの基本方法を学び、最後にデザインセンスを磨いていきましょう。

 

学習期間としては、長くても6か月程度としましょう。
(兼業で働きながら学ぶ場合でも、1年を超えると長すぎます)

 

独学の場合、緊張感が欠如し、だらだらと勉強しがちです。
ここまでにポートフォリオ完成させるなどの目標設定し、そこまでのロードマップを立てることが大切です。

 

Webデザインは必ずしもスクールに通って学ばなければいけないというものではありません。
無料でWebデザインが学べるサービスもありますし、書籍だって図書館で蔵書がある場合、かりてしまえばお金はかかりません。

 

それに「自分で調べる力」が身に付くというのは、独学で得られる大きなメリットの一つです。
もしWebデザイナーとしての仕事をすることになったとしても、この自分で調べて学ぶスキルというのは必ず活かされるはずです。

 

当ブログでは、Webデザインを独学で学ぶ人を応援します。
これからも役立つ記事を発信していきたいと思います。