WEBデザインて将来性もあるって聞いたし興味ある！
まずは独学で少し勉強してみようかな〜と思っているそこのあなた！
とはいえ何から始めたらいいのかわからないしそもそも何を勉強したらいいのかと思ってはいませんか？
私も一年前はそんな状態でした…
WEBデザインを勉強して転職まで繋げた経験から、WEBデザインの勉強の初め方をまとめてみました。
今まさにWEBデザインを勉強しようと考えている準備段階のあなたへ、
参考になれば幸いです。
参考：筆者が作った制作物はこちら↓
【実物紹介】WEBデザイナー未経験転職した時のポートフォリオ何を作った？
WEBデザインの独学〜何を勉強したらいいのか順番に解説〜
初めに
ドメインって何？サーバーって何？が説明できないという方は、まずはインターネットでページが表示される仕組みを理解するところから勉強しましょう。
完全に理解できなくても、実際に制作を進めていくうちに分かってくるので、全く初めのうちは最低限なんとなく分かったかも。という程度でいいと思います。
WEBデザインの勉強ではデザインとコーディング等を学びますがどちらから始めても大丈夫です。
一口にデザイン、コーディングと言っても、初心者のうちは何を学ぶのか舞台的にイメージしづらいですよね。
それそれ解説していきます。
デザインで学ぶこと
デザインの基礎
色の使い方やデザインの４原則(近接・整列・強弱・反復)等について学びます。
初めのうちは、デザインの引き出しが少ないので、上手い人のデザインを探して真似していくのがいいです。
デザインソフト
WEBデザインをするにはデザインソフトを使います。その使い方を覚えて使用する必要があります。
以下の二つはAdobeという会社のソフトで、ほぼ必須ツールと言ってもいいものです。
とても機能的ですが、両方とも操作に慣れるまでが難しいです。
Illustrator
日常生活で見かけるチラシやパンフレット、ロゴ等の元データ作成にも使われています。
WEBデザインのデータや素材もイラストレーターで作成できます。
Photoshop
画像の加工に特化したソフトで、サイトに載せる写真を描こしたりするのに使います。写真の必要な部分だけを切り取ったり、不要な部分を消したりとても便利です。画像加工だけではなくフォトショップでもデザインを作成することが可能です。
どちらを使用してもいいと思いますが、両方使えることが望ましいです。
操作は似ているのでまずどちらかをいじって慣れていくのがいいと思います。
コーディングで学ぶこと
デザインツールでデザインしたものを、ネット上に反映するためコーディングをしていきます。
何やら難しい文字をパソコンに打ち込んで、コンピューターに指示を出すアレです。
指示を出せる言語はいくつかありますが最低限覚えるべきなのがHTMLとCSSです。
HTML
ここが見出し、ここは写真、みたいにページの骨組みを作るものです。
これだけだと文字や画像をただ並べただけのページの状態。
これが
CSS
HTMLの骨組みに、肉付けをしていく言語です。
色を付けたり装飾をすることができます。
こう！
その他学んでおいた方がいいおすすめ言語
- JavaScript(jQuery)
例えばボタンを設置して、クリックしたらメニューが表示されるみたいな感じでサイトに動きをつけることができます。 - PHP
世界中にあるサイトの3分の1がWordPressというコンテンツ管理システムで出来ています。このブログもそうです。
そのWordPressを構築している言語がPHPで、更新が頻繁なサイトはWordPressで制作することが多いです。HTMLとCSSのみで作るものはサイトというよりページというイメージですね。PHPを覚えておくと、そのWordPressのカスタマイズができる様になります。
こんなイメージ↓
| 宣伝として用意されただけのページ (静的ページ） |
企業のサイト等頻繁に更新があるもの (動的ページ） |
|
| 何でできている？ | HTML＋CSS | HTML＋CSS＋PHP |
以上が分かった上で、本や動画、ネット等のツールを活用して勉強していきますが、
独学は時間もかかるし、つまづいて挫折しやすいと思うので
まずは体験としてどんなものか知りたいとか自分にもできそうか、楽しいめそうか、を試すのに
入口として学ぶのがいいですよ！
実際に使用したWebデザイン独学おすすめ本
デザインの勉強にはこれ！初心者に限らず持っておきたい本です。
分かりやすいだけでなく、読んでいて楽しい！
illustrator、Photoshopを初めて触る超初心者さんにはこの本がおすすめ！
操作説明だけではなく、「これを作ってみよう」という感じで実践形式で載っているので
取り掛かりやすいです。
コーディングにはやはりこの本！他にも本を購入しましたが、これがダントツで分かりやすかった…
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
あわせて読みたい web系職業訓練の中身〜1日の流れを見てみよう〜
