Webデザイナーになりたい未経験の方、Webデザイン初心者の方から相談されることがあります。
「全くの未経験だけどWebデザイナーになりたい」
「独学でWebデザインを勉強したい」
「お金をかけない勉強方法は？」
少し話を聞くと、その勉強方法は効率悪いのでは？Webデザインを学ぶために必要な情報について勘違いしているかもしれない、と思うことがあります。
これからWebデザインを学ぼうとするのですから、何が必要か、どのようなな勉強をすればいいかがわからなくて当然です。
未経験から独学でWebデザインを勉強したい人のための、学ぶ準備とおすすめの勉強方法、参考サイトなどについてまとめてみました。
目次
パソコンのスペックやソフトにお金をかけなくてもできる
Webデザインの勉強を始める時に、最初からパソコンのスペックやソフトにお金をかけるのはおすすめできません。
「Webデザインに必要なパソコンのスペックは？」
「PhotoshopやIllustratorは必要？」
これからWebデザインの勉強を始める人に聞かれることがあります。
結論は両方とも「最初は気にしなくても大丈夫」です。
Webデザインの勉強に最低限必要な環境とツール
- インターネット環境
- パソコン(Mac)
- テキストエディタ(メモ帳・Text Editでも可)
- Webブラウザ
インターネット環境は、ここではネットで調べ物をする時に使います。本を参考に勉強する場合はインターネット環境はなくても大丈夫です。
パソコン(Mac)は必要です。最初は高スペックパソコンは必要ありません。
Windowsの場合はメモ帳、Macの場合Text EditでもHTML／CSSを書くことができます。
無料でダウンロードできるテキストエディタもあります。
Webブラウザもパソコン標準で搭載されているもの、無料でダウンロードできるものがあります。
自分のパソコンで、HTMLファイルで制作したWebデザインの確認ができます。
画像編集ソフトは無料アプリでもOK
PhotoshopやIllustratorはWebデザインに便利ですが、利用料金がかかります。
Webデザインを勉強するための画像を作るだけなら無料の画像編集アプリでも大丈夫です。
インターネット上に公開せず自分のパソコンだけで確認するなら、ネットで拾った画像を利用しても問題ありません。
とりあえずダミー画像を入れておくのもアリです。
インターネット上に公開する場合はネットで拾った画像は著作権侵害になるため、オリジナルの画像に差し替えましょう。
HTMLとCSSは全て丸暗記しなくてOK
Webデザインに欠かせないHTMLとCSSですが、受験勉強のように全て丸暗記するのはとても効率が悪いです。学習時間がかかりすぎます。
HTMLタグとCSSセレクタは種類やバージョンなどで変更があります。廃止されたタグやめったに使用しないセレクタ、新しく登場するものもあります。
一部のブラウザにしか対応していない記述もあります。
全てを丸暗記するのは現実的ではありません。
「HTML 画像を表示」「CSS 背景色」など、表現したいデザインから逆引きしたほうが早くて効率的です。
最低限必要なHTMLの基本構造タグを理解するのは必須です。
正確なスペルを覚えていなくてもコピペで対応できます。テキストエディタの中には、タグを自動補完してくれるものもあります。
それ以外でわからないタグが出てきたら、使い方や意味を調べて対応しましょう。
よく使うHTMLタグやCSSセレクタは自然に覚えます。
Webサイトの基本構造を理解しよう
Webサイトがどうやって作られているか、基本構造を理解するとWebデザインの勉強も効率的に進められます。
基本構造を理解しないと「思ったように表示できない」「表示が崩れたけど修正できない」など、思わぬ問題が起こります。
普段の業務でWebデザインしていても、表示の崩れや読み込みエラーなどはよくあります。
- WebページはHTMLでできている
- HTMLの基本の記述
- CSSとはHTMLの要素のレイアウトや装飾スタイルを記述するもの
- IDとclassの命名と記述の順番
- 画像を表示する記述方法
- 各ファイルの保存フォルダと読み込む記述
実際にHTMLを書きながら勉強する
Webデザインの勉強は、記述方法やデザイン手法を見て覚えるだけではできません。
メモ帳やText Edit、テキストエディタで実際にHTMLを書き、架空のWebサイトを作って自分のパソコンのブラウザで表示しながら勉強しましょう。
記述が間違っていれば想定したデザインどおりに表示されません。間違っている箇所を発見して修正することも勉強になります。
記述が正しければ、HTMLを書きながらどんどん覚えていけると思います。
簡単なHTMLから書いてみることをおすすめします。
1つのHTMLファイルやCSSに記述を追加していくことができます。
いきなり複雑なWebサイトを作り始めるのはおすすめしません。
上手く表示されない場合の修正も複雑で、Webデザインの勉強を挫折する原因になります。
新しい情報・古い情報の確実性をチェック
インターネットや書籍でWebデザインについて調べる場合、情報の確実性に注意しましょう。
情報の公開日が古いからといって参考にならないわけではありません。普遍的な基礎情報や長年変わらない情報など、学ぶべきことはたくさんあります。
逆に、情報が新しいからといって全ての環境で動作するとは限りません。新しい一部のブラウザでしか動かない機能もあります。
複数の情報を比較して、より確実性のある情報を学ぶことが大切です。
- 普遍的な「基礎」
- 古いけれど今も通用する情報
- 廃止されたり今は使わないほうがいい古い情報
- 新しいけれど限定された環境でしか通用しない情報
Webデザインの勉強に参考になるサイト
HTMLの基本
はじめてのHTML (全15回) – プログラミングならドットインストール
初心者向けHTML入門：書き方の基本とタグの使い方 サルワカ
CSSの基本
はじめてのCSS (全17回) – プログラミングならドットインストール
初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！ サルワカ
Webデザイン
PhotoshopVIP – フォトショップやデザインの無料素材、ニュースをお届けするブログ
デザイン関連の最新情報や写真・アイコン素材などを掲載しているサイトです。
コリス
Webデザイン関連の記事が充実しているサイトです。
おわりに
Webデザインを学ぶ方法は他にもあります。
書籍を参考にしたり、スクールに通ったりしても勉強できます。
未経験から独学でWebデザインを学びたい人が勉強方法の方向性を間違わないように、実際に相談された経験を元にまとめてみました。
できるだけ効率よく、挫折せず、そして楽しくWebデザインについて学んでほしいと思います。
